Curs de HTML
LECTIA a 7-a - 30 mai 2000

Imagini & Culori

Am discutat în lectiile anterioare despre faptul ca textul este sursa de informatie principala din cadrul unei pagini Web. Cu toate acestea, o pagina devine mult mai atractiva pentru publicul cititor atunci cand contine cateva imagini sugestive, "hot spot", sau un fond de culoare adecvat mesajului respectiv.

Culori

O serie de tag-uri HTML includ atribute care va permit specificarea unei culori intr-un text. Aceste atribute pot fi definite pentru una din cele 16 culori cunoscute care corespund sitemului de culori windows.

Aceste culori sunt:

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

O alta metoda de specificare a culorilor este tripleta culorilor rosu-verde-albastru (red-green-blue, respectiv RGB): #rrggbb. Computerele înmagazineaza informatia despre culori prin intermediul unui vector cu 3 componente numerice, reprezentand valorile primare ale culorilor rosu, verde si albastru, culori fundamentale in compunerea nuantei de culoare dorita. Acest vector corespunde spectrului RGB al culorii considerate. Intensitatea paletei de culoare este determinata de gama de valori pe care le ia fiecare numar din setul RGB. Fiecare pereche de litere este un numar hexazecimal cuprins intre 00 si FF. Cu cat numarul este mai mare, cu atat creste intensitatea culorii. De exemplu, culoarea rosu (pur) se specifica prin FF0000. Cu alte cuvinte, am folosit numarul cel mai mare FF pentru culoarea rosu si numerele cele mai mici 00 pentru culorile verde si albastru. Iata mai jos codurile de reprezentare in tripleta RGB pentru cele mai uzuale culori:

Codul tripletei RGB	Culoarea
#000000	black
#FFFFFF	white
#0000FF	blue
#FF0000	red
#00FF00	green
#FFFF00	yellow
#FF00FF	purple

Desi exista milioane de combinatii de valori posibile pentru triplete RGB, este recomandabil a ne limita la o gama mai restransa de culori, deoarece nu toate sistemele suporta in egala masura specificatiile reprezentarilor grafice utilizate pe Web.

Background Color: BGCOLOR

Daca va întoarceti la prima lectie veti vedea ca am folosit tag-ul HTML <body> fara a specifica un atribut, tocmai cu intentia de a reprezenta cea mai simpla pagina, folosind automat culoarea neagra (default) pentru text, pe un fond de pagina alb.

Atunci cand vrem sa folosim un anume fond de culoare pentru întreaga pagina, trebuie specificat în cadrul tag-ului <body> atributul bgcolor si valoarea, respectiv culoarea, asa cum s-a aratat mai sus. Iata cum se scrie acest atribut, pentru culoarea galben de exemplu :

<body BGCOLOR=yellow>

sau, folosind tripleta RGB de reprezentare a culorii galben, #FFFF00:

<body BGCOLOR="#FFFF00">

Default Text Colors

Desi va este cunoscut probabil ca o anumita portiune dintr-un text poate fi redata într-o anumita culoare folosind tag-ul FONT cu atributul color, exista posibilitatea de a specifica o culoare unitara a textului pe întreaga pagina, folosind atributul bgcolor în cadrul tag-ului <body>. Valoarea atribuita trebuie sa fie una din cele 16 culori predefinite aratate mai sus sau o culoare reprezentata prin codul tripleta RGB. Iata de exemplu cum este definit tag-ul body al acestei pagini:

<body BGCOLOR="#FFFF6C" TEXT="#000000" LINK="#0000FF" 
VLINK="631B91" ALINK="#DB3824">

unde:

TEXT: Defineste culoarea (default) a textului
LINK: Defineste culoarea (default) pentru links (care nu au fost vizitate)
VLINK: Defineste culoarea (default) pentru links (care au fost vizitate)
ALINK: Defineste culoarea (default) pentru links-urile care sunt active

RECOMANDARE: Folositi o singura schema de culori pentru toate documentelor publicate pe Web. Se pot crea confuzii la citirea documentelor atunci cand definiti culorile diferit de la o pagina la alta.

Top

Imagini in documentele HTML

Includerea de imagini poate spori calitatea unei pagini Web, devenind astfel mult mai atractiva pentru vizitatori. Înainte de a adauga o imagine (un desen sau chiar o fotografie) la un document, trebuie sa o avem si sa stim ce fel de format se poate folosi într-un HTML document.

Imaginile pot fi create în diferite formate. Fiecare browser recunoaste un image file dupa terminatia sa:

.gif pentru imagini în format GIF
.jpg (sau .jpeg)pentru imagini în format JPEG
.bmp pentru imagini în format Bitmap
.pdf pentru imagini în format Adobe Acrobat

Cele mai frecvent folosite sunt imaginile format GIF si JPEG.

Imaginile GIF (Graphics Interchange Format) au fost realizate pentru prima data de CompuServe. Pentru redarea de reprezentari grafice simple, logos, acest format da rezultate bune si ocupa spatiu relativ mic (între 20 Kb si 100Kb). Acest format de imagini se poate realiza folosind de exemplu programul Paint Shop Pro.

Imaginile JPEG poarta numele grupului Joint Photographic Experts Group care a conceput acest format.
Marele avantaj oferit de imaginile în format JPEG, este acela ca necesita mult mai putin spatiu informational în comparatie cu imaginile în format GIF. De exemplu o aceeasi imagine în format GIF poate fi convertita în format JPEG, ocupand spatiu pe server de 10 ori mai mic. Acest lucru permite folosirea în cadrul documentelor internet a imaginilor fotografice de calitate artistica sporita pentru un spatiu redus de depozitare pe servere.

Image Tag: <IMG>

HTML are capacitatea de a reda imagini incluse într-un document ce contine informatii scrise sub forma unui text. Syntaxa folosita pentru încorporarea unei imagini în textul respectiv este similara cu cea folosita în cazul link-urilor.
Imaginea respectiva este definita prin adresa URL astfel:

<IMG SRC="protocol://hostname/filename">

De exemplu:

<IMG SRC="http://www.eed.usv.ro/~mahalu/Curs/images/jacques.gif">

IMPORTANT: Pentru ca imaginea sa fie redata de catre browser (Netscape de exemplu), trebuie mai întai ca aceasta (în cazul de fata: jacques.gif) sa fie transferata (uploaded) pe serverul (hostname) care este indicat în adresa URL.

Folosirea atributului ALIGN

În general o imagine înglobata în text este redata în asa fel încat partea de jos a imaginii este aliniata cu textul respectiv. Exista însa posibilitatea ca textul folosit care însoteste imaginea sa fie aliniat în partea de sus, mijloc, la stanga sau la dreapta imaginii prezentate. Pentru realizarea acestui lucru se foloseste atributul ALIGN cu urmatoarele valori:

Value	Descrption
TOP	Align text with the top of the image
MIDDLE	Align text with the center of the image
BOTTOM	Align text with the base of the image (default)
LEFT	Align image to the left of the window. Text may appear to the right of the image. Use with <BR CLEAR=LEFT> to move text beneath the image.
RIGHT	Align image to the right of the window. Text may appear to the left of the image. Use with <BR CLEAR=RIGHT> to move text beneath the image.

ALIGN=MIDDLE

De exemplu daca doriti sa scrieti un text care sa fie aliniat cu mijlocul imaginii undercon.gif situata deja pe serverul ycaar.com la adresa URL http://www.eed.usv.ro/~mahalu/Curs/images/undercon.gif atunci textul HTML va trebui sa arate astfel:

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/undercon.gif"
ALIGN=MIDDLE>

Rezultatul afisat de catre browser-ul, Netscape de exemplu, este:

Page Under Construction. Align text with the center of the image

ALIGN=TOP

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/undercon.gif"
ALIGN=TOP>

Rezultatul afisat de catre browser este:

Page Under Construction. Align text with the top of the image

ALIGN=LEFT

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/undercon.gif"
ALIGN=LEFT>

Rezultatul afisat de catre browser este:

Page Under Construction. Align image to the left of the window. Text may appear to the right of the image. Use with <BR CLEAR=LEFT> to move text beneath the image. (Textul continua sa fie scris pana la capat în jurul imaginii respective. Imaginea ramane în partea stanga a paginii. Dupa ultimul cuvant din text, se adauga în HTML tag-ul <BR CLEAR=LEFT>)

ALIGN=RIGHT

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/undercon.gif"
ALIGN=RIGHT>

Rezultatul afisat de catre browser este:

Page Under Construction. Align image to the right of the window. Text may appear to the left of the image. Use with <BR CLEAR=RIGHT> to move text beneath the image. (Textul continua sa fie scris în jurul imaginii respective. Imaginea ramane în partea dreapta a paginii. Dupa ultimul cuvant din text, se adauga în HTML tag-ul <BR CLEAR=RIGHT>)

Folosirea atributului ALT

În situatia cand browser-ul nu poate afisa imaginea respectiva (fie ca este vorba de un browser, cum ar fi Lynx, care reda numai text, fie ca cititorul nu doreste încarcarea imaginii fixînd browser-ul pe image off ) atunci exista posibilitatea ca în locul imaginii sa apara, ca alternativa, un text explicativ. Pentru aceasta se foloseste atributul ALT. Iata un exemplu:

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/back.gif"
ALT="[Back Icon]">

Cei care citesc acest document cu browser "text-only" vor vedea afisat, în locul imaginii, textul "[Back Icon]".

Folosirea atributului BORDER

Atributul BORDER specifica grosimea marginii (redata în pixels , unitatea de masura pentru imagini) unei imagini.

Exemplu, o imagine cu BORDER=10

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/back.gif"
BORDER="10">

este redata astfel:

Pe cand, o imagine cu BORDER=0

<IMG SRC="
http://www.eed.usv.ro/~mahalu/Curs/images/back.gif"
BORDER="10">

este redata astfel:

Folosirea atributelor WIDTH si HEIGHT

Aceste doua atribute permit specificarea marimii (size) unei imagini în pixels.
Majoritatea aplicatiilor folosite la conceperea si prelucrarea imaginilor, cum ar fi Paint Shop Pro, pot masura imaginea respectiva, indicand atat latimea (WIDTH) cat si înaltimea (HEIGHT) în unitati de masura pixels. Înscriere marimii unei imagini, prin mentionarea valorilor atributelor WIDTH si HEIGHT, face ca browser-ul sa redea imaginea mult mai repede, reservand spatiu necesar imaginii fara sa astepte ca aceasta sa fie încarcata în pagina respectiva si apoi sa-i calculeze marimea.

Top

SUCCES !