HTML 101/Lekce 2

2. Základní elementy

V předchozí lekci jsme probrali několik základních konceptů - tagy, elementy, atributy a syntaxi. V této lekci je uplatníme v praxi - ukážeme si základní strukturu stránky a nějaké elementy, které budete používat snad na každé stránce. K jejímu konci již budete rozumět takovému kódu:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Základní web</title>
    </head>
    <body>
        <p>Řádek 1.<br>Řádek 2.</p>
    </body>
</html>

Založení HTML souboru

Nejdřív ale bude potřeba založit si soubor pro HTML určený - obyčejný soubor s příponou .txt stačit nebude.

HTML se zapisuje do souborů s příponou .htm nebo .html. Můžet si vybrat, jakou chcete - není mezi nimi žádný praktický rozdíl. Současným standardem jsou soubory .html.

Postup ve Visual Studio Code

1. Klikněte na položku "Soubor" ("File" v angličtině) v horním panelu
2. V dropdownu klikněte na položku "Nový Soubor..." ("New File...")
3. Uprostřed horní části obrazovky se objeví textové pole. Zadejte sem název nového souboru i s koncovkou a stiskněte klávesu ENTER.
4. Objeví se okno průzkumníka souborů. Najděte pro svůj nový soubor lokaci a uložte ho.
5. Hotovo! Můžete začít...

Deklarace <!DOCTYPE>

Na začátku každého HTML souboru se musí nacházet deklarace <!DOCTYPE>. Nejde o HTML tag - jde o instrukci, která prohlížeči říká, že má soubor HTML interpretovat jako soubor HTML. Je povinný a v každém souboru by se měl použít pouze jednou.

Za !DOCTYPE se musí specifikovat verze HTML, kterou soubor používá. V HTML5 stačí jednoduše napsat html, jak lze vidět v příkladě níže.

<!DOCTYPE html>

Jen tak pro zajímavost - v předchozích verzích HTML musela deklarace odkazovat na DTD (Definition Type Document) jazyka.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dokument <html>

Prvním elementem jakéhokoliv HTML souboru je obvykle párový tag <html>. Definuje samotný HTML dokument, a tak jde o rodičovský element všech elementů na stránce. Stejně jako <!DOCTYPE> je povinný a v každém souboru se může nacházet pouze.jednou.

<!DOCTYPE html>
<html>
    Obsah webové stránky
</html>

<html> by měl být správně zapisován s atributem 'lang', jenž prohlížečům a vyhledávačům poskytuje informaci o jazyku stránky. Hodnotou by měl být jazykový kód ze specifikace ISO-639-1. Kód pro češtinu je "cs", kód pro angličtinu zase "en".Tento atribut není sice povinný, ale jeho zapsání zlepšuje pozici stránky ve vyhledávacích výsledcích a pomáhá čtečkám obrazovek i překladačům.

<html lang="cs">
    Obsah české webové stránky
</html>

Hlavička <head>

<head> je párový tag a potomek <html>. Definuje jednu ze dvou hlavních sekcí každého HTML dokumentu - hlavičku stránky, která se sice uživatelům nezobrazuje, ale prohlížečům poskytuje cenné informace (tzv. metadata).

<html lang="cs">
    <head>
        Metadata
    </head>
</html>

V tomto kurzu se tímto elementem příliš zabývat nebudeme, protože jde o téma spíše pro pokročilejší kurzy.

Název stránky <title>

<title> je párový tag a potomek <head>. Specifikuje název stránky (jenž je nachází mezi počátečním a koncovým tagem) a měl by se nacházet v každém HTML dokumentu.

<head>
    <title>Název stránky</title>
</head>

Tělo <body>

<body> je párový tag definující tělo dokumentu, další hlavní sekci každého HTML dokumentu. Jde o potomka <html> a obsahuje veškerý obsah, který se uživatelovi zobrazí.

Měl by v kódu následovat po <head> a v jednom souboru by se neměl objevit více než jednou.

<html>
    <head>
        Metadata
    </head>
    <body>
        Obsah stránky
    </body>
</html>

Odstavec

Odstavce se vytváří s párovým tagem . Používá se k zobrazování textu (jenž by měl být zapsán mezi počátečním a koncovým tagem). Jde o potomka <body>.

<body>
    <p>Lorem ipsum, dolor sit amet. Never gonna give you up, never gonna let you down.</p>
</body>

Nový řádek

Dalším důležitým elementem je nepárový tag  , používaný k vytváření nových řádků. Často se používá v elementu , ale lze ho použít i mimo něj (např. na rozmístění řádkových elementů jako <img>; viz lekce 4).

<body>
    <p>
        Řádek 1<br>
        Řádek 2
    </p>
</body>

Komentáře

Posledním probraným elementem v této lekci budou komentáře. Komentáře a jejich obsah jsou prohlížeči ignorovány, což je činí užitečnými k popisu různých částí kódu a psaní poznámek. Uživatelům nejsou zobrazovány.

Obsah komentářů se píše mezi .

<body>
    <!--Komentář. Uživatelům se nezobrazí.-->
    <p>Odstavec. Uživatelům se zobrazí.</p>
</body>

Základní dokument

Na začátku této lekce byl uveden tento kód:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Základní web</title>
    </head>
    <body>
        <p>Řádek 1.<br>Řádek 2.</p>
    </body>
</html>

Pokud byste ho uložili do souboru s koncovkou HTML (např. index.html) a otevřeli ho v prohlížeči, zobrazilo by se vám tohle:

Jde sice o absolutní základ, ale tak začínal každý!

Příští lekce

V příští lekci se pustíme do formátování textu. Představíme si řadu nových elementů, jako třeba ,  a . Také si vysvětlíme sémantiku a SEO.