yazili html dersleri2
2 Ileri duzey bilgilerden secmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamizin FindIt, Excite, Crawler, Altavista vs. gibi tarayici programlar tarafindan icerigine uygun olarak dizinlerine aktarilmasini istiyorsak, <meta ...> komutunu kullanmak uygun duser. Ayrica, gene bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.
. Sayfanin kimligi:
Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi, ve sayfayi hazirlayanin adini verebiliriz.
<meta name="description"
content="Bu sayfada, Tusiad raporunun universitelerde
gerceklestirdigi degisim sonucunda, universitelerin birer
"bilgili-ogretim-iscisi" makinasi durumuna gelmesi
tartisilmaktadir.">
Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz, ve icerige uygun olmasi gerekir.
Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:
<meta name="keywords"
content="universite gelecek tusiad ogrenim ogretim egitim 21. yuzyil Turkiye sermaye yonetim etki rektor ozerk">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:
<meta name="author"
content="Ilker Ficicilar">
Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.
. Sayfa yonlendirme:
Eger yakinda www adresimiz gecersiz olacaksa ve, yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:
<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 gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '<meta ..' nin devamindaki 'content="3;....">' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.
Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.
Yukaridaki ornegin gerekli kismini bir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi istegimize gore degistirecegimiz, yalnizca iki yer var: 3 sayisi ve url= isaretinden sonraki adres kismi.
. Basit sayfa canlandirma
Eger, yukaridaki gibi bir 'meta' komutu iceren ardisik bir duzen iceren ayri ayri sayfalar hazirlarsak, ve 'meta' komutunun adres kismina siradaki sayfanin adresini verirsek, hayal gucumuz olcusunde hareketli sayfalar hazirlayabiliriz.
Ornegin birisi sayfamiza baglandiginda, ekranda 3 2 1 seklinde bir gerisayim gormesini ve ardindan asil sayfanin yuklenmesini istiyorsak, su sekilde sayfalar hazirlariz:
Diyelim ki, http://www.physics.metu.edu.tr/~filker/
adresine baglanilmasini istiyoruz. Bu durumda index.html dosyasina '3' sayisini koyup bu sayfayi siradaki '2' rakamini iceren sayfaya yonlendiririz. En sonunda da hic bir yonlendirme icermeyen asil sayfamiza geliriz. Dolayisiyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarinda dort sayfa hazirlamamiz yeterli olacaktir:
index.html icin:
<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 icin:
<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 icin:
<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 asil sayfamizi hazirlariz:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hos Geldiniz' yazisi icermemektedir :-) <br>
<p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayi en son 28 Subat 2000 tarihinde guncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavas olsa da bu sekilde animasyonlar (canlandirma), TV yayinciligi (bir arkaplan programi ile surekli yeni resimler ve yeni bir index.html hazirlayarak), ve anlik bilgi sunumu ( borsa fiyatlari ) gerceklestirilebilir. Ama basit resim canlandirmalari icin sanirim 'animated gif' turu '.gif' dosyalari daha uygun duser.
2.2 Resimlerde 'MAP' kullanimi
Map'ler bir resmin degisik yerlerine tiklandiginda degisik baglarin yuklenmesi veya degisik bir cgi-bin isinin yapilmasi olarak tanimlanir.
Burada kullanacagimiz resmin '.gif' biciminde olmasi gereklidir. Sayfanin icinde bu resmi tanimladigimiz '<img ...' belirtecinin icine bir kac unsur daha ekleyerek ve bir de 'map' (harita) alaninin kisimlarini sekilleriyle birlikte tanimlayarak isimizi bitiririz.
Resmin betimi:
<img src="filanca.gif" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita oldugunu.
usemap="..." hangi harita tanimini kullanmasi gerektigini, www gosterici programina soyluyor.
. Haritanin tanimi:
<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 belirttigimiz isim '<img ..' icinde usemap="#..." ile kullandigimizin aynisi.
shape belirteci ile dikdortgen, daire, ya da poligon tanimlayabiliyoruz. Dikdortgenin koordinatlarini: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biciminde 'coords="..." ' kisminda belirtiyoruz. 'href="..." ' bolumu ise bu dikdortgen alana tiklanildiginda neyin yuklenmesi gerektigini soyluyor.
Cember icin X-merkez,Y-merkez,R-yaricap biciminde koordinat tanimliyoruz.
Poligonu tanimlarken sirayla ker bir kosenin X,Y biciminde koordinatlarini giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarini saat-yonunde tanimlamamiz gerektigidir. Ayrica poligonu kapamaya da tarayici programlar arasinda uyumsuzluk nedeniyle dikkat etmeliyiz. Yukaridaki ucgen ornegini incelemek aslinda poligon tanimi yapabilmek icin yeterli. Ucgen icin dort nokta kullandik (dorduncu ilkinin dibinde). Ayni zamanda bu ucgenin X,Y betimlemeleri de saat-yonunde girilmis (noktalari kagit uzerinde yaklasik olarak isaretlerseniz bu 'saat-yonu' kavramini daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bolgelerine tiklanildiginda hic bir sey yapilmamasi gerektigini soyluyoruz.
Evet bir 'map' tanimi icin gerekenler bu kadar.
2.3 Dinamik HTML
Asagidaki ornekte, mouse yazinin uzerine geldiginde, tiklamaksizin yazi degisir:
<h2 style="color:purple;" onmouseover="detay.style.display=''"
onmouseout="detay.style.display='none'">Flash Haber</h2>
<div id="detay" style="display:'none'; color:red;">
2.1 Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamizin FindIt, Excite, Crawler, Altavista vs. gibi tarayici programlar tarafindan icerigine uygun olarak dizinlerine aktarilmasini istiyorsak, <meta ...> komutunu kullanmak uygun duser. Ayrica, gene bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.
. Sayfanin kimligi:
Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi, ve sayfayi hazirlayanin adini verebiliriz.
<meta name="description"
content="Bu sayfada, Tusiad raporunun universitelerde
gerceklestirdigi degisim sonucunda, universitelerin birer
"bilgili-ogretim-iscisi" makinasi durumuna gelmesi
tartisilmaktadir.">
Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz, ve icerige uygun olmasi gerekir.
Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:
<meta name="keywords"
content="universite gelecek tusiad ogrenim ogretim egitim 21. yuzyil Turkiye sermaye yonetim etki rektor ozerk">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:
<meta name="author"
content="Ilker Ficicilar">
Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.
. Sayfa yonlendirme:
Eger yakinda www adresimiz gecersiz olacaksa ve, yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:
<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 gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '<meta ..' nin devamindaki 'content="3;....">' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.
Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.
Yukaridaki ornegin gerekli kismini bir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi istegimize gore degistirecegimiz, yalnizca iki yer var: 3 sayisi ve url= isaretinden sonraki adres kismi.
. Basit sayfa canlandirma
Eger, yukaridaki gibi bir 'meta' komutu iceren ardisik bir duzen iceren ayri ayri sayfalar hazirlarsak, ve 'meta' komutunun adres kismina siradaki sayfanin adresini verirsek, hayal gucumuz olcusunde hareketli sayfalar hazirlayabiliriz.
Ornegin birisi sayfamiza baglandiginda, ekranda 3 2 1 seklinde bir gerisayim gormesini ve ardindan asil sayfanin yuklenmesini istiyorsak, su sekilde sayfalar hazirlariz:
Diyelim ki, http://www.physics.metu.edu.tr/~filker/
adresine baglanilmasini istiyoruz. Bu durumda index.html dosyasina '3' sayisini koyup bu sayfayi siradaki '2' rakamini iceren sayfaya yonlendiririz. En sonunda da hic bir yonlendirme icermeyen asil sayfamiza geliriz. Dolayisiyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarinda dort sayfa hazirlamamiz yeterli olacaktir:
index.html icin:
<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 icin:
<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 icin:
<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 asil sayfamizi hazirlariz:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hos Geldiniz' yazisi icermemektedir :-) <br>
<p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayi en son 28 Subat 2000 tarihinde guncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavas olsa da bu sekilde animasyonlar (canlandirma), TV yayinciligi (bir arkaplan programi ile surekli yeni resimler ve yeni bir index.html hazirlayarak), ve anlik bilgi sunumu ( borsa fiyatlari ) gerceklestirilebilir. Ama basit resim canlandirmalari icin sanirim 'animated gif' turu '.gif' dosyalari daha uygun duser.
2.2 Resimlerde 'MAP' kullanimi
Map'ler bir resmin degisik yerlerine tiklandiginda degisik baglarin yuklenmesi veya degisik bir cgi-bin isinin yapilmasi olarak tanimlanir.
Burada kullanacagimiz resmin '.gif' biciminde olmasi gereklidir. Sayfanin icinde bu resmi tanimladigimiz '<img ...' belirtecinin icine bir kac unsur daha ekleyerek ve bir de 'map' (harita) alaninin kisimlarini sekilleriyle birlikte tanimlayarak isimizi bitiririz.
Resmin betimi:
<img src="filanca.gif" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita oldugunu.
usemap="..." hangi harita tanimini kullanmasi gerektigini, www gosterici programina soyluyor.
. Haritanin tanimi:
<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 belirttigimiz isim '<img ..' icinde usemap="#..." ile kullandigimizin aynisi.
shape belirteci ile dikdortgen, daire, ya da poligon tanimlayabiliyoruz. Dikdortgenin koordinatlarini: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biciminde 'coords="..." ' kisminda belirtiyoruz. 'href="..." ' bolumu ise bu dikdortgen alana tiklanildiginda neyin yuklenmesi gerektigini soyluyor.
Cember icin X-merkez,Y-merkez,R-yaricap biciminde koordinat tanimliyoruz.
Poligonu tanimlarken sirayla ker bir kosenin X,Y biciminde koordinatlarini giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarini saat-yonunde tanimlamamiz gerektigidir. Ayrica poligonu kapamaya da tarayici programlar arasinda uyumsuzluk nedeniyle dikkat etmeliyiz. Yukaridaki ucgen ornegini incelemek aslinda poligon tanimi yapabilmek icin yeterli. Ucgen icin dort nokta kullandik (dorduncu ilkinin dibinde). Ayni zamanda bu ucgenin X,Y betimlemeleri de saat-yonunde girilmis (noktalari kagit uzerinde yaklasik olarak isaretlerseniz bu 'saat-yonu' kavramini daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bolgelerine tiklanildiginda hic bir sey yapilmamasi gerektigini soyluyoruz.
Evet bir 'map' tanimi icin gerekenler bu kadar.
2.3 Dinamik HTML
Asagidaki ornekte, mouse yazinin uzerine geldiginde, tiklamaksizin yazi degisir:
<h2 style="color:purple;" onmouseover="detay.style.display=''"
onmouseout="detay.style.display='none'">Flash Haber</h2>
<div id="detay" style="display:'none'; color:red;">
