Introducerea Imaginilor in Documentele HTML
-
Upload
narcis-nedelea -
Category
Documents
-
view
265 -
download
0
Transcript of Introducerea Imaginilor in Documentele HTML
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
1/15
Indrumar laborator Anul I - Text preliminar
100
Aplicaia nr. 9
Introducerea imaginilor n documentele HTML
1. Scopul lucrriiStudenii vor nva cum sinsereze imagini, sunete i inregistrri video n
cadrul unei pagini Web, cum sfoloseascimaginile ca fond al paginii.
2. Inserarea unei imaginiiPentru a insera o imagine n cadrul unei pagini WEB se folosete eticheta
(de la image); nu este o etichet container. Pentru identificarea imaginiicare va fi inserat, se utilizeaz atributul src (source) al etichetei .Atributul src i comunicbrowserului numele i locaia imaginii care urmeaz sfie inserat. Valoarea acestui atribut este adresa URLa imaginii respective
Cnd imaginea se afln acelai director cu fiierul HTML- cel care facereferire la imagine, atunci adresa URLa imaginii este formatnumai din numelefiierului, inclusiv extensia.
Dac imaginea se afl ntr-un alt director, URL-ul imaginii trebuie
specificat fie prin adresa absolutfie prin cea relativ.Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint
Photographic Experts Group) i GIF(Graphics Interchange Format).Formatul GIFfolosete 256 de culori i este ideal pentru icon-uri, ilustraie
i animaie. Acest format utilizeaz o tehnologie special de comprimare carereduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin
reea. Prin procesul de comprimare se pstreaz toate caracteristicile imaginiioriginale. Datoritnumrului redus de culori, formatul GIFnu este potrivit pentrufotografii sau imaginii de calitate nalt. Pentru acest tip de imagini cel mai adecvateste formatul JPEG.
EXEMPLUL ISe insereaz ntr-o pagin dou imagini, una dintre ele aflndu-se n acelai
folder cu prima surs, iar cealalt n folderulImagini.
imagini 1
Introducerea imaginilor n pagin
Imagini aflate n acelai folder
Imagini aflate n folderul Imagini
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
2/15
Indrumar laborator Anul I - Text preliminar
101
Dup introducerea textului ndocumentul HTML se salveaz cu numeleimagini.html. Se deschide InternetExplorer, din meniul su se deschidefereastra FileOpenBrowsese alegeimagini.htmlOpense deschide paginaWeb pentru a vedea cum arat.
Atributul src specific locaiaimaginii.
Atributul border al etichetei este folosit pentru a plasa un chenarn jurul imaginii. Valoarea atributului estedat de numrul de pixeli care reprezint
grosimea chenarului din jurul imaginii.Setarea atributului la valoarea 0 sau absena
atributului face ca acest chenar snu fie present.Atributul altpermite afiarea unui text explicativ n spaiul n care va fi
afiatimaginea n pagin.Dimensionarea imaginii se realizeazcu ajutorul atributelor width prin
care se stabilete limea imaginii i height prin care se stabilete nlimeaimaginii. Nu sunt obligatorii, ns utilizarea lor este recomandat deoarece vareduce timpul de procesare a paginii web de ctre browser.
hspace, vspace specificspaiul care va fi pstrat n jurul unei imaginiEXEMPLUL II
Se insereazntr-o pagino imagine care se afln acelai folder cu sursa, iar n
spaiul n care se aflimaginea se introduce un text explicativ.
imagini 2
Atributul Alt
Acesta este un urs panda
Cea de-a doua imagine inclus n
document nu este afiat. S-a omis intenionatextensia .GIFpentru a nelege mai bine rolul luialt. Deci, dacdintr-un motiv oarecare, imagineanu se ncarcn pagin, se ncarcmai greu, sau
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
3/15
Indrumar laborator Anul I - Text preliminar
102
este vizualizatcu un browser care nu suportgrafica, n zona rezervat imaginii
va fi afiat textul specificat ca valoarea a atributului alt. Textul va fi afiat n cadrulunei mici ferestre care se deschide n momentul cnd cursorul mouse-ului estemeninut deasupra imaginii.
EXEMPLUL IISe insereaz ntr-o pagino imagine care se afl n acelai folder cu sursa. Aici
sunt precizate dimensiunile imaginii
imagini 3
Dimensionarea imaginilor
Includerea dimensiunilor imaginii ofer browserului posibilitatea de arezerva spaiu pentru imagine i de a ncepe rencrcarea textului simultan cuncrcarea imaginii. Dacatributele de dimensionare nu sunt prezente, browserulva efectua nite pai suplimentari pentru a calcula spaiul din pagin necesarafirii imaginii. Din acest motiv afiarea textului nu va putea ncepe dect dupceimaginea este ncrcatn ntregime.
Trebuie evitato asemenea situaie deoarece imaginile se ncarcmai greudect textul i muli vizitatori ai paginii nu vor atepta ca ntreaga pagin s fiencrcat.
2.1. Alinierea imaginii i textuluiImaginea n raport cu textul se aliniaz cu ajutorul atributului align, care
poate lua urmtoarele valori:
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
4/15
Indrumar laborator Anul I - Text preliminar
103
-
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 aimaginii, ncadrnd imaginea
-
top- alinierea se face deasupra; partea de sus a imaginii se alineazcuprima linie a textului ce precede imaginea
-
middle - alinierea se face la mijloc; mijlocul imaginii se alineaz cuprima linie a textului ce precede imaginea
-
bottom- alinierea se face la baz; partea de jos a imaginii se alineazcuprima linie a textului ce precede imaginea.
EXEMPLUL III
imagini 4
Alinierea imaginii cu bottom
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.
EXEMPLUL IV
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
5/15
Indrumar laborator Anul I - Text preliminar
104
imagini 5
Alinierea imaginii cu left
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.
EXEMPLUL V
imagini 5
Alinierea imaginii cu right
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.
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
6/15
Indrumar laborator Anul I - Text preliminar
105
EXEMPLUL VI
imagini 6
Alinierea imaginii cu top
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 maifrumoase 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.
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
7/15
Indrumar laborator Anul I - Text preliminar
106
EXEMPLUL VII
imagini 7
Alinierea imaginii cu middle
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.
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
8/15
Indrumar laborator Anul I - Text preliminar
107
Alte atribute care servesc la alinierea imaginii fa de restul elementelordin paginsunt:- hspace distana n pixeli pe orizontal-
vspace distana n pixeli pe vertical.
EXEMPLUL VIII
imagini 7
Folosirea atributelor vspace i hspace
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.
Alinierea unei imagini la centrulpaginii se poate realiza numai dac esteizolat de textul care o nconjoar. Pentruaceasta se folosete eticheta sau se poate include imaginea ntr-un blocparagraph sau ntr-un bloc avnd
atributul alignsetat la valoarea center.
EXEMPLUL IX
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
9/15
Indrumar laborator Anul I - Text preliminar
108
imagini 9
Alinierea la centru a imaginii 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 esteuna dintre cele mai frumoase flori. Trandafirul meu este roz. Trandafirii pot fi de mai
multe culori, si anume:galbeni, rosii, albi etc.
EXEMPLUL X
imagini 10
Alinierea a dou imaginii
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
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
10/15
Indrumar laborator Anul I - Text preliminar
109
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.
2.2. Imagini folosite ca fond
(background) al paginii
Imagine poate fi folositi pentrua stabili fondul unei pagini Web utilizndatributul background al etichetei, avnd ca valoare adresa URL aimaginii. Imaginea se multiplic aliniat(tiling) pe orizontal i pe vertical pnumple ecranul
EXEMPLUL XI
imagini 11
Fondul este format din mai multe imagini cu trandafiri obinute prinmultiplicarea unei singure imagini aliniat pe orizontali pe verticalpnumple ntrgulecran
2.3. Imagini folosite ca legturi.
Pentru a folosi o imagine dreptlegturse utilizeazeticheta prin care
se creaz o legtur cu fiierulgalben.html. ntre etichetele i seinclude imaginea care nlocuiete textulexplicativ pe care vizitatorul urmeaz s
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
11/15
Indrumar laborator Anul I - Text preliminar
110
fac clic cu mouse-ul., deci imaginea este o legtur ctre o alt pagin Web.
Imaginea folositca legtureste .EXEMPLUL XII
Se creazun document HTML cu numele de galben.html
imagini 12
Pagina care va fi apelatprin legtura imagine Back
Se creazun document HTML cu numele de trandafir.html
imagini 13
Imagini cu legturi
Pe paginse aflo imagine cu legtur2.4. Imagini miniaturale (thumbnails)
O imagine miniaturaleste o versiune de dimensiuni reduse a unei imaginimai mari, care se ncarc mult mai rapid. Aceast imagine reprezint o legturspre fiierul cu imaginea originaldin care provine.
Pentru a plasa o imagine miniatural n pagina Web se folosesc doumetode:
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
12/15
Indrumar laborator Anul I - Text preliminar
111
se folosesc dou imagini, una fiind imaginea miniatural, iar cealalt
fiind imaginea original;EXEMPLUL XIII
Se creazun document HTML cu numele de miniatura.html
imagini 15
Pagina pe care se aflminiatura
Se creazun document HTML cu numele de pozamare.html
imagini 14
Pagina pe care se aflpoza mare
Back
se folosete o singur imagine, redimensionat (micorat) direct npagin.
EXEMPLUL XIVSe creazun document HTML cu numele de miniatura.html
imagini 16
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
13/15
Indrumar laborator Anul I - Text preliminar
112
Pagina pe care se aflo singurimagine
2.5. Introducerea nregistrrilor video n pagina Web
Imaginea video poate fi inserat ntr-un document HTML folosindatributele dynsrc, controls, loopi start ale etichetei .
Atributul dynsrc nlocuiete atributul src i permite inserarea ndocumentul HTML a unei imagini video n acelai mod n care este inserat oimagine static. Atributul dynsrcva primi ca valoare adresa URLa fiierului videocare va fi inclus n paginconform sintaxei:
sau
Formatul de fiiere video care este suportat de extensiile Internet Explorereste AVI (Audio Video Interleave), deoarece acesta este formatul de redare careeste inclus n browser. Pentru cnici un alt browser n afarde Internet Explorer nu
recunoate aceast extensie, este recomandat s se includ n cadrul eticheteii atributul srcprin care se furnizeazo imagine staticcare va fi afiatnacelai cadru.
Browserele care nu recunosc atributul dynsrcvor afia imaginea staticpecnd Internet Explorer va afia imaginea video.
Internet Explorer redclipul video ntr-o fereastr n care nu sunt afiate
nici un fel de butoane de control. Pentru a aduga butone de control acestei ferestrese folosete atributul controlsal etichetei , atribut care nu primete nici ovaloare astfel:
Imaginea video inclus n pagina Web este redat o singur dat de
browser, de la nceput pnla sfrit. Pentru a repeta redarea clipului de un anumitnumr de ori este folosit atributul loop.
Atributul looppoate lua valorile:-
un numr ntreg care reprezintnumrul de reluri ale clipului;
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
14/15
Indrumar laborator Anul I - Text preliminar
113
-
infinite, caz n care imaginea video este redat pn cnd utilizatorul
stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare, cndfereastra conine butoane decontrol, sau dnd click pe butonul din dreapta almouse-ului n fereastra de vizualizare.
- Pentru schimbarea comportamentului de redare a imaginii video sefolosete atributul startcare primete valorile:
- mouseover derularea imaginii video ncepe n momentul cnd mouse-ul este plasat deasupra imaginii;
- fileopen derularea imaginii ncepe imediat dupncrcarea 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 combincele douvalori, astfel:
EXEMPLUL XVSe creazun document HTML
imagini video
Imagini video Pagina Web n care este inclus un videoclip
3. Introducerea sunetelor n pagina Web
Includerea unei muzici de fundal n pagina Web se face folosind eticheta, aceasta este o extensie Internet Explorer, deci nu este recunoscuti executatn alte browsere.
Browserul Internet Explorer conine un decodor de sunet ncorporat carepermite integrarea prin eticheta a sunetului de fundal pentru opagin.
Sintaxa etichetei este urmtoarea:
-
7/26/2019 Introducerea Imaginilor in Documentele HTML
15/15
Indrumar laborator Anul I - Text preliminar
114
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 .wavcare este formatul nativ pentru PC-
fiiere cu extensia .aucare este formatul nativ pentru sistemele UNIX- fiiere cu extensia .midi, care este un format universal acceptat pentru
codificarea sunetelorPentru a include ntr-o pagin un fiier de sunet se procedeaz ca n
exemplul urmtor:
Ca i n cazul imaginilor video in line, fiierul de sunet este redat osingurdat, la ncrcarea paginii. Pentru redarea sa repetatse folosete atributulloopal etichetei care poate avea ca valori:
-
un numr ntreg, care reprezintnumrul de reluri ale piesei;
-
infinite, caz n care piesa muzical este reluat pn cnd utilizatorulprsete pagina sau nchide fereastra browserului.
EXEMPLUL XV
imagini sunet
Muzica de fundal
Muzica se va auzi pnse va nchide pagina
4. Desfurarea lucrrii
4.1. Se insereazo imagine n cadrul unei pagini Web.4.2.Se creazo legturctre o altpaginfolosind 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 .4.5. Se creaz o pagin Web n care o imagine este fondul paginii
(background).