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.