IMAGINI SI

ELEMENTE
MULTIMEDIA

27.10.10

IMAGINILE I ELEMENTELE MULTIMEDIA

Imaginile

i elementele multimedia constituie, o latur interesant i spectaculoas a oricrei pagini de Web. Putei include n paginile dumneavoastr fotografii, imagini animate, sunete sau imagini video. Atunci cnd sunt folosite, aceste elemente pot mbogi coninutul paginilor Web, oferindu-le un aspect atractiv i profesional. Pe de alt parte, folosirea lor n exces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a timpului de ncrcare al paginii.

FORMATELE FIIERELOR GRAFICE

Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere pentru fiierele imagine sunt:
- GIF (Graphics Interchange Format) cu extensia .gif; - JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; - XPM (X PixMap) cu extensia .xmp; - XBM (X BitMap) cu extensia .xbm; - BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); - TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; Cele mai rspndite formate sunt GIF (8biti pentru o culoare, 256 culori posibile) i JPEG (24biti pentru o culoare, 16777216 de culori posibile).

CTEVA METODE DE OBINERE A IMAGINILOR

Avei la ndemn diverse moduri n care putei crea imagini pe care s le includei n paginile dumneavoastr: Crearea imaginilor cu ajutorul unui program de grafic - cele mai performante sunt Adobe Photoshop i CorelDraw. Scanarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor ulterioar cu editoare grafice. Folosirea aparatelor de fotografiat digitale - dei sunt nite echipamente nc destul de costisitoare prezint marele avantaj c furnizeaz imagini digitale sub form de fiiere grafice n formate comune, care se pot descrca direct pe hard-disk, i care se pot utiliza ca atare sau dup o prelucrare grafic minim. Preluarea imaginilor de pe Web. Numrul site-urilor care ofer colecii de imagini gratuite i care pot fi utilizate liber este imens. Totui, atunci cnd dorii s folosii n pagina dumneavoastr o imagine care nu face parte dintr-o astfel de colecie, trebuie s avei n vedere aspectul drepturilor de autor. Pentru a prelua o imagine de pe Web trebuie s o salvai pe hard-disk-ul dumneavoastr. Putei realiza acest lucru astfel: plasai cursorul pe imaginea respectiv i apsai butonul drept al mouse-ului selectai din meniul care se deschide Save Image As... n fereastra de dialog selectai folderul de destinaie i numele fiierului apsai butonul Save

Este util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri (icon, fundaluri, butoane, imagini propriu-zise, etc.), uneori alctuind adevrate biblioteci, n care s pstrai toate imaginile pe care intenionai s le folosii n paginile dumneavoastr.

INSERAREA UNEI IMAGINI

Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu necesit o etichet corespunztoare de nchidere.
Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care urmeaz s fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective. Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia. <IMG src="imagine.extensie">

Dac imaginea se afla ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ.

ALINIEREA IMAGINII I A TEXTULUI

Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributului align, care poate lua urmtoarele valori: left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede imaginea middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precede imaginea. bottom - aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului. Valorile left, right, i bottom ale atributului align permit ca textul s fie dispus n jurul imaginii, n vreme ce top i middle nu permit acest lucru.

EXEMPLU 1.
<HTML> <HEAD> <TITLE>imagini4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR> <IMG src="../Imagini/eaglehed.gif" align="bottom" width="100" height="66 > Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML>

EXEMPLUL 2 ILUSTREAZ UN MOD DE ALINIERE FOLOSIND ETICHETA <DIV>

<HTML> <HEAD> <TITLE>imagini5</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea unui imagini</H1><HR> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. <DIV align="center"> <IMG src="../Imagini/devil.gif" width="64" height="64" alt="dracusor"> </DIV> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML>

DAC ALINIEREA LA STNGA A IMAGINII MPREUN CU FOLOSIREA ATRIBUTELOR HSPACE I VSPACE CONDUCE LA UN ASPECT ORDONAT AL ELEMENTELOR, ASPECTUL TEXTULUI N RAPORT CU IMAGINEA ALINIAT LA DREAPTA DEPINDE DE DIMENSIUNEA FERESTREI BROWSERULUI

EXEMPLU 3
<HTML> <HEAD> <TITLE>imagini6</TITLE>

</HEAD>
<BODY> <H1 align="center">Alinierea a doua imagini</H1><HR> <IMG src="../Imagini/mtnscene.jpg" align="left" width="200" height="144" align="left" hspace="10" vspace="10"> Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. <IMG src="../Imagini/sunscene.jpg" align="right" width="202" height="132" hspace="10" vspace="10">

Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. </BODY>
</HTML>

IMAGINI FOLOSITE CA FOND (BACKGROUND) AL PAGINII

O imagine poate fi utilizat i pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul background al etichetei <BODY>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic aliniat (tiling) pe orizontal i pe vertical pn umple ntregul ecran.

HTML> <HEAD> <TITLE>imagini7</TITLE> </HEAD> <BODY background="../Imagini/silk.jpg"> <H1 align="center">Imaginea ca fond al paginii</H1><HR> Fond de matase... </BODY> </HTML>

IMAGINI FOLOSITE CA LEGTURI

Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu: <A href="tabel_culori.html"> <IMG src="prism.gif" width="100" height="80" alt="culori"> </A> S-a folosit eticheta <A> prin intermediul creia am creat legtura cu fiierul tabel_culori.html. ntre etichetele <A> i </A> am inclus o imagine care nlocuiete textul explicativ pe care vizitatorul urmeaz s fac click cu mouse-ul. Imaginea servete, deci, ca legtur ctre o anumit pagin. Imaginea folosit ca legtura este prism.gif iar pagina spre care este fcut legtura este tabel_culori.html. n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un chenar avnd culoarea unei legturi (albastru). Dac stabilim pentru atributul border al etichetei valoarea "0" acest chenar dispare.

IMAGINILE VIDEO
Pentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc, controls, loop i start ale etichetei <IMG>. Atributul dynsrc nlocuiete atributul src i permite inserarea n documentul HTML a unei imagini video n acelai mod n care este inserat o imagine static. Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n pagin conform sintaxei:
<IMG dynsrc="URL_fisier_video">
<html>

<body>

<blink><font size="5" >Animatie</font> </blink>

FIIERE VIDEO
Singurul format de fiiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus n browser. Construcia de mai jos include ntr-un document HTML fiierul video introducere.avi care se afl n folderul Video:
<IMG dynsrc="../Video/introducere.avi"> Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare n interiorul paginii Web, fereastr n care va rula clipul video introducere.avi, inclusiv sunetul, dac acesta face parte din clip i computerul vizitatorului este setat s redea sunetele. Ca i imaginile obinuite, imaginea video este afiat pe msur ce este ncrcat. Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, este recomandat s includei n cadrul etichetei <IMG> i atributul src prin care s furnizai o imagine static ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afia imaginea static pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele dou atribute nu are importan. De exemplu: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif">

FISIERE VIDEO
Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei <IMG>. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. De exemplu: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls>
Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit. Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Valorile posibile ale atributului sunt: un numr ntreg care reprezint numrul de reluri ale clipului infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare (n cazul cnd fereastra conine butoanele de control) sau efectueaz click dreapta cu mouse-ul n fereastra de vizualizare. Exemplul de mai jos ilustreaz modul n care poate fi setat atributul loop: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls loop="infinite">

Aa cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n pagin. Pentru a schimba acest comportament se folosete atributul start care poate avea valorile: mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse-ul este plasat deasupra imaginii fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n pagin Cele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup ncrcarea n pagin i apoi de fiecare dat cnd mouse-ul este plasat deasupra ei, ca n exemplul urmtor: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls loop="infinite" start="fileopen, mouseover"> Imaginile video in-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniat folosind atributul align, sau poate fi spaiat fa de textul care o nconjoar.

EXEMPLUL DE MAI JOS ILUSTREAZ ATRIBUTELE PREZENTATE MAI SUS.

Exemplu <HTML> <HEAD> <TITLE>imagini11</TITLE> </HEAD> <BODY> <H1 align="center">Imagini video</H1><HR> <FONT size="4" color="blue">Clipul video de mai jos face parte din jocul Heroes 3</FONT><P> <CENTER> <IMG dynsrc="../Video/shield.avi" src="../Imagini/banana.gif" controls start="fileopen, mouseover" loop="infinite"> </CENTER> </BODY> </HTML>

SUNETELE
Dac eticheta <IMG> permite afiarea unei imagini de fundal, exist i o etichet care realizeaz includerea n pagina Web a unei muzici de fundal i anume eticheta <BGSOUND>. Aceast etichet este, de asemenea, o extensie Internet Explorer deci nu este recunoscut i executat n alte browsere.

Browserul Internet Explorer conine un decodor de sunet ncorporat i permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagin. Sintaxa etichetei <BGSOUND> este urmtoarea:
<BGSOUND src="URL_fisier_sunet" loop="valoare">

ATRIBUTUL SRC
Atributul src are drept valoare adresa URL a fiierului de sunet care este folosit ca fundal sonor al paginii. n mod curent, Internet Explorer recunoate trei tipuri de fiiere de sunet: fiiere cu extensia .wav care este formatul nativ pentru PC fiiere cu extensia .au, formatul nativ pentru sistemele UNIX fiiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor Pentru a include ntr-o pagin un fiier de sunet se procedeaz ca n exemplul urmtor: <BGSOUND src="../Sunet/wellcome.wav>

ATRIBUTUL LOOP
Ca i n cazul imaginilor video in-line, fiierul de sunet este redat o singur dat, la ncrcarea paginii. Pentru redarea sa repetat se folosete atributul loop al etichetei <BGSOUND> care poate avea ca valori: un numr ntreg, care reprezint numrul de reluri ale piesei infinite, caz n care piesa muzical este reluat pn cnd utilizatorul prsete pagina sau nchide fereastra browserului.

EXECUTAI EXEMPLUL DE MAI JOS PENTRU A OBSERVA EFECTUL ETICHETEI <BGSOUND>.

Exemplu <HTML> <HEAD> <TITLE>imagini12</TITLE> </HEAD> <BODY> <H1 align="center">Muzica de fundal</H1><HR> <P><FONT size="4" color="red">Muzica se va auzi pana cand veti inchide pagina</FONT> <BGSOUND src="../Sunet/Welcom98.wav" loop="infinite"> </BODY> </HTML>

REZUMAT
Formatele cele mai utilizate pentru fiierele grafice sunt JPEG i GIF. Inserarea unei imagini ntr-un document HTML se realizeaz cu ajutorul etichetei <IMG>. Sintaxa etichetei <IMG> este urmtoarea: <IMG src="URL_imagine" align="pozitie" width="valoare" height="valoare" vspace="valoare" hspace="valoare" alt="text" border="valoare" dynsrc="URL_imagine_video" loop="valoare" start="valoare" controls> unde: src precizeaz locaia imaginii width i height stabilesc dimensiunile imaginii

vspace i hspace stabilesc distana pe vertical i orizontal fa de restul textului din pagin
align aliniaz imaginea fa de textul din jurul ei alt furnizeaz un text explicativ asupra imaginii border stabilete grosimea chenarului imaginii dynsrc introduce o imagine video i precizeaz locaia ei loop specific numrul de reluri ale imaginii video start precizeaz momentul nceperii redrii imaginii controls afieaz butoanele de control ale ferestrei video