3. díl - Nadpisy a zarovnání • WeBlogeři • Když nás je víc ...

Lukin

Tomáš Hypeš

SuperMartas

18. září 2011 11:24

3. díl - Nadpisy a zarovnání

Tomáš Hypeš WeBlogeři > Výuka HTML

V prvním díle jsme se naučili vytvořit stránku s textem Ahoj světe, dnes si tyto znalosti rozšíříme. Strukturu HTML stránky jsme si ukázali v prvním díle. Ve všech stránkách je v podstatě stejná, proto ji už nebudu uvádět a budu psát HTML kód pouze mezi značky <body> a </body>. Jediná věc, která se mění, je název stránky. Ten si budete měnit mezi značkami <title> a </title>.

Odstavec <p>

Odstavec jsme použili již v prvním díle. Značka odstavce je <p>. Odstavec je párová značka, proto musíte uvést i koncovou značku </p>. Mezi těmito značkami je pak vlastní text odstavce. Nesmíte zaměňovat počáteční a koncovou značku. Jedna z častých chyb je, že se zapomene lomítko u koncové značky. To je hrubá chyba, protože se většinou stránka zobrazí špatně. Odstavec nemůže obsahovat další pododstavce. Pokud prohlížeč narazí v odstavci na další odstavec, tak první odstavec automaticky ukončí. Teď si můžete říct, že není nutné používat koncovou značku, ale na to si radši nezvykejte, protože to může vést ke zmatkům.

A teď od teorie k praxi. Do svého souboru vložte následující HTML kód:

<p>Text prvního odstavce.</p>
<p>Text druhého odstavce.</p>
<p>Text třetího odstavce.</p>

Nyní si zkuste udělat chybu, kterou jsem popisoval - dát do odstavce pododstavec:

<p>Jedna <p>dvě</p> tři.</p>

Slovo Jedna se zobrazí na prvním řádku a zbytek na druhém.

Nakonec si zkuste dát do odstavce dlouhý text, který se nevejde na jeden řádek:

<p>Text prvního odstavce.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet quam in nulla suscipit pulvinar vitae quis leo. Praesent tortor purus, blandit non lacinia et, venenatis eget quam. Aliquam dolor leo, molestie lobortis tempus non, scelerisque nec lorem. Proin faucibus ornare dictum. Suspendisse volutpat feugiat consectetur. Vestibulum mollis iaculis dictum. Nullam porta accumsan iaculis. Fusce nibh tellus, aliquet eu interdum at, iaculis eget ante. Integer ut risus nulla, non ullamcorper nibh. Sed et metus purus. Morbi at risus leo. Nullam ac purus elit. Maecenas porttitor dictum diam in faucibus.</p>

Druhý odstavec se do okna prohlížeče nevejde, proto se zalomí a zobrazí na více řádků. Všimněte se, že mezera mezi odstavci je větší, než mezera mezi řádky druhého odstavce.

Zalomení <br>

V předchozí ukázce jsme si ukázali, jak se text automaticky zalamuje. Ale co když chcete, aby se text zalomil na určitém místě? K tomu slouží značka zalomení <br>. Zalomení je nepárová značka, takže pokud uvedete i koncovou značku, tak to bude chyba. Tuto značku můžete umístit do odstavce i mimo něj. Pokud napíšete více těchto značek za sebou, vznikne mezi řádky mezera (prázdné řádky).

Zkuste si tento kód:

<p>Text prvního řádku.</p>
<p>Text druhého řádku.<br>
Text třetího řádku.</p>

Opět si všimněte, že mezi prvními dvěma řádky je větší mezera, než mezi druhým a třetím.

Dále si zkuste udělat mezi řádky mezeru:

<p>Text prvního řádku.</p>
<br>
<p>Text druhého řádku.</p>

Nyní je mezi řádky mezera velká jeden řádek.

Nadpisy <h1>, <h2>, <h3> ...

Nadpisy se chovají stejně jako odstavce jen s tím rozdílem, že jsou tučné a mají větší velikost písma. Nadpisů je celkem 6 (od <h1> do <h6>). Čím nižší číslo, tím větší velikost písma. Nadpisy nemají pouze formátovací funkci. Vyhledávače berou text v nadpisech za důležitější, než v odstavcích.

Zkuste si následující kód:

<h1>Nadpis úrovně 1</h1>
<p>Text prvního odstavce.</p>
<h2>Nadpis úrovně 2</h2>
<p>Text druhého odstavce.</p>

Zarovnání textu

U značek můžete nastavovat tzv. vlastnosti. Vlastnosti se zapisují do počáteční značky tímto způsobem:

<značka vlastnost="hodnota">

Při zápisu vlastnosti nesmíte zapomínat udělat mezeru mezi názvem značky a vlastností. Hodnota vlastnosti by měla být v uvozovkách. Když uvozovky vynecháte, bude se prohlížeč chovat, jako kdyby tam byli. Je to ale chyba.

Vlastnost pro zarovnání textu je align a může mít čtyři hodnoty - left (vlevo), center (na střed), right (vpravo) a justify (do bloku). Tuto vlastnost můžete použít u odstavců i nadpisů (u zalomení by byla k ničemu).

Zkuste si následující kód:

<h1 align="center">Nadpis úrovně 1</h1>
<p align="left">Text prvního odstavce.</p>
<h2 align="right">Nadpis úrovně 2</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet quam in nulla suscipit pulvinar vitae quis leo. Praesent tortor purus, blandit non lacinia et, venenatis eget quam. Aliquam dolor leo, molestie lobortis tempus non, scelerisque nec lorem. Proin faucibus ornare dictum. Suspendisse volutpat feugiat consectetur. Vestibulum mollis iaculis dictum. Nullam porta accumsan iaculis. Fusce nibh tellus, aliquet eu interdum at, iaculis eget ante. Integer ut risus nulla, non ullamcorper nibh. Sed et metus purus. Morbi at risus leo. Nullam ac purus elit. Maecenas porttitor dictum diam in faucibus.</p>

Co nás čeká příště

Dnes jsem si ukázali, jak psát odstavce a nadpisy a jak je zarovnávat. Příště si ukážeme formátování textu jako tučnost, kurzíva, barva, velikost a styl písma.