En son web geliştirme öğreticiler

HTML Görüntüler


JPG Görüntüleri

dağ manzarası

GIF Görüntüler

PNG Resimleri

grafik

Ö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:

Örnek

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Kendin dene "

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) :

Örnek

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Kendin dene "

Alternatif olarak, kullanabileceğiniz width ve height özelliklerini. Burada, değerler varsayılan olarak piksel olarak belirtilir:

Örnek

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Kendin dene "

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:

Örnek

<img src="http://www.w3ii.com/images/w3ii_green.jpg" alt="w3ii.com">
Kendin dene "

Hareketli Görüntüler

GIF standart animasyonlu görüntüler sağlar:

Örnek

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Kendin dene "

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