Struktura dokumentu
Základní značky vymezující oblasti HTML souboru.
| Tag | Význam | Párový | Výskyt |
|---|---|---|---|
| html | začátek HTML dokumentu | ano | na začátku souboru |
| head | hlavička stránky | ano | na začátku souboru |
| body | tělo stránky + definice pozadí | ano | za <head> |
| <!-- --> | poznámka | ano | kdekoliv |
| !doctype | specifikace DTD | ne | úplně na začátku souboru |
html
Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Pokud ale chcete mít soubory v souladu s dobrými mravy, <html> tag používejte.
Tag html nemá žádné atributy.
head
Hlavička dokumentu, která se nezobrazuje. Obsahuje nepovinně další tagy (title, meta, link, style, script aj.). Pokud v hlavičce použijete prostý text, v některých prohlížečích se zobrazí na začátku stránky!
Tag head nemá žádné atributy.
body
Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky.
Všechny níže zmíněné atributy tagu body (vyjma obecných) jsou zastaralé a nahrazují se využitím CSS vlastností nastavených pro tag body (doporučené CSS vlastnosti uvádím v pravém sloupci tabulky).
| Atribut tagu <body> | Význam | Hodnoty | CSS náhrada pro tag body |
|---|---|---|---|
| bgcolor | barva pozadí | barva | background-color |
| background | obrázek na pozadí | URL obrázku | background-image |
| text | barva popředí (textu) | barva | color |
| link | barva nenavštívených odkazů | barva | a:link {color: ...} |
| vlink | barva navštívených odkazů | barva | a:visited {color: ...} |
| alink | barva klikaných odkazů (a pod tabulátorem) | barva | a:active {color: ...} |
| bgproperties | posouvání obrázkového pozadí | scroll | fixed | background-attachment |
| scroll | rolování těla (raději neměňte) | yes | no | overflow |
| leftmargin | levý okraj | pixely | margin-left |
| topmargin | horní okraj | pixely | margin-top |
| rightmargin | pravý okraj (ne v NN) | pixely | margin-right |
| bottommargin | spodní okraj (ne v NN) | pixely | margin-bottom |
| marginwidth | levý a pravý (pouze NN) | pixely | margin |
| marginheight | horní a spodní (pouze NN) | pixely | margin |
| + obecné atributy | |||
Příklad: <body background="obrazek.gif" bgcolor="yellow" text="blue" link="green" vlink="olive" alink="#FF0000">
Zadávání barev pomocí atributů tagu body je zastaralé. Doporučuji barvit dokument pomocí CSS stylů, např.:
<body style="color: blue; background-image: URL('obrazek.gif')">
nebo ještě lépe v hlavičce dokumentu pomocí tagu style:
<style>
body {color: blue; background-color: yellow; background-image:
URL('obrazek.gif')}
a:link {color: green;}
a:visited {color: olive;}
a:active {color: #FF0000}
</style>
<!-- poznámka -->
Všechno, co je v HTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. <!-- je tedy začátek poznámky, --> její konec. Poznámkám se také říká "komentáře".
Čtyři záludnosti:
- Nevnořujte poznámky: <!-- toto je poznámka <!-- toto také --> ale tohle už ne! -->
- Uvnitř tagů <style> a <script> se obsah balí do poznámek, aby byl ignorován staršími prohlížeči. Nové prohlížeče poznámku ignorují a správně interpretují obsah jako styl nebo skript, nikoli tedy jako HTML. Obalování do poznámek je už dnes (aktualizace 2004) zcela zbytečné.
- Některé programy a skripty používají poznámky na vkládání různých věcí. Za znak poznámky se pak dává nějaký řetězec. Např.: <!--# je SSI vložka -->, <!--webbot je vložka FrontPage -->. Prohlížeče si jich ale nevšímají, což je správně.
- Specifikace říká, že v ukončení poznámky, tedy v sekvenci --> může být mezera nebo jiné znaky. Takže toto: -- > je také konec poznámky. Dávejte si pozor, abyste do html poznámky nepsali dvě pomlčky za sebou -- protože potom stačí jeden pravý zobáček > a tohle už pak není poznámka.
Pomocí poznámek určitého tvaru se dá dosáhnout nestandardního chování Internet Exploreru. Říká se tomu conditional comments, podmíněné komentáře.
(V jiných webových jazycích, v CSS a v Javascriptu, se poznámka dělá úplně jinak, totiž pomocí sekvencí /* a */. V javascriptu je navíc poznámkou všechno za sekvencí // až do konce řádku.)
!doctype
Specifikace DTD. Píše se úplně na začátek souboru, ještě před značku <html>. Není nutné to dělat, ale podle standardu značkovacích jazyků SGML a XML je vhodné strukturovanou formou říci, že tento dokument je HTML dokument; navíc se udává verze HTML, které to odpovídá. Význam to bude mít v budoucnu, až se budou dokumenty zpracovávat více automaticky.
Syntaxe je poněkud podivná. Omezím se na pár příkladů:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<!doctype html>
Na místě řetězce "strict" se někdy užívají řetězce "draft" nebo "final". Pokud nemáte syntaxi souboru zkontrolovanou parserem podle příslušného DTD, raději do <!doctype> nepište vůbec nic než html (viz poslední příklad).
Hlavní funkcí !doctype je dnes přepínání zobrazovacích modů CSS. Jinak řečeno podle doctype se určuje, ve kterém prohlížeči se budou jak počítat šířky a velikosti písma. Je to velmi pošahaná a nepříjemná situace, která vznikla historickým vývojem. O přepínání módů prohlížečů.
Více informací a příkladů o Doctype.
Příklad
Klasický HTML soubor může vypadat takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
obsah hlavičky
</head>
<body>
obsah těla
</body>
</html>
Reklama
