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í.
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í :
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
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.
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ě!
Poznámky
Další cestou, jak si zpřehlednit kód, je psaní poznámek.
<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).