Tagy

Každý dokument musí obsahovat několik základních značek (tagů), které dohromady tvoří kostru stránky vyhovující standardům.


Jak už jsme zmínili dříve, HTML je značkovací jazyk, to znamená, že jeho pomocí označkujeme části textu, hodnoty a pod. tak, aby bylo prohlížeči jasné, co mu sdělujeme.

V HTML se všechny tagy (značky) zapisují do špičatých závorek (<značka>).

Značky se dělí na dvě hlavní skupiny:

  • Párové značky: musí mít svůj začátek, ve kterém jsou vypsány i atributy doplňující vlastnosti prvku, nějaký svůj obsah a samozřejmě konec – typickým příkladem je třeba odstavec <p>. Konec platnosti určitého tagu se označuje pomocí stejného tagu, jako byl začáteční tag, jediný rozdíl je ten, že za otevírací závorku (<) přidáte lomítko (/).
  • Nepárové značky: naproti tomu nemají žádný obsah, který by ovlivňovaly – nejčastější nepárovou značkou je asi znak nové řádky <br>.

Zápis tagu

Popis Vývoj příkladu
Značka tagu začíná levou ostrou závorkou. <
Za ní následuje jméno tagu, před kterým nesmí být mezera. <font
Mohou následovat atributy. Před každým musí být alespoň jedna mezera. <font color
Za atributem se píše rovnítko a hodnota v uvozovkách. Vše bez mezer. <font color=“blue“
Atributů může být několik. <font color=“blue“ size=“6″
Značka končí pravou ostrou závorkou. <font color=“blue“ size=“6″>
Následuje vlastní text, který se zobrazí <font color=“blue“ size=“6″>Modrý velký text
Element končí ukončovací značkou s lomítkem a bez atributů <font color=“blue“ size=“6″>Modrý velký text </font>

Vnořování tagů

Obsahem tagu může být cokoliv, klidně i další značky, které text dále ovlivní.

Normální text <i>kurzíva, <b> tučná kurzíva </b></i> a opět normální text.

Zákaz křížení

Tag nesmí mít koncovou značku před tím, než ji budou mít všechny vnořené tagy. Následující zápis je invalidní, protože předchází :

<i>kurzíva, <b>tučná kurzíva </i></b>

Velikost znaků

V jazyce HTML nezáleží na velikosti znaků (Anglicky se říká, že HTML je non-case-sensitive.) To znamená, že:

  • <tag> je totéž, co <TAG>
  • atribut je totéž, co Atribut nebo ATRIBUT
  • hodnota je totéž, co HodnotA
  • <table align=“left“> je totéž co <TABLE ALIGN=“LEFT“>

Kdy si dávat pozor na velikosti znaků:

  • když se zapisuje URL (cesta k souboru). Tam se doporučuje zachovávat velikosti.
  • při zápisu Java skriptů je nutno velikosti písmen zachovávat (ale to už nepatří do HTML), ale při zápisu CSS stylů jsou velikosti lhostejné

Doporučení:

Napište všechny tagy, atributy i hodnoty malými písmeny. Kdybyste snad někdy chtěli přejít na XHTML, bude se vám tenhle zvyk hodit.

Uvozovky u atributů

Častým dotazem je, kdy se musejí dělat uvozovky kolem hodnot atributů. Jestli <font color=blue> je něco jiného než <font color=“blue“>. V tomto případě je to totéž, uvozovky nejsou povinné. Ale pokud hodnota atributu obsahuje mezeru, tak tam uvozovky být musejí.

Chybný příklad

<font face=Times New Roman>

Prohlížeč by to bez uvozovek chápal jako více atributů. Takže doporučuji uvozovky dávat všude, nic se tím nezkazí.

Hierarchie tagů

Jednotlivé tagy se vnořují jeden do druhého. Vytváří tak jistou hierarchii. Tag TITLE je uvnitř tagu HEAD a ten je uvnitř HTML. Jednotlivé části stránky ohraničené určitým tagem se nazývají prvky či elementy webové stránky. Použitý tag pak určuje význam daného elementu.

Např. <title>Titulek!</title> je jeden element stránky.

V případě párových tagů nikdy nezapomínejte je uzavřít, vyhnete se spoustě problémům. Na druhou stranu, prohlížeče jsou při čtení dosti tolerantní a spoustu věcí jsou si schopné domyslit. Pokud tedy na konci zapomenete </html>, pravděpodobně se nic nestane. Nic to ale nemění na faktu, že je to špatně!

Časem se kód může stát poměrně rozsáhlým a nepřehledným. Proto je potřeba naučit se dodržovat určitá pravidla, abychom zachovali zpětnou čitelnost. Je poměrně častým zvykem odsazovat každou novou úroveň tagů pomocí TABu. Orientaci v kódu vám také usnadní barevné zvýraznění, které umožňují pokročilejší editory

Poznámky

Další cestou, jak si zpřehlednit kód, je psaní poznámek.

<html><!– tady dokument začíná –>
<head><!– tady začína hlavička–>
<title> Moje první stránka </title>
</head><!– tady končí hlavička –>
<body> <!– tady začíná tělo –>
</body> <!– tady končí tělo–>
</html><!– taky dokument končí –>

Z příkladu je jasně vidět, že poznámky se ohraničují <!– –>. Takto ohraničený text se v prohlížeči vůbec nezobrazí, ať je v něm cokoliv. Jako poznámku si tedy můžete zapsat, co chcete, obvykle to slouží k označení dané části stránky (kde se zrovna nacházím a co daný kousek kódu má dělat).