Linux Software

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 | read 111755×

DISCUSSION

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.

DISCUSSION

For this item is no comments.

Add comment is possible for logged registered users.

Search Software

Search Google

Latest aktual Distributions

1.	Pacman linux Download: 4879x
2.	FreeBSD Download: 9067x
3.	PCLinuxOS-2010 Download: 8564x
4.	alcolix Download: 10949x
5.	Onebase Linux Download: 9661x
6.	Novell Linux Desktop Download: 0x
7.	KateOS Download: 6245x

Latest aktual Software

1.	xinetd Download: 2413x
2.	RDGS Download: 937x
3.	spkg Download: 4762x
4.	LinPacker Download: 9968x
5.	VFU File Manager Download: 3199x
6.	LeftHand Mała Księgowość Download: 7203x
7.	MISU pyFotoResize Download: 2811x
8.	Lefthand CRM Download: 3563x
9.	MetadataExtractor Download: 0x
10.	RCP100 Download: 3122x
11.	Predaj softveru Download: 0x
12.	MSH Free Autoresponder Download: 0x

linuxsoft.cz | Design: www.megadesign.cz