Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

HTML Resimler

HTML Resimler <img> Etiketi

HTML'de resimler <img> etiketi ile gösterilir.

<img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir.

src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar:

<img src="URL" alt="alternatif metin">

Örnek


<!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html>
Not Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğinde, resim yüklenirken sayfada titreşimler oluşur.

alt Özelliği

alt özelliği resmin görüntülenmediği, zayıf bağlantı, src özelliğindeki bir hata, veya ekran okuyucu kullanımı gibi durumlar için tanımlanan alternatif metindir.

Tarayıcı resmi bulamadığında alt özelliğine girilen alternatif metni gösterir:

Örnek


<img src="resimler_ornek.jpg" alt="HTML Resimler" style="width:150px; height:150px;">

HTML belgelerinde, resimler için alt özelliği gereklidir.


HTML Ekran Okuyucular

Ekran koruyucusu, ekran üzerinde gösterilenleri okuyabilen bir yazılım programıdır.

Ekran okuyucuları görme engelli kullanıcılar için faydalıdır.

Not Ekran okuyucular alt özelliğine girilen metinleri okuyabilirler.

HTML Resim Boyutları - Genişlik ve Yükseklik

Bir resmin genişliğini ve yüksekliğini belirlemek için style özelliğini kullanabilirsiniz.

Resim boyutundaki genişlik ve yükseklik değerleri piksel birimiyle belirtilir. Değerden sonra px kullanılır:

Örnek


<img src="cennet_papagani.jpg" alt="Papagan" style="width:200px; height:200px;">

Alternatif olarak width (genişlik) ve height (yükseklik) özelliklerini kullanabilirsiniz. Değerler varsayılan olarak piksel birimiyle tanımlanır:


Örnek


<img src="cennet_papagani.jpg" alt="Papagan" width="200" height="200px">

Hangisi kullanılmalı: Width ve Height mi? Yoksa Style Özelliği mi?

Son HTML5 Standartlarına göre width, height ve style özellikleri hâlâ geçerliliğini koruyor.

Resimlerin orijinal boyutlarının stil şablonları (CSS) tarafından değiştirilmesine engel olduğu için style özelliğini kullanmanızı öneririz:

Örnek


<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <img src="HTML.png" alt="HTML5 ikon" style="width:150px; height:150px;"> <img src="HTML.png" alt="HTML5 ikon" width="150" height="150"> </body> </html>

Başka Bir Dosya Yolundaki Resimler

Resmin konumu belirtilmediğinde, tarayıcı resmi web sayfasının bulunduğu sunucu dosyası içinde arar.

Ancak, resimleri bir alt klasörde depolamak daha yaygın kullanılan bir yöntemdir. Daha sonra bu dosya adı src özelliğine eklenir:

<img src="/resimler/html.png" alt="HTML5 ikon" style="width:150px; height:150px;"

Başka Bir Sunucudaki Resimler

Bazı web siteleri resimlerini, resim sunucularında depolar. Sayısız resme bu sunucular yardımıyla erişebilirsiniz:

Örnek


<img src="http://i1264.photobucket.com/albums/jj485/MichelleLuvsYoou/images36.jpg" alt="Coffee Art">

HTML Hareketli Resimler

GIF (Graphics Interchange Format) standartları hareketli resimlere izin verir:

Örnek


<img src="smiley.gif" alt="Computer man" style="width:100px;height:100px;">

Hareketli resimler için kullanılan özellik ve değerler, hareketsiz resimler için kullanılanlardan farklı değildir.


HTML'de Resimleri Link Olarak Kullanma

HTML'de resimleri tıklanabilir bir link olarak kullanabilmek için <img> etiketini <a> etiketi içerisinde kullanmak yeterlidir.

Örnek


<a href="html-resimler.html"> <img src="HTML-CSS.png" alt="HTML Resimler" style="width:280px;height:210px;border:0;"> </a>
Not Internet Explorer 9 ve önceki sürümlerinin resmin çevresinde kenarlık göstermesini önlemek için "border:0;" özelliğini kullanabilirsiniz.

Yazıya Göre Resim Konumlandırma

Resimlerin metnin sağına ya da soluna konumlandırılmasını sağlamak için CSS float özelliğini kullanabilirsiniz.

Örnek


<p> <img src="smiley.gif" alt="Smiley" style="float:left; width:60px; height:60px;"> Resim paragrafın soluna konumlandırılacak. </p> <p> <img src="smiley.gif" alt="Smiley" style="float:right; width:60px; height:60px;"> Resim paragrafın sağına konumlandırılacak. </p>

HTML Resim Haritaları

Resim haritası tanımlamak için HTML <map> etiketi kullanılır. Resim haritaları tıklanabilir alanları olan resimlerdir.

Tıklanabilir alanlar ile resim arasında ilişki kurulması için <map> etiketinin name özelliğine verilen değer ile <img> etiketinin usemap özelliğine verilen değerin aynı olması gerekir.

<map> etiketi, her biri resim haritasındaki tıklanabilir alanları tanımlayan <area> etiketlerini içerir.

Örnek

Tıklanabilir alanları olan bir resim haritası:


<img src="gezegenler.gif" width="145" height="126" alt="Gezenler" usemap="#gezegenharitasi"> <map name="gezegenharitasi"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="gunes.gif"> <area shape="circle" coords="90,58,3" alt="Mercury" href="merkur.gif"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.gif"> </map>

Konu Özeti

  • Bir resim tanımlamak için HTML <img> etiketini kullanın.
  • Resmin URL'sini tanımlamak için HTML src özelliğini kullanın.
  • Resmin görüntülenemediği durumlarda resmin yerine alternatif metin tanımlamak için HTML alt özelliğini kullanın.
  • Resmin boyutunu tanımlamak için HTML height ve width özelliklerini kullanın.
    (Alternatif olarak CSS height ve width özelliklerini)
  • Resmi öğenin sağına veya soluna yaslamak için CSS float özelliğini kullanın.
  • Bir resim haritası tanımlamak için HTML <map> etiketini kullanın.
  • Resim haritası üzerinde tıklanabilir alanlar tanımlamak için HTML <area> etiketini kullanın.
  • Resim haritası ile ilişkilendirmek için <img> etiketinin usemap özelliğini kullanın.
Not Dikkat: Büyük boyutlu resimlerin yüklenmesi biraz zaman aldığından, sayfanızın açılış hızını önemli ölçüde etkiler ve yavaşlatır.

HTML Resim Etiketleri

Etiket Tanım
<area> Resim haritasındaki tıklanabilir alanı tanımlar.
<img> Bir resmi tanımlar.
<map> Bir resim haritasını tanımlar.

Yorumlar