V této lekci si ukážeme základy formátování textu v HTML. Formátováním textu se myslí jeho veškerá úprava, tedy změna velikosti, barvy a druhu písma, zarovnání textu, jeho rozdělení do odstavců, nadpisy apod. Vlastnost HTML, kterou musíte mít na vědomí, když se rozhodnete vytvářet webové stránky, je ta, že nezachovává formátování textu tak, jak je uvedeno ve zdrojovém kódu.
Když se tedy rozhodnete text naformátovat jinak, než je standardní nastavení - například zarovnání textu, které je defaultně nastaveno nalevo, nebo druh písma, které je standardně zvoleno jako Times New Roman atd., musíte vše nadefinovat pomocí příslušných HTML značek. Fyzické formátování se doporučuje vždy nahrazovat pomocí CSS vlastností a HTML ponechat jen pro popis obsahu, jeho logiky a významu (sémantiky).
Základní formátování textu
Odstavce
V HTML stejně jako např. ve Wordu píšeme text do odstavců. Aby byla stránka přehledná, je důležité její obsah strukturovat do odstavců. Jednotlivý odstavec se vytvoří pomocí tagu <p>. Odstavec uzavíráme do párové značky <p> </p>.
Text, který je uzavřen v těchto značkách, bude napsán písmem, které je nastaveno jako standardní v příslušném prohlížeči. Použije se rovněž standardní nastavení odstavce (většinou zarovnání vlevo, žádné odsazení, jednoduché řádkování, mezera mezi odstavci). Text v odstavcích lze zarovnávat pomocí parametru ALIGN nalevo (hodnota LEFT), napravo (hodnota RIGHT), na střed (hodnota CENTER) a na obě strany (hodnota JUSTIFY).
Příklad:
Čtěte také: Jak namontovat ukončovací lišty
<p>Toto je první odstavec</p>
<p ALIGN="RIGHT">Text, který čtete, bude na webu zarovnán na pravou stranu.</p>
V případě, že máme dlouhý dokument, kde potřebujeme několik odstavců jednotně zarovnat, například na obě strany, použijete párový tag <DIV ALIGN="hodnota">. Výhody jsou na první pohled jasné - celý dokument bude zarovnán podle našeho přání a nemusíte tak u každého odstavce otrocky zadávat tag <p ALIGN="hodnota">, pouze <P>.
Pokud budeme potřebovat toto zarovnání v jednom odstavci zrušit, jednoduše uvedeme <p ALIGN="hodnota"> a jakmile je tento odstavec ukončen tagem </P>, zarovnání se řídí opět hodnotou uvedenou v <DIV>.
Nadpisy
Nadpisy jsou nejjednodušším způsobem, jak upoutat návštěvníka stránky. Jsou považovány za nejvýraznější text. Jazyk HTML poskytuje šest velikostí nadpisů. V HTML je k dispozici šest úrovní nadpisů, které se od sebe liší pouze velikostí písma. Pro nejvyšší úroveň se používá značka <h1> </h1>, pro nejnižší <h6> </h6>.
Čtěte také: Nezbytný nástroj pro beton
Nadpisy lze dále formátovat pomocí dalších značek stejně jako text odstavce ve značce <p> </p>. Tagy <H1> až <H6> mají řadu nepovinných parametrů, mezi ty nejdůležitější patří parametr ALIGN, který řídí zarovnání nadpisu na stránce, které může být nalevo, napravo, na střed a do bloku. Nadpisy lze samozřejmě centrovat, standardní hodnota je nastavena na center.
Příklad:
<h1>Nadpis první úrovně</h1>
Zalomení řádku
Zlomit text lze také vodorovnou čarou. Ke ukončení řádku a přechodu na druhý se používá tag <BR>. Jedná se o nepárový tag (break - konec/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? Pokud máme dlouhé slovo, které by mohlo rozpadnout design stránky, doprostřed slova může vložit tag <wbr>. Wbr je funkční ve všech prohlížečích.
Předformátovaný text
HTML ignoruje formátování textu ve zdrojovém kódu, čímž je tedy jedno, zdali píšete text stylem „nekonečné řádky“ či na konci mačkáte ENTER. Text se v prohlížeči zobrazí, jako by zde ani žádný ENTER nebyl. Ovšem pokud potřebujete zobrazit text přesně tak, jak je ve zdrojovém kódu a nechce se vám používat hromadu formátovacích tagů, použijte párový tag <PRE>. Při jeho použití je text zobrazen neproporciálním písmem (lze změnit).
Čtěte také: Dilatační spáry v betonu
Zvýrazňování textu
Zvýrazňování textu v HTML slouží k optickému zvýraznění nějaké části textu pro uživatele a také pro prohlížeče a vyhledávače pomocí zvýrazňovacích tagů. Díky tomu se budou vyhledávače na naše stránky více soustředit a naše stránky tak navštíví více lidí. Jedná se hlavně o tzv. frázové tagy a nadpisy. Zvýrazňovací tagy slouží hlavně k definování významu.
Veškeré značky jsou řádkové, neodsazují se od ostatního textu, nemají okraje. Tagy pro formátování textu lze libovolně vnořovat - jako ostatně všechny tagy - , jenom je nezapomeňte ukončit, jinak budou platit dále, výsledný text bude kombinací všech těchto aktivních tagů.
Tučné písmo
Tučný text (z angl. "bold") se používá velmi často ke zvýraznění. 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>. Pokud chcete oznámit, že informace je důležitá, používá se značka <strong>, která též vykresluje tučně. Protože prohlížeče vykreslují <strong> tučným písmem, bývá zaměňován s tagem <b>.
Příklad:
<b>Toto je tučný text</b>
<strong>Toto je silné zvýraznění</strong>
Kurzíva
Kurzíva (z angl. "italic"). Pro písmo s kurzívou se používá tag <i>. Zvýraznění (emphasis) se prohlížeče vykreslují kurzívou. Proto bývá zaměňován s tagem <i>.
Příklad:
<i>Toto je kurzíva</i>
<em>Toto je zvýrazněný text</em>
Podtržené písmo
Podtržení (z angl. "underline"). Používání podtrženého textu se silně nedoporučuje, protože standardně jsou podtrženy odkazy - případné použití tagu <u> návštěvníky stránky velmi mate, protože si jej pletou právě s odkazem.
Příklad:
<u>Toto je podtržený text</u>
Přeškrtnuté písmo
Přeškrtnuté písmo (z angl. "striked"). Pro přeškrtnuté písmo se používá tag <strike> nebo <s>. Používá se pro označení textu, který již není aktuální nebo korektní. HTML 4.0 doporučuje používat <s>, popř. tag <del>.
Příklad:
<strike>Přeškrtnuté písmo</strike>
<del>Odstraněný text</del>
Indexy
- Dolní index (z angl. "subscript"). Vždy, když děláte dolní index, např. H2SO4, používejte tag <sub>. Příklad: H<sub>2</sub>SO<sub>4</sub>
- Horní index (z angl. "superscript"). Příklad: 2<sup>2</sup>
Zvýraznění pomocí <mark>
Novinkou v HTML 5 je tag <mark>, který slouží ke zvýraznění části textu, na kterou chceme upozornit uživatele. Standardně je pozadí textu ve <mark> žluté a písmo černé.
Příklad: <mark>Zvýrazněný text</mark>
Změna velikosti a barvy písma
Velikost písma
Standardně je velikost fontu nastavena na SIZE=3. V HTML lze velikost písma ovlivňovat pomocí párových tagů <big> </big> a <small> </small>. Tag <big> písmo o jeden stupeň zvětšuje, tag <small> zmenšuje. Tyto tagy lze i vícenásobně vkládat do sebe.
Pro změnu velikosti používáme značku <font> </font> s atributem size. Hodnoty tohoto atributu mohou být v rozmezí od 1 do 7. Můžete napsat i číslo mimo uvedené rozmezí; nemá to však příliš efekt, protože když napíšete například 8 nebo 9, zobrazí se už jen velikost 7. Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např. <font size="+2">.
Nicméně, je doporučováno tag <font> nepoužívat (je zastaralý). Specifikace HTML 5 ho označuje jako "deprecated". Moderní přístup spočívá v nastavení písma pomocí CSS stylů pro tag <body>.
Příklad:
<font size="5">Větší text</font>
<big>Zvětšený text</big>
<small>Zmenšený text</small>
Barva písma
Změnu barvy písma lze docílit prostřednictvím atributu color značky <font> </font>. Barvu lze zapisovat buď pomocí anglických názvů (např. "red", "blue"), nebo pomocí tří nebo šesti místných hexadecimálních čísel a v takovém případě se k nim dopisuje mřížka (např. červená by se zapsala: #F00 nebo #FF0000).
Příklad:
<font color="blue">Modrý text</font>
<font color="#FF0000">Červený text</font>
Zde opět platí doporučení, že tag <font> je zastaralý a pro změnu barvy písma je vhodnější používat CSS styly.
Sémantické značky a jejich použití
Doporučuje se používat značky pro logické formátování, díky kterým prohlížeč bude rozumět typu obsahu. Fyzické formátování se doporučuje vždy nahrazovat pomocí CSS vlastností a HTML ponechat jen pro popis obsahu, jeho logiky a významu (sémantiky). Z logických značek si zapamatujte především <span> a <strong>, ty užijete nejčastěji.
<abbr> a <acronym> (zkratky)
<abbr> (zkratka) slouží k označení zkratek a akronymů. Atribut title by měl obsahovat plný význam zkratky. V HTML 5 je tag <acronym> zrušen a má být nahrazen tagem <abbr>.
Příklad: <abbr title="Hyper Text Markup Language">HTML</abbr>
<cite> (citace)
<cite> slouží k označení názvu díla, ze kterého je citace. Obvykle se vykreslí kurzívou.
Příklad: <cite>Směle do Webu!</cite>
tags: #html #formátování #textu #tučné #kurzíva