LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> HTML (2) - odstavec a nadpisy

Dnes se podíváme, jak se v HTML označují odstavce a nadpisy

17.6.2004 15:00 | Pavel Kácha | Články autora | přečteno 105840×

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.

Nadpisy

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

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>

Atributy dovolené pro odstavce a nadpisy

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

Atributy pro události

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.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

4.9.2016 20:13 /Pavel `Goldenfish' Kysilka
PR: Dne 22.9.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, provozování ERP v cloudu, o hostování různých typů softwaru, ale třeba i o zálohování dat nabízeném podnikům formou služby.
Přidat komentář

1.9.2016 11:27 /Honza Javorek
Česká konference o Pythonu, PyCon CZ, stále hledá přednášející skrz dobrovolné přihlášky. Máte-li zajímavé téma, neváhejte a zkuste jej přihlásit, uzávěrka je již 12. září. Konference letos přijímá i přednášky v češtině a nabízí pomoc s přípravou začínajícím speakerům. Řečníci mají navíc vstup zadarmo! Více na webu.
Přidat komentář

27.8.2016 8:55 /Delujek
Dnes po 4 letech komunitního vývoje vyšla diaspora 0.6.0.0
diaspora* je open-source, distribuovaná sociální síť s důrazem na soukromý
Více v oficiálním blog-postu
Přidat komentář

24.8.2016 6:44 /Ondřej Čečák
Poslední týden CFP LinuxDays 2016; pokud byste rádi přednášeli na LinuxDays 2016 8. a 9. října v Praze, můžete svůj příspěvek přihlásit, následovat bude veřejné hlasování.
Přidat komentář

9.8.2016 22:56 /Petr Ježek
Zařazení souborového systému reiser4 do jádra 4.7 znamená konečně konec patchování jádra jen kvůli možnosti použít reiser4.
Přidat komentář

12.7.2016 13:14 /František Kučera
Spolek OpenAlt zve na 130. distribuovaný sraz příznivců svobodného softwaru a otevřených technologií (hardware, 3D tisk, SDR, DIY, makers…), který se bude konat ve čtvrtek 21. července od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

11.7.2016 16:53 /Redakce Linuxsoft.cz
Konference LinuxDays hledá přednášející. Přihlášky poběží do konce prázdnin, v září bude hlasování a program. Více na https://www.linuxdays.cz/2016/cfp/.
Přidat komentář

8.5.2016 17:19 /Redakce Linuxsoft.cz
PR: Dne 26.5.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, cloudové služby, infrastruktura cloudu, efektivní využití cloudu, možné nástrahy cloudů a jak se jim vyhnout
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

19.9.2016 21:04 / Marek Schoř
Poděkování

1.9.2016 13:07 / Walker
hardwood floor refinishing

12.8.2016 11:51 / Josef Zapletal
Jak udělat HTML/Javascript swiping gallery do mobilu?

8.8.2016 14:58 / Adams
fairies for hire

28.7.2016 15:51 / pepan
Re: NetBeans vs Eclipse

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2016) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze