Web sayfamızın Google, MSN Search, Slurp, Gigablast, Didikle vs. gibi tarayıcı programlar tarafından içeriğine uygun olarak dizinlerine aktarılmasını istiyorsak, <meta ...> komutunu kullanmak uygun duser. Ayrıca, gene bu komut sayesinde sayfamıza bağlanani bir başka www adresine yönlendirebilir, bu yolla bir takım hareketli sayfalar dahi hazırlayabiliriz.
. Sayfanın kimliği:
Sayfayı tanımlamak için üç ayrı meta komutu yeterli. Bunlarla sayfa hakkında kısa bir paragraf, anahtar sözcük listesi, ve sayfayı hazırlayanin adını verebiliriz.
<meta name="description"
content="Bu sayfada, Tüsiad raporunun üniversitelerde
gerçekleştirdiği değişim sonucunda, üniversitelerin birer
"bilgili-öğretim-işçisi" makinesi durumuna gelmesi
tartışılmaktadır.">
Yukarıda, sayfamızı kısaca tanıtmış olduk. Bu yazı, tarama sonucunda arayan kişiye gösterileceği için kısa, öz, ve içeriğe uygun olması gerekir.
Tarayıcılar artık sayfanın tümünde geçen sözcüklere ve bu sözcüklerle ilgili diger sözcüklere bakarak arama yapsa da, sayfanızın hangi ölçütlere göre aranması gerektiğini sizden iyi kimse bilemez. Onun için, sayfayı tanımlayan anahtar sözcukleri de şu şekilde verebiliriz:
<meta name="keywords"
content="üniversite, gelecek, tüsiad, öğrenim, öğretim, eğitim, 21. yüzyıl, Türkiy,e sermaye, yönetim, etki, rektör, özerk">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kişiyi belirtiriz:
<meta name="author"
content="İlker Fıçıcılar">
Hazırladığımız bütün sayfalara bu türden kimlik vermeyi alışkanlık haline getirirsek, interneti araştırmaları için bir kaynak olarak kullananlara epey yardım etmiş oluruz.
. Sayfa yönlendirme:
Eğer yakında www adresimiz geçersiz olacaksa ve, yeni bir web hosting adresine şimdiden taşınmışsak, bunu kullanıcalara önceden duyurmalı ve onları yeni adrese yönlendirmeliyiz. Bunun için eski sayfamızı şu şekilde değiştirebiliriz.:
<html>
<title>Ilker's CBM Projects</title>
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
<body>
<h1><center>This page is moved to a new address<br>
<blink> http://www.geocities.com/SiliconValley/Vista/5666/</blink>
<br></center></h1>
<p><p><left>
<h3><font color=blue><br>If your browser does not direct you to the new address in 3 seconds, then please
<a href="http://www.geocities.com/SiliconValley/Vista/5666/">
click here</a>.
</font></h3>
</left></body></html>
Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gösterici programına yeni bir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonra yapması gerektiğini '<meta ..' nin devamındaki 'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir süre belirtebilirsiniz. '0' yazarsanız, doğal olarak hemen diğer sayfayı yüklemeye başlar.
Yönelinen sayfanın adresi de, ' ... content="saniye; url=http://...">
biçiminde veriliyor.
Yukarıdaki örneğin gerekli kısmını bir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi isteğimize göre değistirecegimiz, yalnızca iki yer var: 3 sayısı ve url= işaretinden sonraki adres kısmı.
. Basit sayfa canlandırma
Eğer, yukarıdaki gibi bir 'meta' komutu içeren ardışık bir düzen içeren ayrı ayrı sayfalar hazırlarsak, ve 'meta' komutunun adres kısmına sıradaki sayfanın adresini verirsek, hayal gücümüz ölçüsünde hareketli web sayfaları tasarımı yapabiliriz.
Örneğin birisi sayfamıza bağlandığında, ekranda 3 2 1 şeklinde bir gerisayim görmesini ve ardından asıl sayfanın yüklenmesini istiyorsak, şu şekilde sayfalar hazırlarız:
Diyelim ki, http://www.physics.metu.edu.tr/~filker/
adresine bağlanılmasını istiyoruz. Bu durumda index.html dosyasına '3' sayısını koyup bu sayfayı sıradaki '2' rakamını içeren sayfaya yönlendiririz. En sonunda da hiç bir yönlendirme içermeyen asıl sayfamıza geliriz. Dolayısıyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarında dört sayfa hazırlamamız yeterli olacaktır:
index.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/A.html">
<body>
<h1><center> 3 </center></h1>
</body></html>
A.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/B.html">
<body>
<h1><center> 2 </center></h1>
</body></html>
B.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/asil.html">
<body>
<h1><center> 1 </center></h1>
</body></html>
ve son olarak asıl sayfamızı hazırlarız:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hoş Geldiniz' yazısı içermemektedir :-) <br>
<p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayı en son 28 Şubat 2000 tarihinde web hosting firması ftp'siyle güncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavaş olsa da bu şekilde animasyonlar (canlandırma), TV yayıncılığı (bir arkaplan programı ile sürekli yeni resimler ve yeni bir index.html hazırlayarak), ve anlık bilgi sunumu ( borsa fiyatları ) gerçekleştirilebilir. Ama basit resim canlandırmaları için sanırım 'animated gif' türü '.gif' dosyaları daha uygun duşer.
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi veya değişik bir cgi-bin işinin yapılması olarak tanımlanır.
Burada kullanacağımız resmin '.gif' biçiminde olması gereklidir. Sayfanın içinde bu resmi tanımladığımız '<img ...' belirtecinin içine bir kaç unsur daha ekleyerek ve bir de 'map' (harita) alanının kısımlarını şekilleriyle birlikte tanımlayarak işimizi bitiririz.
. Resmin betimi:
<img src="filanca.gif" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita olduğunu.
usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, www gösterici programına söylüyor.
. Usemap tanımı:
<map name="falanca">
<area shape="rect" coords"1,1,159,50" href="dikdortgen.html">
<area shape="circle" coords="80,100,40" href="daire.html">
<area shape="polyg" coords="10,110,150,110,80,190,9,110" href="ucgen.html">
<area shape="default" nohref>
</map>
name ile belirttiğimiz isim '<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." ' kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.
www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu 'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
Evet bir 'harita' tanımı için gerekenler bu kadar.
. Sayfanın kimliği:
Sayfayı tanımlamak için üç ayrı meta komutu yeterli. Bunlarla sayfa hakkında kısa bir paragraf, anahtar sözcük listesi, ve sayfayı hazırlayanin adını verebiliriz.
<meta name="description"
content="Bu sayfada, Tüsiad raporunun üniversitelerde
gerçekleştirdiği değişim sonucunda, üniversitelerin birer
"bilgili-öğretim-işçisi" makinesi durumuna gelmesi
tartışılmaktadır.">
Yukarıda, sayfamızı kısaca tanıtmış olduk. Bu yazı, tarama sonucunda arayan kişiye gösterileceği için kısa, öz, ve içeriğe uygun olması gerekir.
Tarayıcılar artık sayfanın tümünde geçen sözcüklere ve bu sözcüklerle ilgili diger sözcüklere bakarak arama yapsa da, sayfanızın hangi ölçütlere göre aranması gerektiğini sizden iyi kimse bilemez. Onun için, sayfayı tanımlayan anahtar sözcukleri de şu şekilde verebiliriz:
<meta name="keywords"
content="üniversite, gelecek, tüsiad, öğrenim, öğretim, eğitim, 21. yüzyıl, Türkiy,e sermaye, yönetim, etki, rektör, özerk">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kişiyi belirtiriz:
<meta name="author"
content="İlker Fıçıcılar">
Hazırladığımız bütün sayfalara bu türden kimlik vermeyi alışkanlık haline getirirsek, interneti araştırmaları için bir kaynak olarak kullananlara epey yardım etmiş oluruz.
. Sayfa yönlendirme:
Eğer yakında www adresimiz geçersiz olacaksa ve, yeni bir web hosting adresine şimdiden taşınmışsak, bunu kullanıcalara önceden duyurmalı ve onları yeni adrese yönlendirmeliyiz. Bunun için eski sayfamızı şu şekilde değiştirebiliriz.:
<html>
<title>Ilker's CBM Projects</title>
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
<body>
<h1><center>This page is moved to a new address<br>
<blink> http://www.geocities.com/SiliconValley/Vista/5666/</blink>
<br></center></h1>
<p><p><left>
<h3><font color=blue><br>If your browser does not direct you to the new address in 3 seconds, then please
<a href="http://www.geocities.com/SiliconValley/Vista/5666/">
click here</a>.
</font></h3>
</left></body></html>
Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gösterici programına yeni bir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonra yapması gerektiğini '<meta ..' nin devamındaki 'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir süre belirtebilirsiniz. '0' yazarsanız, doğal olarak hemen diğer sayfayı yüklemeye başlar.
Yönelinen sayfanın adresi de, ' ... content="saniye; url=http://...">
biçiminde veriliyor.
Yukarıdaki örneğin gerekli kısmını bir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi isteğimize göre değistirecegimiz, yalnızca iki yer var: 3 sayısı ve url= işaretinden sonraki adres kısmı.
. Basit sayfa canlandırma
Eğer, yukarıdaki gibi bir 'meta' komutu içeren ardışık bir düzen içeren ayrı ayrı sayfalar hazırlarsak, ve 'meta' komutunun adres kısmına sıradaki sayfanın adresini verirsek, hayal gücümüz ölçüsünde hareketli web sayfaları tasarımı yapabiliriz.
Örneğin birisi sayfamıza bağlandığında, ekranda 3 2 1 şeklinde bir gerisayim görmesini ve ardından asıl sayfanın yüklenmesini istiyorsak, şu şekilde sayfalar hazırlarız:
Diyelim ki, http://www.physics.metu.edu.tr/~filker/
adresine bağlanılmasını istiyoruz. Bu durumda index.html dosyasına '3' sayısını koyup bu sayfayı sıradaki '2' rakamını içeren sayfaya yönlendiririz. En sonunda da hiç bir yönlendirme içermeyen asıl sayfamıza geliriz. Dolayısıyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarında dört sayfa hazırlamamız yeterli olacaktır:
index.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/A.html">
<body>
<h1><center> 3 </center></h1>
</body></html>
A.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/B.html">
<body>
<h1><center> 2 </center></h1>
</body></html>
B.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/asil.html">
<body>
<h1><center> 1 </center></h1>
</body></html>
ve son olarak asıl sayfamızı hazırlarız:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hoş Geldiniz' yazısı içermemektedir :-) <br>
<p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayı en son 28 Şubat 2000 tarihinde web hosting firması ftp'siyle güncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavaş olsa da bu şekilde animasyonlar (canlandırma), TV yayıncılığı (bir arkaplan programı ile sürekli yeni resimler ve yeni bir index.html hazırlayarak), ve anlık bilgi sunumu ( borsa fiyatları ) gerçekleştirilebilir. Ama basit resim canlandırmaları için sanırım 'animated gif' türü '.gif' dosyaları daha uygun duşer.
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi veya değişik bir cgi-bin işinin yapılması olarak tanımlanır.
Burada kullanacağımız resmin '.gif' biçiminde olması gereklidir. Sayfanın içinde bu resmi tanımladığımız '<img ...' belirtecinin içine bir kaç unsur daha ekleyerek ve bir de 'map' (harita) alanının kısımlarını şekilleriyle birlikte tanımlayarak işimizi bitiririz.
. Resmin betimi:
<img src="filanca.gif" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita olduğunu.
usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, www gösterici programına söylüyor.
. Usemap tanımı:
<map name="falanca">
<area shape="rect" coords"1,1,159,50" href="dikdortgen.html">
<area shape="circle" coords="80,100,40" href="daire.html">
<area shape="polyg" coords="10,110,150,110,80,190,9,110" href="ucgen.html">
<area shape="default" nohref>
</map>
name ile belirttiğimiz isim '<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." ' kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.
www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu 'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
Evet bir 'harita' tanımı için gerekenler bu kadar.