Bekir Kemal Ataman's Macworld Türkiye Articles Page

Elektronik iletisim okulu kösesi --16-- Mayis 1998

Listeler, Linkler ve daha neler neler...

Web sayfasi tasarlamanin, kagit üzerinde tasarim yapmaktan oldukça farkli oldugunu, kagit üzerinde yapabileceginiz pek çok seyi web sayfalarinda yapamayacaginizi, buna karsin web sayfasi tasarlarken de ses, animasyon, video gibi unsurlari kullanabilme avantajina sahip oldugunuzu geçen ay belirtmistim. Bunun sebebi ise, web tasariminda kullanilan HTML dilinin biçimden ziyade içerik ve yapinin iletilebilmesi için tasarlanmis olusuydu.

Kagit üzerinde tasarim ile web tasarimi arasindaki farkliliklarin en göze çarpanlarindan birisi, geçen ayki yazida bahsettigim üzere paragraf ve satirlarin düzenlenis sekli. Kelime islem programlarinda alisik oldugumuz üzere paragraf basini marja kiyasla içerlek baslamak gibi bir imkanimiz yok. Ama sol marja kiyasla daha içerlek baslayan paragrasar derseniz, iste o mümkün. Ancak, bunun da bir kisim sinirlamalari var. Örnegin, kelime islem ya da sayfa tasarimi programlarindaki cetvel kavramini burada uygulayabilmek sözkonusu degil. Web sayfalarindaki içerlek metinler, daha çok tab duraklarindakine benzer sekilde standart mesafelerde kaydirilabiliyor. Bunun yapmanin yolu ise liste kavrami ile ilgili komutlardan geçiyor.

Web üzerinde listeleme yapmanin iki sekli var: Birisi düzenli digeri düzensiz. Düzenli listelerde, liste unsurlari numaralanmis olarak siralaniyor. Düzensiz listelerde ise satir basina numara yerine mermi (bullet) isareti konuyor. Simdi su örnege bakalim:

<HTML> <HEAD>
<TITLE>Deneme Sayfasi</TITLE>
</HEAD><BODY>
Bu normal bir satir.
<UL>
<LI>Bu duzensiz bir listenin birinci satiri.
<LI>Bu ise ikinci satir
<OL>
<LI>Burada duzenli ve yeni bir liste basladi. Diyelim ki bu satirda lafi biraz fazla uzattik ve sag marjin disina tasip alt satira gectik.
<LI>Bu ise duzenli listenin ikinci satiri.
<BR>Bu satirin basinda mermi ya da numara yok.
</OL>
<LI>Burada tekrar ilk listeye donduk.
<BR>Bu satirin basinda da mermi yok.
</UL>
Burada yine normal bir satir var.
</BODY></HTML>

Web sayfasi görüntüsü Sekil 1'de verilen bu örnekte görülecegi üzere, <UL>...</UL> etiketleri düzensiz bir liste (unordered list) olusturmak için kullaniliyor ve <LI> etiketiyle baslayan satirlar liste unsuru (list item) olarak tanimlaniyor. Liste unsurunu olusturan satirlar, mermi isaretiyle basliyor ve listenin kendisi ana metinden daha içerlek ve bir satir aralik verilerek görüntüleniyor.

Sekil 1

Listeyi tanimlarken <UL>...</UL> yerine <OL>...</OL> kullanirsak, bu kez düzenli bir liste (ordered list) elde ediyoruz ve liste unsurlarini belirtmek için mermi yerine bu kez sira numarasi kullaniliyor.

Dikkat ederseniz, burada <LI> etiketini kapatmak için </LI> türünden ikinci bir etikete ihtiyaç yok. Listenin kendisini kapatan </UL> veya </OL> etiketinden önce yeni bir liste baslattiginiz takdirde ise ikinci liste daha içeriden basliyor. Ekrana sigmayip bir alt satira sarkan metin, üsttekiyle ayni hizaya giriyor. Yeni satir veya paragraf komutu verilerek baslatilan metinler ise yine bir üsttekiyle ayni hizada yer aliyor.

Uç(ur)maya hazir misiniz?

Web sayfalarinin en keyisi yani, herhalde üzerinde tikladiginiz linkler araciligiyla dünyanin bir kösesinden ötekine savrulmaktir. Web tarayici programinizin ayarlarina bagli olarak çogunlukla alti çizili olarak gösterilse de bazen herhangi bir metin parçasinin ya da seklin altina gizlenmis de olabilir. Bu tür linkleri ise imleci üzerine getirdigimizde ok yerine el sekli almasindan anlariz.

Link yapmak için kullanilan komutun adi çapa (anchor) ve <A>...</A> etiketleriyle gösteriliyor. Ama daha önce gördüklerimizden farkli olarak, iki ayri parça halinde çalisiyor. Burada, <A>...</A> etiketlerinin arasinda yer alan ifade, tarayicida görünen kisim için kullaniliyor. Linke tiklandiginda gidilecek yer ise <A> etiketinin içine yerlestiriliyor ve HREF="..." ifadesiyle (Hypertextual REFerence= Hiper metinsel gönderme) belirtiliyor.

Tirnak isaretlerinin arasinda yer alan adres ise iki türlü olabiliyor: Mutlak ya da göreli. Mutlak adreste, linke tiklandiginda gidilecek adresin tam tanimi yaziliyor ve bu çogunlukla baska bir sunucu üzerindeki sayfalara gönderme yapmak için kullaniliyor.

Simdi, az önce ögredigimiz liste komutlarini mutlak linklerle beraber kullanarak bir faydali linkler sayfasi olusturalim:

<HTML> <HEAD>
<TITLE>Deneme Sayfasi</TITLE>
</HEAD><BODY>Faydali adresler:
<UL><LI><A HREF="http://www.apple.com">Elma'nin yeri icin buraya tiklayin</A>
<LI><A HREF="http://www.bilkom.com.tr">Turkiye'deki elma bahcesi</A>
<LI><A HREF="http://www.macworld.com">Guzel bir dergi</A>
<LI><A HREF="http://www.macworld.com.tr">Guzel ve Turkce bir dergi</A></UL>
<P>Macworld'un yayin yonetmenine yazmak isterseniz <A HREF = "mailto:apakb@macworld.com.tr" > buraya tiklayin. </A>
<BR>Bana yazmak isterseniz <A HREF = "mailto:bataman@macworld.com.tr"> bataman@macworld.com.tr </A> adresini kullanin.
</BODY></HTML>

Sonra da hemen bir kaç tasarim püfü verelim:

Tarayicidaki görüntüsü Sekil 2'de görülen bu sayfada iki tane kötü tasarim örnegi var. Birincisi ilk linkte yer alan "Elma'nin yeri icin buraya tiklayin" ifadesi. Siz siz olun, hiç bir sayfanizda "buraya tiklayin" gibi bir ifade kullanmayin. Web sayfasi dolasan herkes, herhangi bir linki çalistirmak için onun üzerinde tiklamak gerektigini bilir.

Sekil 2

Ikincisi, baska bir sunucu üzerinde yer alan bir sayfaya gönderme yapiyorsaniz, tarayicida görünecek ifade için o sayfanin mutlak adresini yazmayi iyi bir alternatif olarak düsünün. Yani buradaki örnegi su sekilde yapmayi düsünün:

<LI> Elma'nin yeri: <A HREF= "http://www.apple.com"> http://www.apple.com </A>

Çünkü bir kisim ziyaretçiler, o linki hemen kullanmak yerine yalnizca not alip baska bir vakit gezmeyi düsünüyor olabilir; bu amaçla tarayicilarinda Save As (Text) komutunu çalistirabilir, vs.

Posta güvercinleri

Örnekte farkedeceginiz üzere, sayfanin altindaki iki satirda yer alan linkler digerlerinden farkli. Bu linklere tikladiginizda fiilen baska bir web sayfasina gitmiyorsunuz, bunun yerine tarayicinizin e-posta modülü devreye girip size bir mesaj yazma penceresi açiyor ve mesajin gidecegi adresi de önceden doldurmus oluyor.

Yukarida degindigim kötü tasarim örnegiyle, e-posta adresi belirten linklerde de karsilasilabiliyor. Bu türden linklerde adresin kendisinin tarayici ekraninda görünmesini saglarsaniz, ilkel bir kisim tarayicilar kullanan kisiler de size ulasma imkani bulabilirler. Ayrica, yukarida degindigim üzere "buraya tiklayin" türünden ifadeler kötü tasarimcilik örnegi sayiliyor. Yani birinci degil, ikinci örnekteki türden tasarimi tercih edin.

Yalniz, bunun yakin zamanlarda ortaya çikan bir sakincasi var; e-posta yoluyla toplu halde reklam gönderip insanlarin canini sikmayi meslek edinmis kisiler ya da bunlara adres satan daha uyaniklar, yeni bir adres toplama yöntemi olarak web sayfalarina dadanmis vaziyetteler. Kullandiklari robot programlar web üzerinde dolasip, bu türden ilan edilmis adresleri topluyor. Rivayete göre bunlar tarayicilara görünen adresleri tercih ediyor ama sayfanin HTML kodunda yer alan mailto linklerini dikkate almiyormus. Dolayisiyla, bu türden robotlara karsi önlem alacaksaniz adresinizi görünür kilmayi tercih etmeyebilirsiniz. Bence bu kadar panik yapmaya gerek yok ama illa ki "adres yazmayacagim" diyorsaniz "buraya tiklayin"dan daha iyi bir ifade bulun.

Misafir agirlamak

Göreli linkler ise kendi web sayfalarinizin bulundugu sunucu üzerinde yer alan adresler için kullanabileceginiz kestirmeler. Bunlarin en büyük avantaji ise tasinabilir olmalari.

Diyelim ki Macworld Türkiye sunucusu üzerinde kendi web sitemi kurmak için, diger editörlerle beraber bana da belirli bir alan ayrildi. Bu alana yerlestirecegim dosyalarin derli toplu olmasi için de (adet oldugu üzere) hepsinin tek bir klasörde toplanmasi isteniyor. Bu klasörün adi BATAMAN olsun. Web tarayicisinda http:// www.macworld.com.tr/bataman adresini yazan herhangi bir sörfçünün benim siteme ulasabilmesi için ulasacagi ilk dosyanin adinin index.html veya default.html olmasi gerekiyor. Bunlardan hangisinin kullanilacagi ve dosya uzantisi olarak html yerine yalnizca htm kullanilip kullanilamayacagi, sunucunun hangi isletim sistemi altinda çalistigina göre belirleniyor. Bu bilgiyi web sayfalarinizi yayinlayacak servis saglayicidan edinmeniz gerekiyor.

Sekil 3

Diyelim ki sitemi düzenlerken Sekil 3'tekine benzer bir ana sayfa hazirladim ve burada yaptigim muhtelif isleri siraladim. Ama bunu yaparken bu islerin ayrintisini baska sayfalarda anlattim ve bu ana sayfadan digerlerine yalnizca birer link verdim. Hocalik, yazarlik ve sistem operatörlügü ile ilgili bilgileri birer sayfada anlattim. Ama yayinladigim arsivcilik dergisinin eski sayilarini Internet üzerinden de erisilebilir kilmak istedigim için tek sayfaya sigdirmam mümkün olmadi. Bu yüzden bu sayilarin her biri için ayri birer sayfa hazirladim. Ileride bunlarin sayisi çok artacagi için bütün dosyalarimi tek bir BATAMAN klasörü içinde toplamanin fazlaca daginiklik yaratacagini düsündügümden Archimedia dergisiyle ilgili bilgileri ve eski sayilari ayri bir klasör halinde topladim. Bu durumda dosyalarimin, sunucunun hard diski üzerindeki düzenlenis sekli, Sekil 4'teki gibi oldu. Sekil 3'teki web sayfasinin HTML kodu ise söyle olacaktir:

<HTML><HEAD>
<TITLE>Bekir Kemal Ataman</TITLE>
</HEAD><BODY><H1>Hos Geldiniz! </H1>
<H2>Ben kimim?</H2>
Benim adim Bekir Kemal Ataman. <P>
Ayni anda muhtelif islerle ugrasmayi hayat tarzi olarak benimsemis bir insanim. Iste bunlardan bazilari:
<UL><LI><A HREF="hoca.html">Universitede ogretim gorevliligi</A>
<LI><A HREF="yazar.html">Macworld Turkiye dergisinde editorluk</A>
<LI><A HREF="./Archimedia/yayinci.html">Archimedia dergisinin yayinciligi</A>
<LI><A HREF="sysop.html">ArchiMac BBS'in Sistem Operatorlugu</A></UL>
Bana bu sayfalardan size ulasma imkani veren, Yayin Yonetmenimiz <A HREF="../apakb/index.html"> Bahattin Apak'a </A> tesekkuru bir borc bilirim. <P>
Bana yazmak isterseniz <A HREF = "mailto:bataman@macworld.com.tr"> bataman@macworld.com.tr </A> adresini kullanin.
</BODY></HTML>

Dikkat ederseniz, hocalik, yazarlik ve sistem operatörlügü ile ilgili sayfalara gönderme yaparken kestirme kullandim. Yani <A HREF="..."> etiketinin içinde örnegin "http://www.macworld.com.tr/bataman/hocalik" adresini oldugu gibi yazmak yerine yalnizca "hocalik.html" yazdim. Göreli link diye buna deniyor.

Gönderme yapilacak sayfa, index.html veya default.html adli ana sayfa ile ayni klasörün içinde yer aliyorsa, gönderme yapilacak dosyanin adini yazmak yetiyor. Eger gönderme yapilacak dosya, ana sayfanin bulundugu klasörün içinde yer alan bir alt klasörün içindeyse, bu durumda önce "./" isaretiyle bir klasör aranmasi gerektigi belirtiliyor, sonra klasörün adi yaziliyor, "/" isaretiyle ayirdiktan sonra da o klasörün içindeki dosyanin adi veriliyor. Dolayisiyla, yukaridaki örnekte Archimedia dergisinin yayinciligi ile ilgili bilgileri verdigim sayfaya ulasmak için <A HREF="./Archimedia/yayinci.html"> ifadesini kullanmak gerekiyor.

Sekil 4

Sekil 3 ve 4'te görüldügü üzere, BATAMAN klasörüyle ayni klasör içinde yer alan bir baska klasördeki Bahattin Apak'in sayfasina link vermek için ise, önce ana sayfanin bulundugu klasörün bir üst klasörüne çikmak gerektigini belirtmem gerekiyor. Bunun için "../"isaretini kullaniyorum. Böylece Macworld adli klasöre ulasiyorum. Sonra bu klasör içinde aranmasi gereken APAKB klasörünü, daha sonra da bu klasör içinde bulunan Bahattin Apak'in ana sayfasina ait index.html dosyasinin adini belirtiyorum. Bunun için kullandigim çapa etiketinin aldigi biçim ise <A HREF="../apakb/index.html"> oluyor.

Yukarida bu tür linklerin en büyük avantajinin tasinabilir olmalarindan bahsetmistim. Bunun anlami su: Hazirladiginiz siteyi ilk bulundugu yerden bir baska klasör, hard disk, bilgisayar ya da servis saglayiciya tasimaya karar verirseniz tek yapmaniz gereken ana sayfanin adini, yeni sunucunun sartlarina uygun olarak index.html ya da default.html olarak degistirmek. Oysa tasarim sirasinda göreli link yerine mutlak link kullanacak olursaniz, tasinma sonrasinda sayfalarinizda geçen her bir linki teker teker kontrol edip düzeltmeniz ve yeniden çalisir hale getirmeniz gerekecek

Burada hemen bir püf noktasina dikkatinizi çekeyim: Dosya adlarinda asla Türkçe karakter kullanmayin. Sayfalarinizi yayinlayan sunucu bir Macintosh üzerinde çalisiyor bile olsa, tarayicilarin Türkçe karakterleri kodlama sekillerindeki farkliliklar nedeniyle bunlar ciddi sorunlar çikariyor. Mesela yukaridaki örnekte dosyanin adi yayinci.html yerine yayinci.html olursa, kullandiginiz tarayici bu dosyanin bulunamadigi mesajini verecektir. Bu tür bir durumda tarayicinin dogru dosyaya dogru sekilde ulasabilmesinin tek kosulu Character Encoding olarak Turkish-Mac seçeneginin önceden seçilmis olmasidir. Aksi durumda, hazirladiginiz sayfalara benim su anda yaptigim gibi kendi makinenizin hard diskindeyken ulasmaya da çalissaniz, dosyalarin adreslerini tanimlayis sekliniz kesinlikle dogru dahi olsa, dosyanin bulunamadigi mesajiyla karsilasabilirsiniz. Eger sayfalarinizi yayinlayacak olan sunucu baska bir isletim sistemi altinda çalisiyor ise o zaman dosya adlarinda Türkçe karakter kullanmayi hepten unutun.