Barvičky...

Jiří Kosek ml.

Pokud chceme zvýšit atraktivitu našich stránek, můžeme je zpestřit použitím různých barev. HTML dovoluje nastavit barvu pozadí stránky, textu a barvu odkazů. Než se však podíváme na to, jak změnit barvu jednotlivých částí stránky, řekneme si, jak se v HTML definují barvy.

Jako hodnotu atributů, které určují barvu, lze použít buď jméno barvy nebo její přesnou definici v RGB modelu. V HTML jsou předdefinovány jména šestnácti barev: aqua (jasná modrozelená), black (černá), blue (modrá), fuchsia(anilínová červeň), gray (šedivá), green (zelená), lime(citrónově zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver(stříbrná), teal (tmavá modrozelená), white (bílá), yellow(žlutá).

Pokud chceme použít druhý způsob, musíme trochu zavzpomínat na školní škamna a hodiny fyziky. Tam nás učili, že složením červené, zelené a modré barvy v různých poměrech lze získat i odstíny dalších barev. Chceme-li tedy získat žlutou barvu, stačí ve stejném poměru namíchat červenou a zelenou barvu. Pro konkrétní barvu tedy potřebujeme rozhodnout, jak se na ní podílí jednotlivé základní barvy. V HTML lze podíl každé základní barvy určit číslem od 0 do 255. Hodnota 255 odpovídá maximální intenzitě barvy a 0 naopak minimální intenzitě. Vezmeme-li tedy červenou, zelenou i modrou v intenzitách 255 dostaneme barvu bílou. Pokud bude intenzita všech základních barev nulová, výsledná barva bude černá.

Barvu, kterou potřebujeme získat, tedy můžeme vyjádřit jako trojici čísel, které odpovídají intenzitě červené, zelené a modré složky barvy. V HTML se pak barva zapisuje jako #ččzzmm, kde čč je hexadecimální zápis intenzity červené složky, zz je hexadecimální zápis intenzity zelené složky a mm je hexadecimální zápis intenzity modré složky. Červenou barvu tedy můžeme zapsat buď jako red nebo jako #ff0000. V tabulce 1 si můžeme prohlédnout, jak vypadají předdefinované barvy a jaký je jejich zápis v RGB notaci. (Pokud by se vám barvy na obrázku nějak nezdály, nevěste hlavu -- technologie, kterou se tiskne CW, občas nemá úplně přesný soutisk barev.)

Tab. 1: Přehled předdefinovaných barev

Barvy pro celý dokument

Většina z nastavení barev platí pro celou stránku. Provádí se proto pomocí atributů tagu <BODY>. Co tedy můžeme definovat?

Zaprvé barvu pozadí celé stránky. K tomu slouží atribut BGCOLOR. Do něj můžeme přiřadit buď jednu z předdefinovaných barev nebo si namíchat barvu vlastní. Budeme-li tedy chtít naši stránku námořnickou (mít ji na modrém podkladu), stačí na začátek stránky místo <BODY>uvést <BODY BGCOLOR=NAVY> nebo <BODY BGCOLOR=#000080>.

Kromě pozadí lze samozřejmě nastavit i barvu textu. Slouží k tomu atribut TEXT. Pokud bychom chtěli mít na stránce bílý text na černém pozadí, stačí na začátek stránky uvést <BODY BGCOLOR=BLACK TEXT=WHITE>.

Kromě barvy textů a pozadí lze nastavit i barvu odkazů. U odkazů lze nastavit barvu zvlášť pro nenavštívené odkazy (atribut LINK), navštívené odkazy (atribut VLINK) a pro aktivní odkaz -- byl vybrán kliknutím myši (atribut ALINK):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD><TITLE>Test barev</TITLE></HEAD>
<BODY BGCOLOR=BLACK TEXT=WHITE LINK=AQUA ALINK=NAVY VLINK=YELLOW>
<H1>Test barev</H1>
První odkaz <A HREF="xxx">nenavštívený</A>. Na druhý odkaz
jsme se již podívali, a proto je <A HREF="yyy">navštívený</A>.
</BODY>
</HTML>

Výsledek ukázky v prohlížeči je na obrázku 1.

Obr. 1: Ukázka nastavení barev

Barvy pouze pro část textu

Pokud chceme pozměnit barvu textu pouze pro určitou část textu, můžeme s výhodou použít element . U textu, který je obsažen mezi tagy  a , můžeme měnit některé jeho vlastnosti. Jednou z těchto vlastností je i barva -- nastavuje se atributem COLOR. Element

<FONT>

můžeme použít ve stejných případech jako ostatní elementy pro změnu stylu písma. Pokud budeme chtít na stránce třeba červené nadpisy, můžeme zkusit třeba toto:

<H1><FONT COLOR=RED>Červený nadpis</FONT></H1>

Musíme dát pozor na to, aby se nám jednotlivé elementy nekřížili. Následují zápis je tedy chybný:

<H1><FONT COLOR=RED>Červený nadpis</H1></FONT>

Možná vás napadlo, zdali jde u písma pomocí elementu

FONT

měnit i nějaké jiné vlastnosti než barvu. Potěším vás -- kromě barvy lze měnit i velikost písma.

Ke změně velikosti písma slouží atribut SIZE. Velikost může být určena absolutně číslem od jedné do sedmi (viz obrázek 2). Kromě absolutní velikosti lze zadat i velikost relativní. Pokud zadáváme velikost relativně, uvedeme před číslo v atributu SIZE znaménko + nebo -. Velikost písma se pak určí přičtením (+) nebo odečtením (-) zadaného čísla od základní velikosti nastavené elementem <BASEFONT>.

Obr. 2: Ukázka nastavení velikosti písma

Pomocí elementu BASEFONT a jeho atributu SIZE můžeme určit velikost písma pro následující text. SIZE může být opět od jedné do sedmi. Od této velikosti se rovněž odvozuje velikost písma, pokud ji určíme pomocí atributu SIZEelementu FONT s relativním udáním velikosti. Vše si ukážeme na ukázce (výsledek je na obr. 3):

Normální velikost. <BASEFONT SIZE=5>
Tady je text už větší.
<FONT SIZE=-1>Tady relativně zmenšený o jedna.</FONT>
<FONT SIZE=2>Tady je absolutní velikost nastavena na dvě.</FONT>

Obr. 3: Velikost písma pomocí `BASEFONT`

POZOR: Nastavení velikosti písma pomocí BASEFONT a pomocí absolutního udání velikosti elementem FONT se nevztahuje na nadpisy.

TIP: Pokud potřebujeme změnit velikost písma o jednu jednotku, lze místo ... použít kratší <BIG>...</BIG> resp. ....