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

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ů

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ář

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

2.3.2016 22:41 /Ondřej Čečák
Letošní ročník konference InstallFest již tento víkend!
Přidat komentář

14.2.2016 16:39 /Redakce Linuxsoft.cz
O víkendu 5. a 6. března 2016 proběhne na pražském Strahově 8. ročník tradiční konference InstallFest. Celkem za dva dny uvidíte ​30 přednášek​ a ​6 workshopů.
Přidat komentář

5.2.2016 17:38 /Petr Ježek
Utilitka z XFce "xfce4-power-manager" nejen umožňuje nastavení lhůty pro uspání či hybernaci, ale i zapínání a vypínání prezentačního módu pro nerušené sledování videí. Stačí ji nastavit v každém vybavenějším panelu a v jakémkoli nontiled WM/DE.
Přidat komentář

10.1.2016 11:32 /Pavel `Goldenfish' Kysilka
LinuxMarket změnil provozovatele. Nově jej provozuje Marek Pszczolka. Více info a detaily #1 a #2.
Přidat komentář

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

> Poslední diskuze

10.6.2016 21:10 / pavel riha
FreeBSD 10.3 a virtualizace

8.6.2016 21:56 / Milan Gallas
Nevalidní prefix m

7.5.2016 14:58 / Teodor Komárek
Soubory

20.4.2016 0:07 / Jakub Cleing
Sázkový panel PHP FUSION

9.4.2016 9:43 / jiwopene@gmail.com
Re: problém s dpkg a nemožností instalovat

Více ...

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