pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Formátování textu v HTML

Obsah webové stránky je vždy různý podle tématu, kterému se chce věnovat. Obecně se využívá několika základních prvků. Jsou to texty, obrázky a odkazy. Tyto tři základní součásti naleznete všude na internetu a s jejich pomocí lze jednoduchou stránku vytvořit.

Webová stránka má sloužit především jako zdroj informací. Základní způsob předávání znalostí je pomocí textu, a pokud chcete, aby vaše stránka byla dobře čitelná, musíte ji vhodným způsobem upravit. V této části se podíváme, jaké možnosti pro práci s textem nabízí HTML.

Prázdnou stránku již umíte. Cokoliv napíšete do <body> se zobrazí. Měli byste vědět, že HTML zcela ignoruje několikanásobné mezery či řádkování. Vše interpretuje jako jednoduchou mezeru.

 

<body>

Ahoj  ,   jak

se

máš

?

</body>


Uvedený kód se ve výsledku zobrazí pouze v jednom řádku.

Pokud napíšete delší text, automaticky se přizpůsobí oknu prohlížeče. Zalomí se na konci stránky a přeskočí na další řádek. Nezáleží na tom, jak jste si rozdělili řádky v kódu, výsledek v prohlížeči je vždy zobrazen jako souvislý blok textu.

Některé z tagů používaných pro text mají sémantický význam. To znamená, že určují, o jaký obsah se jedná. Například <b> jen zobrazí tučný text. Opačně pokud nějaký text ohraničíme pomocí <STRONG>, přikládáme mu vyšší významovou váhu v rámci stránky. Ve výsledné stránce se oboje zobrazí uživateli úplně stejně, rozdíl je ve významové části textu (významnější, méně významné). Tag <B> se v praxi používá málo (kromě automatizovaných generátorů HTML), doporučené je vždy používat STRONG.


Odstavec

Odstavec (paragraph) je souvislý blok textu. Mezi odstavci doplňuje prohlížeč automatickou mezeru. Velmi dlouhé texty je vhodné členit do více tematicky odpovídajících odstavců. Usnadníte tím uživateli čtení.

 

<P> text odstavce </P>

 

Vlastnosti odstavce – zarovnání:

Pokud budete chtít zarovnat odstavec podobně jako v programu MS Word, nabízí se několik možností nastavení HTML tagu <p>.   Použít můžete vlastnost align. Celý příkaz vypadá následovně:

 

<p align=“justify“>text odstavce</p>

Další hodnoty pro zarovnání jsou center, left, right podle toho, jak odstavec potřebujeme naformátovat.


Nadpisy

Dalším nezbytným textovým prvkem jsou nadpisy. Je velmi důležité je používat. Člověk přisuzuje důležitost písmu podle jeho vzhledu. Větší, výraznější text vždy lépe zaujme pozornost, než obyčejný základní text. Pro počítač (třeba indexovací roboti Google) by bylo krajně nevýhodné napřed zjišťovat, jak text pro uživatele vypadá. Roboti se řídí sémantikou použitých tagů a podle té rozlišují, zda je text důležitý či nikoliv. Pokud umístíte text do nadpisu (tag H1) věnuje mu robot mnohem větší pozornost než textu v odstavci. To je hlavním úkolem pro webdesignera – najít vhodnou rovnováhu mezi uživatelským pohledem a optimalizací pro roboty.

Důležitost textu klesá s použitým druhem nadpisu, proto je vhodné značku <H1> použít na hlavní nadpis stránky a ostatní nižší nadpisy na hierarchické rozčlenění obsahu. Podnadpisy budou využívat značky <h2> a nižší (h3, h4 atd.)

Pamatujte si, že za každým nadpisem se automaticky vytvoří mezera pro odsazení od následujícího textu.

 

Nejlepší využití nadpisů (struktury) u článků je:

1, hlavní nadpis

2, podnadpis (někdy označováno jako perex)

3, text článku

4, nadpisy uvnitř textu oddělující jednotlivé odstavce

 

Nadpis v HTML můžete zapsat následujícím kódem:

<H1> NADPIS</H1>

Nadpisy se člení na šest základních úrovní H1 – H6 od největšího k nejmenšímu. Vzhled jednotlivých nadpisů je nutné měnit pomocí CSS.

Pokud si chcete vkládání textu procvičit, zkuste sestavit libovolnou HTML stránku obsahující 3 články v řazení NADPIS, PODNADPIS, TEXT. Všechny odstavce zarovnejte do bloku. Texty je možné kopírovat z internetu, nebo z textového dokumentu (Word).


Písmo

Změna formátování písma přímo v HTML kódu se realizuje pomocí tagu <span>. Výrazně vhodnější a jednoznačně doporučované je ale formátování pomocí CSS. Viz kapitola CSS – kaskádové styly.

<span style="color: black; font-family: Arial">upravovaný text </span>

Vlastnost color označuje barvu písma, font-family je definicí použitého písma (fontu).

Další HTML tagy pro formátování písma jsou značeny obdobně jako v textových editorech. Např. tučné písmo bývá označeno písmenem B (angl. Bold - tučné). V naprosté většině případů se jedná o párové značky. Zápis může vypadat například takto:

<i>písmo, které má být kurzívou</i>

 

Nejčastější tagy pro formátování ukazuje následující seznam:

Kurzíva <i> text </i>

Tučné písmo              <b> text </b>

Přeškrtnuté               <s> text </s>

Podtržené                  <u> text </u>

Horní index               <sup> text </sup>

Dolní index                <sub> text </sub>

 

Pro oddělení bloků textu můžete, mimo jiné, použít vodorovnou čáru. Uvedený kód vykreslí vodorovnou čáru přes celé okno prohlížeče (width=”100%”). V ukázce je tloušťka čáry nastavena na 2 pixely (size=”2”). Barva je nastavena na černou (color=”black”).

<hr width="100%" size="2" color="black">

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information