JPG Imagini
GIF Imagini
PNG Imagini
Exemplu
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg"
alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Încearcă - l singur » specificați întotdeauna lățimea și înălțimea unei imagini. Dacă lățimea și înălțimea nu sunt specificate, pagina va pâlpâi în timp ce încărcarea imaginii.
HTML Imagini Sintaxa
In HTML, imaginile sunt definite cu <img> tag - ul.
<img> tag - <img> tag este gol, ea conține doar atribute, și nu are o etichetă de închidere.
src atribut specifica URL - ul (web address) a imaginii:
<img src=" alt atribut alt atribut specifica un text alternativ pentru imagine, în cazul în care imaginea nu poate fi afișată.
alt atribut furnizează informații alternative pentru o imagine în cazul în care un utilizator pentru un motiv oarecare nu se poate vizualiza ( din cauza conexiunii lente, o eroare în src atribut, sau în cazul în care utilizatorul folosește un cititor de ecran).
În cazul în care un browser nu poate găsi o imagine, se va afișa textul alternativ:
Exemplu
<img src="wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
Încearcă - l singur » alt este necesar atribut. O pagină web nu va valida corect fără ea.
HTML cititoarele de ecran
Un cititor de ecran este un program software care poate citi ceea ce este afișat pe un ecran.
cititoare de ecran sunt utile pentru persoanele care sunt orbi, cu deficiențe de vedere, sau de învățare cu handicap.
Cititoarele de ecran pot citi alt atribut.
Dimensiune imagine - Lățime și Înălțime
Puteți utiliza style atribut pentru a specifica lățimea și înălțimea unei imagini.
Valorile sunt specificate în pixeli (use px after the value) :
Exemplu
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Încearcă - l singur » Alternativ, puteți utiliza width și height atribute. Aici, valorile sunt specificate în pixeli implicit:
Lățime și înălțime sau stil?
Atât lățimea, înălțimea, și atributele de stil sunt valabile în cel mai recent standard HTML5.
Vă sugerăm să utilizați style de atribut. Acesta previne foi de stiluri de la schimbarea dimensiunea originală a imaginilor:
Exemplu
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
</body>
</html> Încearcă - l singur »
Imagini în alt dosar
În cazul în care nu este specificat, browser-ul se așteaptă să găsească imaginea în același folder ca și pagina web.
Cu toate acestea, este comun pentru a stoca imagini într-un sub-dosar. Trebuie să includeți apoi numele folderului în src atribut:
Exemplu
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Încearcă - l singur »
Imaginile de pe un alt server
Unele site-uri web stoca imaginile pe serverele de imagine.
De fapt, puteți accesa imagini de la orice adresă web din lume:
Imagini animate
Standardul GIF permite imagini animate:
Exemplu
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Încearcă - l singur » Rețineți că sintaxa inserarea de imagini animate nu este diferită de imagini non-animate.
Utilizarea unei imagini ca link
Pentru a utiliza o imagine ca un link, pur și simplu cuib <img> tag - ul din interiorul <a> tag - ul:
Exemplu
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Încearcă - l singur » Adăugați "border:0;" pentru a preveni IE9 (and earlier) de la afișarea unui chenar în jurul imaginii.
Floating Image
Utilizați proprietatea CSS float pentru a lăsa float de imagine.
Imaginea poate pluti la dreapta sau la stânga a unui text:
Exemplu
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.
</p> Încearcă - l singur »
Harta imagine
Utilizați <map> tag - ul pentru a defini o imagine-hartă. O imagine-harta este o imagine cu zone clickable.
name atribut al <map> tag - ul este asociat cu <img> e atributul usemap și creează o relație între imaginea și harta.
<map> tag - ul conține un număr de <area> tag - uri, care definește zonele clickable în imagine-harta:
Exemplu
<img src="planets.gif" alt="Planets" usemap="#planetmap"
style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8"
alt="Venus" href="venus.htm">
</map> Încearcă - l singur »
Rezumatul capitolului
- Utilizați HTML <img> Elementul pentru a defini o imagine
- Utilizați HTML src atribut pentru a defini adresa URL a imaginii
- Utilizați HTML alt atribut pentru a defini un text alternativ pentru imagine, în cazul în care nu poate fi afișată
- Utilizați HTML width și height atributele pentru a defini dimensiunea imaginii
- Utilizați CSS width și height proprietăți pentru a defini dimensiunea imaginii (alternatively)
- Utilizați CSS float proprietatea de a lasa float imagine
- Utilizați HTML <map> Element pentru a defini o imagine hartă
- Utilizați HTML <area> elementul pentru a defini zonele clickable în imagine hartă
- Utilizați HTML <img> elementul lui usemap atribut pentru a indica o imagine hartă
Se încarcă imagini are nevoie de timp. Imaginile de dimensiuni mari pot încetini pagina ta. Utilizați cu atenție imaginile.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
HTML etichete de imagine
Etichetă Descriere <img> Definește o imagine <map> Definește o imagine hartă <area> Definește o zonă în interiorul unei imagini se poate face clic-map