Lehký úvod do HTML
HTML je značkovací jazyk ukládá se do souborů s koncovkou .html. HTML stránka je obyčejný textový soubor obohacený o tagy a atributy které určují význam textu a dalších objektů. Dále se tedy o takovémto textu budeme bavit jako o zdrojovém kódu nebo pouze kódu. Pokud tento soubor zobrazíme v prohlížeči, vidíme výslednou webovou stránku. My budeme vytvářet stránky podle normy XHTML, což je upravená verze HTML zaměřená na oddělení významu obsahových části dokumentu od jejich grafické podoby. Podrobnosti si můžete přečíst na stránkách Sovy v síti
Termíny používané v XHTML
Tagy
Tagy jsou tvořeny znaky „<” a „>” mezi nimiž je název tagu (takto: <tag>). Vše ostatní, co není mezi těmito znaky, se zobrazuje jako výsledný text na stránce. Tagy pak určují, jaký má text význam (např. jestli se jedná o nadpis, tabulku, či hypertextový odkaz).
V XHTML jsou všechny tagy párové, to znamená, že ke každému počátečnímu tagu musí existovat tag ukončovací, ten se liší od počátečního tím, že před názvem tagu obsahuje lomítko („⁄”). Celé to pak vypadá takto:
<tag>Text zobrazovaný na stránce <⁄tag>
Vyjímku potvrzující pravidlo párovosti tvoří ale například obrázek, protože uvnitř tagu nepotřebujeme žádný text. U obrázku můžeme použít zkrácený zápis:
<img ⁄>
Jeden tag může být uvnitř druhého tagu, ale tagy se nikdy nesmí křížit!
Elementy
Elementem nazýváme celou sekvenci počínaje počátečním tagem a konče tagem ukončovacím. Existují tři základní druhy elementů, blokové, inline a nahrazované. Podle významu, který textu přiřazují je můžeme rozdělit ještě na elementy pro strukturování dokumentu, textové elementy, elementy pro tvorbu odkazů, elementy pro tvorbu tabulek elementy pro tvorbu seznamů a podobně.
Blokové elementy
Jsou to elementy, které tvoří nějaký blok. Zjednodušeně to znamená, že po takovém elementu je text dokumentu zalomen, odřádkován. Blokovými elementy jsou například h1 pro nadpis nebo p pro odstavec.
Inline elementy
Inline elementy jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení. Obvykle plní funkci zvýraznění nějaké části textu. Je to například a pro hypertextový odkaz.
Nahrazované elementy
Ty jsou nahrazeny nějakým obsahem, pro začlenění dokumentu jsou důležité jejich rozměry. Například img pro obrázek.
Atributy
Elementy mohou mít své atributy. Ty jsou přiřazením nějaké vlastnosti danému elementu. Atributy se píší do počátečního tagu, může jich být více (oddělují se mezerou), nemusí být žádný. Každý atribut má svou hodnutu. Hodnota atributu musí být v XHTML zapsána v uvozovkách.
Základní struktura XHTML stránky
Kód stránky se skládá ze dvou základních tagů, jsou jimi head(hlavička) a body(tělo), které jsou dále uzavřeny do tagu html. Na začátku každého dokumentu musíme uvést rovněž doctype dokumentu. Takto si připravíme jakousi šablonu která musí být součástí kódu každé webové stránky. Berte to jako takový rituální taneček, kterým vždy začnete tvorbu stránky. Ukázka:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Rychlokurz tvorby webových stránek pro potřeby předmětu KIV/ZPS</title>
</head>
<body>
</body>
</html>
Všimněte si teď tagu title, do kterého se vkládá text, který charakterizuje obsah stránky. V našem případě je to "Rychlokurz tvorby webových stránek pro potřeby předmětu KIV/ZPS".
Součástí hlavičky může být mnoho dalších informací o dokumentu, tzv. meta-tagů.
Všechen další obsah který chceme na webové stránce zobrazit musíme vložit mezi počáteční a ukončovací tag body. Abychom se později v kódu orientovali, je dobré psát každý element na novou řádku a v případě zanoření více elementů do sebe tyto elementy ještě odsazovat zleva mezerami či tabulátorem. Větší části kódu můžete oddělovat i prázdnou řádkou.
Příklad správného strukturování
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>Rychlokurz tvorby webových stránek pro potřeby předmětu KIV/ZPS</title>
</head>
<body>
<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
<p>Odstavec textu</p>
<ul>
<li>položka seznamu</li>
<li>položka seznamu</li>
<li>položka seznamu</li>
</ul>
<h2>Další nadpis druhé úrovně</h2>
<p>Další odstavec textu</p>
</body>
</html>
A takhle nějak by měla vypadat tato webová stránka ve vašem prohlížeči
