"Menu Formát -- Písmo"

Jiří Kosek ml.

Pokud chceme nějakou část textu odlišit od ostatního, můžeme k tomu použít některý z elementů, které slouží k vyznačování v textu -- tj. ke změně druhu písma, kterým je text zobrazován. Tyto elementy můžeme rozdělit do dvou skupin. První skupina slouží k logickému vyznačování a druhá k fyzickému.

Při prvním způsobu označujeme úseky textu podle jejich významu (např. citace, název proměnné atd.). Při druhém způsobu naopak označujeme úseky textu a tím jim přiřazujeme jednoznačný vzhled -- kurzíva, tučné písmo, neproporcionální písmo. První způsob více odpovídá celé filozofii HTML, která je orientována spíše na obsah nežli vzhled dokumentu. Navíc první způsob umožňuje ovlivnit druh zobrazení jednotlivých elementů uživatelem. Výsledné zobrazení je pak maximálně přizpůsobeno zvyklostem uživatele. Druhý způsob naopak zaručuje zobrazení úseku textu přesně podle požadavku autora dokumentu.

Text, který má být od ostatního odlišen se uzavře mezi příslušné tagy jako na ukázce (zvýrazněno bude slovo `slovo'):

Do normálního textu umístíme <TAG>slovo</TAG>,
které chceme zvýraznit.

Na místě fiktivního elementu <TAG> může být uveden jeden z následujících logických stylů písma:
<TAG>PopisUkázka
<CITE>Element je nejčastěji používán pro označování názvů knih, článků či jiných citací. Obvykle bývá zobrazován jako kurzíva. Ukázka
<CODE> Element 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. Ukázka
<EM> Element bývá používán pro zvýraznění určité fráze. Nejčastěji je zobrazován jako kurzíva. Ukázka
<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. Ukázka
<SAMP> Element se používá pro zápis výstupů z různých programů a skriptů. Nejčastěji je zobrazován jako neproporcionální písmo. Ukázka
<STRONG> Bývá používáno jako silné zvýraznění a nejčastěji je zobrazováno jako tučné písmo. Ukázka
<VAR> Element se používá pro označení proměnných. Obvykle je zobrazován kurzívou. Ukázka
<DFN> Vyznačuje termín, který je právě definován. Ukázka

Objasnění významu některých z uvedených elementů si ukážeme na následujícím příkladě:

Jestliže si <EM>nejste</EM> jisti správností vašeho dokumentu,
použijte příkaz <CODE>html-check <VAR>file</VAR> | more</CODE>
pro zkontrolování správnosti souboru <VAR>file</VAR>.

V prohlížeči by se mohl zobrazit např. takto:

Fyzické styly písma použijeme, pokud chceme dosáhnout určitého grafického efektu. Může se samozřejmě stát, že prohlížeč nedokáže daný druh písma zobrazit a může použít jiný způsob zvýraznění, např. odlišnou barvu. A jaké tedy máme možnosti:
<TAG>PopisUkázka
<B> Element vyznačuje v textu tučné písmo. Ukázka
<I> Element vyznačuje kurzívu. Ukázka
<TT> Element vyznačuje neproporcionální písmo. Ukázka
<U> Element vyznačuje podtržený text. Ukázka
<STRIKE> Element vyznačuje přeškrtnuté písmo. Ukázka
<BIG> Použije se větší písmo. Ukázka
<SMALL> Použije se menší písmo. Ukázka
<SUB> Element vyznačuje dolní index. Ukázka
<SUP> Element vyznačuje horní index. Ukázka

POZOR: Pokud do sebe vnoříme několik úrovní typů písma, není jednoznačně určen výsledný typ písma. Pokud použijeme <I>abc<B>def</B>ghi</I>, bude text abc a ghi určitě zobrazen kurzívou. Standard HTML však neurčuje zda má být def zobrazeno tučně nebo tučnou kurzívou.

Při používání tagů, které slouží ke změně použitého typu písma bychom měli mít na paměti následující věci:

  1. Nikdy nesmíme jednotlivé elementy překřížit. Nesmíme tedy používat konstrukci typu: <CITE>Bylo <B>nás</CODE> pět</B>.
  2. Pokud chceme typ písma změnit pro více než jeden odstavec, měli bychom obsah každého odstavce uzavřít do vlastních tagů pro začátek a konec daného typu písma. Zabráníme tím tomu, aby se nám křížil element <P> s elementem pro typ písma. Pokud toto pravidlo porušíme, naštěstí se většinou žádná pohroma nekoná, protože většina dnešních prohlížečů je na takovou situaci připravena.

Naše první domovská stránka

V pátém díle našeho seriálu již toho víme dost na to, abychom si mohli udělat první pořádnou stránku. Ukázku jedné takové si zde ukážeme a poslouží nám současně jako zopakování toho, co jsme se již naučili. Naše stránka zapsaná v HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>
<TITLE>MacroHard s.r.o.</TITLE>
</HEAD>

<BODY>

<H1>Vítejte na domovské stránce firmy MacroHard</H1>

Tím, že právě čtete tuto stránku, máte
<EM>jedinečnou šanci</EM> změnit
vaši budoucnost. Naše firma totiž
vyvinula nový operační systém
<STRONG>Doors 97</STRONG>. Je založen
na převratné myšlence, která je
však většině lupičů bežně známá --
do místnosti se mnohem lépe dostaneme
dveřmi (angl. <I>doors</I>) nežli oknem
(angl. <I>window</I>) či dokonce
několika okny najednou (angl. <I>windows</I>).

<P>
Zanecháme však propagandy a umožníme vám
vyzkoušet si náš moderní operační systém.
Můžete si jej stáhnou v podobě
<A HREF="doors.zip">zip-souboru</A> (2,6 MB).

<H2>Požadavky operačního systému Doors</H2>

<OL>
  <LI>Procesor Intel 8086
  <LI>128 KB operační paměti
  <LI>Pevný disk o kapacitě v intervalu &lt;10,40&gt; MB
</OL>

<H2>Výhody operačního systému</H2>

<UL>
  <LI>Plně osmibitový OS šetří vaši paměť
  <LI>Single-taskový OS vás nenutí myslet na více
      věcí najednou
  <LI>Nekompatibilita s Windows firmy
      <A HREF="http://www.microsoft.com">Microsoft</A>
      vás ušetří od používání programů, které používají
      <EM>příjemné</EM> grafické prostředí
</UL>

<H2>Instalace</H2>

Stáhněte si instalační <A HREF="doors.zip">
soubor</A> a rozbalte jej pomocí příkazu:
<BLOCKQUOTE>
    <KBD>pkunzip doors.zip</KBD>
</BLOCKQUOTE>
A poté spusťte samotnou instalaci příkazem:
<BLOCKQUOTE>
    <KBD>format c: /u</KBD>
</BLOCKQUOTE>

</BODY>
</HTML>
V prohlížeči se vše zobrazí zhruba jako na obrázku 1.
Obr. 1: Vzhled naší ukázkové stránky
© Jiří Kosek 1999