ALTI ÜSTÜ TASARIM – Mehmet Doğan

Linkleri Guvenli Limana Demirlemek

18 Mayıs 2005

Anlamli Web, anlamli kodlama ile baslar ve zenginlesir.

Ilk websitesinin 1990’in sonlarina dogru Internet’de yayinlanmasindan bu yana HTML cok degisti. Bu degisimlerin bir kismi, HTML’in vizyonuna uygun gelisirken, bir kismi ise biz tasarimcilarin israri ve sikayetleri sonucu, vizyona uygun olmayan sekilde gelisti. Bunun tek bir nedeni vardi, o da HTML’li ilk yillardaki kisitlamalar.

Bizler, resim koymak istedik. Tipografiyi degistirmek istedik. Fon beyaz olmasin dedik. Netscape ve Internet Explorer, hem bu isteklere cevap verdi, hem de birbirlerine karsi rekabeti arttirmak icin bircok gereksiz aracida bize ulastirdi.

Blink ve Marque’yi hatirliyor musunuz? Netscape, Blink diye birsey cikardi. Hersey yanip sonmeye basladi o donemde. IE, buna Marque ile karsilik verdi ve “kayan yazilar” cikti ortaya.

Bizler daha da ileri gittik. Spacer.gif kullandik bosluk istedigimiz yerde. Daha sonra birileri, tablo (table) ile tasarim yapmaya basladi. O donemde herkes kenarlari yuvarlak olan tablolarin nasil yapildigini ogrendi view-source’dan.

Kisitlamalar yuzunden, HTML’in kurallarini, istedigimiz sekilde kullanmaya basladik. Anlam cok onemli degildi. H1 demek, bir yaziyi buyuk ve koyu yapmak ile ilgili idi. Sayfa icindeki “en onemli baslik” demek degildi o donemde. Blockquote, bir yaziyi satir icinden baslanmasi anlamina geliyordu. Alinti yapilmis bir paragraf anlaminda degildi.

Butun bunlar degisiyor. CSS, web standartlari, anlamli web ve anlamli kodlama sayesinde, kisitlamalar her gecen gun azaliyor. Artik “Yok oyle birsey. Web’de yapilamaz” denilecek hemen hemen hicbirsey kalmadi. Hersey mumkun ve bunun degismesi icin hicbir neden yok.

Soz anlamli kodlamadan acilmisken, kucuk bir ornek vermek istiyorum.

Bizler, bircok kez, anchor denilen, sayfa ici link verme metodunu kullandik tasarimlarimizda. Bu yontem gayet basit bir yontem. Bir paragraf yazarsiniz, bu paragrafa isim verirsiniz:

1. <a name=”paragraf”></a> <p>Burada paragrafa ait yazilar var.</p>

Ve bu paragrafa, linklenecek kelimeyi yazarsiniz ve # isareti ile anchor linki olusturursunuz:

1. <a href=”#paragraf”>Paragrafa Git</a>

Bu yontemin kotu yani <a name=”paragraf”></a>’in anlamli kodlama icinde hicbir yeri olmamasi. Yani, bir HTML kod acip, icine hicbir bilgi verici icerik yazmadan kapatmak, anlamli webe uymayan bir davranis. Bu <table></table> yazmak gibi birsey.

Peki bunu anlamli bir hale getirebilir miyiz?

Evet. Hemde cok basit bir yontem ile. Bir sayfa icinde iki tip aciklayici yardimci ozellik vardir. Birincisi ID, digeri ise class. ID’ler bir sayfa icinde, yanlizca bir kez kendini gosterebilir. Yani ID’ler essiz olmalidir. Ornegin bir sayfa icinde bir tane sirket logosu (ya da menu) olur diyelim. O halde, yazacagimiz HTML su sekilde olur:

1. <img src=”logo.gif” id=”logo”>

Ayni zamanda bu ID’lere CSS icinde degisik gorsel ozellikler verebiliriz. Diyelim ki bu logonun etrafinda bir kenar cizgisi bulunsun istiyoruz. O halde CSS icinde yer alacak kod su sekilde olur:

1. #logo {border:1px solid #cc0;}

ID’ler CSS icinde her zaman # isareti ile baslarken, class, . (nokta) isareti ile baslar. Bir sayfa icinde class ozelligi birden fazla kullanilabilir. Ornegin sayfa icinde kirmizi fonlu, beyaz renkli yazilari olan bir paragraf olusturmak istiyor ve bu ozelligi bir cok kez degisik paragraflarda tekrarlamak istiyorsak:

1. .ikaz {background-color:red; color:#fff;}

Diye yazdigimiz CSS’in birden fazla paragrafa uygulayabiliriz:

1. <span class=”ikaz”>Burada yazi var.</span> Burada kirmizi olmayan baska bir yazi var. <span class=”ikaz”>Iste burada yeniden kirmizi yazi var<span>

Kisacasi, bir sayfada ID’ler bir kez, class’lar ise birden fazla kullanilir.

Eger, ID’ler esi benzeri olmayan ozellikler ise, biz aynen <a name=”paragraf”></a>’de yaptigimiz gibi, ID’leri kullanip link verebilir miyiz?

Evet. Tum yapmamiz gereken, link verebilecegimiz tum paragraflara, esi olmayan bir ID vermek. Ornegin:

1. <p id=”paragraf”>Burada paragrafa ait yazilar var.</p>

Seklinde olusan bir paragrafa, istedigimiz sekilde anchor verebiliriz:

1. <a href=”#paragraf”>Paragrafa Git</a>

Bu anlatiklarimin isleyis sekilini gorebileceginiz bir ornek sayfa.

Sizce hangisi daha anlamli? Bos a name’mi? Yoksa ID’mi?