Imagini

Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <img>. Forma generală a acestui element este <img atribute>.

Observaţie! Acest tag nu are şi formă de închidere.

Atributele sale sunt:

1. atributul src identifică fişierul efectiv de pe disc, ce conţine imaginea respectivă. Dacă imaginea se află în directorul curent, se specifică doar numele şi extensia sa. Dacă se află într-un subdirector, acesta se specifică înaintea numelui şi extensiei imaginii, separat prin caracterul /. Imaginile recunoscute de majoritatea browser-elor internet sunt de tip .jpg, .gif, .png.

2. atributul alt="text" permite specificarea unui text alternativ ce va fi afişat fie dacă menţinem cursorul de mouse asupra imaginii, fie în locul imaginii propriu-zise, în cazul în care imaginea nu poate fi încărcată din cauza unei probleme de conexiune.

Exemplu

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine"/> imagine

imagini

3. atributul align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află. El poate lua următoarele valori:

3.1 right imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas liber, în stânga acesteia;

3.2 left imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas liber, în dreapta acesteia;

Exemplu: atributul align="left" şi align="right"

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine" align="left"/> imagine Acest text este aliniat în dreapta imaginii, deoarece am folosit atributul align="left" în momentul în care am inserat imaginea în pagina noastră web prin intermediul tag-ului src .
<img src="imagine.jpg" alt="imagine" align="right"/> imagine Acest text este aliniat în stânga imaginii, deoarece am folosit atributul align="right" în momentul în care am inserat imaginea în pagina noastră web prin intermediul tag-ului src .

3.3 top doar latura de sus a imaginii se aliniază cu rândul de text în cadrul căruia se află; următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;

3.4 middle rândul de text în cadrul căruia se află imaginea se aliniază la jumătatea înăţimii acesteia; următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;

3.5 bottom doar latura de jos a imaginii se aliniază cu rândul de text în cadrul căruia se află; următorul rând de text va fi afişat după imagine, ocupând întreaga lăţime a ecranului;


Exemplu: atributul align="top" align="middle" şi align="bottom"

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine" align="top"/> imagine Acest text este asezat inaintea imaginii Se observă că <img src="imagine.jpg" alt="imagine" align="top"/> doar primul rând al textului este aliniat cu latura de sus a imaginii, restul textului fiind afişat după imagine.
<img src="imagine.jpg" alt="imagine" align="middle"/> imagine Acest text este asezat inaintea imaginii Se observă că <img src="imagine.jpg" alt="imagine" align="middle"/> doar primul rând al textului este aliniat la jumătatea înălţimii imaginii, restul textului fiind afişat după imagine.
<img src="imagine.jpg" alt="imagine" align="bottom"/> imagine Acest text este asezat inaintea imaginii Se observă că <img src="imagine.jpg" alt="imagine" align="bottom"/> doar primul rând al textului este aliniat cu latura de jos a imaginii, restul textului fiind afişat după imagine.

imagini

4. Dacă dorim întreruperea unei alinieri de imagine de tip right sau left înainte ca textul să fi umplut spaţiul liber din stânga, respectiv dreapta acesteia, putem folosi tag-ul br, căruia îi adăugăm unul dintre atributele clear=”left” sau clear=”right”sau clear=”all”, după caz.


Exemplu: atributul align="left" împreună cu tag-ul <br clear="all">

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine" align="left"/>Acest text, aliniat în dreapta imaginii, îl întrerupem forţat AICI <br clear="all">În acest fel, restul textului se va alinia în mod obişnuit, sub imagine, restul spaţiului din dreapta rămânănd liber. imagine Acest text, aliniat în dreapta imaginii, îl întrerupem forţat AICI
 În acest fel, restul textului se va alinia în mod obişnuit, sub imagine, restul spaţiului din dreapta rămânănd liber.

5. atributele height şi width permit specificarea altor dimensiuni pentru imagine, decât cele reale ale acesteia. Evident, dacă dimensiunile nu sunt proporţionale cu cele reale, imaginea va fi deformată. Totodată, dacă specificăm dimensiuni mai mari decât cele reale, imaginea se va vedea mai puţin clar. În realitate, imaginea este transferată de pe server la dimensiunile sale originale, redimensionarea având loc doar la nivelul calculatorului pe care este vizualizată pagina.


Exemplu: atributele height şi width

Codul HTML Rezultatul
<img src="imagine.jpg" width="160" height="120" alt="imagine"/> imagine
<img src="imagine.jpg" width="80" height="60" alt="imagine"/> imagine
<img src="imagine.jpg" width="160" height="30" alt="imagine"/> imagine
<img src="imagine.jpg" width="40" height="120" alt="imagine"/> imagine

imagini

6. atributul border permite stabilirea grosimii unui chenar care va înconjura poza. Implicit, valoarea acestui atribut este ”0”, ceea ce înseamnă că imaginea nu este înconjurată de chenar.


Exemplu: atributul border

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine" border="10"> imagine

7. atributele hspace=”nr.pixeli” respectiv vspace=”nr.pixeli” permit stabilirea distantei minime care separa imaginea de celelalte obiecte pe verticală, respectiv pe orizontală.


Exemplu: atributele hspace=”nr.pixeli” respectiv vspace=”nr.pixeli”

Codul HTML Rezultatul
<img src="imagine.jpg" alt="imagine" align="left"/> imagine Iată o aliniere a imaginii de tip "left", aliniere în cadrul căreia nu am modificat nici unul dintre cele două atribute care controlează spaţierea dintre imagine şi restul elementelor, pe orizontală respeciv pe verticală.
<img src="imagine.jpg" alt="imagine" hspace="50"align="left"/> imagine Iata acum o aliniere a imaginii tot de tip "left", aliniere în cadrul căreia am modificat atributul care controlează spaţierea dintre imagine şi restul elementelor, stabilind valoarea de 15 pixeli pe orizontală.
<img src="imagine.jpg" alt="imagine" vspace="50"align="left"/> imagine Iata acum o aliniere a imaginii tot de tip "left", aliniere în cadrul căreia am modificat atributul care controlează spaţierea dintre imagine şi restul elementelor, stabilind valoarea de 20 pixeli pe verticală.

imagini