JPG Görüntüleri
GIF Görüntüler
PNG Resimleri
Örnek
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg"
alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Kendin dene " Her bir görüntü genişliğini ve yüksekliğini belirler. genişlik ve yükseklik belirtilmemişse, sayfa görüntü yüklenirken titreşimsiz olacaktır.
HTML Görüntüler dizimi
HTML'de, resimler ile tanımlanır <img> etiketinin.
<img> tag yalnızca özelliklerini içeren, boş ve bir kapanış etiketi yok.
src niteliği URL'sini belirten (web address) Görüntünün:
<img src=" alt Özellik alt görüntü görüntülenemiyor eğer niteliği, bir resim için alternatif metin belirtir.
alt nedense bir kullanıcı bunu görüntüleyemezseniz nitelik Bir resim için alternatif bilgi sağlar (çünkü yavaş bağlantı, bir hata src özniteliği veya kullanıcı ekran okuyucu kullanıyorsa).
Bir tarayıcı bir görüntü bulamazsa, bu alt metni görüntüler:
alt özniteliği gereklidir. Bir web sayfası onsuz standartlar açısından geçerli olmayacaktır.
HTML Ekran Okuyucular
Ekran okuyucu, bir ekranda ne okuyabilen bir yazılım programıdır.
Ekran okuyucular görme engelliler, görme engelli veya özürlü öğrenme yararlıdır.
Ekran okuyucular okuyabilir alt niteliğini.
Resim Boyutu - Genişlik ve Yükseklik
Sen kullanabilirsiniz style bir görüntünün genişliğini ve yüksekliğini belirtmek için özellik.
Değerleri piksel olarak belirlenir (use px after the value) :
Alternatif olarak, kullanabileceğiniz width ve height özelliklerini. Burada, değerler varsayılan olarak piksel olarak belirtilir:
Genişlik ve Yükseklik veya Tarzı'ymış
Hem genişlik, yükseklik ve stil nitelikleri son HTML5 standardında geçerlidir.
Biz kullandığınız önermek style özelliğini. Bu görüntülerin orijinal boyutunu değiştirmesini stilleri sayfaları engeller:
Örnek
<!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> Kendin dene "
Başka Klasörde Görüntüler
Belirtilmezse, tarayıcı web sayfası ile aynı klasörde resim bulmak için bekliyor.
Ancak, bir alt klasördeki görüntüleri depolamak için yaygındır. Daha sonra klasör adını içermelidir src özniteliği:
Örnek
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Kendin dene "
Başka Server Görüntüler
Bazı web siteleri görüntü sunucularında kendi imajlarını saklamak.
Aslında, dünyanın herhangi bir web adresinde görüntüleri erişebilirsiniz:
Hareketli Görüntüler
GIF standart animasyonlu görüntüler sağlar:
animasyonlu resimler ekleyerek sözdizimi olmayan animasyonlu görüntüler farksız olduğunu unutmayın.
Bir Link gibi Görüntüyü kullanma
Bir bağlantı olarak bir resim kullanmak için tek yapmanız yuva <img> içindeki etiketi <a> etiketi:
Örnek
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Kendin dene " Ekle "border:0;" IE9 önlemek için (and earlier) resmin etrafına çerçeve görüntülemesini.
Görüntü Yüzer
görüntü dalgalanmaya bıraktı CSS şamandıra özelliğini kullanın.
Görüntü sağa veya bir metnin solunda yüzebilen:
Örnek
<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> Kendin dene "
Görüntü haritaları
Kullan <map> bir görüntü-harita tanımlamak için etiket. Bir resim haritası tıklanabilir alanlar ile bir görüntüdür.
name öznitelik <map> etiketi ile ilişkilidir <img> 'ın IS usemap özniteliği ve görüntü ve haritası arasındaki ilişkiyi oluşturur.
<map> etiketi bir dizi içerir <area> görüntü haritadaki tıklanabilir alanlar tanımlar etiketleri:
Örnek
<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> Kendin dene "
Bölüm özeti
- HTML kullan <img> bir görüntü tanımlamak için eleman
- HTML kullanın src resmin URL'sini tanımlamak için öznitelik
- HTML kullanın alt görüntülenmeden edilemezse, bir resim için alternatif metin tanımlamak için öznitelik
- HTML kullanarak width ve height görüntünün boyutunu belirlemek için nitelikleri
- CSS kullanarak width ve height görüntünün boyutunu belirlemek için özellikleri (alternatively)
- CSS kullanın float görüntü şamandıra izin özelliğini
- HTML'yikullanın <map> öğesi bir görüntü harita tanımlamak için
- HTML'yikullanın <area> görüntü haritadaki tıklanabilir alanları tanımlamak için eleman
- HTML kullan <img> 'ın eleman usemap bir görüntü-haritasına işaret etmek öznitelik
Resimler yükleniyor zaman alır. Büyük resimlerin sayfanızı yavaşlatabilir. dikkatle görüntüleri kullanın.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»
HTML Resim Etiketleri
Etiket Açıklama <img> Bir görüntüyü tanımlar <map> Bir görüntü-harita tanımlar <area> Bir görüntü-harita içinde tıklanabilir alan tanımlar