Dnes je zcela samozřejmou vlastností každého textového editoru, že umožňuje v jednom dokumentu najednou používat různé druhy písma – tučné, kurzívu, různě velké atd. Obdobné možnosti nám nabízí i HTML v podobě elementů, které slouží ke změně použitého druhu písma. Tyto elementy můžeme rozdělit na dvě skupiny. Na elementy sloužící k logickému vyznačování a na ty sloužící k fyzickému vyznačování.
Při prvním způsobu označujeme části textu tagy, které prohlížeči říkají: „toto je důležité a chci to mít zvýrazněno“, „tohle je název nějakého citovaného díla“, „toto je proměnná“ apod. Text tedy označujeme podle významu. Prohlížeč při zobrazování použije písmo, které je pro daný druh informace obvyklé v tom kterém hostitelském operačním systému. Uživatel se tedy cítí jako doma, protože podle druhu písma snadno rozezná druh informace.
Při druhém způsobu přímo určujeme použitý druh písma: „tento text bude tučně“, „tenhle kurzívou“. V tomto případě má nad způsobem zobrazení dokonalou kontrolu autor stránky.
Vidíme, že filosofii jazyka HTML odpovídají spíše logické styly – slouží k určení významu a ne pouze vizuálních vlastností daného textu.
Pokud chceme změnit styl písma pro nějaký text, stačí tento text
uzavřít mezi příslušný počáteční a ukončovací tag. V naší ukázce bude
změněn způsob zobrazení slova slovo:
Do normálního textu umístíme <tag>slovo</tag>, které chceme zvýraznit.
Na místě fiktivního elementu
<tag>...</tag> může být jakýkoliv
z logických (viz tab. 1 – „Přehled logických stylů písma“) nebo
fyzických (viz tab. 2 – „Přehled fyzických stylů písma“) stylů
písma. Zařazení elementů pro dolní a horní index přitom není zcela
jednoznačné, lze je samozřejmě chápat i jako logické styly písma,
zvláště jsou-li použity v nějakém matematickém nebo chemickém
vzorci.
Tabulka 1. Přehled logických stylů písma
| <tag> | Popis elementu |
|---|---|
<abbr> |
Používá se pro označování zkratek jako WWW, ČR, OSN apod. |
<cite> |
Nejčastěji je používán pro označování názvů knih, článků či jiných citací. Obvykle bývá zobrazován jako kurzíva. |
<code> |
Indikuje ukázku kódu nějakého programu nebo HTML stránky.
Používá se pro velmi krátké ukázky kódu; pro víceřádkové výpisy je
určen element pre. Element
code bývá obvykle zobrazován
neproporcionálním písmem.
|
<dfn> |
Vyznačuje termín, který je právě definován. |
<em> |
Bývá používán pro zvýraznění určité fráze. Nejčastěji je zobrazován jako kurzíva. |
<kbd> |
Používá se pro vyznačení textu, který je zadáván uživatelem. To lze využít např. v uživatelských příručkách. Bývá zobrazován neproporcionálním písmem. |
<s> |
Vyznačuje text, který již neplatí. Nejčastěji se zobrazuje přesškrtnutím. |
<samp> |
Používá se pro zápis výstupů z různých programů a skriptů. Nejčastěji je zobrazován jako neproporcionální písmo |
<strong> |
Bývá používáno jako silné zvýraznění pro označení obzvláště důležitých informací na stránce a nejčastěji je zobrazováno jako tučné písmo. |
<var> |
Používá se pro označení proměnných. Obvykle je zobrazován kurzívou. |
Tabulka 2. Přehled fyzických stylů písma
<tag> |
Popis elementu |
|---|---|
<b> |
Vyznačuje v textu tučné písmo. |
<i> |
Vyznačuje kurzívu. |
<small> |
Použije se menší písmo. |
<sub> |
Vyznačuje dolní index. |
<sup> |
Vyznačuje horní index. |
Na následujícím kódu si ukážeme, jak se dají používat logické styly.
Jestliže si <em>nejste</em> jisti správností vašeho dokumentu, použijte příkaz <code>html-check <var>filename</var> | more</code> pro zkontrolování správnosti souboru <var>filename</var>.
Ještě před pár lety zobrazoval každý prohlížeč logické styly písma poněkud odlišným způsobem. Jak se můžete přesvědčit na obrázku 9 – „Odlišnost v zobrazení logických stylů písma dnes již vymizely“ zobrazují dnes všechny prohlížeče i logické styly písma téměř stejně.
Abychom neošidili fyzické styly písma, malá ukázka jejich použití:
<p><b>Albert Einstein</b> je mimo jiné autorem rovnice <i>E=mc<sup>2</sup></i>. Jeho <u>Speciální teorie relativity</u> nadělala vrásky mnoha studentům fyziky.</p> <p><big>Stanu se menším</big> a ještě menším <small>až budu nejmenší na celém světě</small>. A to pak zapiju koncentrovaným roztokem C<sub>2</sub>H<sub>5</sub>OH.</p>
Při podrobnějším studiu stránek, které potkáme při svém brouzdání po Internetu, se poměrně často setkáme se dvěma chybami. Tyto chyby spočívají v tom, že jednotlivé elementy se kříží a nedodržují tak hierarchickou strukturu vzájemného vnořování tak, jak jsme si ukázali v první části této kapitoly. Při tvorbě vlastních stránek bychom měli mít na paměti následující dvě pravidla:
-
Nikdy nesmíme jednotlivé elementy překřížit. Nesmíme tedy používat konstrukce typu:
<cite>Bylo <b>nás</cite> pět</b>. -
Pokud chceme typ písma změnit pro více než jeden odstavec, měli bychom text každého odstavce uzavřít do vlastních tagů pro začátek a konec daného typu písma. Zabráníme tak tomu, aby se nám křížil element
<p>s elementem pro typ písma, případně tomu, aby odstavce byly uzavřené do elementů pro změnu písma. Pokud toto pravidlo porušíme, na první pohled se nic nestane, protože dnešní prohlížeče jsou k formátu vstupních souborů velmi benevolentní. Je to však stále chyba. Jednoduchý a elegantní způsob změny písma textu přitom nabízejí kaskádové styly (viz ???).
