101: HTML Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

Çerçeve ve Alternatif Metin Ekleme

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 06.11.2015 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler :

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>