Web tasarımda görsellik herşeyden önce gelir. Görsel öğeler metinlere göre daha dikkat çekicidir ve anlaşılması kolaydır. Web sayfanızın içeriğini uygun görsellerle donatırsanız ziyaretçileriniz sayfada gezinirken zorlanmaz. Görsel öğeler sayfa kullanımını kolaylaştırır. Bu sebeple tasarımcı sayfayı hazırlarken resimlerden olabildiğince çok faydalanmalıdır. Resimlere link vermek buna örnek olarak gösterilebilir. Mesela bağlantıları;
Hotmail
Yahoo
Bing
Yapmak yerine,
Şeklinde resimlere link vererek web sayfanızı daha kullanışlı hale getirebilirsiniz. Sayfaya resim eklemek için < img/ > tagı kullanılır. Linkler < a > < /a > tagı ile verilir. Resme link vermek için < img/ > tagını < a > < /a > tagları arasına koymak gerekir. Şimdi bunun nasıl yapıldığını gösterelim;
< a href="http://www.facebook.com" target="_blank" title="Facebook" ><img src="facebook.jpeg" alt="Facebook" /> < /a >
Bu kodlamanın sonucu aşağıdaki gibidir;
Son olarak taglar içinde gördüğünüz "src", "href", "title", "alt", ve "target" parametrelerini açıklayalım,
src : Görüntülenecek resmin konumunu belirtmek için kullanılır.
href : Bağlantı linkinin adresini yazmak için kullanılır.
target : Bağlantıya tıklandığında yeni sayfanın nasıl açılacağını belirtmek için kullanılır.Değer olarak _blank yazılırsa bağlantı, sizin sayfanız kapanmadan yeni bir sayfada açılır; _self yazılırsa sizin sayfanız kapanır ve linkin bağlanıdğı sayfa görüntülenir.
title : Linkeleri verirken kullanılır. Ziyaretçi fare ile link üzerine geldiğinde açıklayıcı mesajlar görüntülenmesini sağlar.
alt : Web sayfasına resim eklerken kullanılır. Ziyaretçinin web browser'ı (Internet Explorer, Firefox, Chrome artık her ne ise) resmi gösteremediği zaman resme alternatif bir metnin görüntülenmesini sağlar. Ayrıca buraya yazılan yazılar arama motorları tarafından indexlendiğinden "alt" parametresini kullanmanız sitenizin bulunabilirliğini arttıracaktır.
Bu şekilde resimleri düğmelere(buttonlara) çevirmiş oluyoruz...