HTML Sayfası Hazırlama Dersleri
Web Tasarım Kodları
Kendi web sayfanızı hazırlarken
kullanabileceğiniz html kodları
ve web sayfası hazırlama ipuçları
sürüm: 0.5
update: 16 Mayıs 2007
son yazım tarihi: 11 Aralik 1998
önceki düzenleme: 14 Mayis 1998
ilk yazımı: 27 Subat 1998
güncel sürümü için:
İlker Fıçıcılar
İçindekiler:
1 HTML komutları ve
kullanımları
1.1 Temel bileşenler: html, head, title, meta ve body
1.2 Renkler, body, font, ve h1..h6
1.3 Yazıları biçimlendirmek: kalın, yatık, ortalanmış, vs. ...
1.4 Sayfada resim göstermek
1.5 HTML sayfasına bağ (link) yerleştirmek
1.6 Bağlar yardımıyla etkileşimli kullanım örneği
1.7 Ekran düzenine ilişkin daha çok komut:
1.8 Sayfalarda tablo kullanımı
1.9 Basit bir HTML sayfası için gereken son noktalar
2 İleri düzey bilgilerden
seçmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
2.2 Resimlerde 'MAP' kullanımı
2.3 Dinamik HTML
Başlamadan önce şu NVU www editörünü çaliştırarak,
öğrendiklerinizi bir yandan da deneyebilirsiniz.
Sayfanızı reklamsız ve hızlı bir yerde barındırmak için de yıllık 20YTL'ye
oservers.com
'dan veya
web hosting hizmetleri sayfasındakilerin birinden
yer alabilirsiniz.
Bitmiş web sayfanızı kullanarak ise isterseniz
.
1 HTML komutlari ve
kullanimlari:
1.1 Temel bileşenler: html, head,
title, meta ve body
Bir WEB sayfasının standard
bileşenleri şunlardır:
<html> ve </html> :
sayfanin baslangic ve bitisini belirtir.
<head> ve </head> :
sayfanin baslik bilgileri 'title', 'meta' vs. buraya
yerlestirilir.
<title> ve </title> :
sayfanin iceriginin ne oldugunun tanitilmasinda kullanilir. Sayfada
gorunmez ama netscape bunu sayfayi tanimlamakta kullanir.
<meta> : sayfanin icerigi
hakkinda www tarayicilarina bilgi saglamak icin gereklidir.
<body> ve </body> :
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:
<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="html sayfasi icin bir kullanim
ornegi"> </head>
<body bgcolor=white>
'Bu sayfa insa halindedir', ya da 'this page is under construction'
web sayfalarinda ille de olmasi gerektigi dusunulen sacma
yazilardir. </body>
</html>
Aslinda en basit web sayfasi soyle
olabilir:
<html>
Benim neyim eksik?
</html>
sondaki '</html>' yi koymasak
dahi www gosterici programi (lynx, netscape, ...) bunu bir HTML
sayfasi olarak yorumlayacaklardir.
1.2 Renkler, body, font, ve
h1..h6
Onceki ornekte '<body
color=white>' diye, asagidakinin basitlestirilmis bicimini
kullanmistik:
<body font=purple
bgcolor=#FFFFFF text=black link=blue vlink=#808090>
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.
<font color=...> ve
</font> 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:
<html>
<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>
</html>
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.
<b> ve </b> arasindaki
yazilar koyu gorunur.
<i> ve </i> 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.
<p> paragraf basi yapmak icin
kullanilir.
<br> 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 src="dosya-adi" alt="..."
align=... >
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 src=resim.gif
align=right> 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 ...... >
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
src=resim.gif width=300> 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
.....> icinde kullanmak. Eger kullandigimiz resimlerin bir de
bulanik/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha
yapar, ve bunu <img src="resim.gif" lowsrc="hizliresim.gif"
alt="[resim]"> 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="telnet://orca.cc.metu.edu.tr/> Orca'ya Netscape icinden
baglanmak icin buraya tiklayin</a>
yazarak, telnet aracini bir bag
(link) olarak sayfamiza yerlestirmis oluruz.
Ya da;
<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="nntp://news.metu.edu.tr/> Netnews 60000 den fazla konuda
insanlarin yazistigi bolge</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:
<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><img
src="resim1.gif"></a>
</body>
</html>
sonra da ikinci sayfa da
hazirlanmali:
<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><img
src="resim2.gif"></a>
</body>
</html>
... 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 cols=3 width=75%> gibi.
Burada boslugu yuzde yerine piksel olarak da verebiliriz. Ayrica
iki sutun arasindaki boslugu da gutter parametresi ile veririz:
<multicol cols=2 width=500 gutter=25> yazilar...
</multicol>
<spacer type=... size=...
height=... width=... align=...> : Bununla paragraf baslari icin
bosluk birakmak mumkun. Ornegin
<spacer type=block size=48> ile 48x48 piksellik bir bos kare
alan yaratmis oluruz. Burada block yerine vertical ya da horizontal
kullanmak da olasi. Ayrica, <spacer type=block width=320
height=200 align=right> 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><br> yil ay gun <br> ---
--- ---<br></h3>
1.8 Sayfalarda tablo
kullanimi
Genel kullanim:
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sutun 1 yazilari
</td><td [seçenekler] >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></table>
Tablolar satirlar ve sütunlar
seklinde ayrilmis hücrelerden olusuyor. Her yeni satira baslamak
için <tr> etiketini, her yeni sütun için ise <td>
etiketini kullaniyoruz.
Bir örnek ile incelersek:
<table border=1 width=200
cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <td
align=top
width="50%">FPM<br>EDO<br>SDRAM<br>DDR
RAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <td
align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA
ATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">Islemci tipleri</td> <td
align=top width="50%">RISC<br>CISC<br></td>
</tr></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"> 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><td align=center
colspan="2">Bilgisayar Ana
Bilesenleri</td></tr>
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.:
<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;">
Son gelen haberlere gore,
Yunanistan Turkiye'ye savas acti...
</div>
<font color=blue>Ayrintilar 19.30 Ana haber
bulteninde</font>
EOF
İlker Fıçıcılar
11 Aralik 1998
---
|
