IMAGINI SI ELEMENTE

MULTIMEDIA

27.10.10

IMAGINILE ŞI ELEMENTELE MULTIMEDIA

Imaginile şi elementele multimedia constituie, o latură interesantă şi spectaculoasă a oricărei pagini de Web. Puteţi include în paginile dumneavoastră fotografii, imagini animate, sunete sau imagini video. Atunci când sunt folosite, aceste elemente pot îmbogăţi conţinutul paginilor Web, oferindu-le un aspect atractiv şi profesional. Pe de altă parte, folosirea lor în exces poate da paginilor un aspect încărcat şi confuz şi poate conduce la mărirea considerabilă a timpului de încărcare al paginii.

Imaginile sunt stocate în fişiere cu diverse formate.

Formatele acceptate de browsere pentru fişierele 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 răspîndite formate sunt GIF (8biti pentru o culoare, 256

culori posibile) şi JPEG (24biti pentru o culoare, 16777216 de culori

posibile).

FORMATELE FIŞIERELOR GRAFICE

CÂTEVA METODE DE OBŢINERE A IMAGINILOR

Aveţi la îndemână diverse moduri în care puteţi crea imagini pe care să le includeţi în paginiledumneavoastră: Crearea imaginilor cu ajutorul unui program de grafică - cele mai performante sunt Adobe Photoshop

şi CorelDraw. Scanarea fotografiilor realizate cu aparate foto tradiţionale şi, eventual, prelucrarea lor ulterioară cu

editoare grafice. Folosirea aparatelor de fotografiat digitale - deşi sunt nişte echipamente încă destul de costisitoare

prezintă marele avantaj că furnizează imagini digitale sub formă de fişiere grafice în formate comune, care se pot descărca direct pe hard-disk, şi care se pot utiliza ca atare sau după o prelucrare grafică minimă.

Preluarea imaginilor de pe Web. Numărul site-urilor care oferă colecţii de imagini gratuite şi care pot fi utilizate liber este imens. Totuşi, atunci când doriţi să folosiţi în pagina dumneavoastră o imagine care nu face parte dintr-o astfel de colecţie, trebuie să aveţi în vedere aspectul drepturilor de autor. Pentru a prelua o imagine de pe Web trebuie să o salvaţi pe hard-disk-ul dumneavoastră. Puteţi realiza acest lucru astfel:

  plasaţi cursorul pe imaginea respectivă şi apăsaţi butonul drept al mouse-ului   selectaţi din meniul care se deschide Save Image As...  în fereastra de dialog selectaţi folderul de destinaţie şi numele fişierului apăsaţi butonul Save 

Este util să vă creaţi unul sau mai multe foldere dedicate imaginilor, organizate petipuri (icon, fundaluri, butoane, imagini propriu-zise, etc.), uneori alcătuind adevăratebiblioteci, în care să păstraţi toate imaginile pe care intenţionaţi să le folosiţi în

paginiledumneavoastră.

INSERAREA UNEI IMAGINIPentru 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ă corespunzătoare 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 locaţia imaginii care urmează să fie inserată. Valoarea acestui atribut este adresa URL a imaginii respective.

 Dacă imaginea se află în acelaşi director cu fişierul HTML care face referire

la imagine, atunci adresa URL a imaginii este formata numai din numele fişierului, 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 următoarele valori: ·    left - aliniere la stânga; textul este dispus în partea dreaptă a

imaginii încadrând imaginea·    right - aliniere la dreapta; textul este dispus în partea stânga a

imaginii încadrând 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 STÂNGA 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 foloseşte atributul background al etichetei <BODY>, având ca valoare adresa URL a imaginii. Imaginea se multiplică aliniat (tiling) pe orizontală şi pe verticală până 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 LEGĂTURI

Pentru a folosi o imagine drept legătura se procedează ca în următorul exemplu:

 <A href="tabel_culori.html">

<IMG src="prism.gif" width="100" height="80" alt="culori">

</A>

 S-a folosit eticheta <A> prin intermediul căreia am creat legătura cu fişierul tabel_culori.html. Între etichetele <A> şi </A> am inclus o imagine care înlocuieşte textul explicativ pe care vizitatorul urmează să facă click cu mouse-ul. Imaginea serveşte, deci, ca legătură către o anumită pagină. Imaginea folosită ca legătura este prism.gif iar pagina spre care este făcută legătura este tabel_culori.html. În mod prestabilit imaginea utilizată pe post de zonă activă este înconjurată de un chenar având culoarea unei legături (albastru). Dacă stabilim pentru atributul border al etichetei valoarea "0" acest chenar dispare.

IMAGINILE VIDEOPentru a insera o imagine video într-un document HTML se folosesc

atributele dynsrc, controls, loop şi start ale etichetei <IMG>.

Atributul dynsrc înlocuieşte atributul src şi permite inserarea în documentul HTML a unei imagini video în acelaşi mod în care este inserată o imagine statică.

Valoarea atributului dynsrc este adresa URL a fişierului video care va fi inclus în pagină conform sintaxei:

 

<IMG dynsrc="URL_fisier_video">

   <html> <body>

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

</body> </html>

FIŞIERE VIDEOSingurul format de fişiere video care este suportat de extensiile Internet Explorer

este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus în browser. Construcţia de mai jos include într-un document HTML fişierul video introducere.avi care se află în folderul Video:

 <IMG dynsrc="../Video/introducere.avi">

 Efectul acestei etichete este deschiderea de către 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 obişnuite, imaginea video este afişată pe măsură ce este încărcată.

 Deoarece nici un alt browser în afară de Internet Explorer nu recunoaşte această

extensie, este recomandat să includeţi în cadrul etichetei <IMG> şi atributul src prin care să furnizaţi o imagine statică ce va fi afişată în acelaşi cadru. Browserele care nu recunosc extensia dynsrc vor afişa imaginea statică pe când Internet Explorer va afişa 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 adăuga butoane de control acestei ferestre se utilizează

atributul controls al etichetei <IMG>. Atributul controls nu are alocată nici o valoare, prezenţa sa având doar scopul de a adăuga butoanele de control asemănătoare 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 până la sfârşit. Pentru a repeta redarea clipului de un anumit număr de ori este folosit atributul loop. Valorile posibile ale atributului sunt:

·    un număr întreg care reprezintă numărul de reluări ale clipului·    infinite, caz în care clipul este redat până când utilizatorul stopează

derularea sa apăsând butonul stop al ferestrei de vizualizare (în cazul când fereastra conţine 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">

Aşa cum am precizat, redarea imaginii video începe imediat ce aceasta a fost complet încărcată în pagină. Pentru a schimba acest comportament se foloseşte atributul start care poate avea valorile:

·         mouseover, situaţie în care derularea imaginii video începe în momentul când mouse-ul este plasat deasupra imaginii

·         fileopen, valoarea predefinită, situaţie în care derularea imaginii începe imediat după încărcarea în pagină

 Cele două valori pot fi combinate pentru a se realiza redarea imaginii

mai întâi imediat după încărcarea în pagină şi apoi de fiecare dată când mouse-ul este plasat deasupra ei, ca în exemplul următor:

 <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 spaţiată 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>

SUNETELEDacă eticheta <IMG> permite afişarea 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 conţine un decodor de sunet încorporat şi permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagină. Sintaxa etichetei <BGSOUND> este următoarea:

 <BGSOUND src="URL_fisier_sunet" loop="valoare">

ATRIBUTUL SRCAtributul src are drept valoare adresa URL a fişierului de sunet

care este folosit ca fundal sonor al paginii.

În mod curent, Internet Explorer recunoaşte trei tipuri de fişiere de sunet:

·   fişiere cu extensia .wav care este formatul nativ pentru PC

·   fişiere cu extensia .au, formatul nativ pentru sistemele UNIX

·   fişiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor

Pentru a include într-o pagină un fişier de sunet se procedează ca în exemplul următor:

<BGSOUND src="../Sunet/wellcome.wav>

ATRIBUTUL LOOPCa şi în cazul imaginilor video in-line, fişierul de

sunet este redat o singură dată, la încărcarea paginii. Pentru redarea sa repetată se foloseşte atributul loop al etichetei <BGSOUND> care poate avea ca valori:

 ·  un număr întreg, care reprezintă numărul de reluări ale piesei

·  infinite, caz în care piesa muzicală este reluată până când utilizatorul părăseşte pagina sau închide fereastra browserului.

EXECUTAŢI 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 fişierele grafice sunt JPEG şi GIF.

Inserarea unei imagini într-un document HTML se realizează cu ajutorul etichetei <IMG>.

Sintaxa etichetei <IMG> este următoarea: 

<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ă locaţia imaginii

·         width şi height stabilesc dimensiunile imaginii

·         vspace şi hspace stabilesc distanţa 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 stabileşte grosimea chenarului imaginii

·         dynsrc introduce o imagine video şi precizează locaţia ei

·         loop specifică numărul de reluări ale imaginii video

·         start precizează momentul începerii redării imaginii

·         controls afişează butoanele de control ale ferestrei video