Capitolul 4

Capitolul 7Imagini i elemente multimedia

Imaginile i elementele multimedia constituie, fr ndoial, 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 n mod judicios, 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.

1. Formatele fiierelor graficeImaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind, aa cum era firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului.

Aceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care depinde de dimensiunea acestora, devine un factor determinant.

Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts Group) i GIF (Graphics Interchange Format).

Formatul GIF

Formatul GIF (.gif) folosete 256 de culori i este ideal pentru icon-uri, ilustraii i animaie. Acest format utilizeaz o tehnologie special de comprimare care reduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin reea. n procesul de comprimare se pstreaz toate caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i originalul.

Imaginile GIF suport efecte de transparen, ntreesere i animaie, asupra crora vom reveni pe larg n capitolul Elemente avansate de grafic.

Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat n paginile Web. Poate fi folosit pentru a include imagini direct n pagini (imagini in-line) precum i pentru a referi imaginile prin intermediul unor legturi externe.

Totui, datorit numrului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG.

Formatul JPEG

Formatul JPEG (.jpg), pe de alt parte, suport un numr mult mai mare de culori (aproximativ 16 milioane). Dac dorii s folosii imagini fotografice, formatul JPEG este recomandat, datorit calitii superioare a imaginii. Dimensiunile unui fiier JPEG nu depind de numrul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat dect cel al formatului GIF. Nu este neobinuit, de exemplu, ca un fiier GIF care are 200 de Kb s fie comprimat ca fiier JPEG pn la dimensiunea de 30 de Kb.

Pentru a realiza un grad att de nalt de comprimare a imaginilor, formatul JPEG pierde anumite informaii din imaginea original. Cu toate c la decomprimare imaginea JPEG nu va fi absolut identic cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile.

Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii, desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea i decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. Din acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de culori, formatul GIF este cel mai potrivit.

2. Cteva metode de obinere a imaginilor Avei la ndemn diverse moduri n care putei crea sau procura 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 SaveEste 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. De asemenea, de mare utilitate sunt aplicaiile de gestionare a imaginilor, cum este de exemplu cunoscutul ACDSee.

Atenie!

Dac imaginea nu este salvat n acelai folder n care se afl documentul HTML surs care folosete imaginea respectiv, referina la imagine trebuie s conin calea corect ctre locaia ei, altminteri imaginea nu va fi afiat n pagin.

3. Inserarea unei imaginiPentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta (de la image). Eticheta 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 . 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.

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

Exemplul 7.1 ilustreaz modul n care se pot insera ntr-o pagin dou imagini, una dintre ele aflndu-se n acelai folder ca i pagina surs, iar cealalt n folderul Imagini. Figura 7.1 red aspectul paginii descrise n exemplu.Exemplul 7. 1

imagini1

Imagini in paginaImagine aflata in acelasi folder

Imagine aflata in folderul Imagini

n acest exemplu este prezent i atributul border al etichetei . Acesta este folosit pentru a plasa un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli care reprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0" face ca acest chenar s nu fie prezent.

Un alt atribut util asociat etichetei este alt. Acest atribut permite afiarea unui text explicativ n spaiul n care va fi afiat imaginea n pagin.

n Exemplul 7.2 este ilustrat utilitatea atributului alt.

Exemplul 7. 2

imagini2

Atributul alt Acesta este un...

Dup cum putei observa din Figura 7.2 imaginea pe care am inclus-o n document nu este afiat. Motivul este c am omis intenionat extensia .gif a fiierului pentru a exemplifica utilitatea atributului alt. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va fi afiat textul specificat ca valoare a atributului alt.

De asemenea, textul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide n momentul cnd cursorul mouse-ului este meninut deasupra imaginii.

Figura 7.3 red aspectul paginii n cazul cnd atributul src are valoarea corect: "orangerose.gif".

Un alt motiv pentru care este indicat folosirea atributului alt este acela c vizitatorul paginii are posibilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afia n zona respectiv. Astfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt pagin.

4. Dimensionarea imaginiiDimensionarea imaginii se realizeaz cu ajutorul atributelor width - prin care se stabilete limea imaginii i height - prin care se stabilete nlimea imaginii.

n Exemplul 7.3 sunt precizate i dimensiunile imaginii incluse n document. Se observ c dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta este considerat o practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slab.

Exemplul 7. 3

imagini3

Dimensionarea imaginilor

Observnd Figura 7.4 care red aspectul paginii descrise mai sus putem remarca faptul c setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale imaginii erau mai mici. Dimensiunile originale ale imaginii tiger.gif, determinate cu ajutorul unui editor grafic, sunt: lime=200 pixeli, nlime=125 pixeli.

Dac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. Concluzia care se impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de dimensiunile iniiale ale imaginilor.

V putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a imaginii. Nu numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul etichetei .

Motivul este acela c includerea dimensiunilor imaginii ofer browserului posibilitatea de a rezerva spaiu pentru imagine i de a ncepe ncrcarea textului simultan cu ncrcarea imaginii. Dac atributele de dimensionare nu sunt prezente, browserul va efectua nite pai suplimentari pentru a calcula spaiul din pagin necesar afirii imaginii. Din acest motiv afiarea textului nu va putea ncepe dect dup ce imaginea este ncrcat n ntregime.

Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect textul i muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin (imagini i text) s fie ncrcat.

5. 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.

Exemplul 7.4 ilustreaz modul de aliniere bottom, aa cum rezult din Figura 7.5.

Exemplul 7. 4

imagini4

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.

Figura 7.6 red modul de aliniere left iar Figura 7.7 modul de aliniere right.

Din Figura 7.8 i Figura 7.9 putei observa modurile de aliniere top i middle precum i faptul c aceste alinieri nu permit dispunerea textului n jurul imaginii.

Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributele hspace i vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin.

n Exemplul 7. 4 vom schimba modul de aliniere n cadrul etichetei i vom aduga atributele hspace, respectiv vspace, astfel:

Aspectul paginii va fi cel din Figura 7.10.

Ai observat, probabil, c dintre valorile pe care le poate lua atributul align lipsete valoarea center. ntr-adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul atributului align. Centrarea unei imagini se poate realiza numai dac este izolat de textul care o nconjoar. Pentru aceasta se poate folosi eticheta sau se poate include imaginea ntr-un bloc paragraf sau ntr-un bloc avnd atributul align setat la valoarea center.

Exemplul 7.5 ilustreaz acest mod de aliniere folosind eticheta aspectul paginii fiind cel din Figura 7.11.Exemplul 7. 5

imagini5

Centrarea unui imaginiImagine 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.

Exemplul 7.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin.

Din Figura 7.12 putei observa c, 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.

Exemplul 7. 6

imagini6

Alinierea a doua imagini

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.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.

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

Exemplul 7.7 ilustreaz utilizarea atributului background.

Exemplul 7. 7

imagini7

Imaginea ca fond al paginiiFond de matase...

Figura 7.13 red aspectul unei pagini care folosete ca fundal o imagine.

7. Imagini folosite ca legturiPentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu:

S-a folosit eticheta prin intermediul creia am creat legtura cu fiierul tabel_culori.html. ntre etichetele i 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.

Exemplul 7.8 prezint codul complet.

Exemplul 7. 8

imagini8

Imagini cu legaturi
Am pus o imagine cu legatura pe pagina

n Figura 7.14 putei observa modul n care funcioneaz imaginea folosit ca legtur n exemplul de mai sus.

8. Imaginile miniaturale (thumbnails)Dac ntr-o pagin Web este necesar afiarea unui numr mare de imagini, ncrcarea paginii se va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta ncrcarea integral a paginii.

O soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce prezint multe imagini o reprezint utilizarea imaginilor miniaturale (thumbnail-uri). O imagine thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai rapid i care, dei este de dimensiuni mici i de calitate sczut, permite vizitatorului s afle ce anume reprezint i s decid dac este interesat sau nu s deschid versiunea integral..

Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. n cazul n care vizitatorul paginii dorete s vad imaginea original, o poate deschide efectund click imaginea thumbnail.Realizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie prin reducerea lor la o dimensiune prestabilit (strech) chiar dac imaginea se distorsioneaz, n cazul n care se dorete, de pild, ca toate thumbnail-urile dintr-o pagin s aib aceleai dimensiuni.

Exist dou metode pentru a plasa o imagine thumbnail n pagin:

folosind dou imagini, una fiind imaginea thumbnail iar cealalt, imaginea original

folosind o singur imagine, redimensionat (micorat) direct n pagin

Folosirea a dou imagini

O imagine thumbnail este foarte uor de realizat. Oricare ar fi programul de grafic pe care l folosii, tot ceea ce avei de fcut este s gsii opiunea Resize (care de obicei face parte din meniul Edit sau Image) i s precizai n caseta de dialog care se deschide, dimensiunile dorite. Vei observa c exist de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. Dac este activat, dup stabilirea uneia dintre dimensiuni (width, de exemplu), cealalt (height) este calculat automat.

n Exemplul 7.9 este plasat o imagine thumbnail n pagin, folosind prima metod, Figura 7.15 ilustrnd funcionarea imaginii thumbnail.

Exemplul 7. 9

imagini9

Thumbnails - doua imagini

Fiierul zdog_th.gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi imaginea original, zdog.gif. Deoarece imaginea thumbnail este folosit ca o legtura ctre imaginea original, n jurul ei este afiat un chenar prestabilit albastru. Dac dorii ca acest chenar s nu mai fie afiat, putei folosi atributul border al etichetei setat la valoarea "0". Imaginea original se va deschide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. Pentru a reveni n pagin, trebuie s apsai butonul Back al browserului.

Folosirea unei singure imagini

Aceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine imaginea original, miniaturizarea ei fcndu-se chiar n pagin, cu ajutorul atributelor width i height. Este o metoda mai eficient i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz a fi afiat este deja ncrcat n memoria cache a browserului i este imediat disponibil pentru afiare.

n exemplul urmtor (Exemplul 7.10) am folosit o singur imagine pentru a ncrca att imaginea thumbnail ct i pe cea cu dimensiunile originale. Aspectul paginii este redat n Figura 7.16.

Exemplul 7. 10

imagini10

Thumbnails - o singura imagine

Dup cum se poate observa, am creat un link (cu ajutorul etichetei ) la fiierul zdog.gif care conine imaginea original. Am folosit drept legtur aceeai imagine, dar redimensionat, folosind atributele width i height.

n exemplul anterior, imaginea thumbnail este ncrcat prima. n momentul cnd vizitatorul face click pe ea, este ncrcat imaginea cu dimensiunile originale. Avantajul ultimei metode este faptul c imaginea este ncrcat de la nceput i redimensionat pentru thumbnail, ceea ce face ca afiarea imaginii cu dimensiunile originale s fie mai rapid.

9. Imaginile videoPentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc, controls, loop i start ale etichetei .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:

Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line ntr-un browser Netscape, vizitatorul paginii trebuie s instaleze un program auxiliar de tip plug-in. Dac programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afiat.

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:

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 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:

n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectund click dreapta cu mouse-ul n interiorul ferestrei.

Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei . 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:

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:

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:

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 7.11 ilustreaz atributele prezentate mai sus. Pagina va avea aspectul din Figura 7.17.

Exemplul 7. 11

imagini11

Imagini videoClipul video de mai jos face parte din jocul Heroes 3

10. SuneteleDac eticheta permite afiarea unei imagini de fundal, exist i o etichet care realizeaz includerea n pagina Web a unei muzici de fundal i anume eticheta . 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 a sunetului de fundal pentru o pagin. Sintaxa etichetei este urmtoarea:

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: