Introducerea Imaginilor in Documentele HTML

Indrumar laborator Anul I - Text preliminar
Aplicaia nr. 9
Introducerea imaginilor n documentele HTML

1. Scopul lucrrii
Studenii vor nva cum s insereze imagini, sunete i inregistrri video n
cadrul unei pagini Web, cum s foloseasc imaginile ca fond al paginii.
2. Inserarea unei imaginii
Pentru a insera o imagine n cadrul unei pagini WEB se folosete eticheta
<IMG> (de la image); nu este o etichet container. Pentru identificarea imaginii
care va fi inserat, se utilizeaz atributul src (source) al etichetei <IMG>.
Atributul src i comunic browserului numele i locaia imaginii care urmeaz s
fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective
Cnd imaginea se afl n acelai director cu fiierul HTML - cel care face
referire la imagine, atunci adresa URL a imaginii este format numai din numele
fiierului, inclusiv extensia.
<IMG src=imagine.extensie>
Dac imaginea se afl ntr-un alt director, URL-ul imaginii trebuie
specificat fie prin adresa absolut fie prin cea relativ.
Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint
Photographic Experts Group) i GIF (Graphics Interchange Format).
Formatul GIF folosete 256 de culori i este ideal pentru icon-uri, ilustraie
i animaie. Acest format utilizeaz o tehnologie special de comprimare care
reduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin
reea. Prin procesul de comprimare se pstreaz toate caracteristicile imaginii
originale. Datorit numrului redus de culori, formatul GIF nu este potrivit pentru
fotografii sau imaginii de calitate nalt. Pentru acest tip de imagini cel mai adecvat
este formatul JPEG.
EXEMPLUL I
Se insereaz ntr-o pagin dou imagini, una dintre ele aflndu-se n acelai
folder cu prima surs, iar cealalt n folderul Imagini.
<HTML>
<HEAD>
<TITLE>imagini 1</TITLE>
</HEAD>
<BODY>
<H1 align = center>Introducerea imaginilor n pagin</H1><HR>
Imagini aflate n acelai folder<P>
<IMG src = red panda.jpg border = 6><P>
Imagini aflate n folderul Imagini<P>
<IMG src = D:/Student/Imagini/Big Grin.jpg border = 3>
</BODY>
100
</HTML>
Dup introducerea textului n

documentul HTML se salveaz cu numele
imagini.html.
Se
deschide
Internet
Explorer, din meniul su se deschide
fereastra FileOpenBrowsese alege
imagini.htmlOpense deschide pagina
Web pentru a vedea cum arat.
Atributul src specific locaia
imaginii.
Atributul border al etichetei
<IMG> este folosit pentru a plasa un chenar
n jurul imaginii. Valoarea atributului este
dat de numrul de pixeli care reprezint
grosimea chenarului din jurul imaginii.
Setarea atributului la valoarea 0 sau absena
atributului face ca acest chenar s nu fie present.
Atributul alt permite afiarea unui text explicativ n spaiul n care va fi
afiat imaginea n pagin.
Dimensionarea imaginii se realizeaz cu ajutorul atributelor width prin
care se stabilete limea imaginii i height prin care se stabilete nlimea
imaginii. Nu sunt obligatorii, ns utilizarea lor este recomandat deoarece va
reduce timpul de procesare a paginii web de ctre browser.
hspace, vspace specific spaiul care va fi pstrat n jurul unei imagini
EXEMPLUL II
Se insereaz ntr-o pagin o imagine care se afl n acelai folder cu sursa, iar n
spaiul n care se afl imaginea se introduce un text explicativ.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Atributul Alt</H1><HR>
Acesta este un urs panda<BR>
<IMG src = "urs panda.jpg" border =3 ><BR>
<IMG src = urs panda alt =ursule ><P>
</BODY>
</HTML>
Cea de-a doua imagine inclus n

document nu este afiat. S-a omis intenionat
extensia .GIF pentru a nelege mai bine rolul lui
alt. Deci, dac dintr-un motiv oarecare, imaginea
nu se ncarc n pagin, se ncarc mai greu, sau
101
este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii

va fi afiat textul specificat ca valoarea a atributului alt. Textul va fi afiat n cadrul
unei mici ferestre care se deschide n momentul cnd cursorul mouse-ului este
meninut deasupra imaginii.
EXEMPLUL II
Se insereaz ntr-o pagin o imagine care se afl n acelai folder cu sursa. Aici
sunt precizate dimensiunile imaginii
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Dimensionarea imaginilor </H1><HR>
<IMG src = "Red Panda.jpg" >
<IMG src = "Red Panda.jpg" width = 210 height = 140>
<IMG src = "ursulet alb.jpg" width = 280 height = 210 >
<IMG src = "ursulet alb.jpg" width = 310 height = 240 ><HR>
</BODY>
</HTML>
Includerea dimensiunilor imaginii ofer browserului posibilitatea de a

rezerva spaiu pentru imagine i de a ncepe rencrcarea 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.
Trebuie evitat o asemenea situaie deoarece imaginile se ncarc mai greu
dect textul i muli vizitatori ai paginii nu vor atepta ca ntreaga pagin s fie
ncrcat.
2.1. Alinierea imaginii i textului
Imaginea n raport cu textul se aliniaz cu ajutorul atributului align, care
poate lua urmtoarele valori:
102
- left alinierea se face la stnga; textul este pus n partea dreapt a

imaginii, ncadrnd imaginea
- right alinierea se face la dreapta; textul este pus n partea stng a
imaginii, ncadrnd imaginea
- top - alinierea se face deasupra; partea de sus a imaginii se alineaz cu
prima linie a textului ce precede imaginea
- middle - alinierea se face la mijloc; mijlocul imaginii se alineaz cu
prima linie a textului ce precede imaginea
- bottom - alinierea se face la baz; partea de jos a imaginii se alineaz cu
prima linie a textului ce precede imaginea.
EXEMPLUL III
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea imaginii cu bottom </H1><HR color=green
hight=100%>
<IMG src = "trandafir roz.jpg" align = "bottom" alt = "trandafir roz" >
Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este roz.
Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii, albi etc. Trandafirul este
una dintre cele mai frumoase flori. Trandafirul meu este roz. Trandafirii pot fi de mai
multe culori, si anume:galbeni, rosii, albi etc.Trandafirul este una dintre cele mai
frumoase flori. Trandafirul meu este roz. Trandafirii pot fi de mai multe culori, si
anume:galbeni, rosii, albi etc. Trandafirul este una dintre cele mai frumoase flori.
Trandafirul meu este roz. Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii,
albi etc.
<HR color=red width=100%>
</BODY>
</HTML>
EXEMPLUL IV
<HTML>
<HEAD>
103
</HEAD>
<BODY>
<H1 align = center>Alinierea imaginii cu left </H1><HR color=green hight=100%>
<IMG src = "trandafir roz.jpg" align = "left" alt = "trandafir roz" >
albi etc.
</BODY>
</HTML>
EXEMPLUL V
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea imaginii cu right </H1><HR color=green
hight=100%>
<IMG src = "trandafir roz.jpg" align = "right " alt = "trandafir roz" >
albi etc.
</BODY>
104
</HTML>
EXEMPLUL VI
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea imaginii cu top </H1><HR color=green hight=100%>
<IMG src = "trandafir roz.jpg" align = "top " alt = "trandafir roz" >
albi etc.
</BODY>
</HTML>
105
EXEMPLUL VII
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea imaginii cu middle </H1><HR color=green
hight=100%>
<IMG src = "trandafir roz.jpg" align = " middle" alt = "trandafir roz" >
albi etc.
</BODY>
</HTML>
106
Alte atribute care servesc la alinierea imaginii fa de restul elementelor

din pagin sunt:
- hspace distana n pixeli pe orizontal
- vspace distana n pixeli pe vertical.
<IMG src = "trandafir roz.jpg" align = "right" vspace =20 hspace = 20
alt = "trandafir roz">
EXEMPLUL VIII
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Folosirea atributelor vspace i hspace </H1><HR
color=green hight=100%>
<IMG src = "trandafir roz.jpg" align = "right" vspace =5000 hspace =
5000 alt = "trandafir roz">
Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii, albi etc.
Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii, albi
etc.Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este
roz. Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii, albi etc.
Trandafirii pot fi de mai multe culori, si anume:galbeni, rosii, albi etc.
</BODY>
</HTML>
Alinierea unei imagini la centrul
paginii se poate realiza numai dac este
izolat de textul care o nconjoar. Pentru
aceasta se folosete eticheta <CENTER>
sau se poate include imaginea ntr-un bloc
paragraph sau ntr-un bloc <DIV> avnd
atributul align setat la valoarea center.
EXEMPLUL IX
107
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea la centru a imaginii </H1><HR color=green
hight=100%>
una dintre cele mai frumoase flori.
<DIV align = center>
<IMG src = "trandafir roz.jpg" alt = "trandafir roz">
</DIV>
albi etc.Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este roz.
multe culori, si anume:galbeni, rosii, albi etc.
</BODY>
</HTML>
EXEMPLUL X
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center>Alinierea a dou imaginii </H1><HR color=green
hight=100%>
<IMG src=trgalbeni.jpg align=left width= 345 height=378
hspace=10
vspace=10>
108
una dintre cele mai frumoase flori.

<IMG src = "trandafiri roz.jpg" alt = "trandafir roz" align=right width=345
height=378 hspace=10 vspace=10>
albi etc.Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este roz.
multe culori, si anume:galbeni, rosii, albi etc.
</BODY>
</HTML>
2.2. Imagini folosite ca fond

(background) al paginii
Imagine poate fi folosit i pentru
a stabili fondul unei pagini Web utiliznd
atributul background al etichetei
<BODY>, avnd ca valoare adresa URL a
imaginii. Imaginea se multiplic aliniat
(tiling) pe orizontal i pe vertical pn
umple ecranul
EXEMPLUL XI
<HTML>
<HEAD>
</HEAD>
<BODY background=tralb.jpg>
<FONT size=20>Fondul este format din mai multe imagini cu trandafiri obinute prin
multiplicarea unei singure imagini aliniat pe orizontal i pe vertical pn umple ntrgul
ecran</FONT> </BODY>
</HTML>
2.3. Imagini folosite ca legturi.

Pentru a folosi o imagine drept
legtur se utilizeaz eticheta <A> prin care
se creaz o legtur cu fiierul
galben.html. ntre etichetele<A> i </A> se
include imaginea care nlocuiete textul
explicativ pe care vizitatorul urmeaz s
109
fac clic cu mouse-ul., deci imaginea este o legtur ctre o alt pagin Web.
Imaginea folosit ca legtur este .
EXEMPLUL XII
Se creaz un document HTML cu numele de galben.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center> Pagina care va fi apelat prin legtura imagine</H1><HR>
<IMG src=trosu.jpg> <HR>
<A href=trandafir.html><Font size=20><B>Back</B><FONT></A>
</BODY>
</HTML>
Se creaz un document HTML cu numele de trandafir.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center> Imagini cu legturi</H1><HR>
<BR><FONT size=15>Pe pagin se afl o imagine cu legtur<FONT><P>
<A href =galben.html>
<IMG src=trandafir.jpg>
</A>
</BODY>
</HTML>
2.4. Imagini miniaturale (thumbnails)

O imagine miniatural este o versiune de dimensiuni reduse a unei imagini
mai mari, care se ncarc mult mai rapid. Aceast imagine reprezint o legtur
spre fiierul cu imaginea original din care provine.
Pentru a plasa o imagine miniatural n pagina Web se folosesc dou
metode:
110
se folosesc dou imagini, una fiind imaginea miniatural, iar cealalt

fiind imaginea original;
EXEMPLUL XIII
Se creaz un document HTML cu numele de miniatura.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center> Pagina pe care se afl miniatura</H1><HR>
<A href =pozamare.html>
<IMG src=miniatura.jpg>
</A>
</BODY>
</HTML>
Se creaz un document HTML cu numele de pozamare.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align = center> Pagina pe care se afl poza mare</H1><HR>
<IMG src=trosu.jpg> <HR>
<A href=miniatura.html><Font size=20><B>Back</B><FONT></A>
</BODY>
</HTML>
pagin.
se folosete o singur imagine, redimensionat (micorat) direct n
EXEMPLUL XIV
Se creaz un document HTML cu numele de miniatura.html
<HTML>
<HEAD>
</HEAD>
<BODY>
111
<H1 align = center> Pagina pe care se afl o singur imagine</H1><HR>

<A href =trosu.jpg>
<IMG src=trosu.jpg width=70 height=53>
</A>
</BODY>
</HTML>
2.5. Introducerea nregistrrilor video n pagina Web

Imaginea video poate fi inserat ntr-un document HTML folosind
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. Atributul dynsrc va primi ca valoare adresa URL a fiierului video
care va fi inclus n pagin conform sintaxei:
<IMG dynsrc = fiier_video.avi> sau <IMG dynsrc=c:/video/
fiier_video.avi>
Formatul 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. Pentru c nici un alt browser n afar de Internet Explorer nu
recunoate aceast extensie, este recomandat s se includ n cadrul etichetei
<IMG> i atributul src prin care se furnizeaz o imagine static care va fi afiat n
acelai cadru.
Browserele care nu recunosc atributul dynsrc vor afia imaginea static pe
cnd Internet Explorer va afia imaginea video.
<IMG dynsrc = fiier_video.avi src = fiier_video.jpg>
Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate
nici un fel de butoane de control. Pentru a aduga butone de control acestei ferestre
se folosete atributul controls al etichetei <IMG>, atribut care nu primete nici o
valoare astfel:
<IMG dynsrc = fiier_video.avi src = fiier_video.jpg controls>
Imaginea video inclus n pagina Web este redat o singur dat de
browser, de la nceput pn la sfrit. Pentru a repeta redarea clipului de un anumit
numr de ori este folosit atributul loop.
Atributul loop poate lua valorile:
- un numr ntreg care reprezint numrul de reluri ale clipului;
112
- infinite, caz n care imaginea video este redat pn cnd utilizatorul

stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare, cnd
fereastra conine butoane decontrol, sau dnd click pe butonul din dreapta al
mouse-ului n fereastra de vizualizare.
<IMG dynsrc = fiier_video.avi src = fiier_video.jpg controls loop = infinite>
- Pentru schimbarea comportamentului de redare a imaginii video se
folosete atributul start care primete valorile:
- mouseover derularea imaginii video ncepe n momentul cnd mouseul este plasat deasupra imaginii;
- fileopen derularea imaginii ncepe imediat dup ncrcarea n pagin.
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 se combin
cele dou valori, astfel:
<IMG dynsrc = fiier_video.avi src = fiier_video.jpg controls loop = infinite
start = fileopen, mouseoven>
EXEMPLUL XV
Se creaz un document HTML
<HTML>
<HEAD>
<TITLE>imagini video</TITLE>
</HEAD>
<BODY>
<H1 align = center> Imagini video</H1><HR>
<FONT size = 6 color = blue> Pagina Web n care este inclus un videoclip</FONT><P>
<CENTER>
<IMG dynsrc = fiier_video.avi src = fiier_video.jpg controls loop = infinite
start = fileopen, mouseoven>
</CENTER>
</BODY>
</HTML>
3. Introducerea sunetelor n pagina Web

Includerea unei muzici de fundal n pagina Web se face folosind eticheta
<BGSOUND>, aceasta este o extensie Internet Explorer, deci nu este recunoscut
i executat n alte browsere.
Browserul Internet Explorer conine un decodor de sunet ncorporat care
permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o
pagin.
Sintaxa etichetei <BGSOUND> este urmtoarea:
<BGSOUND src=fiier sunet loop=valoare>
113
Atributul src are ca valoare adresa URL a fi;ierului de sunet care este
folosit ca fundal sonor al paginii.
Internet explorer recunoate trei tipuri de fiiere de sunet:
- fiiere cu extensia .wav care este formatul nativ pentru PC
- fiiere cu extensia .au care este formatul nativ pentru sistemele UNIX
- fiiere cu extensia .midi, care este 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/welcome.wav>
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.
EXEMPLUL XV
<HTML>
<HEAD>
<TITLE>imagini sunet</TITLE>
</HEAD>
<BODY>
<H1 align = center> Muzica de fundal</H1><HR>
<P><FONT size = 4 color = red> Muzica se va auzi pn se va nchide pagina</FONT>
<BGSOUND src = fiier_sunet..wav loop = infinite>
</BODY>
</HTML>
4. Desfurarea lucrrii
4.1. Se insereaz o imagine n cadrul unei pagini Web.
4.2. Se creaz o legtur ctre o alt pagin folosind o imagine.
4.3. Se introduc sunete n pagina Web.
4.4. Se insereaz o imagine video ntr-un document HTML, folosind
urmtoarele atribute: dynsrc, controls, loop i start ale etichetei <IMG>.
4.5. Se creaz o pagin Web n care o imagine este fondul paginii
(background).
114

Introducerea Imaginilor in Documentele HTML

Încărcat de

Informații document

Descriere:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Descriere:

Drepturi de autor:

Formate disponibile

Introducerea Imaginilor in Documentele HTML

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

Indrumar laborator Anul I - Text preliminar

Introducerea imaginilor n documentele HTML

Indrumar laborator Anul I - Text preliminar

Dup introducerea textului n

Cea de-a doua imagine inclus n

Indrumar laborator Anul I - Text preliminar

este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii

Includerea dimensiunilor imaginii ofer browserului posibilitatea de a

Indrumar laborator Anul I - Text preliminar

- left alinierea se face la stnga; textul este pus n partea dreapt a

Indrumar laborator Anul I - Text preliminar

Indrumar laborator Anul I - Text preliminar

Indrumar laborator Anul I - Text preliminar

Indrumar laborator Anul I - Text preliminar

Alte atribute care servesc la alinierea imaginii fa de restul elementelor

Indrumar laborator Anul I - Text preliminar

Indrumar laborator Anul I - Text preliminar

una dintre cele mai frumoase flori.

2.2. Imagini folosite ca fond

2.3. Imagini folosite ca legturi.

Indrumar laborator Anul I - Text preliminar

2.4. Imagini miniaturale (thumbnails)

Indrumar laborator Anul I - Text preliminar

se folosesc dou imagini, una fiind imaginea miniatural, iar cealalt

se folosete o singur imagine, redimensionat (micorat) direct n

Indrumar laborator Anul I - Text preliminar

<H1 align = center> Pagina pe care se afl o singur imagine</H1><HR>

2.5. Introducerea nregistrrilor video n pagina Web

Indrumar laborator Anul I - Text preliminar

- infinite, caz n care imaginea video este redat pn cnd utilizatorul

3. Introducerea sunetelor n pagina Web

Indrumar laborator Anul I - Text preliminar

S-ar putea să vă placă și