Muzaffer Tekeş - Html Kodu Hazırlama

HTML SAYFASI HAZIRLAMA DERSLERI 
 
WEB TASARIM KODLARI 
 
sürüm: 0.4 
 
tarih: 11 Aralik 1998 
 
onceki: 14 Mayis 1998 , 27 Subat 1998 
 
güncel sürümü için: 
 
Hazirlayan:DEMYRCY 
 
 
 
 
 
Içindekiler: 
 
 
 
 
 
1 HTML komutlari ve kullanimlari 
 
1.1 Temel bilesenler: html, head, title, meta ve body 
 
1.2 Renkler, body, font, ve h1..h6 
 
1.3 Yazilari bicimlendirmek: kalin, yatik, ortalanmis, vs. ... 
 
1.4 Sayfada resim gostermek 
 
1.5 HTML sayfasina bag (link) yerlestirmek 
 
1.6 Baglar yardimiyla etkilesimli kullanim ornegi 
 
1.7 Ekran duzenine iliskin daha cok komut: 
 
1.8 Sayfalarda tablo kullanimi 
 
1.9 Basit bir HTML sayfasi icin gereken son noktalar 
 
 
 
 
 
2 Ileri duzey bilgilerden secmeler 
 
2.1 Sayfalara 'meta' komutu ile kimlik vermek 
 
2.2 Resimlerde 'MAP' kullanimi 
 
2.3 Dinamik HTML 
 
 
 
 
 
Baslamadan once su www editoru nu calistirarak, ogrendiklerinizi bir yandan da deneyebilirsiniz. 
 
 
 
1 HTML komutlari ve kullanimlari: 
 
 
 
 
 
1.1 Temel bilesenler: html, head, title, meta ve body 
 
 
 
Bir WEB sayfasinin standard bilesenleri sunlardir: 
 
 
 
ve : sayfanin baslangic ve bitisini belirtir. 
 
 
 
ve : sayfanin baslik bilgileri 'title', 'meta' vs. buraya yerlestirilir. 
 
 
 
 
 
: sayfanin iceriginin ne oldugunun tanitilmasinda kullanilir. Sayfada gorunmez ama netscape bunu sayfayi tanimlamakta kullanir. 
 
 
 
 
 
<meta />: sayfanin icerigi hakkinda www tarayicilarina bilgi saglamak icin gereklidir. 
 
 
 
 
 
ve : sayfanin iceriginin baslangic ve bitisini belirtmekte ve sayfa hakkindaki genel tanimlamalari yapmakta kullanilir. 
 
 
 
Yukaridaki bu komutlarin, bir web sayfasinin icindeki siralari asagidaki gibidir. Bir yazi editoru (joe, pico, xedit, edit, vs.) ile ilk ornegimizi yazarsak: 
 
 
 
 
 
 
 
 
 
 
 
<meta content="html sayfasi icin bir kullanim ornegi" name="description" /> 
 
 
 
'Bu sayfa insa halindedir', ya da 'this page is under construction' web sayfalarinda ille de olmasi gerektigi dusunulen sacma yazilardir. 
 
 
 
 
 
 
 
Aslinda en basit web sayfasi soyle olabilir: 
 
 
 
 
 
 
 
Benim neyim eksik? 
 
 
 
 
 
 
 
sondaki '' yi koymasak dahi www gosterici programi (lynx, netscape, ...) bunu bir HTML sayfasi olarak yorumlayacaklardir. 
 
 
 
1.2 Renkler, body, font, ve h1..h6 
 
 
 
 
 
Onceki ornekte '' diye, asagidakinin basitlestirilmis bicimini kullanmistik: 
 
 
 
 
 
 
 
 
 
Burada font ile kullanilan genel yazilarin rengi, 
 
bgcolor ile arkaplan rengi, 
 
text ile tanimsiz yazilarin rengi, 
 
link ile uzerine gelince el hareketi cekilen yazilarin rengi, 
 
vlink ile de secilmis baglarin rengi belirlenir. 
 
 
 
 
 
renk belirtmek icin o rengin ingilizce adi ya da RGB degerleri onaltilik systemde verilir. RGB deki siraya gore 00-FF arasi uc deger kullanilir. Hepsi sifir ise hicbir renkten karistirilmaz. hepsi FF ise her renk maksimum oranda kullanilir ve beyaz elde edilir. 
 
Ornegin salt bir kirmizi #FF0000 ile elde edilir. 
 
 
 
 
 
ve arasindaki yazilar belirtilen renkte yazilir. 
 
 
 
<h1>ve </h1>
den
<h6>ve </h6>
ya kadar standard yazi tiplerinden biri secilerek yazi yazilir. h1 ile belirtilenler h6 ile tanimlananlardan daha buyuktur. 
 
 
 
 
 
ornegin: 
 
 
 
 
 
 
 
<h1>Sayfa basligi icin uygun buyuklukte harfler</h1>
 
 
<h4>Bu harfler sanirim yazi icin yeterliler</h4>
 
 
<h6>Gozleriniz bozuk degilse, ve her gun A vitamini aliyorsaniz bu yazi sizin icin okunabilir olmali.</h6>
 
 
 
 
 
 
 
 
1.3 Yazilari bicimlendirmek: kalin, yatik, ortalanmis, vs. ... 
 
 
 
Onceki ornekte
<h1>,
<h2>, ... ile yazilarin buyukluklerini ayarlamanin basit bir yolunu gormustuk. HTML sayfamizin yazilarina biraz daha kisilik kazandirmak icin asagidaki komutlari da kullanabiliriz. 
 
 
 
ve arasindaki yazilar koyu gorunur. 
 
 
 
ve arasindaki yazilar ise italik basilir. 
 
 
 
<blink>ve </blink>arasindaki yazilar ise yanip soner. 
 
 
 
<center>ve </center>arasindaki yazilar ortalanir. 
 
 
 
<pre> ve </pre>
ile sinirlanan yazilarin goruntusunde ayarlama yapilmaz. Yani birden fazla bosluk varsa bunlar bir tane olacak sekilde azaltilmaz. 
 
 
 
paragraf basi yapmak icin kullanilir. 
 
 
 
 
 
 
bir satir atlamak icin kullanilir. 
 
 
 
 
 

<hr />
bir cizgi ceker. 
 
 
 
 
 
1.4 Sayfada resim gostermek 
 
 
 
 
 
En basit sekliyle, bir sayfaya resim koymak icin asagidaki komut su sekilde; 
 
 
 
 
 
<img alt="..." src="dosya-adi" /> 
 
 
 
 
 
kullanilir. 
 
 
 
 
 
Burada dosya-adi gosterilecek grafik dosyasinin (gif ya da jpg tipinde) bulundugu yer ve adidir. Baglanilan html sayfasi ile ayni dizinde bulunan resimler icin yer adi belirtmeye gerek yoktur. 
 
 
 
 
 
Alt ile ise lynx kullanicilarinin gorebilecegi bir aciklama yazmis oluruz. 
 
 
 
Align ile de resmin konumunu belirleriz. 
 
 
 
 
 
Ornegin: 
 
 
 
 
 
<img alt="" align="right" src="resim.gif" /> ile resmin saga yanasik olarak cizilmesini saglariz. 'right' yerine 'left', 'center', 'middle' gibi konum bildirici bir baska sozcuk de kullanilabilir. 
 
 
 
 
 
Ayrica yukaridakilere ek olarak 'border', 'width', 'height' belirteclerini de <img alt="" /> icinde kullanabiliriz. Bunlardan 'border='i kullanarak resmin cercevesini belirleriz; border=0 dersek hic cerceve cizilmez. 
 
 
 
Width ve height ile resmin boyutlarini belirleyebiliriz. Bunlardan sadace birini verirsek, resmin boyutu orantili olarak cizilecektir. Yani <img alt="" width="300" src="resim.gif" /> demissek, ve de resmimiz aslinda 100 nokta genisliginde 50 nokta yuksekliginde idiyse, ekrana 300 nokta eninde ve 150 nokta yuksekliginde cizilecektir. Her iki degeri de (width=... height=...) kullanmissak, resmin oranini istedigimiz gibi degistirmek mumkun olur. 
 
 
 
Bu arada, sayfanin internetten indirilirken hizli gosterilmesini istiyorsak, her resmin width ve height ozelliklerini kullanmaliyiz. Bu sayede browser (gosterici) programiniz resimlerin yuklenmesini beklemeden cevrelerine yazilari yerlestirebilecektir. 
 
 
 
 
 
Sayfanin hizli geliyor gibi gorunmesini saglamanin bir yolu da 'lowsrc' belirtecini <img alt="" /> icinde kullanmak. Eger kullandigimiz resimlerin bir de bulanik/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha yapar, ve bunu <img alt="[resim]" lowsrc="hizliresim.gif" src="hizliresim.gif" /> seklinde tanimlarsak, ilk once hizliresim.gif yuklenip gosterilecektir. Bu sayede bulanik iken yavas yavas netlesmeye baslayan resimler belirir sayfamizda. Bunun yarari ise sayfaniza bakan kisinin cabuk karar vermesini sagliyor olmasindadir. 
 
 
 
 
 
1.5 HTML sayfasina bag (link) yerlestirmek 
 
 
 
 
 
<a>ve </a>: HTML'nin temeli olan bu komutlarla bag (link) yapilir. 
 
 
 
<a href="hedef bag">Aciklama </a>Biciminde kullanilir. 
 
 
 
Aciklama denilen kisim ister yazi ister bir grafik ya da herhangi bir nesne olabilir. "hedef bag" kismi ise yerel kaynaklari gosteren bir dosya adi ya da uzak bir makinadaki bir baska nesneyi (yazi, grafik, video vs.) gosteren bir bag (link) olur. 
 
 
 
 
 
Bu linkler, mevcut internet araclarindan biridir. 
 
Ornegin: 
 
http:// ftp:// telnet:// gopher:// news:// bu araclardan bazilaridir. 
 
 
 
Bunu kullanirken; 
 
 
 
 
 
<a href="resmim.jpg">Neye Benzedigimi Gormek Icin Buraya Bas</a> 
 
 
 
Yukarida adi gecen resim bu web sayfasi ile ayni dizinde (directory) olmalidir. 
 
 
 
 
 
Baska sekilde ornekler ise: 
 
 
 
 
 
<a href="ftp://ftp.metu.edu.tr/pub/cica-win95/">Windows95 icin Uygulama dosyalari</a> 
 
 
 
 
 
<a href="news:comp.sys.cbm">NetNews'in Commodore bilgisayarlarina iliskin tartismalari</a> 
 
 
 
 
 
Ve, internetin en gozde kullanimi: bir web sayfasindan baska bir web sayfasina baglanma: 
 
 
 
 
 
<a href="http://www.physics.metu.edu.tr/~filker/nukleer/">Turkiye'de nukleer enerji tartismalari</a> 
 
 
 
 
 
dikkat ettiyseniz yukaridaki ornekte sayfanin hangi dizinde oldugu (...ilker/nukleer/") belli ama hangi dosyada oldugu yazilmamis. Boyle bir durumda gosterici program dosyanin adinin 'index.html' oldugunu ongorur. 
 
 
 
Kendi dizininizdeki bir sayfa icin: 
 
 
 
 
 
<a href="ihd.html">Insan Haklari Dernegi ve pismis tavuk icin buraya tiklayabilirsiniz.</a> 
 
 
 
 
 
1.6 Baglar yardimiyla etkilesimli kullanim ornegi 
 
 
 
Bir baga (link) ard arda tiklamak yoluyla, slow motion biciminde ardisik resim gosterebilirsiniz. Bu kullanim en basit sekliyle bir Bilgisayar Destekli egitim sayfasinda kullanilabilir. Amac, kullaniciya konuyu belli bir sirayla vermek ve konu icindeki iliskilerin anlasilmasini kolaylastirmak. 
 
 
 
 
 
Bunu yapmak icin, once tek bir resim ve o resmin link olarak tanimlandigi bir web sayfasi hazirlamalisiniz: 
 
 
 
 
 
 
 
 
 
 
 
<a href="sayfa2.html"><img alt="" src="resim1.gif" /></a> 
 
 
 
 
 
 
 
 
 
sonra da ikinci sayfa da hazirlanmali: 
 
 
 
 
 
 
 
 
 
 
 
<a href="sayfa3.html"><img alt="" src="resim2.gif" /></a> 
 
 
 
 
 
 
 
 
 
... bu sekilde devam edilir. 
 
 
 
 
 
ve ilk sayfa yuklendikten sonra resmin ustune tiklandiginda ikinci sayfa ve icindeki resim yuklenir. 
 
 
 
 
 
Iyi hazirlandiginda, bu basit HTML kullanim sekli ile www-programciligina (Java, cgi-bin, ...) bulasmadan da etkili 'sunu' ve 'anlatilar' yapilabilir. 
 
 
 
1.7 Ekran duzenine iliskin daha cok komut: 
 
 
 
 
 
<multicol cols="2"></multicol>... : Aradaki yazilar cols= ile belirtilen sutunlara ayrilarak ekrana basilirlar. Sadece Netscape3.0 ve ustunde calisir. Sutun icindeki yazinin sutunun ne kadarini kaplayacagini width parametresi ile belirtiriz. <multicol width="75%" cols="3"></multicol>gibi. Burada boslugu yuzde yerine piksel olarak da verebiliriz. Ayrica iki sutun arasindaki boslugu da gutter parametresi ile veririz: <multicol width="500" cols="2" gutter="25"></multicol>yazilar... 
 
 
 
<spacer width="..." height="..." align="..." size="..." type="..."></spacer>: Bununla paragraf baslari icin bosluk birakmak mumkun. Ornegin 
 
<spacer size="48" type="block"></spacer>ile 48x48 piksellik bir bos kare alan yaratmis oluruz. Burada block yerine vertical ya da horizontal kullanmak da olasi. Ayrica, <spacer width="320" height="200" align="right" type="block"></spacer>ile 320x200'luk bir bosluk yaratip bunu ekranda saga dayatmis oluruz. Gene align komutundan sonra right, left, center, absmiddle gibi diger konum belirteclerini kullanabiliriz. 
 
 
 
 
 
  : 1 karakterlik bosluk birakmak icin kullanilir. Basit tablolar yapmak icin kullanilabilir. Ornegin:
<h3> 
  yil   ay     gun 
  ---   ---   --- 
</h3>
 
 
 
 
1.8 Sayfalarda tablo kullanimi 
 
 
 
 
 
  Genel kullanim: 
 
 
 
 
 
 
<table>
 <tbody>
 <tr>
 <td>sutun 1 yazilari </td>
 <td>sütun 2</td>
 <td>sütun 3.....</td>
 </tr>
 <tr>
 <td>2.satirin 1. sütunu</td>
 <td>2. sütunu</td>
 <td>3. sütunu </td>
 </tr>
 </tbody>
</table>
 
 
 
 
 
 
  Tablolar satirlar ve sütunlar seklinde ayrilmis hücrelerden olusuyor. Her yeni satira baslamak için
<tr>
</tr>
etiketini, her yeni sütun için ise
<td> </td>
  etiketini kullaniyoruz. 
 
 
 
 
 
  Bir örnek ile incelersek: 
 
 
 
 
 
 
<table cellspacing="2" cellpadding="2" width="200" border="1">
 <tbody>
 <tr>
 <td width="50%">Bellek tipleri</td>
 <td width="50%">FPM 
 EDO 
 SDRAM 
 DDR RAM 
 RAMBus</td>
 </tr>
 <tr>
 <td width="50%">Disk tipleri</td>
 <td width="50%">MFM/RLL 
 ATA IDE 
 ULTRA ATA 
 SCSI</td>
 </tr>
 <tr>
 <td width="50%">Islemci tipleri</td>
 <td width="50%">RISC 
 CISC 
 </td>
 </tr>
 </tbody>
</table>
 
 
 
 
 
 
  Burada 2x3'lük bir tablo olusturduk. Tablomuz 1 pixel kalinliginda cerceveye sahip (border=1), tablo sayfada 200 pixel genisliginde yer tutacak (width=200), hücreler arasI 2 pixell bos ve 2 pixellik bir kalinlik efektimiz var (cellspacing ile cellpadding). 
 
 
 
 
 
  Örnekte hücre genisliklerin yazI uzunluguna göre otomatik ayarlanmamsI için genislikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü:
<td width="100"> </td>
  ile. 
 
 
 
  Hücreler içindeki yazIlarIn nasIl yerlestirilecegini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz. 
 
 
 
 
 
  Ve eger, bir hücrenin iki hücre genisliginde veya yüsekliginde olmasini istiyorsak colspan ve rowspan seçeneklerini de kullaniyoruz. Önceki örnege bir baslik ekleyecek olursak: 
 
 
 
 
<tr>
</tr>
<td align="center" colspan="2"> </td>
  Bilgisayar Ana Bilesenleri 
 
 
 
  Tablolari icice de kullanmamiz mumkun. Bu sekilde bir kullanimla bir www sayfasindaki resim ve yazilari tam istedigimiz gibi konumlandirmamiz mümkün olur. 
 
 
 
 
 
1.9 Basit bir HTML sayfasi icin gereken son noktalar 
 
 
 
Daha once kisaca deginildigi gibi, ilk yuklenecek sayfanin adi standart olarak 'index.html' olarak belirlenmistir. Dolayisiyla ilk sayfanizi bu sekilde adlandirirsaniz; 
 
 
 
 
 
http://www.physics.metu.edu.tr/~filker/ilksayfa.html 
 
 
 
yerine 
 
 
 
 
 
http://www.physics.metu.edu.tr/~filker/ gibi, daha kisa olan, bir adres kullanabilirsiniz. 
 
 
 
 
 
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.: 
 
 
 
 
 
 
 
 
 
<meta http-equiv="refresh" /> 
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/"> 
 
 
 
<h1><center>This page is moved to a new address 
 
 
<blink>http://www.geocities.com/SiliconValley/Vista/5666/</blink> 
 
 
</center></h1>
 
 
 
<left></left> 
 

<h3> 
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>. 
 
</h3>
 
 
 
 
 
 
 
 
Bu ornekte
<meta http-equiv="refresh" />diyerek, www gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz. 
 
 
 
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '
<meta devamindaki="" nin="" /> 
 
 
 
 
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: 
 
 
 
 
 
 
 
<meta http-equiv="refresh" /> 
content="1;url=http://www.physics.metu.edu.tr/~filker/A.html"> 
 
 
 
<h1><center>3 </center></h1>
 
 
 
 
 
 
 
 
A.html icin: 
 
 
 
 
 
 
 
<meta http-equiv="refresh" /> 
content="1;url=http://www.physics.metu.edu.tr/~filker/B.html"> 
 
 
 
<h1><center>2 </center></h1>
 
 
 
 
 
 
 
 
B.html icin: 
 
 
 
 
 
 
 
<meta http-equiv="refresh" /> 
content="1;url=http://www.physics.metu.edu.tr/~filker/asil.html"> 
 
 
 
<h1><center>1 </center></h1>
 
 
 
 
 
 
 
 
ve son olarak asil sayfamizi hazirlariz: 
 
 
 
 
 
asil.html : 
 
 
 
 
 
 
 
 
 
<h2> 
 
Bu sayfa 'WWW Sayfama Hos Geldiniz' yazisi icermemektedir :-) 
 
 
 
 
... 
 
... 
 
vs. 
 

<hr />
 
 
 
<h5> 
 
sayfayi en son 28 Subat 2000 tarihinde guncelledim. 
 
</h5>
 
 
 
 
 
 
 
 
 
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 alt="" bitiririz.="" isimizi="" tanimlayarak="" birlikte="" sekilleriyle="" kisimlarini="" alaninin="" de="" bir="" ve="" ekleyerek="" daha="" unsur="" kac="" icine="" belirtecinin="" /> 
 
 
 
 
. Resmin betimi: 
 
 
 
 
 
<img height="100" alt="" ismap="ismap" width="160" usemap="#falanca" src="filanca.gif" /> 
 
 
 
ISMAP, resmin bir harita oldugunu. 
 
usemap="..." hangi harita tanimini kullanmasi gerektigini, www gosterici programina soyluyor. 
 
 
 
 
 
. Haritanin tanimi: 
 
 
 
 
 
<map name="falanca"> 
 
<area href="dikdortgen.html" coords="0,0,0,0" shape="RECT" /> 
 
<area href="daire.html" coords="80,100,40" shape="CIRCLE" /> 
 
<area href="ucgen.html" coords="10,110,150,110" shape="RECT" /> 
 
<area coords="0,0,0,0" shape="RECT" /> 
 
</map> 
 
 
 
 
 
name ile belirttigimiz isim '<img alt="" usemap="#..." aynisi.="" kullandigimizin="" ile="" icinde="" /> 
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 coords="0,0,0,0" shape="RECT" />' 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 onmouseover="detay.style.display=''" style="COLOR: purple"> 
onmouseout="detay.style.display='none'">Flash Haber</h2>
 
 
<div id="detay" style="DISPLAY: none; COLOR: red"> 
 
 
 
Son gelen haberlere gore, Yunanistan Turkiye'ye savas acti... 
 
 
 
</div>
 
 
Ayrintilar 19.30 Ana haber bulteninde 
 
 
 
</h2>
 
 
</h2>
</h1>