Imagini în HTML. Utilizarea proprietăţii float. Imaginea ca link cu img, src, a, map, usemap, area, picture. Imagini animate cu gif.

Susține Lectii-Virtuale!

Imagini într-un alt folder

Dacă nu este specificat, browserul se așteaptă să găsească imaginea în același folder ca și pagina web.
Cu toate acestea, este comună stocarea imaginilor într-un sub-folder. Apoi, trebuie să includeți numele folder-ului în atributul src:

Exemplu:

<img src="/images/html5.gif" alt="Pictograma HTML5" style="width:128px;height:128px;">

Imagini de pe un alt server

Unele site-uri web își depozitează imaginile pe serverele de imagini.
De fapt, puteți accesa imagini de pe orice adresă web din lume:

Exemplu:

<img src="https://lectii-virtuale.ro/images/lectii-virtuale.jpg" alt="lectii-virtuale.ro">

Imagini animate

HTML permite GIF-urile animate:

Exemplu:

<img src="programare.gif" alt="Computer Man" style="width:48px;height:48px;">

Imaginea ca link

Pentru a utiliza o imagine ca link, puneți eticheta <img> în eticheta <a>:

Exemplu:

<a href="default.asp">
  <img src="smiley.gif" alt="Tutorial HTML"" style="width:32px;height:32px;border:0;">
</a>

Notă: border: 0; este adăugat pentru a împiedica IE9 (și versiunile anterioare) să afișeze un chenar în jurul imaginii (când imaginea este un link).

Imagine plutitoare (Image Floating)

Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească la dreapta sau la stânga unui text:

Exemplu:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Imaginea va pluti în dreapta textului.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Imaginea va pluti în stânga textului.</p>

Cititoare de ecran HTML(HTML Screen Readers)

Un cititor de ecran (HTML Screen Reader) este un program software care citește codul HTML, transformă textul și permite utilizatorului să „asculte” conținutul.
Cititoarele de ecran (HTML Screen Readers) sunt utile pentru persoanele cu deficiențe de vedere sau cu dizabilități de învățare.

Rezumat

• Utilizați elementul HTML <img> pentru a defini o imagine.
• Utilizați atributul HTML src pentru a defini adresa URL a imaginii.
• Utilizați atributul HTML alt pentru a defini un text alternativ pentru o imagine, dacă nu poate fi afișat.
• Utilizați atributele HTML lățime și înălțime (width and height) pentru a defini dimensiunea imaginii.
• Utilizați proprietățile CSS pentru lățime și înălțime (width and height) pentru a defini dimensiunea imaginii (alternativ).
• Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească.
• Utilizați elementul HTML <map> pentru a defini o imagine-hartă (image-map).
• Utilizați elementul HTML <area> pentru a defini zonele în care se poate face click pe imaginea hartă (image-map).
• Utilizați atributul usemap al elementului HTML <img> pentru a indica o hartă-imagine(image-map).
• Utilizați elementul HTML <picture> pentru a afișa imagini diferite pentru diferite dispozitive.

Notă: Încărcarea imaginilor necesită timp. Imaginile mari pot încetini pagina. Folosiți cu atenție imaginile.

Etichete de imagine HTML (HTML Image Tags)
 

Etichetă	Descriere
<img>	Definește o imagine
<map>	Definește o imagine-hartă (image-map)
<area>	Definește o zonă cu care se poate face click în interiorul unei hărţi (image-map)
<picture>	Definește un container pentru mai multe resurse de imagine