Lord
MaximuS ' un Sayfası
Bölüm 4
Imagemap kavramıyla artık grafik tasarım
programlarıyla hazırladığınız resimleri bölümlere ayırabilir, bu bölümleri de
ayrı ayrı sayfalara bağlayabilirsiniz. Örneğin kocaman bir dünya haritası
çizebilir, bu haritayı da ülke ülke ayırarak hazırladığınız ülkelere ait
sayfalarınıza bağlayabilirsiniz. Böylece kullanıcıları uzun liste ve
metinlerle sıkmamış olursunuz.
Bir web sayfasındaki imagemap üç ana bölümden
oluşur: Resim, resmin daha önceden tasarlanmış bölümleri ve bu bölümlerin
bağlantıları. Kullanılan resim, grafik tasarım programlarıyla yarattığımız,
genellikle .GIF ya da .JPG formatında saklanan normal bir resimdir. Resmin
bölümleri ise kullanıcının tıkladığı noktanın, önceden belirlenmiş bir HTML
dokümanına bağlanmasında kullanılır.Imagemap verilerinin nasıl tutulacağını ve
uygulanacağını, kullanılan imagemap'in türü belirler. İki tip imagemap vardır:
Kullanıcı - taraflı (client - side) ve sunucu-taraflı (server - side).
Kullanıcı - taraflı imagemap'lar HTML dosyalarının
içinde saklanır ve web tarayıcıları (browser) tarafından doğrudan yorumlanır.
Kullanıcı map'in bir bölümüne tıkladığında, web tarayıcısı sunucuyla herhangi
bir bağlantı kurmadan ne yapılacağına kendisi karar verir.
Sunucu - taraflı imagemap'ler ise web sunucuları
tarafından yorumlanır. Kullanıcı, sunucu - taraflı bir imagemap'e tıkladığında
istemci tıklanan noktanın koordinatlarını sunucuya gönderir ve sunucudaki
imagemap programı map'i inceleyerek bağlanılacak olan dosyayı belirler. Bir
imagemap'in bölümlerinin üstüste geçme durumunda hangi şeklin kullanılacağı
önceden belirlenmelidir. Bir kullanıcı - taraflı map'te, bölümler 'NOHREF'
olarak tanımlanabilir. Bu şekilde tanımlanmış bir bölüm diğer bölümlerle
çakışırsa, çakışan kısım diğer bölümlerden çıkarılır. Böylece bu bölümün
hiçbir etkisi olmaz.
İkisini de. Eğer bir kullanıcı, kullanıcı - taraflı
imagemap'leri desteklemeyen bir web istemcisiyle sayfanıza bağlanırsa,
hazırladığınız map'i kullanamayacaktır. Ancak Netscape Navigator ve Internet
Explorer gibi en yaygın web tarayıcıları, tarayıcı - taraflı imagemap'leri
destekliyorlar. Unutmamamız gereken bir başka faktör de hazırladığınız
imagemap'in alternatif metin sürümünün hazırlanması gerektiğidir. Çünkü
internet bağlantı hızının düşük olduğu durumlarda, resmin yüklenmesi uzun
zaman alabilir ve kullanıcılar resmin yüklenmesini beklemek istemeyebilir.
Artık grafik tasarım programlarından biriyle
hazırladığımız ve bölümlerini kafamızda tasarladığımız resmi, HTML kodunu da
ekleyerek bir kullanıcı - taraflı map haline getirmeye hazırız.
KOMUT
TANIMI
SHAPE Map'in bölümleridir (default, rect,
circle ve poly değerlerinden birini alabilir).
COORDS Bir bölümün image üzerindeki konumunu
belirtir.
HREF Bir bölümün hangi sayfayı
gösterdiğini belirtir.
NOHREF Bir bölümün hiçbir etkisi olmadığını
gösterir.
ALT Tanıtım amaçlı kısa metin.
TABINDEX Tab sıralamasını belirler.
ONFOCUS O anda odaklanan bölüm
ONBLUR O anda odaklanmayan bölüm
USEMAP Hangi map'in kullanılacağını belirtir.
Imagemap'i bölümlere ayırmak için kullandığınız
şekiller dikdörtgen, çember ve poligon'dan biri olabilir. Eğer dikdörtgen
kullanacaksanız 'COORDS' a vereceğiniz değerler (sol_X, üst_Y, sağ_X, alt_Y);
eğer çember ise (merkez_X, merkez_Y, yarıçap) olmalıdır. Poligon ise (BirinciKöşe_X,
BirinciKöşe_Y, İkinciKöşe_X, İkinciKöşe_Y,...) şeklinde tanımlanır.
<html>
<head>
<title>IMAGEMAP DENEME</title>
</head>
<body>
<map name='map_deneme'>
<area shape='rect' coords='29,44 158,96'
alt='buraya kısa bir açıklama yazınız' href='link1.html'>
<area shape='circle' coords='193,34 263,105'
href='link2.html'>
<area shape='poly' coords='75,188 143,132
219,188 75,188 ' href=link3.html'>
<area shape='default' nohref>
</map><img border='0' src='map1.gif' usemap='#map_deneme'>
</body>
</html>
HTML dokümanında, map'e verdiğimiz isimle (map_deneme)
'img' kısmında usemap'in aldığı değerin (#map_deneme) aynı olduğuna dikkat
edin. Siz de bilgisayarınızda bu ismi değiştirerek ve 'src' kısmında
hazırladığınız resmi kullanarak kendi imagemap'inizi yaratabilirsiniz.
CGI (Common Gateway Interface), web sunucularının
fonksiyonlarını genişletmekte kullanılan bir arabirimdir. Kullanıcıların,
tarayıcıları vasıtasıyla yazdığınız programları çalıştırmalarına yarar. CGI
kullanarak, tarayıcıdan aldığınız bilgileri web sayfanıza uğrayan
kullanıcılarla iletişim kurmakta kullanabilirsiniz. Misafirlerinizin bir 'guestbook'
yardımıyla size mesajlar bırakabilmesinden tutun da gündemi oluşturan
konularla ilgili oylamalara kadar birçok özelliği, CGI programlarının
çokyönlülüğü sayesinde web sitenize katabilirsiniz.
Normalde web sunucunuzun kapasitesini arttırmak
için sunucunun özelliklerini kendiniz değiştirmek zorunda kalırsınız. Bu pek
tercih edilmeyen bir çözüm yöntemidir, çünkü internet ve web protokolleri
hakkında etraflıca bilgiye sahip olmanız gerekir. Ancak CGI ile birlikte ağ
protokolleri hakkında bilmeniz gerekenler en aza indirgeniyor. CGI
programları, web sunucularıyla iletişimde standart bir yol izledikleri için az
önce değindiğimiz problemler pek fazla önem teşkil etmiyor. Web sunucularıyla
iletişim sağlayabilen herhangi bir dilde yazacağınız bir program, CGI
protokolünü tanıyan bütün web sunucularında çalışacaktır.
Bir CGI programı hazırlamak için sabit bir
programlama dili ile sınırlı değilsiniz. CGI iletişimi kısaca veri girişi ve
çıkışına dayanır. Standart veri girişi ve çıkışına izin veren herhangi bir
programlama dili, CGI yazabilmenize olanak sağlayacaktır. CGI programları
yazmak için en çok kullanılan programlama dili PERL'dür. Fakat C, C++, Visual
Basic gibi diğer diller de kullanılabilir.
Bir CGI programı tarayıcıdan iki tür bilgi alır:
Birincisi, sunucu ve tarayıcı hakkındaki bilgiler (sunucunun adı, versiyonu,
kullandığı port numarası, tarayıcının türü vb.), diğeri ise kullanıcı
tarafından girilen bilgiler. İkinci yolda HTML formları kullanılır. İki ay
önceki köşemizde HTML formlarının nasıl hazırlandığını incelemiştik. Örnekte
görüldüğü gibi kişisel ya da ticari sayfanıza giren kullanıcıların size web
üzerinden notlar bırakabilmelerini sağlayan bir form hazırladığımızı
düşünelim. Kullanıcı isim, elektronik - posta ve mesaj bilgilerini girip
'Gönder' butonuna bastığında, sizin de çoğu zaman farkedebileceğiniz gibi,
tarayıcı bizi aşağıdaki gibi bir adrese götürür:
http://Alanadı/cgi-bin/ merhaba.cgi? Name=TedBir& Surname=Ted&e-mail= TedBir@Hotmail.com&Comments=Merhaba
Tarayıcı, eğer önceden bu şekilde ayarlanmışsa, '?'
işaretinden önceki kısımda '.cgi' uzantısını görünce, bu dosyanın yalnızca bir
HTML sayfası ya da resim dosyası olmadığını ve bunun çalıştırılması gereken
bir program olduğunu anlar. '?' işaretinden sonra gördüğümüz kısım ise 'Query
String' olarak adlandırılır. 'Query String'in içinde her bölüme ait veriler
'&' işareti ile birbirinden ayrılmıştır.
Şimdi de gelin tarayıcı ekranına 'Merhaba' yazan
ilk CGI programımızı Perl dilinde yazalım:
#!/usr/local/bin/perl# merhaba.cgi - ilk CGI
programım# print 'Content-Type:text/html\n\n';
# print '\n';# print '';
# print '\n';
# print '\n';
# print '<b><I>Merhaba, bu benim ilk cgi denemem
</b></I>\n';
# print ' \n';
Yukarıdaki programı 'merhaba.cgi' olarak kaydedelim
(Genellikle 'http://alanadı/cgi - bin/' dizininin altına kaydedilir).
Yazdığımız program üzerinde dikkat etmemiz gereken
birkaç nokta var. İlk olarak yazdırma, 'print' fonksiyonunu kullandığımıza
dikkat edelim. CGI programları, veri çıkışı için özel fonksiyonlar ya da özel
dosya giriş çıkışları gerektirmezler. Tarayıcıya veri gönderebilmek için
yalnızca 'stdout'u kullanmak yeterli olacaktır. İkinci olarak da ilk 'print'
fonksiyonunun içeriğine bakalım.
'Content - Type: text/html\n\n'
satırı, kullanıcılar tarafından görülmez. CGI
kullanarak, web tarayıcılarına istediğiniz dosya tipini gönderebilirsiniz:
HTML, metin, grafik, video vb. Ancak tarayıcıya gönderdiğiniz bilginin türünü
belirtmelisiniz. Son olarak, programımızı 'merhaba.cgi' olarak kaydetmemize
rağmen, her zaman '.cgi' uzantılı olarak kaydetmek zorunda olmadığınızı
belirtelim
Arama motorları arama yaparken kaynak olarak, ilk
kez HTML 2.0 versiyonunda karşımıza çıkan meta elementi içindeki bilgilere
başvuruyorlar. Siz de eğer etkili kullanırsanız, hazırladığınız doküman
hakkında çok çeşitli bilgiyi incelemeye sunarak, arama motorlarının işlerini
kolaylaştırmış olursunuz.
Önce gelin web robotları ve arama motorlarının
çalışma prensiplerini inceleyelim. Bir web robotu, WWW üzerindeki bir dokümanı
alıp, bu döküman üzerindeki referanslara (link verilen dokümanlara) birer
birer giderek, web'in hipermetin yapısını inceleyen programa verilen addır.
Web üzerinde gezinmek için kullandığımız
tarayıcılar birer web motoru değildir, çünkü kendileri otomatik olarak
dokümanları incelemez, kullanıcı tarafından yönlendirilirler. Bir arama motoru
ise kendisine verilen bir veritabanından, belirli anahtar kelimeleri tarayan
programdır. Bu taramayı yaparken çeşitli yöntemler kullanırlar. Bunlardan bir
tanesi de, veritabanına kayıtlı dokümanların 'meta' elementlerinin
incelenmesidir.
HTML, dokümanı hazırlayanın meta bilgilerini
belirlemesine izin verir, ancak bu bilgi dokümanın içeriğinden ziyade
dokümanın kendisi hakkındadır. Örneğin doküman sahibinin ismini belirtmek için
META elementini aşağıdaki gibi kullanabilirsiniz:
<META name='Author' content='TedBir'>
Meta elementi bir özelliği belirtir (buradaki
örneğimizde 'author') ve onun değerini atar ('TedBir'). Meta bilgilerinin
girilmesi iki adımda gerçekleşir. Birincisi dokümanın özelliklerinin ve bu
özelliklerin aldığı değerlerin girilmesi, ikincisi ise özelliklerin ve
değerlerinin bulunduğu başka bir profile işaret edilmesi.
Meta elementi sadece başlangıç işareti ile
kullanılır. (bitiş işareti yoktur). 'lang' özelliğini kullanarak,
dokümanın hangi dilde yazıldığını da belirtebilirsiniz. Örneğin kullandığınız
dil ingilizce ise;
<META name='Author' lang='en' content='TedBir'>
'Http-equiv' özelliği 'name'
özelliğinin yerine de kullanılabilir ve dokümanlar HTTP protokolüyle transfer
edildiklerinde özel önem taşırlar. HTTP sunucuları burada belirtilen değerleri
inceleyerek, tarayıcıya cevap verirler. Örnek kullanımı ise aşağıdaki gibidir:
<META http-equiv='Expires' content='Wed, 8 Sept 1999 14:25:27 GMT'>
Burada belirttiğiniz tarih, tarayıcı ön bellekleri
tarafından, dokümanın değiştirilip değiştirilmediğini belirlemekte kullanılır.
Eğer değiştirilmemişse, kendi tuttukları dokümanı kullanıcının hizmetine
sunarlar.
Meta elementinin en çok kullanılma sebebi, arama
kalitesinin arttıtılabilmesine yardımcı olmaktır. Birçok arama motoru 'lang'
in aldığı değeri inceleyerek, kullanıcıların istedikleri dildeki doküman
bilgilerini ararlar. Örneğin Altavista'da bir bilgiyi Fransızca arıyorsanız,
Altavista dokümanınız hakkındaki bilgiyi Fransızca olarak gösterme işlemini 'lang'
in değerine bakarak yapar. Örneğin;
<!-- Türkçe arayanlar için--><META name='keywords' lang='tr' content='bilgisayar,
internet, sabit disk'><-- İngilizce arayanlar için --><META name='keywords'
lang='en' content='computer, internet, hard disk'>
Meta elementini kullanarak, doküman boyunca
kullanacağınız bazı bilgilerin başlangıç değerlerini önceden girebilirsiniz.
Bu, dokümanızda kullanacağınız 'script' dili, 'style sheet' dili veya
kullanacağınız karakterlerin kodu olabilir.
<META http-equiv='Content-Type' content='text/html; charset=ISO-8859-9'>
Buradaki karakter kümesi (ISO-8859-9), sizin Türkçe karakterleri
kullanacağınızı belirtir.
