HTML 42

Introducerea imaginilor
Imaginile sunt stocate in fisiere cu diferite formate. Formatele acceptate de browsere pentru
imagini sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpg;
PNG (Portable Network Graphics) cu extensia .png;
BMP (BitMap) cu extensia .bmp;
XPM (X Pix Map) cu extensia .xmp;
TIFF (Tagged Image File Format) cu extensia .tif.
Tagul <img> permite introducerea unei imagini intr-o pagina web (img provine de la image=imagine).
Atributele acestei etichete sunt:
src (de la source=sursa) permite identificarea imaginii ce va fi inserata. Valoarea atributului este
adresa URL (Uniform Resource Locator = identificator uniform al resursei) a imaginii.
Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la aceasta, atunci calea
URL a imaginii este formata numai din numele imaginii si extensia acesteia.
width permite redimensionarea latimii imaginii. Poate lua ca valori un numar de pixeli.
height permite redimensionarea inaltimii imaginii. Poate lua ca valori un numar de pixeli.
alt permite afisarea unui text care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost
gasita.
border adauga un chenar in jurul imaginii.
Exemplu:
<img src=butterfly.jpg border=2>
<img src=butterfly.jpg style=border: 5px solid red>
align determina alinierea imaginii. Poate lua valorile:
- left aliniere la stanga, celelalte componente sunt dispuse in partea dreapta;
- right aliniere la dreapta, celelalte componente sunt dispuse in partea stanga;
- top - aliniere deasupra, partea de sus a imaginii se aliniaza cu partea de sus a textului ce
precede imaginea;
- middle aliniere la mijloc, mijlocul imaginii se aliniaza cu linia de baza a textului ce precede
imaginea;
- bottom aliniere la baza, partea de jos a imaginii se aliniaza cu linia de baza a textului.
hspace stabileste distanta minima intre imagine si celelalte obiecte pe orizontala

vspace stabileste distanta minima intre imagine si celelalte obiecte pe verticala.
Exemplu: <img src=butterfly.jpg hspace=20 vspace=50>.
Pentru stabilirea distantei dintre imagine si celelalte obiecte se poate utiliza si varianta CSS:
<img src=butterfly.jpg style=margin: 0px 50px> imaginea va avea 50 de pixeli distanta fata de
obiectele din stanga si dreapta
<img src=butterfly.jpg style=margin: 50px 0px> imaginea va avea 50 de pixeli distanta fata de
obiectele de deasupra, respectiv din partea de jos.
Daca se doresc margini diferite se pot utilizaza urmatoarele directive: margin-top, margin-left, margin-
right, margin-bottom.
Exemplu: <img src=butterfly.jpg style=margin-top: 50px; margin-right: 40px; margin-left: 30px;
margin-bottom: 20px;>
Introducerea unei imagini ca fundal al paginii:

Eticheta <body> va avea atributul background. Aceasta ia ca valoare adresa URL a imaginii:
<body background=butterfly.jpg>.
Varianta CSS: <body style=background-image:url(butterfly.jpg)>.
Fisa de lucru
Realizati aplicatiile urmatoare utilizand o poza descarcata de pe Internet sau din calculator.
Aplicatia 1.
<html>
<head>
<title> Imagine cu chenar marit</title>
</head>
<body>
Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>. 
Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height. 
<img src="nume_imagine.extensie" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>
Aplicatia 2
<html>
<head>
<title> Alinierea unei imagini</title>
</head>
<body>
Alinieri:
 Pe verticala:
<img src=" nume_imagine.extensie " align="top">
La mijloc: <img src=" nume_imagine.extensie " align="middle">
Jos: <img src=" nume_imagine.extensie " align="bottom"> Text dupa imagine.
</body>
</html>
Aplicatia 3
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background=" nume_imagine.extensie ">
O imagine poate fi utilizat pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul
background al etichetei <body>, avnd ca valoare adresa URL a imaginii. 
Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran. </body>
</html>

HTML 42

Încărcat de

Informații document

Titlu original

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?

Drepturi de autor:

Formate disponibile

HTML 42

Încărcat de

Drepturi de autor:

Formate disponibile

Introducerea imaginilor

hspace stabileste distanta minima intre imagine si celelalte obiecte pe orizontala

Introducerea unei imagini ca fundal al paginii:

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