ARCHIV

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 111239×

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


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ů

Rozšířené vyhledávání

Linux News

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

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

Poslední diskuze

31.7.2023 14:13 / Linda Graham
iPhone Services

30.11.2022 9:32 / Kyle McDermott
Hosting download unavailable

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

Více ...

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