HTML pro začátečníky 2 - Formátování textu

Dnes se budu zabývat hlavním prvkem na webových stránkách, tedy textem. Přestože se dnes spíše preferuje formátování textu a vůbec celé stránky pomocí CSS (kaskádových stylů), ke kterým se dostanu na konci tohoto seriálu, pro začátek se podíváme na to, co nám nabízí samotné HTML.

Normální text

Vše, co se nachází v sekci BODY (viz minulá lekce) a není součástí žádné značky, se považuje za text, byť třeba nijak formátovaný.
Je třeba poznamenat, že prohlížeč nerozlišuje, zda zdrojový text odřádkujete klávesou ENTER, prohlížeč to interpretuje jako běžnou mezeru. Pro odřádkování se používá značka <br>. Více těchto značek samozřejmě vynechá odpovídající počet řádků. Na výsledné zobrazení textu v prohlížeči taktéž nemá vliv vícenásobná mezera. Pokud tedy uvedete v kódu více mezer za sebou, prohlížeč to interpretuje jako mezeru jedinou. Výjimku tvoří tzv. pevná mezera (non-breaking space), která také může zabránit odřádkování slov od sebe. Syntaxe je:  .

Odstavce a jejich zarovnání

HTML nabízí také efektivnější zbůsob formátování odstavců než pomocí značky <br>. Jsou to párové značky <div> a <p>. Obě plní funkci odstavců, takže prohlížeč, jakmile dekóduje ukončovací značku, automaticky přejde na další řádek. <p> navíc klade mezi odstavce ještě prázdný řádek. Oba typy odstavců lze zarovnat pomocí parametru align, který má tyto hodnoty:

left - zarovnání vlevo (implicitní hodnota)
right - zarovnání vpravo
center - zarovnání na střed

Následuje příklad použití odstavců:

<div align="center">
Odstavec zarovnaný na střed.
</div>
<p align="right">
Odstavec zarovnaný doprava.
</p>

Pokud chcete vystředit určitou část textu, nemusíte jej nutně vkládat do odstavců, ale můžete použít párovou značku <center>, která zarovná text na střed bez odřádkování.

Jak jsem upozorňoval na začátku, prohlížeč přehlíží vícenásobné mezery a "odentrování" ve zdrojovém textu. Pokud ale z nějakého důvodu potřebujete text zobrazit přesně jako v kódu, uzavřete jej mezi značky <pre> a </pre>. Prohlížeč ho pak interpretuje se všemi zadanými formátovacími znaky a použije neproporcionálního písma Courier.

Efekty a zvýrazňování písma

Tuto kapitolu nebudu nijak složitě vysvětlovat, tyto zvýrazňující prvky určitě znáte z textových editorů (řez písma). Základní efekty se definují těmito párovými značkami:

<b> - tučné písmo
<i> - kurzíva (skloněné písmo)
<u> - podtržené písmo

Tyto efekty lze samozřejmě kombinovat (pozor na správné pořadí ukončovacích značek. Příklad:

<p>
<i>Toto písmo je skloněné.</i>
<b>Toto písmo je tučné.</b>
<u>Toto písmo je podtržené.</u>
<i><b><u>Toto písmo je jak skloněné, tak tučné a podtržené.</u></b></i>
</p>

Další efekty, které nabízí HTML:

<strike> - přeškrtnuté písmo
<big> - písmo, které bude o jeden bod větší než standardní
<small> - písmo, které bude o jeden bod menší než standardní
<sub> - dolní index
<sup> - horní index

Zde již myslím není třeba uvádět příklad, použití těchto značek si můžete vyzkoušet sami.

Fonty

Nyní se dostáváme k nejběžnějším způsobům formátování, a to je změna velikosti, typu a barvy písma (fontu). Tyto vlastnosti se definují párovou značkou <font> a jejími parametry:

size="velikost" - velikost zvoleného písma od 1 (nejmenší) do 7 (toto není velikost v bodech). Pokud před velikostí zadáte znaménko + resp. -, změníte velikost tak, že se přičte resp. odečte od aktuální velikosti.

face="písmo" - přesný název písma, které bude použito (toto písmo musí být v seznamu nainstalovaných písem).

color="barva" - definuje barvu písma. Barvu můžete vyjádřit pomocí klíčových slov (yellow, red, blue apod.) nebo hexadecimálně.

Příklady definování fontů:

<font size="2" face="Arial" color="red">

<font size="+1" face="Times New Roman">

Jak je vidět, nemusíme udávat všechny parametry, vždy jen ty, které chceme změnit.
Je třeba dodat, že změny vlastností písma jsou platné jen do ukončení značky, ve které byly definovány.

Nadpisy

Nadpisy se v HTML používají k jednoduššímu definování specifických částí textu, které bychom jinak museli oddělovat od okolního obsahu větším počtem značek. Je praktické, že HTML má pro nadpisy vyhrazeny speciální tagy, jejichž výhody jsou možnost definování zarovnání, automatické odřádkování nadpisu a vyšší přehlednost kódu.
Celkem je šest úrovní velikostí nadpisů, každý se svou značkou, v níž je velikost přímo definována. Jedná se o párové značky:

<h1>, <h2>, ..., <h6>

přičemž tag H1 zobrazí největší nadpis, jehož velikost se plynule zmenšuje až k H6.

Standardně je nadpis zarovnán doleva. Pokud ho chcete zarovnat doprava nebo na střed, stačí uvést parametr align s příslušnou hodnotou, podobně jako u odstavců.
Značka nadpisu je párová, tudíž nadpis končí po uvedení ukončovací značky a definované zarovnání je platné pouze u jednoho příslušného nadpisu. Příklad:

<h1 align="center">Nadpis zarovnaný na střed</h1>

<h1 align="right">Nadpis zarovnaný vpravo</h1>

Na typ písma a barvu nadpisu má vliv jednak globální nastavení barev (viz další text), jednak poslední nastavení značky font. Na nadpis samozřejmě nemá vliv nastavení velikosti fontu, ta je závislá na použité značce pro nadpis.

Zadávání barev

HTML definuje pro základní barvy přímé názvy odpovídající anglickému ekvivalentu jména barvy, tedy bílá=White, černá=Black, modrá=Blue, červená=Red apod. Tyto barvy se zadávají do uvozovek jako hodnota parametrů značek. Těchto klíčových slov je ovšem omezený počet a většinou si s nimi nevystačíme.
Při zadávání dalších barev se často setkáme s šesticifernými hexadecimálními čísly typu:

#0000FF

Jednotlivé složky barvy - červená, zelená a modrá (RGB) se zadávají pomocí osmibitových čísel (8 bitů = 256 kombinací = dvojciferné hexadecimální číslo), tedy v tomto konkrétním případě je červená reprezentována dvojicí 00, zelená také 00 a modrá FF, což celkem dává "čistou" modrou barvu. Změna poměru barev RGB potom změní i výslednou barvu.

Výchozí nastavení barev

Každý dokument HTML má svoje výchozí barevné nastavení. Tyto implicitní barvy se nastavují ve značce BODY. Její parametry jsou:

BGCOLOR - barva pozadí, standardně bílá
TEXT - barva textu, imlicitní je černá
LINK - barva nenavštívených odkazů, implicitně modrá
VLINK - barva již navštívených odkazů, imlicitní nastavení je fialová
ALINK - barva odkazu, na nějž jste právě kliknuli, standardně červená

Pokud použijete všechny parametry, může to vypadat např. takto:

<body bgcolor="black" text="green" link="red" vlink="yellow" alink="blue">

Komentáře

Aby jste se ve zdrojovém textu vyznali, můžete použít komentář, tedy text, který se nijak neprojeví na zobrazení v prohlížeči, což platí, i když bude komentář obsahovat libovolné značky HTML.
Komentář se uzavírá mezi značky , tedy např. takto:



Jak je vidět, komentář se může vyskytovat i přes více řádků.

Tolik ke stručnému přehledu základního formátování textu, v příští lekci se podíváme na použití obrázků.

Tomigun