Çerçeve ve Alternatif Metin Ekleme
Lisans:
Creative Commons
26.11.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
Bu eğitimde sizlere web sayfasında kullanacağınız görsellerin çerçeve ayarlarını nasıl tanımlayacağınızı, alternatif metin tanımlamayı ve görseli bir bağlantıya yönlendirmeyi anlatacağız.
Görselin çerçeve kalınlığının belirlenmesi
Web sayfası üzerinde görüntülenecek olan görselin çerçeve kalınlığı border= parametresiyle belirlenebilir. Oluşturulacak çerçevenin kalınlığını piksel cinsinden belirtebilirsiniz.
Örnek bir kullanımı aşağıdaki örnekte görebilirsiniz:
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" border="5">
Alternatif metin belirlenmesi
Arama motorları sitenizdeki içerikleri ve görselleri de listeleyebilmektedir. Alternatif metin kullanımı arama motorlarından daha fazla ziyaretçinin gelmesini sağladığı gibi, sitenizi görme engellilerin de kullanabilmesi için de önemli bir avantaj sunar. Bu amaçla alt= parametresini kullanabilirsiniz. Alt parametresiyle belirtilen metin, görsel herhangi bir nedenle görüntülenemediği takdirde sayfaya aktarılır.
Standart web tarayıcılarda bu metin, fare imleçi resmin üzerine götürülünce ekranda görüntülenir.
Aşağıda örnek bir kullanımı görebilirsiniz:
<html>
<head>
<title>HTML resim uygulaması.</title>
</head>
<body>
<h3>HTML'de resim ve alternatif metin görüntüleme</h3>
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" alt="Resim için alternatif metin" height="100" width="65">
</body>
</html>
Bir görseli hiperlink olarak kullanma
Bir görseli bir hipermetin link (bağlantı) oluşturmak için kullanılabilir. Bu sayede kullanıcılar bir görsele tıkladıklarında farklı bir adrese ya da o görselin daha büyük haline yönlendirilebilirler.
Bir bağlantıya dönüştürülmüş olan görsellerin etrafı öntanımlı olarak mavi renge boyanır.
Örnek bir kodu aşağıda görebilirsiniz:
<a href="https://gelecegiyazanlar.turkcell.com.tr">
<img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/2014_degerlendirme.jpg" alt="Geleceği Yazanlar Ana Sayfa" width="100" height="100" border="3">
</a>
