Capitolul 3

Capitolul 3Culori

Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs.

Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a-l mai parcurge.

Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre.

1. Sistemul de definire a culorilorSistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun.

n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru.

Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale:

0123456789101112131415

0123456789ABCDEF

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF.

Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard.

n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate:

Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:

Tabelul 3. 1Nume culoareCod hexazecimal

aqua#00FFFF

black#000000

blue#0000FF

fuchsia#FF00FF

gray#808080

green#008000

lime#00FF00

maroon#800000

navy#000080

olive#808000

purple#800080

red

silver#C0C0C0

teal#008080

yellow#FFFF00

white#FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis. n Anexa 3 vei gsi tabelul culorilor nsoite de codurile lor hexazecimale.

2. Corespondena dintre codurile hexazecimal i zecimalMulte dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal.

De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Aceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere hexazecimale din codul culorii n sistemul zecimal:

63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)Motivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n documentul HTML o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod hexazecimal.

Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories > Calculator) care trebuie setat pe opiunea Scientific din meniul View. Vei observa o serie de butoane radio dintre care ne intereseaz dou: Hex i Dec. Nu avei altceva de fcut dect s selectai Dec, s tastai numrul n baza 10 i apoi s selectai opiunea Hex. Rezultatul conversiei va aprea pe ecran. Conversia invers se realizeaz n mod similar.

i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom lua pe rnd atributele etichetei . Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor:bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilorvlink - culoarea linkurilor vizitatealink - culoarea linkului activ3. Culoarea fundaluluiPentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei , cruia i atribuim o valoare astfel: Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde:Exemplul 3. 1

culori1

Pagina cu fundal verde

Aspectul paginii va fi cel din Figura 3.1.4. Culoarea textuluiPentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei , conform sintaxei:

Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe larg n capitolul urmtor: eticheta . Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei:Text n Exemplul 3.2 culoarea textului este albastru iar anumite cuvinte sunt colorate n rou. Aspectul paginii va fi cel din Figura 3.2.

Exemplul 3. 2

culori2

Text albastru si rosu

Textul din aceasta pagina este albastru cu mici exceptii

5. Culoarea legturilorn general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel:

blue (albastru) - pentru legturi

red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat)

purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un clickPentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei : link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei:

Documentul din Exemplul 3.3 creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi. n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora.

Exemplul 3. 3

culori3

Legaturi colorate

Legatura catre primul exemplu

Aspectul paginii va fi cel din Figura 3.3.6. Alegerea culorilorSunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web. Primul i cel mai important este acela de a face coninutul uor de citit. Aceasta nseamn...ai ghicit! Litere negre pe fond alb.

Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nchis i textul de culoare alb.

S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului, de iluminarea camerei, etc.

Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera efecte interesante.

n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei.

Iat cteva dintre sentimentele pe care le sugereaz culorile:

Rou - agresivitate, pasiune, putere, vitalitate

Roz - feminitate, inocen, moliciune

Portocaliu - amuzament, veselie, cldur, exuberan

Galben - sentimente pozitive i cordialitate

Verde - linite, sntate, prospeime

Albastru - autoritate, demnitate, securitate, ncredere

Violet - sofisticare, spiritualitate, mister

Maro - utilitate, legtura cu pmntul, bogie

Alb - puritate, ncredere, modernitate, rafinament

Gri - sobrietate, autoritate, sim practic

Negru - seriozitate, distincie, hotrre

Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze mesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori sobre i care sugereaz seriozitate i ncredere.

Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit, anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site.

7. Culori "sigure"Aa cum era de ateptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aa-numit palet Web sau "culorile sigure Web".

Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul de mai sus sau sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FFCodul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru).Un monitor setat s afieze 256 de culori va ncerca afiarea unei culori din afara acestui set prin fenomenul numit "dithering" (alternarea unui pixel de o culoare cu un pixel de alt culoare), ceea ce uneori d rezultate, dar adesea rezultatul e departe de culoarea real. Alteori, computerul va afia culoarea "sigur" cea mai apropiat de cea original.

n principiu, o astfel de problem poate prea minor. n realitate, presupunnd c o pagin Web conine att textul ct i fundalul ambele n culori "nesigure", prin modificarea lor de ctre computerul cititorului, nuanele "aproximate" pot face textul total ilizibil.

Pentru a evita astfel de surprize neplcute este suficient s v menine n limita celor 256 de culori "sigure".

Desigur, putei folosi o combinaie hexazecimal ciudat, ca aceasta: #12EC8B, dar nu vei avea nici o garanie n privina modului n care va fi afiat aceast culoare n diferite browsere i pe diferite platforme.

8. RezumatCulorile ntr-un document HTML sunt definite cu ajutorul codului RGB care exprim n sistem hexazecimal cantitatea de rou, verde i albastru prezent n fiecare culoare.

Pentru a stabili culorile ntr-o pagin Web se folosesc atributele etichetei dup urmtoarea sintax:corpul documentuluiAlegerea culorilor pentru o pagin Web trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate.

Pentru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor "sigure".

9. Test1. Sistemul pentru definirea culorilor este:

a) Red, Green, Blue

b) Red, Yellow, Blue

c) White, Black, Gray

2. Culorile n HTML pot fi specificate folosind:

a) Codul zecimal

b) Codul hexazecimal

c) Codul Morse

3. Care este cea mai mare cifr n sistemul hexazecimal?

a) 15

b) F

c) A

4. O culoare care are n sistemul zecimal codul RGB cu valorile: 46, 250, 34 are codul hexazecimal:

a) #2EFA22

b) #3CCD45

c) #66FF90

5. Pentru a stabili culoarea fundalului paginii folosim:

a) b) c) 6. Setarea culorii pentru tot textul din pagin se face cu:

a) b) c) 7. Cum se poate schimba culoarea unui bloc de text?

a) textb) textc) text8. Care sunt culorile prestabilite pentru legturi, legturi active i legturi vizitate?

a) albastru, rou, violet

b) albastru, verde, galben

c) negru, albastru, rou

9. Culoarea legturilor se poate schimba folosind:

a) b) c) 10. Atributele link, alink i vlink servesc la:

a) stabilirea legturilor

b) stabilirea culorilor pentru legturi

c) stabilirea culorilor pentru ntreaga pagin

| Capitolul anterior | Cuprins | Rspunsuri | Capitolul urmtor |

Copyright 2003 - 2007 Softpage Internet. Reproducerea neautorizata si/sau fara specificarea susrsei va fi urmarita si sanctionata conform legilor in vigoare.

PAGE 5