Toto je 2. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste první díl.
Toto je 2. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste první díl.
V tomto návodu si vytvoříme základní strukturu HTML dokumentu. Každý HTML dokument se skládá z několika povinných a z mnoha dalších volitelných tagů.
Pomocí tagu neboli značky definujeme jednotlivé prvky dokumentu. Tagy dělíme na dvě kategorie.
<h1>Nadpis dokumentu</h1>
Jedná se o samostaný tag, který je obvykle doplněn atributy, které definují jeho vlastnosti.
<img src="img/obrazek.jpg" alt="Popis obrázku" width="50" height="50">
Pusťme se do tvorby základní struktury. Na prvním řádku před uvedením jakéhokoli tagu musí být uvedena deklarace HTML dokumentu <!DOCTYPE html>. Díky této deklaraci bude prohlížeč vědět, jak má celý dokument zpracovat a správně zobrazit. Poté již následují povinné tagy, které budují základní kostru dokumentu.
První povinný tag je <html>. Tento párový tag vymezuje oblast dokumentu. Mezi tyto tagy vkládáme hlavičku <head> </head> a pod hlavičkou následuje tělo dokumentu ohraničeno tagy <body> </body>.
Do těla dokumentu se již vkládají volitelné tagy např. nadpisy <h1> nebo odstavce textu <p>. Nakonec musíme celý dokument ukončit uzavíracím tagem </html>.
<!DOCTYPE html><html lang="cs"><head><title>Titulek stránky - Základní HTML stránka</title></head><body><h1>Nadpis HTML stránky</h1><p>První odstavec HTML stránky</p><p>Druhý odstavec HTML stránky</p></body></html>
Na konci tohoto návodu si probereme použité tagy.
<html>Párový tag obklopující celý HTML dokument. Veškeré další prvky dokumentu se vkládají mezi tyto tagy. Tento tag lze doplnit o atribut lang, který dopomáhá určit čtečkám obsahu a vyhledávačům jazyk dokumentu.
<title>Párový tag sloužící jako titulek HTML dokumentu. Zobrazuje se v hlavičce prohlížeče a také jej využívají vyhledávače ve výsledcích vyhledávání.
<h1>Párový tag označující nadpis 1. úrovně tj. nejdůležitější nadpis v dokumentu.
<p>Párový tag obklopující odstavec textu v HTML dokumentu.
V dalším návodu se blíže seznámíme s hlavičkami HTML dokumentu.
