HTML <img> etiketinin border özelliği

HTML <img> etiketi

Örnek

Aşağıdaki HTML, farklı kalınlıklarda görsel kenar çizgileri oluşturabilir:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

Kişisel olarak deneyin

Tanım ve kullanım

img etiketinin border özelliği, görsel etrafındaki kenar çizgisi genişliğini belirtir, yani görselin kenar çizgisini artırabilir veya kaldırabilirsiniz.

Açıklama:Öntanımlı olarak, görseller kenar çizgisi içermemektedir (a etiketi içeriğinde bulunan görseller dışında)

Tarayıcılar genellikle, <a> etiketi içinde bulunan görselleri (örneğin, <a> etiketi içindeki görseller) iki piksel genişliğinde bir kenar çizgisi içinde gösterir, böylece okuyucunun bu görseli seçerek ilgili belgeye erişebileceğini belirtir.

border özelliği ve piksel olarak belirlenen genişlik değerini kullanarak, görselin kenar çizgisini kaldırabilir veya genişletebilirsiniz (border="0")

Dikkat:Bu özellik HTML 4 ve XHTML'de de artık önerilmez, ancak popüler tarayıcılar tarafından iyi desteklenmektedir.

Görsel Kenarlarını Kaldırma: Okuma

Tarayıcı desteği

border özelliği kullanımı önerilmesine rağmen, tüm popüler tarayıcılar bu özelliği destekler.

İpucu ve açıklamalar

Açıklama:HTML 4.01'de görsellerin "border" özelliği kullanımı önerilmez. XHTML 1.0 Strict DTD ve HTML 5'te, bu özellik artık desteklenmez.

İpucu:Kullanmanızı öneririz CSS kenar çizgisi özelliği elemanın kenar çizgisi tarzını değiştirmek için kullanılır. CSS kenar çizgisi özelliğini kullanarak, sitedeki tüm görseller için tutarlı bir kenar çizgisi ayarlayabilirsiniz. Tek bir görsel için border özelliği ayarlamak yerine, bu yöntem kesinlikle daha yüksek verimlilik sağlar.

Uyumluluk notları

img özelliğinin border özelliği kullanımı önerilmez; HTML 4.01 Strict ve XHTML 1.0 Strict DTD'de, img özelliğinin border özelliği desteklenmez.

CSS kullanmanızı öneririz.

CSS grameri: <img style="border:5px solid black">

CSS örneği: görsel kenar çizgisi

CSS eğitimimizde, daha fazla bilgi bulabilirsiniz border özelliği Ayrıntılar.

Gramer

<img border="value" />

Özellik değeri

Değer Açıklama
pixels Kenar çizgisi genişliği, piksel olarak belirtilir.

TIY örneği

img etiketinin border özelliği
Bu örnek, <img> etiketinin border özelliğini kullanarak görsel kenarlarını nasıl değiştireceğini gösterir.

Görsel Kenarlarını Kaldırma: Okuma

<img> etiketinde border="0" özelliğini kullanarak, görsel bağlantı etrafındaki kenarlığı kaldırabilirsiniz. Bazı görseller için, özellikle görsel haritalar için, kenarlıksız olursa sayfanın görünümü iyileşebilir. Kenarlıksız olan ve diğer görsellere yönlendirilen bağlantı düğmeleri için, kenarlıksızsa görsel daha iyi görünebilir.

Kenarlık kaldırılmazsa belgenin kullanılabilirliği düşmez, ancak dikkatli olun. Çünkü kenarlıksız, çok yaygın bir bağlantı görsel işaretini kaldırır, bu da okuyucuların bu bağlantıları bulmasını zorlaştırabilir. Tarayıcılar genellikle fare işaretçisinin bağlantı görseli üzerinde hareket ettiğinde işaretçiyi değiştirir, ancak tarayıcıların her zaman bu şekilde davranmasını beklememeli, aksi takdirde kullanıcıların kenarlıksız görsellerde gizli bağlantıları bulmak için arama yapmasına izin vermemelidir.

Sınırsız kenarlıklı görseller kullanırken, okuyucularınızın bu görseller üzerinde tıklamaları gerektiğini bilmeleri için diğer yöntemleri de kullanmanızı şiddetle tavsiye ederiz. Basit metinlerle bile, belgenin okuyuculara daha iyi erişilebilir hale gelmesi zor olabilir.

HTML <img> etiketi