Imagini HTML
Imaginile pot îmbunătăți designul și aspectul unei pagini web.
Case Trulli
O imagine cu case Trulli.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducere Trulli</title>
</head>
<body>
<img src="pic_trulli.jpg" alt="Trulli italiene">
</body>
</html>
Fată într-o jachetă
O imagine cu text alt.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducere Fată</title>
</head>
<body>
<img src="img_girl.jpg" alt="Fată în geacă">
</body>
</html>
Flori în Chania
O altă imagine cu text alt.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducere Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flori în Chania">
</body>
</html>
Sintaxa Imaginilor HTML
Tag-ul <img> pune o imagine pe o pagină. Imaginile nu sunt inserate cu adevărat în pagină; sunt legate de ea, iar tag-ul <img> creează un spațiu de rezervă pentru imaginea legată. Este un tag gol, doar cu atribute, fără tag de închidere.
Are două atribute obligatorii: src, calea către imagine, și alt, textul alternativ pentru imagine.
Sintaxa imaginii
Forma unui tag de imagine.
<img src="url" alt="alternatetext">
Atributul src
Atributul obligatoriu src setează calea (URL-ul) către imagine.
Notă: Când pagina se încarcă, browserul preia imaginea de pe server și o inserează. Păstrează imaginea în același loc relativ la pagină, altfel vizitatorii vor vedea o pictogramă de link întrerupt. Pictograma de link întrerupt și textul alt apar atunci când browserul nu poate găsi imaginea.
Exemplu
O imagine setată cu atributul src.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flori în Chania">
</body>
</html>
Atributul alt
Atributul obligatoriu alt oferă un text alternativ afișat atunci când imaginea nu poate fi vizualizată, cum ar fi la o conexiune lentă, un src greșit, sau pentru utilizatorii de cititoare de ecran. Textul ar trebui să descrie imaginea.
Sfat: Un cititor de ecran citește HTML-ul cu voce tare, astfel încât utilizatorul poate asculta conținutul; ajută persoanele cu deficiențe de vedere sau cu dizabilități de învățare.
Text alt descriptiv
O imagine cu text alt descriptiv.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Flori în Chania">
</body>
</html>
Când imaginea lipsește
Textul alt se afișează deoarece imaginea nu poate fi găsită.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt pentru imagine ruptă</title>
</head>
<body>
<img src="wrongname.gif" alt="Flori în Chania">
</body>
</html>
Dimensiunea Imaginii - Lățime și Înălțime
Poți seta lățimea și înălțimea unei imagini cu atributul style, sau cu atributele width și height. Ambele se măsoară întotdeauna în pixeli.
Notă: Setează întotdeauna lățimea și înălțimea. Dacă nu o faci, pagina poate clipi în timp ce imaginea se încarcă.
Cu atributul style
Dimensionarea unei imagini cu CSS în atributul style.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensiune prin style</title>
</head>
<body>
<img src="img_girl.jpg" alt="Fată în geacă" style="width:500px;height:600px;">
</body>
</html>
Cu atributele width și height
Dimensionarea unei imagini cu atributele width și height.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensiune prin atribute</title>
</head>
<body>
<img src="img_girl.jpg" alt="Fată în geacă" width="500" height="600">
</body>
</html>
Width și Height, sau Style?
Atributele width, height și style sunt toate valide. PromptCookbook sugerează atributul style, deoarece împiedică foile de stil să schimbe dimensiunea imaginii.
Exemplu
O pagină în care o foaie de stil ar redimensiona altfel imaginile.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
Imagini în Alt Folder
Dacă imaginea ta este într-un sub-folder, include numele folderului în atributul src.
Exemplu
O imagine referențiată dintr-un sub-folder.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine în subfolder</title>
</head>
<body>
<img src="/images/html5.gif" alt="Pictograma HTML5" style="width:128px;height:128px;">
</body>
</html>
Imagini pe Alt Server/Site Web
Pentru a folosi o imagine de pe un alt server, dă un URL complet (absolut) în atributul src.
Notă: Imaginile externe pot fi protejate prin drepturi de autor, iar folosirea uneia fără permisiune ar putea încălca legile drepturilor de autor. De asemenea, nu poți controla imaginile externe; se pot schimba sau dispărea fără avertisment.
Exemplu
O imagine încărcată de pe un alt site web.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine externă</title>
</head>
<body>
<img src="https://prompt-cookbook.com" alt="PromptCookbook">
</body>
</html>
Imagini Animate
HTML poate afișa GIF-uri animate la fel ca orice altă imagine.
Exemplu
Un GIF animat.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gif animat</title>
</head>
<body>
<img src="programming.gif" alt="Omul calculator" style="width:48px;height:48px;">
</body>
</html>
Imagine ca Link
Pentru a folosi o imagine ca link, pune tag-ul <img> în interiorul tag-ului <a>.
Exemplu
O imagine care funcționează ca un link.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine ca link</title>
</head>
<body>
<a href="default.asp">
<img src="smiley.gif" alt="Tutorial HTML" style="width:42px;height:42px;">
</a>
</body>
</html>
Plutirea Imaginii
Folosește proprietatea CSS float pentru a lăsa o imagine să plutească la dreapta sau la stânga textului din jurul ei.
Exemplu
Imagini care plutesc la dreapta și la stânga textului.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine flotantă</title>
</head>
<body>
<p><img src="smiley.gif" alt="Față zâmbitoare" style="float:right;width:42px;height:42px;">
Imaginea va pluti la dreapta textului.</p>
<p><img src="smiley.gif" alt="Față zâmbitoare" style="float:left;width:42px;height:42px;">
Imaginea va pluti la stânga textului.</p>
</body>
</html>
Formate Comune de Imagine
Cele mai comune formate de imagine, suportate în toate browserele, sunt: APNG (Animated Portable Network Graphics, .apng), GIF (Graphics Interchange Format, .gif), ICO (Microsoft Icon, .ico), JPEG (.jpg, .jpeg), PNG (Portable Network Graphics, .png), și SVG (Scalable Vector Graphics, .svg).
Rezumatul Capitolului
Pe scurt: folosește elementul <img> pentru a defini o imagine, atributul src pentru URL-ul ei, și atributul alt pentru text alternativ. Setează dimensiunea cu atributele width și height sau proprietățile CSS width și height, și folosește proprietatea CSS float pentru a plasa o imagine plutitoare la stânga sau la dreapta.
Notă: Imaginile mari durează timp să se încarce și pot încetini pagina, deci folosește imaginile cu grijă.
Tag-uri HTML pentru Imagini
Tag-urile legate de imagini sunt: <img> (definește o imagine), <map> (definește o hartă de imagine), <area> (definește o zonă apăsabilă în interiorul unei hărți de imagine), și <picture> (definește un container pentru mai multe resurse de imagine).