Lekce 1 - Úvod do HTML a váš první web

Vítejte v první lekci kurzu o tvorbě webových stránek. Naučíme se zde používat jazyk HTML, který je základem pro tvorbu webů. Sám o sobě je velmi jednoduchý a všechny webové stránky ho využívají. Složitější weby HTML míchají s několika dalšími jazyky, např. s CSS, které si v kurzu také uvedeme. Projdeme zde úplné základy HTML a CSS a vytvoříme své první webové stránky, které také nahrajeme na internet. Budou vypadat takto:

Minimální požadavky kurzu

Na tento kurz nepotřebujete žádné speciální znalosti, stačí běžná práce s počítačem

Příprava nástrojů

Začněme přípravou nástrojů.

Instalace Visual Studio Code

K psaní HTML kódu nebudeme používat editory typu Poznámkový blok, jelikož jim chybí mnoho funkcí. Mezi ně patří zejména přehledné zvýrazňování kódu nebo podpora kódování češtiny a konců řádek. Stáhněme si tedy nějaký chytřejší editor. Skvělým pomocníkem, ale také nástrojem pro vývoj složitějších projektů, je Visual Studio Code. Je zadarmo a funguje na všech platformách. Tento editor si nyní stáhneme a nainstalujeme.

Pokročilejší uživatelé mohou použít placená profesionální IDE jako např. WebStorm nebo PhpStorm, pokud plánujete později pracovat i v PHP.

Instalace Dropboxu

Kromě editoru potřebujeme nějaký nástroj, který bude zálohovat a verzovat naši práci. Nemůžeme se spolehnout na to, že stránku prostě budeme ukládat, protože jsme lidé a ne stroje. Lidé dělají chyby a když přijdete o několikadenní nebo dokonce několikatýdenní práci, může to zabolet. Je dobré naučit se na toto myslet hned od začátku. Velmi doporučuji program Dropbox, který je extrémně jednoduchý a sám vaše soubory verzuje (tedy zachovává změny v čase a je možné se vrátit ke starším verzím projektu) a zároveň synchronizuje s webovým úložištěm. I kdybyste si projekt omylem smazali, přepsali, ukradli vám notebook nebo vám zkolaboval pevný disk, vaše data zůstanou v bezpečí. Dropbox také umožňuje sdílet jeden projekt mezi více vývojáři. Více o Dropboxu viz tento článek, který obsahuje zároveň pozvánku do Dropboxu s 0,5 GB prostoru navíc.

Jako další verzovací nástroj se hojně používá GIT, jeho nastavení ale vydalo na samostatný kurz a Dropbox zatím pro naše účely bohatě postačuje.

Jazyk HTML

HTML je tzv. značkovací jazyk a skládá se ze značek, tzv. tagů. Tagy slouží k tomu, abychom jimi mohli obalovat text, a tak mu dávat určitý význam (např. "toto je důležitý text", "toto nadpis", "seznam", "tabulka"). Pro tento účel slouží obvykle otevírající a ukončovací/uza­vírací tagy, kterými ohraničíme danou oblast a přidělíme jí tak význam. Těmto tagům se potom říká párové a za moment si je ukážeme.

HTML není programovací jazyk, protože neumožňuje provádět žádné logické operace, slouží pouze k sestavování dokumentů. Programovací jazyky pak často HTML generují nebo upravují, což si ukážeme v navazujících kurzech. Dříve se HTML používalo i na designování stránek, ale protože vzniklý kód byl pak nepřehledný, oddělil se design do samostatného souboru a v HTML řešíme pouze obsah stránky.

Tagy se píší do špičatých závorek, např. <title>, což, jak dále zjistíme, označuje titulek stránky. Pokud nevíte, kde se na české klávesnici tyto závorky píší, je to pomocí Pravého Alt a následujících kláves:

Velmi specifickým tagem je odkaz, který umožňuje procházet mezi jednotlivými stránkami, a tak je provázat. Od toho zkratka HTML (HyperText MarkUp Language = odkazovací a značkovací jazyk).

Tag vs. element

V HTML se budeme setkávat také s pojmem element, čímž se myslí prvek, který na stránku pomocí tagů vkládáme. Tagy jsou tedy textové značky, pomocí kterých definujeme elementy. Např. pomocí tagů <title> a </title> definujeme element <title>. Pomůckou může být, že tag vždy referuje na kód, zatímco element na výsledný prvek ve stránce jako v dokumentu.

Naše první webová stránka

HTML stránku je velmi jednoduché vytvořit, je to vlastně jen textový dokument. Soubory s HTML kódem mají obvykle příponu .html nebo někdy i jen .htm. Úvodní soubor webové stránky je zvykem pojmenovávat index.html. Právě tento soubor bude potom internetový server hledat jako první, když naše stránky nahrajeme na internet a někdo na ně vstoupí.

Pojďme si tento soubor nyní vytvořit a v něm jednoduchou stránku s úvodním textem.

Vytvoření HTML souboru

Spusťme si VS Code a klikněme v horním menu na Soubor -> Nový soubor:

Do pole pro název souboru zadáme index.html a potvrdíme Enter:

Je velmi důležité dodržet přesné názvy souborů, protože při nahrání na linuxový server může tento server rozlišovat velká a malá písmena. Všechna písmena v názvu souboru jsou proto malá.

Ve složce Dropboxu si vytvoříme podsložku, např. prvni_web/. Do ní poté soubor ve VS Code uložíme pomocí menu Soubor -> Uložit nebo pomocí klávesové zkratky Ctrl + S. Nyní máme skutečně HTML soubor, se kterým můžeme ve VS Code dál pracovat.

Pokud se nechcete zdržovat s neustálým ukládáním nebo máte strach, že byste na to zapomínali, zaškrtněte si v Menu -> Soubor -> Automatické ukládání.

V některých editorech je potřeba nastavit způsob kódování (nejen) českých znaků, k čemuž v dnešní době slouží moderní univerzální kódování UTF-8. Visual Studio Code bere UTF-8 jako výchozí, a proto se s nastavováním nemusíme trápit. Pokud se však chcete ujistit, že opravdu používáte UTF-8, na dolní liště byste kromě informace o tom, kde se nacházíte v kódu nebo jaký jazyk používáte, měli vidět právě UTF-8. Je velmi důležité, abyste své stránky editovali pouze v editorech, co UTF-8 podporují, jinak dojde k rozbití diakritiky. Například je špatný nápad vytvořit stránky ve VS Code a poté do nich něco dopsat v Poznámkovém bloku.

Struktura HTML stránky

Může být překvapením, že HTML stránka obsahuje kromě obsahu pro uživatele také další informace pro prohlížeč a vyhledávače. Proto má určitou strukturu, která tyto informace odděluje od našeho obsahu.

<!DOCTYPE>

Na začátek souboru vložíme tzv. DOCTYPE. Přidáme řádek:

<!DOCTYPE html>

Tím definujeme, že textový soubor je HTML dokumentem. Vykřičníku si nevšímejte, prostě se tam píše

Hlavička <head> a tělo <body>

Dále definujeme samotný HTML dokument. Ten je rozdělen na 2 části:

• Hlavičku - Ta obsahuje informace pro prohlížeč a vyhledávače.
• Tělo - Zde nalezneme samotný obsah webové stránky.

Vložme nyní hlavičku a tělo do našeho dokumentu. Hlavičku si necháme zatím prázdnou, do těla vložíme text, který na své stránce chceme mít. Bude to vypadat takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head></head>
    <body>Vítejte na mé stránce!</body>
</html>

Prvně otevíráme tag <html>. Tím sdělujeme, že odtud bude začínat naše HTML stránka. Následuje hlavička, která je vložena mezi tagy <head> a </head> a dále tělo mezi tagy <body> a </body>. Nakonec ukončíme i samotnou HTML stránku pomocí </html>.

Párové tagy

Všimněte si, že konec hlavičky </head> se od začátku hlavičky <head> liší lomítkem /. Takto se píší tzv. párové tagy. Párové proto, že jsou dva (začátek a konec) a mezi nimi je vložen jejich obsah, zde konkrétně za moment vložíme obsah hlavičky. Stejně to máme i s tělem (tag <body>), kde definujeme jeho začátek a konec s lomítkem a celá HTML stránka je pak uzavřena v <html> a </html>.

Ukončovací lomítko píšeme vždy po první lomené závorce, ne na konci. Častá chyba začátečníků je psát chybně např. <body/> namísto </body>.

Atributy tagů

Některé tagy vyžadují zadat také atributy, což jsou doplňující parametry. Vkládáme je do otevírajícího tagu a jejich hodnotu píšeme do uvozovek "" za znak =. U tagu <html> si všimněte atributu lang="cs-cz", který definuje jazyk stránky. Zde říká, že HTML stránka je v češtině. Pokud bychom chtěli specifikovat, že se jedná o slovenštinu, hodnota by byla sk. K atributům se ještě vrátíme.

Odsazování

Když vkládáme jeden element do druhého, odsadíme řádek pomocí klávesy Tab nebo 4 mezer. Odsazování nemá na funkčnost žádný vliv, ale pomáhá nám jasně vidět, že je <head> a <body> zleva odskočené a tudíž patří do výše otevřeného <html> elementu.

Obsah hlavičky

Přesuňme se do hlavičky, kam nyní přidáme ještě několik informací.

Kódování

Mezi <head> a </head> vložme informaci o kódování. Dělá se to tagem <meta> (metadata) s následujícím atributem:

...

    <head>
        <meta charset="utf-8" />
    </head>
...

Prohlížeči jsme tímto sdělili, že je stránka kódována v UTF-8, bude tak vědět, jak zobrazit speciální znaky jako např. č. Zde je nutné dodat, že toto je pouze informace pro prohlížeč a je nutné stránku v UTF-8 opravdu uložit (což za nás řeší VS Code). Hlavičku jsme také roztáhli na více řádek, protože do ní budeme ještě přidávat elementy. Opět si všimněte dalšího odsazení elementu <meta ...> zleva.

Nepárové tagy

Všimněme si i lomítka na konci tagu <meta charset="utf-8" />. Takto se mohou ukončovat nepárové tagy. To jsou ty, které nemají dvě části (začátek a konec), ale píší se pouze jednou. Mezi ně právě tag <meta ... > patří. U každého tagu si během kurzu řekneme, jestli je párový nebo nepárový.

Uzavírání nepárových tagů lomítkem na konci není povinné a zda jej psát je otázka preferencí. Výhody jsou, že je na první pohled vidět, že tag nemá nikde dále v kódu uzavírací značku a také, že je dokument kompatibilní s XML, kde se všechny značky musí uzavírat. Pokud vám tato praktika nesedí, lze psát jen např. <meta charset="utf-8">. Párové tagy je samozřejmě nutné uzavírat vždy, jinak by nebylo poznat, kde končí. V kurzu budeme uzavírat i nepárové tagy, abychom se vždy zamysleli nad uzavíráním tagů.

Titulek <title>

Jako další řádek přidejme do hlavičky titulek. Jedná se o párový tag s názvem <title>, dovnitř tagu napíšeme text titulku:

...

    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>
...

Otevření stránky v prohlížeči

Celkový kód naší stránky nyní vypadá takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>
    <body>Vítejte na mé stránce!</body>
</html>

Když soubor nyní otevřeme ve webovém prohlížeči, uvidíme náš první web. Bude vypadat jako obrázek níže Všimněte si i našeho titulku v textu záložky:

PRO tip: Napsáním vykřičníku na samostatný řádek a stisknutím Enter nám VS Code HTML strukturu samo vygeneruje. To nám určitě ušetří spoustu času s vytvářením nových stránek. Tato struktura se ovšem může lišit s každou verzí VS Code, může mít různé věci navíc a může v ní být potřeba přepsat atribut "lang" na "cs", aby byl obsah vyhledávači chápán jako český.

HTML stránku lze definovat i jinak a jistě se setkáte s odlišnými definicemi. Ta uvedená v dnešní lekci je však nejstručnější a nejmodernější. Pokud do stránky neuvedete hlavičku nebo např. element <body>, nebude validní a nemusí se ve všech prohlížečích vykreslit správně.

V příští lekci, Základní HTML tagy, si uvedeme základní HTML tagy, které budete pro váš web potřebovat.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.