Od provozovatele projektu Rychlost.CZ

Odstavce v HTML - Začínáme s HTML

vydáno: 17.03.2016, seriál: Začínáme s HTML | komentářů: 0

Toto je 10. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Každý HTML dokument je vhodné přehledně formátovat a dělit do strukturovaných bloků. V návodu se podíváme, jakým způsobem lze toto strukturování provést.

<div> vs. <span>

Základní strukturu celého dokumentu lze určit pomocí bloků <div>. Tyto bloky neviditelně rozdělují celou stránku na drobnější části, které lze lépe formátovat. Každý <div> blok se automaticky v základním nastavení zalamuje pod sebe na nový řádek. Abychom rozlišili různé <div> bloky lze jim přiřadit třídy .class nebo identifikátory #id. Díky tomu lze poté nastavovat vlastnosti v kaskádových stylech pro jednostlivé bloky zvlášť. <div> bloky lze do sebe libovolně vnořovat.

  • Tip1 Pomocí CSS vlastnosti float, lze bloky řadit i vedle sebe.
Ukázka:
HTML
<div id="hlavni-blok">
<div class="prvni-blok"></div>
<div class="druhy-blok">
<div class="vnoreny-blok"></div>
</div>
</div>
Použité tagy: <div>

Když potřebujeme obalit pouze část textu v odstavci, musíme použít řádkový element <span>. Ten také neviditelně obalí označený prvek, ale nijak neovlivní odřádkování nebo pozici okolních prvků na rozdíl od blokového elementu <div>. Tento způsob se hodí především na změnu vlastností slova nebo znaku v řádku odstavce <p>.

Ukázka:
CSS
.modry-text{
color: blue;
}
.kurziva{
font-style: italic;
}
Použité vlastnosti: color, font-style
HTML
<p>Textový odstavec se změnou barvy textu na <span class="modry-text">modrou</span> barvu.</p>
<p>Slovo v odstavci je napsáno <span class="kurziva">kurzívou</span>.</p>
Použité tagy: <p>, <span>

Výsledek:

Textový odstavec se změnou barvy textu na modrou barvu.

Slovo v odstavci je napsáno kurzívou.

Nadpisy a odstavce

Samotný text v HTML dokumentu lze formátovat do odstavců <p>. Každý odstavec obalený párovým tagem <p> se automaticky odřádkuje na nový řádek. V případě že musíme odřádkovat text a nechceme dělat další odstavec, lze si vypomoct tagem <br>. Tento tag zalomí text a přesune další slovo na žačátek řádku.

Ukázka:
HTML
<p>Tuto větu v odstavci zalomíme<br>na nový řádek</p>
Použité tagy: <p>, <br>

Výsledek:

Tuto větu v odstavci zalomíme
na nový řádek

Pokud nepoužijeme zalomení řádku pomocí tagu <br> nebo pomocí nového odstavce <p>, tak prohlížeče text zalamují automaticky podle volné šířky. V některých případech se nám tento způsob nemusí hodit, proto lze přidat tzv. nedělitelnou mezeru &nbsp;. Díky této HTML entitě, prohlížeče nedovolí ponechat část textu na konci řádku samostatně a zalomí jej hned na nový řádek. Toto lze využít například u spojek nebo předložek, které nesmí v textu končit na konci řádku.

Nadpisy v HTML dělíme do šestí úrovní. Od <h1> do <h6>. Nadpis 1.úrovně má největší důležitost a zvýšením čísla za znakem H důležitost nadpisu klesá. Nadpisy, stejně jako odstavce, automaticky odřádkují text na nový řádek. Je doporučováno, aby v každém HTML dokumentu byl uveden pouze jeden nadpis úrovně <h1> a pod ním následovaly další nadpisy. Ty se již mohou vyskytovat ve větším množství, ale i zde je doporučováno, aby bylo zachováno stupňování nadpisů.

Ukázka:
HTML
<h1>Nadpis 1.úrovně</h1>
<h2>Nadpis 2. úrovně</h2>
<h3>Nadpis 3. úrovně</h3>
<h3>Nadpis 3. úrovně</h3>
<h4>Nadpis 4. úrovně</h4>
Použité tagy: <h1>, <h2>, <h3>, <h4>

Výsledek:

Nadpis 1.úrovně

Nadpis 2. úrovně

Nadpis 3. úrovně

Nadpis 3. úrovně

Nadpis 4. úrovně

Občas je potřeba vypsat v HTML dokumentu zdrojový kód nebo tabulku tak, aby byly zachovány mezery nebo konce řádků a nebyl vzhled textu ovlivněn pravidly HTML. K tomu slouží párový tag <pre>, který zobrazí vepsaný text pomocí neproporciálního písma. Tento typ písma zaručí u každého znaku stejnou šířku.

Ukázka:
CSS
.modry-text{
color: blue;
}
Použité vlastnosti: color
HTML
<div>
<h1>Hlavní nadpis stránky<h1>
<h2>Podnadpis stránky</h2>
<p>Textový odstavec s <span class="modry-text">modrým</span> textem.</p>
<p>Druhý textový odstavec</p>
<h3>Nadpis třetí úrovně</h3>
<p>Další odstavec<br>se zalomením řádku</p>
<pre>
Předformátovaný text
Druhý řádek přeformátovaného textu
<pre>
</div>
Použité tagy: <div>, <h1>, <h2>, <p>, <span>, <h3>, <br>, <pre>

Výsledek:

Hlavní nadpis stránky

Podnadpis stránky

Textový odstavec s modrým textem.

Druhý textový odstavec

Nadpis třetí úrovně

Další odstavec
se zalomením řádku

Předformátovaný  text

Druhý řádek   přeformátovaného  textu

<div>

Párový tag, vytvářející blokový element a obvykle i strukturu HTML dokumentu. Do bloku lze umístit odstavce, obrázky i další prvky stránky. Každý blok se zalomí na nový řádek.

<span>

Párový tag, vytvářející na rozdíl od tagu <div> řádkový element, který se nijak nezalamuje. Hodí se například k obalení malé části textu v řádku odstavce. 

<p>

Párový tag obklopující odstavec textu. Každý odstavec obalený do tagu <p> se automaticky vloží pod sebe.

<h1> - <h6>

Párové tagy definující nadpisy. Podle důležitosti se dělí do šesti úrovní <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, kdy tag <h1> je nejdůležitější nadpis na stránce a tag <h6> má nejmenší důležitost. Nadpisy se automaticky odřádkují pod sebe.

<br>

Tag <br> slouží k zalomení řádku, pokud potřebujeme text uvést na nový řádek, ale nechcete vytvářet nový odstavec.

<pre>

Párový tag hodící se k zobrazení předformátovaného textu. Text uvedený mezi tagy <pre> se zobrazí včetně všech mezer a konců řádků, bez ovlivnění pravidly HTML. Pro zobrazení uvedeného textu se používá tzv. neproporciální písmo, které zaručí stejnou šíří každého znaku.