Imagini in documentele HTML

Imagini în documentele HTML

Imaginile inserate în documentele HTML îmbogatesc paginile Web nu numai sub raport decorativ; bogatia informatiei si noile posibilitati de organizare a resurselor fac din imagini un element 454h77e indispensabil din publicatiile Web. Inserarea se face într-un mod asemanator unei legaturi: se specifica URL-ul imaginii ce se insereaza, URL ce apartine însa unei resurse diferite de documentul propriu-zis (un alt fisier!), chiar daca apare în aceeasi pagina în browser.

1. Formatele suportate

Exista doua tipuri de imagini care pot fi vazute de navigatoare: imagini inline (în text, line = rînd) si imagini externe.

Imaginile inline sînt imagini care apar direct în paginile Web fiind încarcate odata cu pagina (presupunînd ca se utilizeaza un navigator grafic si ca nu este inhibata încarcarea automata a imaginilor). O conditie pentru ca imaginile sa poata fi afisate este salvarea lor într-unul din formatele recunoscute de navigatoare: GIF sau JPEG. Fara multe amanunte, diferentele principale între aceste formate sînt legate de dimensiune (la aceeasi imagine formatul JPEG are o dimensiune mai mica, ceea ce înseamna ca se încarca mai repede în paginile Web) si de calitate (care este, de obicei, superioara la GIF, folosita atunci cînd imaginea ce se insereaza trebuie sa fie de o foarte buna calitate, rezolutie sau adîncime de culoare).

Imaginile externe sînt imagini care nu sînt afisate direct la încarcarea paginii. Ele pot fi încarcate însa la cererea utilizatorului. Navigatoarele pot fi configurate sa manipuleze fisiere imagine de diferite tipuri prin utilizarea unor aplicatii auxiliare asa ca imaginile externe pot fi salvate în formate diferite: PCX, XBM, PICT, etc. Exista mai multe programe de editare de imagine care sînt capabile sa deschida imagini în formate diferite si sa le converteasca în formatul JPEG/GIF, între cele mai raspîndite fiind Adobe Photoshop si Paint Shop Pro. Exista si programe care fac numai conversia în GIF, cum ar fi De Babelizer pe Mac sau pachetul de filtre PBM pentru UNIX.

Doua trasaturi fac noile formate GIF (numite GIF89) mai deosebite: formatul întretesut si fundalul transparent. Imaginile transparente sînt imagini la care culoarea (sau modelul) din fundalul paginii va transpare, dînd senzatia ca imaginea pluteste pe suprafata paginii. Înainte de a le converti (cu un program special) trebuie sa ne asiguram ca imaginile au fundalul într-o singura culoare. Daca fundalul este format din mai multe culori, chiar daca acestea sînt apropiate ca tonalitate, numai una singura va fi facuta transparenta. Fundalul unei imagini se poate izola utilizînd un program de editare de imagine.

Întreteserea (interlacing) nu schimba felul în care este vazuta imaginea în document ci doar aspectul ei în timp ce este încarcata. Pe masura ce imaginea este adusa de pe Web, aparitia ei poate fi gradata, de la o imagine de rezolutie joasa la una de rezolutie mai înalta. Pentru crearea acestui efect este nevoie nu numai ca imaginea sa fie salvata într-un format special (GIF întretesut) ci si ca navigatorul sa fie capabil sa prezinte imaginea în timp ce aceasta este încarcata.

În mod normal, un fisier GIF este salvat în fisier linie cu linie (scan lines), începînd cu partea de sus a imaginii si continuînd progresiv în jos. Daca navigatorul poate afisa imaginile în timp ce acestea sînt încarcate, se vede mai întîi partea de sus a imaginii si apoi tot mai mult din ea pe masura ce informatia imaginii ajunge pe sistem.

Imaginile întretesute sînt salvate diferit. La început este salvata fiecare a opta linie (începînd cu prima), apoi fiecare a opta linie (începînd cu a patra), apoi fiecare a patra linie (începînd cu a treia), apoi restul rîndurilor.

La încarcarea imaginii fie liniile lipsa sînt umplute cu informatie din liniile sosite deja (imaginea apare neclara pîna la încarcarea completa) fie sînt afisate doar liniile sosite (efect venetian). Daca navigatorul nu suporta imaginile întretesute sau daca este setat sa astepte pîna la sosirea întregii imagini înainte de afisare, efectul nu va fi observat.

Avantajul unui format întretesut este ca utilizatorul poate capata o idee despre ce anume reprezinta imaginea înainte ca aceasta sa soseasca în întregime si poate hotarî daca sa astepte sa se încarce sau sa opreasca transferul. Unelte pentru crearea acestor efecte sînt destule.

2. Inserarea imaginilor în text

Dupa convertirea imaginii într-un format suportat, aceasta poate fi inserata în document. Imaginile inline sînt specificate în HTML cu ajutorul tag-ului <IMG>. Acesta este un tag vid din aceeasi familie cu <HR> si <BR>.

Sintaxa:

<IMG>

Atribute posibile:

SRC=URI (locatia imaginii)

ALT=Text (text alternativ)

LONGDESC=URI (link la o descriere lunga)

WIDTH=Length (latimea imaginii)

HEIGHT=Length (înaltimea imaginii)

USEMAP=URI (figura senzitiva - client-side image map)

ISMAP (figura senzitiva - server-side image map)

ALIGN=top|middle|bottom|left|right (alinierea imaginii)

BORDER=Length (grosimea marginii)

HSPACE=Pixels (spatiu liber lasat pe orizontala)

VSPACE=Pixels (spatiu liber lasat pe verticala)

atribute comune

Contine:

nimic

Continut în:

elemente de tip inline, elemente de tip bloc (block-level elements), cu exceptia lui PRE

Descriere:

Atributul SRC indica URL-ul imaginii care va fi inserata în document. Daca numele imaginii este "poza.gif" si imaginea se afla în acelasi director ca si documentul HTML, atunci integrarea imaginii se face cu tag-ul: <IMG SRC="poza.gif">, iar pentru o imagine aflata în directorul imediat superior celui în care se afla documentul, forma tag-ului este: <IMG SRC="../poza.gif">.

Specificarea caii catre imagine se face urmînd aceleasi reguli ca si la specificarea URL pentru orice alt document/resursa. Daca se utilizeaza aceeasi imagine de mai multe ori în interiorul aceluiasi document, este indicat sa se faca referinte relative (spre aceeasi resursa!) în locul celor absolute pentru a permite navigatorului sa foloseasca aceeasi copie a resursei (din cache) si a evita astfel ca acesta sa aduca imaginea de pe server de mai multe ori.

Atributul ALT ia ca valoare textul care va fi afisat de navigatoarele care nu lucreaza în modul grafic (sau care au inhibata functia de încarcare automata a imaginilor), iar LOWSRC="..." indica URL-ul unei imagini care va fi încarcata înaintea imaginii specificate în SRC. Valoarea atributului LOWSRC este de regula URL-ul unei versiuni de o mai mica rezolutie a imaginii specificate în SRC. Textul ce apare la ALT trebuie sa indice (de obicei) functia acelei imagini (mai mult decît descrierea ei) avînd în vedere ca trebuie folosit cînd imaginea nu e încarcata (si nu mai apare sugestia data de continutul acesteia).

Atributul WIDTH="..." rezerva un spatiu (în pixeli) pentru latimea imaginii. Daca imaginea este de alta latime, va fi scalata (redimensionata) astfel încît sa încapa în (sau sa umpla) spatiul rezervat; iar HEIGHT="..." rezerva un spatiu (în pixeli) pentru înaltimea imaginii. Daca imaginea este de alta înaltime, va fi scalata/redimensionatacorespunzator. Atentie, însa: redimensionarea se face dupa algoritmi extrem de simpli si rezultatele sînt extrem de departe de cele obtinute cu unelte adecvate. Utilitatea acestor atribute apare atunci cînd se specifica dimensiunile reale (adevarate) ale imaginii. În acest fel browserul va rezerva un spatiu corect în pagina, dînd înca de la început imaginea reprezentarii paginii respective.

Atributul VSPACE="..." stabileste spatiul dintre imagine si textul aflat deasupra si sub imagine (pe verticala), iar HSPACE="..." stabileste spatiul dintre imagine si textul aflat la stînga si la dreapta imaginii (pe orizontala). Sînt considerate depasite, recomandîndu-se utilizarea style-sheet-urilor în locul lor.

Atributul BORDER="..." deseneaza o margine de grosimea specificata, în jurul imaginii si daca imaginea este activa, face marginea de asemenea activa. Daca se specifica BORDER=0, marginea va fi eliminata chiar daca imaginea este o ancora/link spre alta resursa. De exemplu:

<A HREF="reference.html">

<IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference

</A>

are ca efect afisarea unei imagini (din fisierul reference.gif, care se gaseste în subfolderul icon al folderului curent) si a unui text, transformarea acestora într-o ancora (link) care indica spre documentul reference.html, dar fara ca imaginea sa aiba margine în jurul ei, ca în figura urmatoare:

    Web Authoring Reference

Atributul LONGDESC da o descriere mai lunga a imaginii si poate fi folosit acolo unde este necesara, de exemplu, ca alternativa la reprezentarea uzuala a imaginii (în browserele ce suporta doar text sau cele utilizate de persoanele care nu vad).

Exemple:

Inserarea unei imagini si specificarea unui text (alternativ) care sa se afiseze daca nu se poate afisa imaginea sau ca "explicatie" (tooltip) cînd se pune cursorul mouse-ului pe ea, se poate face cu secventa:

<P>

<IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear">

si are ca efect inserarea în pagina a unei imagini, de exemplu ca cea de mai jos:

Aceeasi imagine inserata în cadrul unui paragraf cu text:

<HTML>

<HEAD>

<TITLE>My Jungle Home Page</TITLE>

</HEAD>

<BODY>

<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">

<H1>The Scariest Jungle</H1>

</FONT>

<FONT FACE="ARIAL" SIZE=2>

Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.

<P> <IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear">

<P><B>Oh, my!</B>

</FONT>

</BODY>

</HTML>

si va arata astfel:

3. Alinierea imaginilor în text

Imaginile pot fi aliniate în document cu ajutorul atributului ALIGN, cel care permite controlul alinierii imaginii cu linia de text alaturata. Exista urmatoarele valori posibile pentru controlul alinierii.

ALIGN=TOP, care aliniaza imaginea cu partea cea mai de sus a rîndului

ALIGN=MIDDLE, care aliniaza imaginea cu mijlocul rîndului (de fapt cu linia de baza)

ALIGN=BOTTOM, care aliniaza imaginea cu cea mai de jos parte a rîndului sau cu partea de jos a celei mai mari imagini de pe rînd

ALIGN=TEXTOP care aliniaza partea de sus a imaginii cu cele mai înalte caractere din rînd

ALIGN=ABSMIDDLE care aliniaza mijlocul imaginii cu mijlocul celui mai mare element

ALIGN=BASELINE care aliniaza partea de jos a imaginii cu linia de baza a textului

ALIGN=ABSBOTTOM care aliniaza partea de jos a imaginii cu cea mai de jos parte a unui element de pe rînd

ALIGN=LEFT si ALIGN=RIGHT care aliniaza imaginea în stînga, respectiv dreapta paginii

4. Imagini flotante

Imaginile si obiectele pot apare direct în text (in-line) sau pot fi "flotante" pe o margine a paginii alterînd astfel temporar marginile textului care "curge" pe lînga aceasta. Elementul care determina modul în care o va face este BR.

Fie urmatoarea situatie, în care avem alaturate o imagine si un text care are o linie terminata cu BR:

********* -------

| | -------

| image | --<BR>

| |

*********

Elementul BR are ca efect inserarea în punctul în care apare a unei noi linii. Dar, prin valoarile pe care le poate lua atributul sau clear determina si modul în care se va afisa si textul în continuare (unde va apare noua linie de text dupa acest element). Valorile pe care le poate lua clear sînt:

clear = none|left|right|all

Semnificatia fiecarei valori este:

none: Noua linie va începe normal. Este valoarea implicita. În acest caz, pentru situatia din figura de mai sus, noua linie (marcata cu semne +) va începe imediat sub cea intrerupta, la marginea din dreapta a imaginii:

********* -------

| | -------

| image | --<BR>

| | +++++++

*********

left: Noua linie va începe în prima pozitie disponibila SUB obiectul flotant, la marginea din stînga. În acest caz, pentru situatia din figura de mai sus, noua linie (marcata cu semne +) va începe sub imagine, de la marginea din stînga:

********* -------

| | -------

| image | --<BR clear="left">

| |

*********

++++++++++++++++++

right: Noua linie va începe în prima pozitie disponibila SUB obiectul flotant, la marginea din dreapta.

all: Noua linie va începe în prima pozitie disponibila SUB obiectul flotant, la oricare margine. În acest caz, pentru situatia din figura de mai sus, noua linie (marcata cu semne +) va începe asemanator situatiei clear=left:

********* -------

| | -------

| image | --<BR clear="all">

| |

*********

++++++++++++++++++

5. Includerea de "obiecte" generale (elementul OBJECT).

Începînd cu HTML 4.0 se restrînge utilizarea lui <IMG> pentru inserarea imaginilor, chiar daca ramîne permisa. Explicatia este data de încercarea de generalizare a procesului de inserare si a altor "obiecte" (cum sînt, de exemplu, appleturile) sub un singur tag: OBJECT. Pîna la HTML 4.0 fiecare tip de resursa ce se putea insera în paginile HTML îsi avea propriul tag.

Aceasta abordare introducea cîteva dezavantaje majore:

nu permitea extensii ale altor tipuri de resurse

fiecare tag nu se putea folosi decît cu acel tip de resursa (de exemplu o imagine se insera cu IMG, un applet cu APPLET, etc)

se introduceau probleme de accesibilitate, tagurile vechi neindicînd mai nimic despre resursa care se ingloba în pagina, browserul nefiind capabil sa determine daca poate sau nu sa prezinte resursa respectiva

Pentru a rezolva aceste probleme s-a introdus elementul OBJECT care ofera o solutie generala de inserare a unui obiect generic în paginile HTML. El permite specificarea tuturor caracteristicilor necesare pentru a fi prezentate de un browser: codul sursa, valori initiale, date necesare la executie. În acesta acceptiune termenul de "obiect" denota ceva ce se insereaza în pagina HTML si are ca sinonime: applet, plug-in, media handler, etc.

Astfel functionalitatea acestor taguri a fost preluata de noul tag, dupa schema prezentata în tabelul urmator:

Tabelul indica faptul ca fiecare tip de resursa ce poate fi inclusa are o solutie specifica si o solutie generala. Elementul generic OBJECT va servi si ca solutie pentru implementarea altor tipuri.

Sintaxa:

<OBJECT>...</OBJECT>

Atribute posibile:

DATA=URI (adresa de unde se încarca datele obiectului)

CLASSID=URI (locatia implementarii)

ARCHIVE=CDATA (fisierele archiva)

CODEBASE=URI (adresa de baza pentru CLASSID, DATA, ARCHIVE)

WIDTH=Length (latimea obiectului)

HEIGHT=Length (înaltimea obiectului)

NAME=CDATA (numele folosit la trimiterea unui formular)

USEMAP=URI (client-side image map)

TYPE=ContentType (tipul obiectului)

CODETYPE=ContentType (tipul codului)

STANDBY=Text (mesajul ce se va afisa în timpul încarcarii)

TABINDEX=NUMBER (pozitia în ordinea de parcurgere cu Tab)

DECLARE (obiectul nu se instantiaza)

ALIGN=[ top | middle | bottom | left | right ] (alinierea obiectului)

BORDER=Length (grosimea marginii)

HSPACE=Pixels (spatiu lasat orizontal)

VSPACE=Pixels (spatiu lasat vertical)

atribute comune

Contine:

elemente PARAM urmate de elemente de tip bloc si/sau elemente de tip inline

Continut în:

HEAD, elemente de tip inline, elemente de tip bloc, cu exceptia lui PRE

Descriere:

OBJECT intentioneaza sa înlocuiasca tagurile specifice IMG si APPLET, precum si tagurile "proprietare" EMBED si BGSOUND (definite de anumite browsere si suportate doar de ele!) care produc multe neajunsuri si erori. Cu el se includ imagini, clipuri video, appleturi Java, elemente VRML.

Aproape toate atributele tag-ului <IMG> se pot folosi si cu <OBJECT>. Modul de utilizare este identic. O descriere mai amanuntita este prezentata într-un paragraf anterior.