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


2/15


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


3/15


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:


4/15


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


5/15


104

imagini 5

Alinierea imaginii cu left








albi etc.

EXEMPLUL V

imagini 5

Alinierea imaginii cu right






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.


6/15


105

EXEMPLUL VI

imagini 6

Alinierea imaginii cu top




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



albi etc.


7/15


106

EXEMPLUL VII

imagini 7

Alinierea imaginii cu middle








albi etc.


8/15


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


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.

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


9/15


108

imagini 9

Alinierea la centru a imaginii Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este roz.


una dintre cele mai frumoase flori.


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




10/15


109

una dintre cele mai frumoase flori.


albi etc.Trandafirul este una dintre cele mai frumoase flori. Trandafirul meu este roz.



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


11/15


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 legtur

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


12/15


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


13/15


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;


14/15


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:


15/15


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

introducerea imaginilor in documentele html

Documents