September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 1 - Základní struktura HTML

Vítejte u první lekce kurzu HTML 5, kde se seznámíme se strukturou HTML dokumentu.

Úplný úvod do HTML zde nebude, ten je už totiž popsán v článku první tvorba webové stránky a bylo by zbytečné to psát znovu. Jen připomenu, HTML není programovací jazyk, je to pouze značkovací jazyk pro tvorbu webu.

V tomto kurzu tedy můžeme najít všechny HTML tagy a jejich atributy, které v jiných kurzech nejsou ani zmíněny. Slouží tedy k probrání HTML od A do Z. HTML je také spojené se stylováním (CSS), bez CSS by stránky vypadaly například jako prázdné kresby bez barvy. V tomto kurzu se CSS zabývat nebudeme, avšak si párkrát nějaký CSS kód uvedeme, ať máme nějaký příklad vzhledově pěkný :)

Struktura HTML

HTML dokument se skládá z tagů, například <head> nebo <body>, je jich však mnohem víc a všechny si je také projdeme. Tagy nemůžeme psát jak se nám zlíbí. Když například vložíme následující kód do prázdného souboru s koncovkou HTML, soubor bude nevalidní:

<body>Moje první stránka</body>

Pokud však zkontrolujeme prvek stránky (pravé kliknutí na webovou stránku → Zkontrolovat prvek / Revize prvku), uvidíme následující okno:

Můžeme si všimnout, že náš prohlížeč automaticky opravil dokument, avšak onen dokument je stále nevalidní a prohlížečem je soubor na serveru samozřejmě neupravený. Takovou validaci HTML dokumentu nebo přímo kódu můžeme validovat přes online nástroj přímo od w3 konsorcia.

Aby byl dokument validní a prohlížeč mu správně rozuměl (a správně ho i zobrazil), musí mít určitou strukturu. Ta je poměrně jednoduchá a skládá se z několika základních tagů. Podívejme se nejprve na následující obrázek:

<!DOCTYPE>

Tag doctype není ve skutečnosti tag, protože je nepárový a není uzavřený. Umožňuje nastavit typ dokumentu a měl by být prvním elementem naší webové stránky. Ve starším HTML 4 byl zápis poněkud komplikovaný:

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

Nyní se jeho zápis velmi zjednodušil a je následující:

<!DOCTYPE html>

Kód výše prohlížeči sdělí, že zobrazuje HTML 5 dokument.

<html>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Tag html obaluje celý HTML dokument, který je dále rozdělen na hlavičku (ta obsahuje informace hlavně pro prohlížeč) a tělo, kde je uložen fyzický obsah dokumentu:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Můžeme u něj uvést atributy:

  • manifest - Obsahuje umístění manifestu pro cache. HTML 5 totiž přichází s možností cachování obsahu stránky pro zrychlení načítání.
  • lang - Specifikování jazyka stránky nebo nějakého elementu.
  • xmlns - Pokud si přejeme používat raději XML syntaxi HTML 5 (ne HTML), můžeme napsat doctype následujícím způsobem:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

Asi je z kódu poznat, že atribut je vždy uvnitř tagu. Za atributem následuje rovnítko a poté uvozovky s hodnotou, kterou chceme, aby atribut měl.

manifest

Atribut manifest obsahuje umístění manifestu pro cache, který se už ani moc nepoužívá. Místo něj by se měly použít tzv. service workers. HTML 5 totiž přichází s možností cachování obsahu stránky pro zrychlení načítání. Toto cachování se určitě hodí pro webové stránky s delšími články. Doporučená přípona souboru manifestu je .appcache.

Udělejme si menší ukázku. Nejdříve si deklarujeme manifest např. pod názvem nacist.appcache:

CACHE MANIFEST
obrazky/obrazek.jpg

Poté si vytvoříme HTML soubor, který bude využívat manifest:

<!DOCTYPE html>
<html manifest="nacist.appcache">
        <head>
                <title>Stránka používající manifest</title>
                <meta charset="UTF-8">
        </head>
        <body>
                <p>Tuto stránku je možné prohlížet po zacachování v offline režimu.</p>
                <img src="obrazky/obrazek.jpg" alt="Obrázek" />
        </body>
</html>

Pokud se návštěvníkovi stránka uložila do cache, může si ji poté zobrazit v offline režimu, kdy se mu načte i obrázek, který jsme definovali v manifestu. Krom obrázků můžeme cachovat např. JS či CSS soubor.

lang

Pokud si tedy minulý kód vložíme do online validátoru, zjistíme, že je v pořádku. Zobrazí se nám pouze varování, že tag <html> neobsahuje jazyk stránky, neboli atribut lang a také, že místo cachování pomocí manifestu máme využít jinou alternativu. Uvedeme si tedy validní strukturu stránky bez cachování:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>itnetwork.cz - programátorská sociální síť</title>
    </head>
    <body>
        <h1>itnetwork.cz</h1>
        <p>Vítejte na programátorské sociální síti!</p>
    </body>
</html>

tak nám validátor nevypíše žádná varování a dokument bude naprosto validní. Atribut lang se dá použít na jakýkoliv element. Pokud máme tedy stránku v češtině, dáme atribut lang="cs" do tagu <html>. Pokud tam budeme mít například odstavec v angličtině, hodí se jazyk specifikovat.

Je k něčemu dobrý?

Atribut lang většina developerů využije pouze u tagu <html>. U jiných tagů se na to zapomíná nebo je to spíš na obtíž. Tento atribut je však důležitý například pro prohlížeč, který díky tohoto tagu určí jazyk stránky a taková kontrola pravopisu bude fungovat ve formulářových polí správně. Vyhledávače a i překladač od Googlu také hledí na tento atribut. Překladač má sice vlastní detekci jazyka, může se však v některých příkladech splést (například cizí slova v odborném článku).

Pro slovenský jazyk bude atribut lang="sk".

<head> a <title>

Hlavička je první částí HTML dokumentu a obsahuje informace hlavně pro prohlížeč. Povinný je párový tag <title>, který specifikuje titulek stránky. Každá HTML stránka by ho měla v hlavičce obsahovat a je velmi důležitý pro vyhledávače z hlediska SEO. Titulek by měl obsahovat klíčová slova a zobrazí se jako nadpis záložky v prohlížeči. Tag <title> se vkládá do párového tagu <head>.

Základní HTML hlavička by mohla vypadat takto:

<head>
    <title>Titulek stránky</title>
</head>

Hlavička však musí být uvnitř tagu <html>, aby byl soubor validní. Pro jednoduchost kódu však pokaždé celý zdrojový kód uvádět nebudeme.

Titulek se nám zobrazí v prohlížeči v záložce takto:

Titulek stránky
index.html

<meta>

Tag <meta> poskytuje tzv. metadata. Jedná se o informace vložené do HTML dokumentu, které se nezobrazí uživateli, ale jsou určeny zejména vyhledávačům. Jistě si domyslíte, že jsou důležité pro SEO optimalizaci stránky.

Tag <meta> musí být vždy umístěn v hlavičce stránky a je nepárový. Kromě vyhledávačů ho používají i webové prohlížeče a webové služby.

Atributy

Tag má následující atributy:

  • charset - Specifikuje znakovou sadu dokumentu. Nejčastěji obsahuje hodnotu UTF-8. Jedná se o nový HTML 5 atribut, který zjednodušuje minulou specifikaci znakové sady.
  • content - Specifikuje parametr pro atributy name a http-equiv.
    • http-equiv - Umožňuje simulovat hlavičku http odpovědi. Dříve se používal k nastavení kódování.
    • name - Specifikuje název metadat (viz. ukázky níže)

Ukázka použití

Autora webové stránky určíme takto:

<meta name="author" content="Jan Novák" />

Dále můžeme vyhledávačům předat klíčová slova, kterých se obsah webu týká (skoro všechny webové prohlížeče je již nepoužívají):

<meta name="keywords" content="ITnetwork, HTML, tutoriál" />

Nejdůležitější je však popis stránky pro vyhledávače:

<meta name="description" content="Tutoriály pro tvorbu webu v HTML a CSS." />

Přes atribut http-equiv lze např. nastavit automatické obnovení stránky každých 30 sekund:

<meta http-equiv="refresh" content="30" />

Další dva názvy metadat jsou generator a application-name. V prvním případě je v content název aplikace, která generovala HTML kód (např. Microsoft Frontpage). V druhém případě je to název aplikace, kterou webová stránka reprezentuje, např. ITnetwork.

Zatím jsme si neprobrali link, style, base a další, ale na ně přijde řada příště ;)

V další lekci, Základní struktura HTML podruhé, budeme pokračovat se strukturou HTML dokumentu. Ukážeme si tagy <script>, <style>, <link>, <base> a <body>.


 

Všechny články v sekci
HTML5
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
3 hlasů
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes a svou gf
Aktivity (7)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!