Imagini în HTML . Atributul HTML alt pentru definirea unui text alternativ pentru o imagine. Atributele HTML width si height pentru definirea dimensiunii imaginii.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Atributul alt oferă un text alternativ pentru o imagine, dacă utilizatorul din anumite motive nu îl poate vizualiza (din cauza conexiunii lente, a unei erori în atributul src sau dacă utilizatorul utilizează un cititor de ecran).
Valoarea atributului alt ar trebui să descrie imaginea:
Exemplu:
<img src = "img_locorotondo.jpg" alt = "Flori în Locorotondo">
Dacă un browser nu poate găsi o imagine, aceasta va afișa valoarea atributului alt:
Exemplu:
<img src = "nume_gresit.gif" alt = "Flori în Locorotondo">
Notă: Atributul alt este necesar. O pagină web nu se va valida corect fără ea.Dimensiunea imaginii - lățime și înălțime (Width and Height)
Puteți utiliza atributul style pentru a specifica lățimea și înălțimea (Width and Height) unei imagini.
Exemplu:
<img src="img_men.jpg" alt="Bărbat într-o jacketă" style="width:500px;height:600px;">
În mod alternativ, puteți utiliza atributele de lățime și înălțime (Width and Height):Exemplu:
<img src="img_men.jpg" alt="Bărbat într-o jacketă" width="500" height="600">
Atributele lățime și înălțime (Width and Height) definesc întotdeauna lățimea și înălțimea imaginii în pixeli.
Notă: Specificați întotdeauna lățimea și înălțimea (Width and Height) unei imagini. Dacă nu sunt specificate lățimea și înălțimea (Width and Height) , pagina ar putea clipi în timp ce imaginea se încarcă.
Lățimea și înălțimea, sau stilul? (Width and Height, or Style?)
Atributele de lățime, înălțime și stil (width, height, style) sunt valabile în HTML.
Cu toate acestea, vă sugerăm să folosiți atributul stil (style). Împiedică foile de stil (styles sheets) să modifice dimensiunea imaginilor:
Exemplu:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="Pictograma HTML5" width="128" height="128">
<img src="html5.gif" alt="Pictograma HTML5" style="width:128px;height:128px;">
</body>
</html>