Inserarea imaginilor în documente HTML
Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe lânga text, si elemente multimedia, cum ar fi :imagini, secvente video, applet-uri (programe compilate scrise în limbajul Java, care sunt lansate în executie pe calculatorul utilizatorului). În primele versiuni ale limbajului HTML erau permise doar imaginile (care puteau fi inserate prin intermediul elementului IMG) si applet-urile scrise în limbajul Java (care puteau fi inserate prin intermediul elementului APPLET). HTML 4.0 introduce elementul OBJECT, care reprezinta o solutie generala pentru inserarea elementelor multimedia în documente HTML.
Elementul IMG
Elementul IMG este specific pentru inserarea unei imagini într-un document HTML. Elementul IMG nu admite eticheta de sfârsit, prin urmare nu are continut. Specificarea imaginii ce urmeaza a fi inserata si informatiile necesare formatarii acesteia se realizeaza prin intermediul atributelor:
specifica adresa fisierului care contine imaginea. Cele mai utilizate formate de fisiere grafice sunt GIF (Graphic Interchange Format) si JPEG (Joint Photographic Expert's Group), dar si BMP(Bit Map)
specifica un text alternativ, care va fi afisat de browser-ele care nu pot vizualiza imagini.
defineste înaltimea imaginii.
defineste latimea imaginii. Dimensiunea se poate exprima atât în numar de pixeli, cât si în procente. În cazul în care dimensiunea este exprimata in procente, procentajul se refera la spatiul disponibil pe orizontala/verticala si nu la dimensiunile originale ale imaginii. Redimensionarea imaginii se realizeaza prin scalare, nu prin decupare.
ALIGN = valoarespecifica modul de aliniere a imaginii în raport cu textul. Valoarea poate fi:
TOP - partea de sus a imaginii este aliniata în raport cu textul;
MIDDLE - imaginea este aliniata central în raport cu textul;
BOTTOM - partea de jos a imaginii este aliniata în raport cu textul;
LEFT - imaginea este aliniata la marginea din stânga a paginii;
RIGHT - imaginea este aliniata la marginea din dreapta a paginii.
imaginea va fi încadrata de un chenar cu grosimea specificata în numar de pixeli.
HSPACE = dimensiune specifica spatiul inserat în stânga si în dreapta imaginii.
VSPACE = dimensiune specifica spatiul inserat în partea de sus si în partea de jos a imaginii.
De exemplu:
Descriere
<HTML>
<HEAD>
<TITLE> Un pinguin </TITLE>
</HEAD>
</BODY>
<IMG SRC="pingo.gif" height=135 width=89 ALIGN=MIDDLE
ALT="un pinguin nauc">
<I> Pe mine m-ati gasit de exemplu? <I>
</BODY>
</HTML>
Efect
Pe mine m-ati gasit de exemplu?
În exemplu am inserat o imagine de dimensiuni specificate, aliniata MIDDLE în raport cu textul. În cazul în care browser-ul nu poate vizualiza imaginea respectiva, va afisa textul alternativ "un pinguin nauc". Daca aceiasi imagine am alinia-o BOTTOM, am preciza ca spatiul la stânga si la dreapta este de 20 pixeli si am redimensiona imaginea, am obtine:
Descriere:
<HTML>
<HEAD>
<TITLE> Un pinguin </TITLE>
</HEAD>
</BODY>
<IMG SRC="pingo.gif" height=75 width=50 ALIGN=BOTTOM HSPACE=20 ALT="pinguin nauc">
<I> Pe mine m-ati gasit de exemplu? <I>
</BODY>
</HTML>
Efect
Pe mine m-ati gasit de exemplu?
Observatii:
1) Prin utilizarea imaginilor, paginile Web ar trebui sa devina mult mai atractive. Întotdeauna se întâmpla asa? De multe ori, navigând, întâlnim pagini cu o grafica abundenta, care lasa impresia de supraaglomerare sau de haos, imaginile fiind contrastante prin culoare, pozitie sau semnificatie. În plus, se mai încarca si îngrozitor de greu, mai ales pe la noi.
Care sunt principalele greseli pe care ar trebui sa le evitam când inseram imagini în pagini Web ?
- Nu
considerati ca toti utilizatorii folosesc un browser grafic
! Gânditi-va cum arata
pagina în absenta imaginilor si includeti texte alternative ( cu
toate ca astazi mare parte au la dispozitie un browser grafic ).
- Nu
utilizati imagini de dimensiuni mari! Se încarca greu! De exemplu, puteti
controla dimensiunea imaginii reducând numarul de culori din paleta
la minimul
necesar (acest lucru va micsora numarul de biti necesari pentru
reprezentarea
fiecarui pixel si deci dimensiunea întregii imagini).
- În cazul
în care utilizati o imagine drept imagine de fundal" (background),
aceastava fi multiplicata si dispusa sub forma unui mozaic
pe întreaga suprafata a
ferestrei browser-ului. Daca imaginea are culori tari, textul va fi
foarte greu de
citit. Utilizati culori pastelate, eventual nuante de gri.
Daca
doriti neaparat sa includeti în pagina o imagine de
calitate foarte buna (saspunem un fisier jpg de
dimensiune mare), nu o includeti direct! Includeti doar o
copie micsorata a imaginii, convertita în format .gif si
o scurta descriere (care sa
contina neaparat si dimensiunea imaginii originate). Creati
o legatura de la copie
catre original, astfel încât doar utilizatorii interesati sa o
vizualizeze, în cunostinta
de cauza.
2) O solutie frecvent utilizata pentru a mari atractivitatea unei pagini Web este de a combina textul documentului cu texte realizate într-un editor grafic. Textele care trebuie sa faca o impresie puternica, sa induca o atitudine sau o stare de spirit, editati-le în mod grafic!
Inserarea unei legaturi pe o imagine
Prin utilizarea elementului IMG drept continut al elementului ancora <A> avem posibilitatea de a insera în document o legatura pe o imagine: prin actionarea imaginii printr-un clic va fi accesata resursa destinatie (cea la care am creat legatura).
De exemplu:
Descriere
<A HREF=nA2is.htm"> <IMG SRC="Clint.gif"
HEIGHT=273 WIDTH=148 ALT="Clint"> </A>
|
