Resimlere Link Vermek

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
Google
Yahoo
Bing
Facebook

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...

Web Sayfasına Liste Eklemek

Web sayfamda içeriğimi başlıklar halinde görüntülemek istiyorum nasıl yapabilirim? Sitemde içindekiler bölümü oluşturmak istiyorum nasıl yaparım? HTML sayfasında listeleme nasıl yapılır? HTML bir insan olsaydı tüm bu sorulara şu cevabı verirdi:

< ol > < /ol > ve < ul > < /ul > taglarını kullan!!

Peki < ol > ve < ul > tagları ne manaya gelir? Nasıl kullanılır diye sorduğunuzu duyar gibiyim. Lafı uzatmadan açıklayayım da siz de kurtulun ben de!!

< ol > : Ordinary list "sıralı liste" demektir. Tercih ettiğiniz tipe göre liste elemanları 1,2,3 veya a,b,c veya i, ii, iii şeklinde işaretlenerek sıralanırlar.

< ul > : Unordinary list "sırasız liste" demektir. Tercih ettiğniz tipe göre liste elemanları disk, çember ya da kare şeklinde işaretlenerek sıralanırlar.

Her iki liste türünde de sılamak istediğimiz elemanları < li > < /li > taglarının arasına yazarız. Şimdi sıralı liste nasıl yapılır gösterelim:

< ol type="a" >

< li > Birinci Eleman< /li >

< li >İkinci Eleman< /li >

< li >Üçünncü Eleman< /li >

< li >Dördüncü Eleman< /li >

< /ol >

Burada type parametresine a, 1, i, I, A şeklinde değerler verilebilir. Çeşitli Durumlar için listeleme stillerini aşağıda tablo şeklinde gösterdim.

type="a" için;	type="1" için;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman
type="i" için;	type="I" için;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman

< ul > yani sırasız listenin kullanımı da diğeri gibidir burdaki tek fark type parametresine circle, disc ve square değerlerinin yazılmasıdır. Bu tagın genel yazımını ve kullanııclara sunduğu listeleme stil seçeneklerini aşağıda sıraladım:

< ul >

< li >Birinci Eleman < /li >

< li >İkinci Eleman < /li >

< li >Üçünncü Eleman < /li >

< li >Dördüncü Eleman < /li >

< /ul >

Liste elemanlarının görünümü tarayıcıdan tarayıcıya değişim gösterebilir. Ayrıca kullandığınız metin editörü de bunu etkileyebilir. Mesela ben Blogger'ın editörünü kullanıyorum ve bu editör sırasız listelerde sadece "disc" stiline izin verdiği için diğer stilleri bir resim dosyası olarak göstermek zorunda kaldım. Liste konusu sadece burda yazdıklarımla sınırlı değil. Ayrıca CSS ve javascript kullanarak liste elemanlarının görünümünü büyük ölçüde değiştirebilirsiniz. CSS ve Javascript kullanarak listelerden açılır menüler tasarlanmakta. İsteyenler internette bununla ilgili pek çok kaynak bulabilir. Yakında ben de listelerden menü yapımı ile ilgili bir yazı yazmayı planlıyorum. Şimdilik hepsi bu kadar. Hepinize kolay gelsin.

English Version