Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
discount week 80

1. diel - Úvod do HTML a váš prvý web

Vitajte v prvej lekcii on-line kurzu o tvorbe jednoduchých webových stránok. Jazyk HTML je základom pre tvorbu webov. Sám o sebe je veľmi jednoduchý a všetky webové stránky ho využívajú. Zložitejšie weby HTML miešajú s niekoľkými ďalšími jazykmi, niektoré z nich si v seriáli tiež ukážeme. Prejdeme úplné základy HTML a vytvoríme svojej jednoduchej prvej stránky, ktoré umiestnime na internet.

Editor

K písania HTML kódu nebudeme používať poznámkový blok, pretože mu chýba mnoho funkcií. Medzi ne patrí najmä prehľadné zvýrazňovanie kódu alebo podpora kódovania češtiny a koncov riadok. Stiahnite si teda nejaký múdrejší editor. Na začiatku si vystačíme s českým editorom PSPad, ak ho nemáte, stiahnite si ho a nainštalujte. Pre vážnejšie projekty je potreba tzv. IDE, čo je pokročilejšie editor, ktorý navyše aj napovedá tagy, kontroluje čo píšete a podobne. Veľmi odporúčam IDE od JetBrains, v ktorých programujeme ITnetwork. Pre HTML sa hodia webstore alebo PhpStorm, ak plánujete neskôr pracovať aj v PHP.

Spustite si PSPad a v menu hore vyberme vo časti Formát hodnotu UTF-8.

Nastavenie UTF-8 v PSPadu

Tým sme nastavili spôsob kódovania (najmä) českých znakov. Kódovanie UTF-8 sa využíva u všetkých správne napísaných webov. Windows bohužiaľ UTF ako predvolené kódovanie nepoužívajú, z toho dôvodu nie je predvolený ani tu v PSPadu. Je veľmi dôležité, aby ste svoje stránky editovali iba v editoroch čo UTF-8 podporujú, inak dôjde k rozbitiu diakritiky. Napríklad je zlý nápad vytvoriť stránky v PSPadu a potom do nich niečo dopísať v Poznámkový blok.

Prvá webová stránka

HTML stránku je veľmi jednoduché vytvoriť, je to vlastne len textový dokument. Vytvorme nový súbor (Menu Súbor -> Nový) a ako typ súboru vyberieme z ponuky HTML.

HTML editor

Tým sme založili novú HTML stránku. PSPad nám už nejaký kód predpripravili, ten ale nebudeme používať, preto všetok text zmažte a napíšeme si ho znova.

HTML sa skladá zo značiek (tzv. Tagov). Samo o sebe umožňuje hlavne dodávať prvkom (ďalej elementom) na stránke určitý význam a to je aj jeho hlavná úloha. Predtým sa používal aj na grafické štýlovanie stránok, ale pretože vzniknuté weby boli neprehľadné, bol obmedzený len na webový obsah.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Tagy slúži na to, aby sme nimi mohli obaľovať text a tak mu dávať určitý význam (napr. Toto je dôležitý text, toto nadpis, zoznam, tabuľka). Tagy sa píšu do špicatých zátvoriek. Veľmi špecifickým tagom je odkaz, ktorý umožňuje prechádzať medzi jednotlivými stránkami a tak je previazať. Od toho skratka HTML (Hyper Text Mark Up Language = odkazové a značkovací jazyk).

HTML súbor má určitú štruktúru. Na začiatok súboru vložíme tzv. Doctype:

<!DOCTYPE html>

Tým definujeme, že textový súbor je HTML dokumentom. Výkričníka si zatiaľ nevšímajte, proste sa tam píše :) Ďalej definujeme samotný HTML dokument. Ten je rozdelený na 2 časti - hlavičku a telo. Hlavička obsahuje informácie pre prehliadač a vyhľadávače, v tele nájdeme samotný obsah webovej stránky.

Upravme náš súbor, aby vyzeral takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
    </head>

    <body>
    </body>
</html>

Na ďalšom riadku otvárame tag html, tým oznamujeme, tu odtiaľ bude začínať naše HTML stránka.

Nasleduje hlavička, ktorá je vložená v tagu

U začiatku HTML si všimnite atribútu lang, ktorý definuje jazyk stránky. Atribút je nejaká rozširujúce informácie k určitému HTML elementu. Tu hovorí, že HTML stránka je v češtine. Hodnoty atribútov sa píšu do úvodzoviek, k atribútom sa ešte vrátime.

Presuňme sa do hlavičky a medzi jej začiatok a koniec vložme informáciu o kódovaní. Robí sa to tagom meta s nasledujúcou syntaxou (zápisom):

<meta charset="utf-8" />

Všimnite si lomítka na konci tagu, takto sa ukončujú nepárové tagy, teda tie, ktoré nemajú 2 časti (začiatok a koniec), ale píšu sa iba raz. Medzi ne tag meta patrí. Pri každom tagu si počas seriálu povieme, či je párový alebo nepárový. Kódovanie sme nastavili na UTF-8.

Ako ďalší riadok pridajme do hlavičky titulok. Jedná sa o párový tag s názvom title, dovnútra tagu napíšeme text titulku.

<title>Moje první webová stránka</title>

Celý váš HTML dokument by mal teraz vyzerať takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>

    <body>
    </body>
</html>

Hlavičku už máme zatiaľ vyplnenú, teraz sa presuňme do tela (body), čo je tá časť stránky, ktorá je v prehliadači vidieť.

Do tela si vložíme dva odseky textu. Využijeme na to párový tag

(ako paragraph = odsek). V HTML je všetko ako element, aj text tu nemôžeme nechať len tak plávať, ale musí byť obalený na jednotlivé odseky.

<p>Toto je moje první webová stránka, zatím na ní nic není, ale i tak jsem s ní spokojen</p>
<p>Toto je druhý odstavec</p>

Vytvorte si na disku nejakú zložku (napr. Prvá stránka), do ktorej súbor teraz uložte. Pri ukladaní ho nazvite index.html

Keď súbor teraz otvoríte vo webovom prehliadači, mali by ste vidieť váš prvý web. Bude vyzerať ako obrázok nižšie :) Ak tak nevyzerá, nezúfajte a stiahnite si súbor s hotovým webom na konci článku. Môžete sa tak pozrieť, kde ste urobili chybu.

Moje první webová stránka
index.html

Poznámka: HTML stránku možno definovať aj inak a určite sa stretnete s odlišnými definíciami. Táto je však najstručnejšie a najmodernejšie. Náhľad stránky dokáže zobraziť aj PSPad, ten ale používa zastarané jadro IE a moderné tagy v ňom nefungujú, preto ho nepoužívajte.

V budúcej lekcii, Základné HTML tagy , si uvedieme ďalšie tagy, ktoré budete pre váš web potrebovať.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 3150x (299 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Všetky články v sekcii
Webové stránky krok za krokom
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity

 

 

Komentáre

Avatar
Lubomír Štícha:4. augusta 20:50

Uvítal bych když by to vysvětlení bylo podrobnější, například kam přesně vložit tuto část :
<p>Toto je moje první webová stránka, zatím na ní nic není, ale i tak jsem s ní spokojen</p>
<p>Toto je druhý odstavec</p>
Tak aby to bylo i zobrazeno, myslím že tam mám chybu kterou jsem úplně neodhalil vzhledem k tomu že se mi zobrazují otazníky v černém kosočtverci jinak postup vysvětlení ok

 
Odpovedať
4. augusta 20:50
Avatar
Katka Mlázovská:16. augusta 8:57

Škoda, že článek nezmiňuje VisualStudioCode - je TOP!

Odpovedať
16. augusta 8:57
easy choices => hard life; hard choices => easy life;
Avatar
Jakub Žitný:17. augusta 14:32

Ahoj, stáhnul jsem PSPad a po dopsání a zobrazení se mi vyskytl problém se znaky (všechna písmena s diakritikou se zobrazovala jako otazníky). Google mi poradil přepsat tag <meta charset="iso-8859-2" /> . Třeba to někomu tady taky píchne :)

 
Odpovedať
17. augusta 14:32
Avatar
Tano7
Člen
Avatar
Odpovedá na Katka Mlázovská
Tano7:9. septembra 23:22

Jo, Visual Studio Code je špičkové, programuji poslední dobou jen v něm.
Tam je UTF-8 defaultně nastaveno na On. Pro kontrolu: "Soubor/Předvol­by/Nastavení/ " vyhledat UTF-8, Nastavení na "auto".

Odpovedať
9. septembra 23:22
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
t.teichmanova:12. októbra 10:52

Dobrý den,
při přidání do hlavičky <meta charset="utf-8" /> pro české znaky jako jsou háčky a čárky
je lepší napsat <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">.
První způsob mi prostě nefunguje. Píšou se mi místo diakritiky otazníky.

Zdraví T.Teichmanová

 
Odpovedať
12. októbra 10:52
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Niky Vítková
Tým ITnetwork
Avatar
Odpovedá na t.teichmanova
Niky Vítková:12. októbra 12:00

Zdravím! Pokud používáte Visual Studio Code, tak si zkontrolujte, že máte správně nastavené to, co se píše ve 2.odstavci u podnadpisu První webová stránka. Pokud používáte jiný editor, tak bude mít obdobné nastavení. Kodování souboru musí být UTF-8, aby charset fungoval.

 
Odpovedať
12. októbra 12:00
Avatar
Irena Milatová:13. októbra 7:19

Dobrý den, jakým způsobem si můžu otevřít vlastní soubor ve webovém prohlížeči, abych viděla můj první web a zároveň si ověřila, že mám vše správně?
Děkuji

 
Odpovedať
13. októbra 7:19
Avatar
Tano7
Člen
Avatar
Odpovedá na t.teichmanova
Tano7:18. októbra 6:34

Funguje tohle:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
</head>

Nejjistější a nejrychlejší je stáhnout si český font s více řezy, nahrát ho k sobě na server do adresáře např. css nastavit na něj odkaz v .HTML v <header> např.:

<link rel="stylesheet" href="css/brygada.css" type="text/css">

Fonty ke stažení s návodem zde: "Fonty ":https://google-webfonts-helper.herokuapp.com/…brygada-1918?…
Zatrhnout jen latin-ext to jsou české písma.

Odpovedať
18. októbra 6:34
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
Alex
Redaktor
Avatar
Odpovedá na Irena Milatová
Alex:18. októbra 19:47

Doporučuji Validátor od W3 .

 
Odpovedať
18. októbra 19:47
Avatar
Jana Šoffrová:Včera 17:28

Dobrý den, prosím je něco jako visual studio ale jako mobilní app.?Děkuju moc🌷

 
Odpovedať
Včera 17:28
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!