Aby sme mohli začať pracovať s technológiou HTML a naučiť sa základné prvky tohto jazyka, potrebujeme špeciálny súbor, v ktorom budeme pracovať.

Poďme na praktické kroky a vytvorme si náš prvý súbor HTML práve teraz.

Pôjde o „mnohouholník“, ktorý naplníme obsahom, rozbalíme a experimentujeme.

Pre tých, ktorí majú radi videá:

Prvý spôsob, ako sa pozrieme na vytvorenie súboru HTML, je spôsob vytvorenia súboru v jednoduchom textovom editore.

Metóda 1. Vytvorte súbor html v programe Poznámkový blok.

Otvorte ľubovoľný textový editor, napríklad Poznámkový blok, ktorý je súčasťou operačnej miestnosti. systémy Windows... Tento program nájdete v hlavnej ponuke Štart -\u003e Všetky programy -\u003e Príslušenstvo -\u003e Poznámkový blok.

A uložíme textový súbor s príponou * .txt.

Teraz musíte zmeniť príponu tohto súboru z * .txt na * .html.

Ak nemáte zobrazenú príponu súboru, je tu poznámka:

Po vykonaní pokynov v tejto poznámke sa vedľa názvu súboru zobrazí prípona súboru.

Práve sme vytvorili náš prvý súbor HTML, ktorý už môžeme naplniť obsahom.

Podobne sa html súbor vytvára pomocou programu Notepad ++.

Používanie tejto metódy ale nie je vždy pohodlné a ako vidíte, nie je to úplne najviac rýchly spôsob na vytváranie html súborov. Existujú programy, ktoré dokážu tento problém vyriešiť oveľa rýchlejšie.

Jedným z takýchto programov je editor univerzálnych kódov Dreamweaver (o tomto programe som písal).

Metóda 2: Vytvorenie súboru HTML v aplikácii Dreamweaver Universal Code Editor.

Po načítaní programu sa zobrazí nasledujúce uvítacie okno:

Všetko, čo musíte urobiť, je vybrať súbor HTML v tomto okne v sekcii „Vytvoriť“.

Súbor sa potom úspešne vytvorí. Ďalej upozorňujeme, že program automaticky pridal nejaký kód.

Toto je povinný kód, ktorý musí byť na webovej stránke, o ktorom si ešte povieme. Dreamweaver tento kód pridáva automaticky, čo nám šetrí čas.

Teraz, aby sa tento súbor mohol zobraziť na vašom pevnom disku, musíte ho uložiť. To sa deje prostredníctvom ponuky „Súbor - Uložiť ako ...“

Upozorňujeme, že pri ukladaní náhodne neodstránite príponu html, ktorá je priradená k súboru.

Podobne môžete vytvoriť súbor HTML aj v iných programoch, len som chcel ukázať všeobecný zmysel toho, ako sa to deje.

Domáca úloha

Vytvorte súbor HTML práve teraz pomocou metódy popísanej vyššie. Je veľmi dôležité naučiť sa, ako na to práve teraz, pretože všetky ďalšie lekcie budú vychádzať z toho, že tento súbor už máte.

HTML dokument je obyčajný textový súbor s príponou .html, ktorý obsahuje HTML kód. Dokument HTML sa nazýva aj súbor HTML.

Ak chcete vytvoriť dokument HTML zo súboru vo formáte obyčajného textu (s príponou .txt), musíte vytvoriť súbor c .txt až .html

Existujú dva spôsoby, ako otvoriť súbor uložený s príponou .html na prezeranie v prehliadači:

1. Dvakrát na ňu kliknite ľavým tlačidlom myši, v takom prípade sa dokument HTML otvorí v prehliadači, ktorý je predvolene vybratý.
2. Kliknite na ňu pravým tlačidlom myši → posuňte kurzor na otvorenie pomocou ... → vyberte požadovaný prehľadávač.

Po prijatí dokumentu HTML ho prehliadač vykreslí ako webovú stránku (webová stránka sa zobrazuje v okne prehľadávača). Pozrime sa na príklad. Vytvorme dokument HTML a umiestnime do neho nasledujúci kód HTML:

Môj prvý nadpis

Môj prvý odsek

Teraz otvorme súbor HTML v prehliadači. V okne prehliadača neuvidíme samotné zobrazenie kódu HTML, pretože bude interpretované tak, aby obsah stránky zobrazoval v požadovanej podobe. Výsledok tohto kódu v okne prehliadača:

Ak chcete upraviť kód dokumentu HTML, kliknite naň RMB → posuňte kurzor na otvorenie pomocou ... → a vyberte požadovaný editor, ak požadovaný editor nie je v zozname, kliknite na položku Vybrať program ... a vyberte požadovaný editor. Niektorí redaktori (napríklad berú poznámkový blok ++) je možné zvoliť priamo v obsahové menukliknutím pravým tlačidlom myši na dokument a zhora výberom položky Upraviť pomocou programu Poznámkový blok ++ (upraviť pomocou programu Poznámkový blok ++).

Zmena prípony súboru

Windows:

1. IN otvorený editor (alebo v bežnom textovom dokumente) kliknite na súbor → vyberte uložiť ako → v spodnej časti textového poľa názov súboru: napíšte napríklad takto: mypage.html → kliknite na uložiť. A je to, dokument HTML bol vytvorený.
2. Kliknite pravým tlačidlom myši ( PKM) v textovom súbore → vyberte premenovať a zmeňte príponu z .txt na .html. Ak chcete použiť túto metódu, musíme sa ubezpečiť, že v predvolenom nastavení majú všetky súbory k dispozícii prípony, a to nasledovne: otvorte Ovládací panel → vyberte Možnosti priečinka (vo Windows 10 sa táto položka nazýva Nastavenia prieskumníka) → karta Zobraziť → posuňte sa úplne dole a zrušte začiarknutie možnosti Skryť prípony pre registrované typy súborov.

A čo keď sa namiesto stránky HTML zobrazí iba text?

Tieto problémy najčastejšie nevznikajú kvôli samotnému používateľovi, ale kvôli operačnému systému použitému v počítači. Čo s tým má operačný systém? Ide o to, že predvolene oS Windows, najmä XP a 7, skryjú príponu súboru. Tu vznikajú problémy pri vytváraní súborov a priraďovaní správneho formátu.

Vysvetlím to na príklade Windows XP a Windows 7, pretože som nepoužíval iné a neviem, čo tam je a ako.

Najprv teda zapnime zobrazenie prípony súboru.

Ak používate Windows XP:

Ak používate Windows 7:

Ak je teraz na konci názvu súboru všetko správne, pridá sa prípona súboru, napríklad: .txt, .html atď. Vďaka tomu bude navigácia vo formátovaní súboru oveľa pohodlnejšia. Prejdime k riešeniu položených otázok.

Ako vytvoriť html súbor?

Tu je všetko naozaj, nehorázne jednoduché. Existuje niekoľko možností, v závislosti od toho, aký nástroj používame.

Ak používate NotePad ++:

Najprv by som chcel poznamenať, že toto je najoptimálnejšie a pohodlná možnosť, na písanie html, css a php.

Takto môžete vytvoriť html súbor pomocou textového editora NotePad. Ak používate poznámkový blok:

Hneď poviem, že to momentálne nie je najlepšia voľba. Ale napriek tomu mi táto metóda nemôže chýbať.

Takto sme pomocou poznámkového bloku vytvorili html súbor.

Oblasť použitia jednej z možností vytvárania, otvorte súbor vo webovom prehliadači dvojitým kliknutím myši. A uvidíme, čo sme dostali.

Navyše, ak je všetko vykonané správne, mal by sa súbor otvoriť vo webovom prehliadači, nie v poznámkovom bloku.

Čo ak sa namiesto stránky HTML zobrazí text?

Ak sa z nejakého dôvodu namiesto otvorenia v prehliadači súbor otvorí v poznámkovom bloku ako text, to znamená kód, ktorý sme napísali. V takom prípade sa musíte vrátiť na začiatok článku a zakázať skrytie prípon súborov.

Môže napríklad nastať situácia, že sme kód napísali do NotePadu a uložili ho do formátu HTML, ale tvrdohlavo predstiera textový dokument... Faktom je, že ak nezrušíte začiarknutie políčka, o ktorom sme hovorili na začiatku článku, neuvidíme, že náš súbor má príponu nie (name.html), ale (name.html.txt). To znamená, že súbor je v podstate stále obyčajným textovým dokumentom, a preto predstavuje problém.

To znamená, ako ste už uhádli, že aby ste to vyriešili, musíte súbor premenovať z (file.html.txt) na (file.html).

Po tejto manipulácii by sa súbor mal otvoriť v prehliadači, a nie v textovom editore ako text.

Vitajte na stránkach blogu Start-Luck. Dnes by som vám chcel ukázať, ako používať kód. Písanie webových stránok je zaujímavá činnosť, ktorá sa mnohým môže zdať nesmierne náročná. Jednoduchú stránku je možné vytvoriť v priebehu iba 5 minút.

V tomto článku budem hovoriť o vytvorení html stránky. Túto úlohu splníme za menej ako 10 minút a potom sa budeme podrobnejšie zaoberať hlavnými značkami. Bolo by nesprávne nazývať takúto publikáciu lekciou. Je to skôr zárodok, ktorý je navrhnutý tak, aby vám ukázal jednoduchosť práce a dal vám chuť ísť ďalej, učiť sa viac, robiť lepšie veci.

Ako vytvoriť stránku

Navrhujem, aby ste vytvorili prvú stránku v poznámkovom bloku. Najjednoduchší, ktorý sa nachádza v ponuke Štart, je priečinok Standard. Zatiaľ nemusíte nič sťahovať. Skúste použiť to, čo máte.

Otvorte dokument.

Vložte tento kód do nej.

Súbor je potrebné pomenovať index.html... Končiaci „.Html“ označuje príponu súboru. Ak iba zadáte menný index, dokument sa uloží ako textový súbor a prehliadač ho neotvorí.

Dokument som uložil na plochu. Teraz ho musíte nájsť, stlačte pravé tlačidlo myši a otvorte ho pomocou ľubovoľného prehľadávača. Vyberiem Google Chrome.

Takto vyzerá stránka, ktorú som práve vytvoril. Váš sa nebude líšiť. Všetko je úplne rovnaké: s obrázkami a farebným písmom.

Teraz sa budem venovať podrobnostiam značiek, ale teraz odstráňte z názvu „ centrum „A vložte riadok obsahujúci slovo“ Farba„. Mimochodom, už som písal. Je to veľmi jednoduché, odporúčam prečítať.

Uložte dokument znova, tentokrát stačí použiť klávesovú skratku Ctrl + S a potom stránku obnoviť v prehliadači pomocou tlačidla F5

Pamätajte, že takmer každá značka sa musí otvárať a zatvárať. To znamená, že niekde musí byť lomítko. V tomto prípade to vyzerá takto: .

Vidíte, nadpis sa zmenil na červený. Rovnakým spôsobom môžete ľubovoľnej časti textu dodať požadovaný odtieň.

No, to je všetko, príklad je pripravený a mali by ste byť na seba hrdí. Zatiaľ to samozrejme nie je online, preto musí byť webová stránka umiestnená na stránke poskytnutej hostiteľom. Musíte tiež pripojiť svoju doménu, aby ostatní ľudia mohli vidieť váš výtvor.

Stránku zatiaľ vidíte iba vy. Musíte však uznať, že takáto stránka môže človeka z doby železnej iba prekvapiť. Toto je ale prvá skúsenosť, urobme ju ešte úspešnejšou pochopením značiek, ktoré sme použili. To vám pomôže naučiť sa, ako vytvárať svoje vlastné projekty bez cudzej pomoci.

Značky

S vašim dovolením prejdem na NotePad ++. Oproti bežnému notebooku má množstvo výhod. Práve teraz bude zvýraznenie značiek veľmi užitočné, aby vám ukázalo prvky, o ktorých budem hovoriť. Všeobecne platí, že ak sa chystáte študovať html, potom ho vrelo odporúčam nainštalovať bezplatný program.

Nie je jediný a môžem vám ponúknuť niekoľko ďalších, ak má niekto záujem o alternatívy. Prejdeme k teoretickej časti.

Hlavný

Stránka sa začína a končí štítkami ... Ukazujú prehľadávaču, že ide o webový dokument vytvorený používateľom html pomoc.

Ďalšia prichádza alebo smer. Obsahuje najviac dôležitá informácia o stránke, v našom prípade -. Ak ste v kóde zatiaľ nenašli frázu „Moja prvá stránka“, venujte pozornosť samotnej karte nad vyhľadávacím riadkom.

Menovite štítky sú zodpovední za začiatok a koniec hlavných informácií o stránke.

Označiť

označuje, že fráza je nadpis. Predvolene je o niečo väčší ako hlavný text a je zvýraznený tučným písmom. Keby sme teraz ty a ja nepísali iba v html, ale vytvárali by sme aj súbor CSS, ktorým sa náš súbor ozýval, mohli by sme bez písania ovládať veľkosť, písmo a dokonca aj farbu všetkých hlavičiek na stránke. štýl písma ako sme to urobili v príklade. Aj keď je to tiež trochu skoro.

Mimochodom, názvy a H1 majú svoj účinok priradením vašej stránky k výsledkom vyhľadávania. Musíte s nimi zaobchádzať veľmi pozorne a nepísať dovnútra, čo presne. Súvisia s. Okrem h1 existujú aj h2, h3, h4.

Rovnaký riadok obsahuje otvor a záver

... Vďaka tomuto prvku môžete zarovnať text do stredu. Ak je táto značka odstránená, text bude zarovnaný doprava.

Je jednou z mála jednotlivých značiek. To znamená, že to funguje samo. Vďaka tomu preskakujete prvky z jedného riadku na druhý. Jednoducho povedané, odsadenie. Napísali sme to raz, čo znamená, že sme sa raz, dvakrát posunuli dole, ako môj, a odsadenie sa ukázalo byť trochu väčšie.

Obrázok

Ďalej nasleduje značka obr , teda obrázok, obrázok. Štvorcová zátvorka je otvorená, zapadajú do nej všetky základné informácie o obrázku, až potom je zatvorená. Je potrebné poznamenať, že obr Je značka a všetky ďalšie prvky kódu, ktoré sa do nej zmestia, sú jej atribúty.

Prvá vec je alt , teda popis. To je tiež potrebné na optimalizáciu. Niekedy sa pridáva a titul ... Keď umiestnite kurzor myši na obrázok myšou, vedľa kurzora sa zobrazí popis, keď je stránka už otvorená v prehliadači.

Bolo možné nahrať obrázok do priečinka webu a napísať k nemu cestu, ale išiel som ľahšou cestou. Našiel som obrázok na Pixabay, otvoril som ho v novom okne a vložil odkaz.

V značke src cesta k obrázku je napísaná. Je to on, kto prehľadávaču povie, čo má posunúť ďalej, aby našiel požadovaný obrázok, a ktorým smerom sa má pozerať - vy sami napíšete.

Formátovanie textu

je zodpovedný za to, že dá časti textu nejaký špeciálny štýl, napríklad inú farbu, ako je to v našom prípade. style \u003d "color: red" označuje, že farba bude červená. Ak chcete žltú farbu, napíšte žltú, zeleno-zelenú farbu. Môžete použiť farebné kódy z Photoshopu.

pomáha zvýrazniť text.

---

nakreslí vodorovnú čiaru. Je jediný a používa sa iba v uzavretej forme. Ak píšete

---

niekoľkokrát získate pri otvorení stránky v prehliadači presne rovnaký počet vodorovných pruhov.

Odkazy

oznámi prehliadaču, že odkaz bude ďalší. Chcete čitateľa presmerovať na inú adresu. Táto značka má povinný atribút href \u003d "adresa" ... Úvodzovky obsahujú cestu, kam by mal prehliadač zaviesť návštevníka stránky. Po zaregistrovaní tejto značky sa vloží popis, slovo alebo niekoľko, kliknutím na ktoré sa čítačka prenesie ďalej. Po splnení týchto podmienok môžete vložiť druhú zatváraciu značku .

Po napísaní hlavnej časti stránky zavriete značku telo keďže telo je úplné. A naznačte, že pre dnešok prestanete používať html .

Ak sa chcete dozvedieť viac informácií o značkách html a naučiť sa vkladať nielen obrázky, ale aj videá, vytvárať tlačidlá, rôzne formuláre, zoznamy, odstavce, potom vám môžem ponúknuť bezplatný kurz od Evgenyho Popova “ Základy HTML „. Iba 33 lekcií vám pomôže dostať sa na vyššiu úroveň.

Chcel by som vám tiež odporučiť videokurz, ktorý vám povie, ako sú stránky tvorené. Celý proces je znázornený na skutočných príkladoch, čo je obzvlášť dobré. Kurz je určený pre začiatočníkov, ktorí ešte neovládajú ani HTML, a pre tých, ktorí už dobre ovládajú HTML aj CSS, napriek tomu však nie sú v oblasti kódovania schopní. Podrobnejšie informácie získate kliknutím na odkaz: www.srs.myrusakov.ru/makeup

Okrem toho odniesť Bezplatná kniha o budovaní webových stránok ! Táto kniha je určená pre začiatočníkov a práve tu sa vytvára stránka OT a DO. To znamená, že je pripravený dizajn, potom sú vytvorené stránky, je napísaná softvérová časť a potom je stránka umiestnená na internete. Autor všetko starostlivo komentuje a kniha obsahuje množstvo snímok obrazovky a ilustrácií. Zvláštnosťou knihy je navyše to, že sa nevytvára abstraktná stránka, ale veľmi reálna stránka, ktorá existuje na internete.

Dnes si toho urobil veľa, pretože prvý krok je najťažší.

Prihláste sa na odber noviniek a skupina VKontakte a dozviete sa viac: ako a prečo potrebujete webový engine, čo je to blokové rozloženie a modulárna mriežka, ako správne písať webové stránky a oveľa viac.

Až nabudúce a veľa šťastia!