Capitolul 6

<IMG>
Image Maps (hărţi de imagine)
<MAP>
In-line Video
<IMG DYNSRC>
In-line Sound
<BGSOUND>
In-line VRLM worlds
<EMBED>
Plug-in-ul SOUND
Plug-in-ul VIDEO
Plug-in-ul VRLM (Live 3D)
<NOEMBED>...</NOEMBED>
Exerciţii

<IMG> (Image)

Marcajul este utilizat pentru inserarea în pagina web a unei imagini şi are sintaxa următoare:

Tips & Tricks:

După cum am mai precizat, formatele de imagine acceptate de limbajul HTML sunt .jpg şi .gif (inclusiv gif animat, dar browser-ele din generaţii recente acceptă şi alte formate); imaginile în aceste formate sunt compresate (fără o pierdere sesizabilă de calitate faţă de original), asigurând deci timpi de încărcare sensibil mai mici. Utilitarele de vizualizare şi / sau editare a imaginilor pot realiza conversia din formatul original în gif sau jpg: deschideţi imaginea (Open...), apoi salvaţi-o în formatul dorit (File-Save As... sau, dacă există, alegeţi din meniuri o opţiune de genul Convert)

Exemplul 6.1
Exemplul 6.2
Alegeţi formatul imaginii în funcţie de necesităţi: .jpg suportă 16,7 milioane culori şi rate de compresie de până la 1/10 (cu diminuarea proporţională a calităţii), fiind recomandat pentru fotografii, iar .gif doar 256 culori, dar pentru acest format se pot seta culori sau fundaluri transparente, fiind utilizat de obicei pentru butoane, bullets, backgrounds sau alte elemente grafice
Redimensionaţi imaginile pentru a obţine o încadrare mai bună în pagină şi pentru a accelera timpii lor de încărcare

Exemplul 6.3
În cazul în care imaginile nu se găsesc în acelaşi director cu pagina pe care o creaţi, trebuie să precizaţi calea către aceste imagini (vezi explicaţiile şi exemplele din capitolul 1, marcajul <BODY>, atributul BACKGROUND

Împreună cu marcajul <IMG> se mai pot folosi următoarele atribute:

WIDTH="x" specifică lăţimea de afişare a imaginii (în pixeli)
HEIGHT="x" specifică înălţimea de afişare a imaginii (în pixeli)

Dacă specificaţi pentru aceste opţiuni valori mai mari decât ale originalului, vor rezulta pierderi de calitate ale imaginii!

Exemplul 6.4 editaţi sursa acestei pagini şi observaţi rezultatele

BORDER="x" specifică grosimea chenarului imaginii (în pixeli)

Exemplul 6.5 editaţi sursa acestei pagini şi observaţi rezultatele

LOWSRC pentru a accelera procesul de încărcare a unei pagini ce conţine imagini, se poate folosi acest atribut astfel: pentru fiecare imagine se realizează două exemplare, unul cu rezoluţie scăzută (low resolution, respectiv calitate slabă), altul cu rezoluţie ridicată (high resolution, imagine de calitate bună. Folosirea atributului LOWSRC spune browser-ului să încarce întâi imaginea cu calitate slabă (dar care are dimensiuni mici şi se încarcă rapid) şi apoi, după încărcarea restului paginii, să o înlocuiască cu imaginea finală de bună calitate.

Exemplul 6.6 Tips & Tricks:

Tot în scopul accelerării încărcării paginilor ce conţin imagini, mai puteţi apela la următoarea metodă: includeţi în pagină imagini de dimensiuni mici, monocrome sau color, apoi realizaţi un link (o legătură, vezi capitolul 9) spre o altă pagină ce va afişa imaginea de dimensiune şi rezoluţie normală; realizarea link-urilor va fi prezentată în capitolul următor, dar puteţi observa modul de acţiune al acestei metode şi, dacă doriţi, sursa, în:

Exemplul 6.7
O altă metodă folosită de profesionişti este utilizarea imaginilor întreţesute (interlaced), un tip special de imagini care se afişează la rezoluţie joasă şi se clarifică treptat; astfel de imagini pot fi create în editoare de imagine care suportă această funcţie

Exemplul 6.8

ALT este un atribut care provoacă afişarea un mesaj atunci când vizitatorul poziţionează cursorul mouse-ului pe imagine

Exemplul 6.9

ALIGN realizează alinierea imaginii faţă de text sau alte elemente ale paginii, în funcţie de opţiunea aleasă:

LEFT aliniază imaginea în stânga ferestrei, iar textul se va alinia în dreapta imaginii

Exemplul 6.10

RIGHT aliniază imaginea în dreapta ferestrei, iar textul se va alinia în stânga imaginii

Exemplul 6.11 Tips & Tricks:

LEFT şi RIGHT sunt opţiuni pentru imagini "floating" (trad. aprox. "plutitoare") şi ar putea provoca probleme de formatare pentru textul ce însoţeşte imaginea; se pot elimina aceste probleme prin utilizarea marcajului <BR CLEAR="LEFT | RIGHT | ALL">

Exemplul 6.12

TOP aliniază imaginea la nivelul superior al textului

Exemplul 6.13

TEXTTOP aliniază imaginea la nivelul celui mai înalt item din linia de text; acţionează similar (dar nu întotdeauna) cu TOP

Exemplul 6.14

MIDDLE aliniază linia de bază a liniei de text curente cu mijlocul imaginii

Exemplul 6.15

ABSMIDDLE aliniază mijlocul liniei de text curente cu mijlocul imaginii

Exemplul 6.16

BOTTOM aliniază linia de bază a liniei de text curente cu josul imaginii

Exemplul 6.17

ABSBOTTOM aliniază imaginea cu cel mai jos item din linia de text

Exemplul 6.18

HSPACE="x" setează distanţa (în pixeli) pe orizontală între imagine şi textul însoţitor
VSPACE="x" setează distanţa (în pixeli) pe verticală între imagine şi textul însoţitor

Exemplul 6.19 editaţi sursa paginii şi observaţi modificările

ISMAP indică faptul că imaginea este hartă de imagini
USEMAP="#nume" utilizează harta de imagini indicată

Image Maps (hărţi de imagine)
<MAP>

Limbajul HTML permite definirea unei imagini ca hartă de imagini, ceea ce înseamnă că imaginea este declarată ca hartă şi pe ea sunt definite una sau mai multe regiuni cu care utilizatorul poate interacţiona. Paşii necesari pentru acest lucru sunt:

Se deschide imaginea într-un editor de imagini, pentru a i se putea determina dimensiunile orizontală şi verticală

Imaginea este definită în sursa paginii ca hartă şi primeşte un nume

Se definesc pe imagine numărul de zone dorite; dacă două zone se intersectează, prioritară în zona de intersecţie este cea care apare prima în definiţia regiunilor faţă de cea care se suprapune peste ea

AREA SHAPE="shape" COORDS="x,y,..." HREF="referinţă" | NOHREF

Forma zonelor (SHAPE) este implicit dreptunghiulară (SHAPE="RECT"); în acest caz, coordonatele se referă la colţul stânga-sus, apoi la colţul dreapta-jos. De exemplu, în cazul unei imagini cu dimensiunile 100x100 pentru care vrem să definim o arie de mărimea imaginii, coordonatele vor fi COORDS="0,0,99,99".
Se pot defini şi zone cu alte forme decât cea dreptunghiulară, de exemplu:

AREA SHAPE="CIRCLE" COORDS="50,50,20" (disc cu centrul în 50,50 şi raza 20)
AREA SHAPE="POLY" COORDS="10,80,50,10,90,90" (poligon, în cazul de faţă triunghi, cu vârfurile în punctele (10,80), (50,10) şi (90,90)

Fiecărei zone i se poate asocia o referinţă, un link către o altă pagină sau fişier (atributul HREF); dacă nu dorim o astfel de referinţă, folosim atributul NOHREF.

Utilizarea unei hărţi de imagini se face cu atributul USEMAP:

Se observă că referirea la hartă se face folosind numele dat în definiţia hărţii

Exemplul 6.20 area shape-uri
Exemplul 6.21 observaţi modul de acţiune şi analizaţi sursa paginii In-line Video

Una dintre cele mai spectaculoase posibilităţi oferite de limbajul HTML este includerea în pagini ale unor video-clipuri în format .avi. Atributul folosit pentru aceasta alături de tag-ul <IMG> este DYNSRC="videoclip.avi", iar atributul START="FILEOPEN | MOUSEOVER" stabileşte modul de pornire al video-clipului (la deschiderea paginii sau la trecerea cu cursorul mouse-ului peste prima imagine (statică) a video-clipului

Exemplul 6.22 editaţi sursa paginii şi observaţi modificările In-line Sound

<BGSOUND>

Deşi tag-ul <BGSOUND> nu are legătură cu imaginile, sunetele sunt o componentă esenţială a noţiunii de "multimedia"; acest marcaj permite setarea unui fişier audio ca fundal sonor şi acceptă atributele:

SRC="numefişier.extensie" indică locaţia fişierului
LOOP="n" indică de câte ori va fi executat fişierul (implicit INFINITE (-1))

Tipurile de fişiere audio acceptate de limbajul HTML sunt: .wav, .mid, .au, .aiff

Exemplul 6.23 In-line VRLM worlds

Limbajul HTML poate comunica cu limbajul VRLM (Virtual Reality Markup Language, limbaj de descriere a lumilor virtuale) prin intermediul atributului VRLM:

Astfel pot fi introduse în paginile web lumi VRLM

Tips & Tricks:

Veţi găsi multe asemănări între utilizarea marcajelor "in-line" prezentate anterior şi efectele obţinute prin marcajul <EMBED>
După cum vă amintiţi din capitolele anterioare, imaginile pot fi folosite pentru a înlocui linii orizontale (tag-ul <HR>, capitolul 3) sau bullets (pentru liste neordonate, capitolul 4); puteţi studia modul de utilizare studiind sursele exemplelor următoare:

Exemplul 6.24
Exemplul 6.25
O altă aplicaţie interesantă constă în crearea de "rollover"-e, imagini care se schimbă la trecerea cu mouse-ul peste ele; acest efect se poate obţine utilizând sintaxa următoare:

<A HREF="pagina.html"
onmouseOver="document.images[0].src='imagine2.gif'"
onmouseOut="document.images[0].src='imagine1.gif'">
<IMG SRC="imagine1.gif"></A>, unde:

pagina.html=pagina spre care e direcţionat link-ul
imagine1.gif=imaginea afişată iniţial
imagine2.gif=imaginea afişată la trecerea cursorului mouse-ului

Evident, extensiile din exemplu pot fi şi .htm, .jpg, .ico sau alte formate suportate
În cazul în care includeţi în pagină mai multe rollover-e, ele vor fi căutate prin expresiile: document.images[0].src, document.images[1].src,... în ordinea apariţiei imaginilor în pagină

Exemplul 6.26
Ca o extindere a noţiunii de rollover, analizaţi sursa paginii următoare unde apare un meniu ilustrat:

Exemplul 6.27

<EMBED>

Acest marcaj permite includerea, încapsularea unor obiecte direct în paginile html. Sintaxa de bază este:

unde "URL" reprezintă adresa obiectului încapsulat. Tag-ul <EMBED> se utilizează de fapt pentru a încapsula obiecte ce vor fi manipulate în conjuncţie cu module plug-in; acestea sunt module dinamice de cod care extind capabilităţile browser-ului furnizând cod care poate manipula tipuri de date pentru care browser-ul nu are funcţii interne de manipulare. Atunci când browser-ul întâlneşte în documentul html date pe care nu le poate manipula, caută un modul plug-in care poate manipula astfel de date, îl încarcă şi permite astfel vizualizarea sau alte transformări posibile ale obiectului. Browser-ele actuale sunt livrate cu unele plug-in-uri incluse, altele pot fi instalate după necesităţi; posibilele atribute sunt dependente de plug-in, deci căutaţi documentaţie pe Internet dacă doriţi să folosiţi plug-in-uri ne-standard. Dintre plug-in-urile standard, putem aminti:

Plug-in-ul SOUND

Acest plug-n poate fi utilizat pentru utilizarea fişierelor de sunet încapsulate, de tip .wav, .mid, .au, .aiff. Atunci când un astfel de fişier este încapsulat, este afişat un panou de control simplu cu opţiunile Play, Stop, Pause, Volume; acesta poate fi afişat folosind atributele standard pentru marcajul <IMG>: ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE, BORDER. Plug-in-ul are sintaxa:

şi acceptă de asemenea atribute adiţionale:

AUTOSTART="TRUE | FALSE" fişierul este / nu este rulat la deschiderea paginii, după încărcarea acesteia
VOLUME="x | %" setează valoarea iniţială a volumului sunetului (implicit 50%)

Exemplul 6.28 Plug-in-ul VIDEO

Permite încapsularea video-clip-urilor .avi, cu sintaxa:

afişarea ferestrei de vizualizare acceptă atributele standard ale tag-ului <IMG> şi acceptă de asemenea atribute adiţionale:

AUTOSTART="TRUE | FALSE" implicit, este afişată fereastra de redare a video-clip-ului încapsulat, iar acesta este rulat atunci când utilizatorul dă click în fereastra de redare; introducând acest atribut, fişierul este rulat la deschiderea paginii, de îndată ce aceasta este încărcată
LOOP="TRUE | FALSE" video-clip-ul este rulat continuu; un click dreapta va afişa un meniu de control

Exemplul 6.29 Plug-in-ul VRLM (Live 3D)

Permite încapsularea unor lumi VRLM (.wrl) în documentele html, cu sintaxa

şi acceptă atributele standard ale tag-ului <IMG>, precum şi numeroase opţiuni de afişare şi reglaje accesibile într-un meniu de control ce apare când se dă click dreapta pe "lumea" încapsulată

Exemplul 6.30
Exemplul 6.31
Exemplul 6.32

<NOEMBED>...</NOEMBED> indică faptul că utilizarea obiectelor încapsulate nu este suportată sau permisă (vezi sursa exemplului 6.30)

Exerciţii

Exerciţiul 6.1 Creaţi pagina img1.html, în care veţi afişa o imagine aflată în directorul curent şi o imagina aflată în alt director
Exerciţiul 6.2 Creaţi pagina img2.html, în care veţi afişa imagini în formatele .gif, .jpg, .png, .dib, .emf, .ico, .gif animat
Exerciţiul 6.3 Creaţi pagina img3.html, în care veţi afişa o imagine la dimensiunile normale, apoi aceeaşi imagine redimensionată cu ajutorul unui program specializat
Exerciţiul 6.4 Creaţi pagina img4.html, în care veţi afişa o imagine la dimensiunile normale, apoi aceeaşi imagine redimensionată cu ajutorul atributelor WIDTH şi HEIGHT
Exerciţiul 6.5 Creaţi pagina img5.html, în care veţi afişa o imagine cu şi fără chenar; afişaţi mesaje cu atributul ALT
Exerciţiul 6.6 Exemplificaţi în pagina img6.html toate valorile posibile ale atributului ALIGN
Exerciţiul 6.7 Exemplificaţi în pagina img7.html utilizarea atributelor HSPACE, VSPACE
Exerciţiul 6.8 În pagina img8.html, inseraţi 2 videoclipuri .avi, pornite cu FILEOPEN, respectiv MOUSEOVER
Exerciţiul 6.9 Realizaţi 4 pagini în care veţi utiliza <BGSOUND> cu fişiere .wav, .mid, .au, .aiff şi valori diferite pentru parametrul LOOP
Exerciţiul 6.10 După modelele din exemplele 6.26, 6.27 realizaţi un buton roll-over şi un meniu animat
Exerciţiul 6.11 Exemplificaţi modalităţile în care se poate folosi marcajul <EMBED>; utilizaţi toate valorile posibile pentru atributele specifice

Teste

Daca doriti eliminarea reclamelor, va rugam sa ne contactati.