Od provozovatele projektu Rychlost.CZ

základní HTML stránka - Začínáme s HTML

vydáno: 19.01.2016, seriál: Začínáme s HTML | komentářů: 0

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.

Tag párový - HTML element

Jedná se o uzavřený blok, který začíná otevíracím tagem <h1> a končí uzavíracím tagem </h1>. Uzavírací tag poznáte vždy díky lomítku "/".

Ukázka:
HTML
<h1>Nadpis dokumentu</h1>
Použité tagy: <h1>

Tag nepárový

Jedná se o samostaný tag, který je obvykle doplněn atributy, které definují jeho vlastnosti.

Ukázka:
HTML
<img src="img/obrazek.jpg" alt="Popis obrázku" width="50" height="50">
Použité tagy: <img>

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>.

Zobrazit ukázku
Ukázka:
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>
Použité tagy: <html>, <head>, <title>, <body>, <h1>, <p>

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.

<head>

Párový tag obsahující informace převážně určené pro prohlížeče a vyhledávače. Uvádí se zde například metadata <meta>, styly vzhledu <style> nebo se zde připojují externí soubory <link>.

<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í.

  • Tip1 Výstižný titulek vám může pomoci v SEO optimalizaci

<body>

Párový tag definující tělo dokumentu. Do těla <body> se vkládají další volitelné tagy, které vytvářejí strukturu a obsah HTML dokumentu.

<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.

HTML: návody jak psát html tagy
HTML5: návody a průvodce