Home >> HTML návod >> HTML Formátování textu

HTML Formátování textu

V této lekci si ukážeme základy formátování textu v HTML. Formátování textu určitě každý zná z programů jako jsou Microsoft Word nebo Excel, kde pomocí jednoho kliku například zarovnáte písmo, změníte velikost nebo barvu. Formátovat text pomocí HTML je však také velmi snadné a lehce dosáhnete stejného výsledku.

Nadpisy

Při psaní článků na web, se neodejdete bez nadpisů. V HTML se pro vytvoření nadpisu používájí tagy <h1> až <h6>, kde <h1> je největší a <h6> je nejmenší:


<h1>Nadpis h1</h1>

<h2>Nadpis h2</h2>

<h3>Nadpis h3</h3>

<h4>Nadpis h4</h4>

<h5>Nadpis h5</h5>

<h6>Nadpis h6</h6>

Výsledkem je:

Nadpis h1

Nadpis h2

Nadpis h3

Nadpis h4

Nadpis h5

Nadpis h6

Odstavec

Aby byla stránka přehledná, je důležité její obsah strukturovat do odstavců. Jednotlivý odtavec se vytvoří pomocí tagu <p>. Příklad:


<p>Hyper Text Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.</p>



<p>Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka.</p>

Výsledek:

Hyper Text Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.

Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka.

Tučné písmo

Pro tučné písmo se používá tag <b>. Zvýraznit text tučným písmem lze však také pomocí tagu <strong>. Zde je ukázka:


<b>Tento text je tučný.</b>

<strong>Tento text je tučný.</strong>

Výsledek:

Tento text je tučný.
Tento text je tučný.

Kurzíva

Pro písmo s kurzívou se používá tag <i>. I zde existuje alternativa v podobě tagu <em>:


<i>Tento text je napsán kurzívou.</i>

<em>Tento text je napsán kurzívou.</em>

Výsledek:

Tento text je napsán kurzívou.
Tento text je napsán kurzívou.

Formátování pomocí tagu <font>

Pomocí tagu <font> a příslušných atributů lze snadno změnit například barvu textu, velikost textu nebo styl písma. Více o tagu <font> naleznete zde. Ukázka:


<font color="red" size="4" face="cursive, serif">Tento text je naformátován pomocí HTML tagu font a příslušných atributů.</font>

Výsledek:

Tento text je naformátován pomocí HTML tagu font a příslušných atributů.

Zalomení řádku

Je známé, že se písmo zalomí až na konci řádku. Ovšem co když je třeba zalomit písmo ještě před koncem? V takovém případě se použije nepárový tag <br>.Zde je ukázka zalomení řádku:.


Toto je ukázka <br>zalomení řádku.

Výsledek:

Toto je ukázka
zalomení řádku.

Vodorovná čára

Zalomit text lze také vodorovnou čarou. Ta se aplikuje pomocí nepárového tagu <hr>:


Ukázka zalomení řádku
<hr>
vodorovnou čarou

Výsledek:

Ukázka zalomení řádku

vodorovnou čarou

Seznam

Při psaní článků se velmi často používají také seznamy. Vytvoříme ho pomocí tagu <ul>. Jednotlivé položky seznamu jsou tvořeny pomocí tagu <li>. Zde je ukázka:


<ul>

   <li>Bod 1</li>

   <li>Bod 2</li>

   <li>Bod 3</li>

</ul>

Výsledek:

Bod 1
Bod 2
Bod 3

Očíslovaný seznam

Vytvořit lze také očíslovaný seznam a to pomocí tagu <ol>. Jednotlivé položky seznamu jsou opět tvořeny tagem <li>:



<ol>

   <li>Bod 1</li>

   <li>Bod 2</li>

   <li>Bod 3</li>

</ol>

Výsledek:

Bod 1
Bod 2
Bod 3

Další lekce >>

<< Předchozí lekce