Dnes se podíváme, jak se v HTML označují odstavce a nadpisy
17.6.2004 15:00 | Pavel Kácha | přečteno 111744×
Pokud budete chtít na svých webových stránkách prezentovat nějaký dokument, budete nejspíš potřebovat značky pro nadpisy a odstavce, protože tyto dva typy textu se najdou i v tom nejjednodušším dokumentu stejně jako v rozsáhlé seminární práci.
HTML zná celkem šest úrovní nadpisů, které můžete na svých stránkách použít pro lepší zdůraznění struktury dokumentů. Nadpisy značíme tagy <hn></hn>, kde n je úroveň zanoření nadpisu. Takže například nadpis první úrovně bude označen znaky <h1></h1> a nadpis nejjnižší (šesté) úrovně označíme takto: <h6></h6> Aby vám byly nadpisy zcela jasné, vyzkoušejte si, jak se zobrazí tento kód (pokud nebude uvedeno jinak, bude vždy ukázkový úsek HTML kódu pouze část mezi tagy <body></body>):
<h1>Hlavní nadpis (1. úroveň)</h1> <h2>Důležitý nadpis (2. úroveň)</h2> <h3>Další důležitý nadpis (3. úroveň)</h3> <h4>Poměrně malý nadpis (4. úroveň)</h4> <h5>Zanořený nadpis (5. úroveň)</h5> <h6>Malý nadpis (6. úroveň)</h6>
Odstavec se v textu vyznačuje pomocí znaků <p></p>, mezi které uzavřete vlastní obsah odstavce. Hned uvedu malý příklad:
<p>První odstavec</p> <p>Hned za ním následuje další, který nabízí stejně zajímavý obsah... :)</p>
Vzhledem k tomu, že povolené atributy jsou pro oba tyto typy tagů stejné, nechci vás unavovat dvakrát tím samým, takže všechny následující příklady budou operovat s odstavci, ale totéž, co zde napíšu o odstavcích, platí i o nadpisech.
Značka odstavce bez dalších parametrů nechá rozhodnutí kam odstavec zarovnat na prohlížeči resp. na uživatelské tabulce stylů (pokud nevíte co to je, nevadí, hlavně si pamatujte, že některé prohlížeče umožňují přenastavení standardního zobrazení podle vůle uživatele, takže se vám text ve dvou stejných prohlížečích může zobrazit jednou zarovnaný vlevo a jindy třeba ke středu). Dobře, ale my chceme mít text odstavce zarovnaný vlevo, ať už je prohlížeč nastaven, jak chce. Jak na to? Stačí přidat atribut align, který slouží k určení typu zarovnání a jeho hodnota left zaručí, že text obsažený v odstavci bude zarovnaný vlevo.
Zarovnáním doleva ale nikoho příliš neohromíte. Pro jiné typy zarovnání se dají použít i další hodnoty, viz. tabulka
| Povolené hodnoty pro atribut align v tagu <p></p> | |
| Hodnota | Význam |
| left | zarovná vlevo |
| right | zarovná vpravo |
| center | zarovná ke středu |
| justify | zarovná do bloku |
Všechno si ještě ukážema na malém příkladu:
<p align="left">První odstavec zarovnaný vlevo</p> <p align="right">Druhý odstavec zarovnaný vpravo</p> <p align="center">Třetí odstavec zarovnaný ke středu</p> <p align="justify"> Čtvrtý odstavec zarovnaný do bloku, ale tady je potřeba trochu delší text, aby se ukázalo, že se text opravdu zarovnal do bloku, protože jinak by mohla vzniknout mýlka, že text se zarovnal "jen" vlevo. :) </p>
Tím jsme probrali asi nejpoužívanější atribut a další atributy i s jejich hodnotami a vysvětlením funkce najdete v této tabulce:
| Atribut | Hodnota | Význam |
| id | libovolný text | Hodnotou atributu je text (znakový řetězec), který je jednoznačným identifikátorem prvku v dokumentu. Tento atribut využijete třeba při oživování stránek pomocí JavaScriptu. |
| class | libovolný text | Hodnotou atributu je třída definovaná v tabulce prvků CSS, podle které se prvek zformátuje. |
| lang | zkratky označující jazyk, např.: en, cz, sk | Hodnotou atributu určujeme jazyk, kterým je psaný obsah odstavce. Podle zvoleného jazyka se aktivují různé konvence používané v konkrétních jazycích (např.: francouzské uvozovky). |
| dir | rtl | Určuje směr textu zprava doleva. |
| ltr | Určuje směr textu zleva do prava. | |
| title | libovolný text | Určuje titulek odstavce, který se v některých prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na odstavec. |
| style | příkazy jazyka CSS, např. color : red; | Pomocí tohoto atributu můžete nadefinovat, jak se má zobrazit určitý odstavec. Můžete využít všechny možnosti, které CSS nabízí. |
Už známe všechny prvky spojené s "čistým" HTML, které můžeme v nadpisech a odstavcích použít. Standard HTML ale uvádí i další atributy, které můžete přidat do tagů - jsou to atributy spojené hlavně s JavaScriptem, ale to, že je na svých stránkách použijete, ještě neznamená, že byste museli psát JavaScripty. (Na druhou stranu ale nevím, na co byste je potom využili. :) ) Je to sada atributů, které zaručí provedení nějakého algoritmu nebo funkce zapsané jako hodnota atributu po resp. při proběhnutí nějaké události. Pokud budete mít zájem, může se těmto atributům věnovat samostatný díl. Nyní si ale vyjmenujeme ty atributy, které jsou povolené pro odstavce a nadpisy.
| Povolené atributy spojené s JS v tagu <p></p> a v nadpisech | |
| Atribut | Význam |
| onclick | Příkazy zadané jako hodnota proběhnou při kliknutí na element (odstavec/nadpis) |
| ondblclick | Příkazy zadané jako hodnota proběhnou při dvojkliku na element (odstavec/nadpis) |
| onmousedown | Příkazy zadané jako hodnota proběhnou při stisku tlačítka myši na element (odstavec/nadpis) |
| onmouseup | Příkazy zadané jako hodnota proběhnou po stisku tlačítka myši (po uvolnění tlačítka) na element (odstavec/nadpis) |
| onmouseover | Příkazy zadané jako hodnota proběhnou při přejetí kurzoru nad elementem (odstavec/nadpis) |
| onmousemove | Příkazy zadané jako hodnota proběhnou při pohybu kurzoru nad elementem (odstavec/nadpis) |
| onmouseout | Příkazy zadané jako hodnota proběhnou poté, co kurzor opustí prostor nad elementem (odstavec/nadpis) |
| onkeypress | Příkazy zadané jako hodnota proběhnou při stisku klávesy na klávesnici |
| onkeydown | Příkazy zadané jako hodnota proběhnou při pohybu klávesy dolů (událost nastane ještě před úplným stisknutím klávesy) |
| onkeyup | Příkazy zadané jako hodnota proběhnou při pohybu klávesy nahoru (událost nastane až při návratu klávesy do nestisknutého stavu) |
To je pro dnešek vše, v příštím díle se budeme věnovat typům písma, ale rád uvítám vaše náměty a dotazy, podle kterých se bude seriál dál vyvíjet.