Lucrul cu imaginile
Pentru afișarea imaginilor în HTML se utilizează elementul img. Acest element ne prezintă două atribute importante:
- src: calea către imagine. Aceasta poate fi o cale relativă sau absolută în sistemul de fișiere sau o adresă pe internet
- alt: descrierea text a imaginii. Dacă browserul, din anumite motive, nu poate afișa imaginea (de exemplu, dacă calea atributului src este incorectă), atunci browserul afișează în locul imaginii această descriere text
Atributul alt este important și pentru că motoarele de căutare pot indexa imaginea după descrierea text.
De exemplu, să punem în aceeași folder unde avem fișierul index.html, un anumit fișier de imagine. Și apoi să îl afișăm pe pagina web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tagul img în HTML5</title>
</head>
<body>
<img src="image.png" alt="Inteligență artificială" />
</body>
</html>
În cazul meu, fișierul de imagine se numește image.png și se află în aceeași folder cu pagina web index.html. Este important de reținut că img este un element gol, adică nu are un tag de închidere.
Utilizând caracteristicile stilistice, în special, marginile și înconjurarea, se pot combina imaginile cu textul. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tagul img în HTML5</title>
</head>
<body>
<div>
<img src="image.png" alt="Inteligență artificială" style="float:left; margin-right:10px;" />
<h1>Lorem Ipsum</h1>
<b>Lorem Ipsum</b> este pur și simplu un text fictiv al industriei tipografice și de editare. Lorem Ipsum a fost textul standard al industriei....
</div>
</body>
</html>Și obținem:
