Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

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.

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ť.


 

Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Základné HTML tagy
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
17 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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