5.díl - Barvy
Už umíme psát odstavce, zalamovat, zarovnávat a jinak formátovat text, ale ještě neumíme nastavovat barvy. To si ukážeme právě dnes.
Způsoby zápisu barvy
Barva lze v HTML zapsat různými způsoby. Než je začneme používat, tak si nejdříve všechny projdeme.
Názvy
Nejjednoduším způsobem, jak zapsat barvu, je napsat název dané barvy. HTML vzniklo z angličtiny, a proto názvy barev se musí zapisovat také v angličtině. V této tabulce máte uvedeno pár základních barev:
| black | red | fuchsia | maroon | brown | |||||
| gray | blue | aqua | navy | orange | |||||
| silver | green | lime | teal | pink | |||||
| white | yellow | olive | purple | peru |
Ostatní barvy si můžete najít např. na Googlu.
RGB barvy
Pojmenovaných barev je pouze cca 1 / 100 000 ze všech barev, které lze v HTML zapsat. Jestli chcete použít jakoukoliv barvu, musíte použít RGB formát. RGB barvy mají tři složky: červenou (R), zelenou (G) a modrou (B). Každá složka má 256 intenzit (0 až 255). Vhodnou kombinací intenzit složek si můžete namíchat jakoukoliv barvu. Jedná se o složky barev světla, tudíž při maximálních intenzitách vznikne bílá a při nulových černá.
Desítkový zápis
U tohoto zápisu použijete klíčové slovo rgb a za něj do závorky zapíšete hodnoty jednotlivých složek oddělené čárkou. Bohužel tento zápis není prohlížeči moc podporován. Například žlutou barvu můžete zapsat tímto způsobem:
Jak si můžete všimnout, žlutá barva vznikne kombinací červené a zelené.
Procentuální zápis
Tento zápis je podobný desítkovému, ale místo celých čísel zde použijete procenta. Nulová intenzita je 0% a maximální je 100%. Tento zápis podporuje více prohlížečů, ale také ho nedoporučuji používat. Žlutou barvu zapíšete takto:
Šestnáctkový zápis
Tento zápis můžete bezpečně použít u jakéhokoliv prohlížeče. Bohužel je těžší na pochopení, protože intenzity se zadávají v šestnáctkové soustavě (00 až FF). Pro převod mezi desítkovou a šestnáctkovou soustavou můžete použít můj program Převodník mezi soustavami. Před zápisem barvy musíte použít mřížku #, za ní zapíšete bez mezer hodnoty jednotlivých složek. Žlutou barvu zapíšete tímto způsobem:
Jak můžete vidět, každá hodnota intenzity musí být dvojmístná, tudíž musíte doplnit nuly.
Zkrácený šestnáctkový zápis
Zkrácený šestnáctkoý zápis se líší v tom, že intenzit není 256, ale pouze 16 (0 až F). Žlutou barvu můžete zapsat tímto způsobem:
Přehled základních barev
V této tabulce jsou stejné barvy, jako v předešlé. Jsou tu navíc uvedeny hodnoty jednotlivých složek a šestnáctkový zápis barvy.
| Barva | Název | R | G | B | Šestnáct. z. |
| black | 0 | 0 | 0 | #000000 | |
| gray | 128 | 128 | 128 | #808080 | |
| silver | 192 | 192 | 192 | #C0C0C0 | |
| white | 255 | 255 | 255 | #FFFFFF | |
| red | 255 | 0 | 0 | #FF0000 | |
| blue | 0 | 0 | 255 | #0000FF | |
| green | 0 | 128 | 0 | #008000 | |
| yellow | 255 | 255 | 0 | #FFFF00 | |
| fuchsia | 255 | 0 | 255 | #FF00FF | |
| aqua | 0 | 255 | 255 | #00FFFF | |
| lime | 0 | 255 | 0 | #00FF00 | |
| olive | 128 | 128 | 0 | #808000 | |
| maroon | 128 | 0 | 0 | #800000 | |
| navy | 0 | 0 | 128 | #000080 | |
| teal | 0 | 128 | 128 | #008080 | |
| purple | 128 | 0 | 128 | #800080 | |
| brown | 165 | 42 | 42 | #A52A2A | |
| orange | 255 | 165 | 0 | #FFA500 | |
| pink | 255 | 192 | 203 | #FFC0CB | |
| peru | 205 | 133 | 63 | #CD853F |
Značka <font>
S touto značkou jsme se setkali již minule. Mimo jiné můžete pomocí ní nastavovat barvy, a to vlastností color. Olivovou barvu zapíšete takto:
Nebo můžete použít šestnáctkový zápis:
Barva textu a pozadí celé stránky
Barvu textu a pozadí na celé stránce můžete nastavit přidáním vlastností značce <body>. O této značce jsme si říkali v prvním díle. Vlastností text nastavíte barvu písma a vlastností bgcolor barvu pozadí stránky. Bílý text na černém pozadí nastavíte takto:
Co nás čeká příště
Po dnešním díle byste měli umět zapisovat barvy a nastavovat barvu textu a pozadí. Příště se podíváme na jednu z nejdůležitějších funkcí HTML - na odkazy.