Jak vytvářet www stránky - 9. díl
Ve čtvrtém díle jsme si pověděli něco málo o formátování písma v HTML dokumentech. Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsaný jiným než standardním písmem? Toto umožňuje párový tag FONT, kterému věnujeme dnešní díl našeho seriálu.
Barva písma
Barvu písma určujeme parametrem COLOR, který může mít hodnotu v hexadecimálním tvaru (#rrggbb), nebo lze použít slovní označení. Barva se definuje stejně, jako barva pozadí stránky, což jsme si vysvětlovali ve třetím díle. Pro připomenutí si ale toto téma stručně zopakujeme:
Definování barvy názvem
Podporováno je následujících šestnáct barev:
| Pojmenování | Hexadecimálně | Slovem | Ukázka |
|---|
| Černá | #000000 | BLACK | |
| Červená | #FF0000 | RED | |
| Žlutozelená | #00FF00 | LIME | |
| Žlutá | #FFFF00 | YELLW | |
| Modrá | #0000FF | BLUE | |
| Fuchsiová | #FF00FF | FUCHSIA | |
| Tyrkysová | #00FFFF | AQUA | |
| Bílá | #FFFFFF | WHITE | |
| Kaštanová | #800000 | MAROON | |
| Zelená | #008000 | GREEN | |
| Olivová | #808000 | OLIVE | |
| Námořnická modrá | #000080 | NAVY | |
| Tmavě fialová | #800080 | PURPLE | |
| Šedozelená | #008080 | TEAL | |
| Tmavě šedá | #808080 | GRAY | |
| Stříbrná | #C0C0C0 | SILVER | |
Definování barvy hexadecimálně
Barvu definujeme pomocí hexadecimálního zápisu #rrggbb, který určuje poměr základních barev (červená-zelená-modrá). Pro každou barvu jsou určena dvě místa, takže celkem lze tímto způsobem definovat 16'581'375 barev.
Příklad:
Červený text tedy uvedeme tagem FONT s parametrem COLOR a hodnotou red, nebo #FF0000. V praxi to může vypadat následovně:
Toto je ukázka <FONT COLOR="red">červeného textu</FONT>
a zde vidíte výsledek
Toto je ukázka červeného textu
Nezapomínejte, že příliš mnoho barev písma na stránce návštěvníka rozptyluje, proto dávejte pozor, aby barev nebylo moc a aby se písmo dobře četlo. Berte ohled i na barvu pozadí - tmavě modré písmo se na černém pozadí nečte zrovna nejlépe...
Velikost písma
Dalším parametrem SIZE lze měnit velikost písma. Je možné použít několik způsobů, jak velikost písma definovat:
Absolutní určení velikosti
v tomto případě použijete jako hodnotu číslo mezi 1 a 7 (číslo 3 odpovídá standardní velikosti)
Relativní určení velikosti
velikost písma určujeme vzhledem k velikosti standardního textu. Znaménko + znamená, že písmo je větší než text standardní velikosti, znaménko - pak samozřejmě označuje písmo menší standardní text. Použijeme-li například parametr SIZE=+1, bude text uvnitř tagu FONT o jeden stupeň větší, než základní písmo. Při relativním určení velikosti smí parametr SIZE nabývat hodnot od -7 do +7.
Příklad:
Toto je normální písmo a <FONT SIZE=5>toto je písmo o velikosti 5</FONT>
výsledek vypadá takto:
Toto je normální písmo a toto je písmo o velikosti 5
Pokud použijete relativní určení velikosti, bude vše vypadat podobně:
Toto je normální písmo a <FONT SIZE=+2>toto je písmo o dva stupně větší</FONT>
výsledek vypadá takto:
Toto je normální písmo a toto je písmo o dva stupně větší
Poznámka: Pojmem standardní velikost máme na mysli velikost běžného písma prohlížeče (obvykle 3 nebo 4). Chcete-li změnit tuto hodnotu, použijte tag <BASEFONT SIZE=standardni velikost>. V takovém případě se bude velikost písma určená relativně odvozovat od velikosti uvedené v BASEFONT.
Typ písma
Posledním parametrem tagu FONT je FACE, který určuje font, jímž bude text zobrazen. Hodnotou parametru je název písma, které má být použito (název písma musí být zcela přesný!). Nevýhodou je, že pokud návštěvník vašich stránek nemá příslušné písmo nainstalované, zobrazí se text standardním fontem, což může v některých případech úplně změnit celé formátování stránky. Tato nežádoucí vlastnost se dá obejít uvedením alternativních písem, které mají být použity v případě, že první uvedené písmo návštěvník nemá (těchto písem je možné uvést neomezené množství, obvykle se uvádějí dvě až čtyři). Každopádně se doporučuje nepoužívat písma, která má nainstalována minoritní skupina uživatelů (např. písma Adobe Type). Pokuste se vystačit s písmy Arial, Times New Roman a Courier.
Příklad:
<FONT FACE="Courier New, Comic Sans MS">Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS </FONT>.
Výsledek:
Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS
Tag FONT lze kombinovat s dalšími tagy pro formátování písma, proto můžete například udělat tučné červené písmo.
<B><FONT COLOR="red">Tučné červené písmo</FONT></B>
ukázka:
Tučné červené písmo
Dávejte ale pozor na správné uzavírání tagů (to platí nejen pro tag FONT, ale obecně pro všechny tagy podporující vnořování). Například <B><FONT COLOR="red">Tučné červené písmo</B></FONT> zobrazí sice MS Internet Explorer správně, nicméně jedná se o syntakticky chybný zápis, který mohou jiné prohlížeče interpretovat odlišným způsobem.
Pro dnešek, myslím, stačilo. V příští lekci se podíváme na velice zajímavé téma - tabulky. Možná se budete sami divit, k čemu se dá tento útvar využít. Do té doby si můžete procvičovat formátování písma.
|
