KeFaLeT Forum
Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? Thumb_747516328
KeFaLeT Forum
Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? Thumb_747516328
KeFaLeT Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.


Oyun,Program,Dizi,Eğlence,Film,Haber Vs.
 
AnasayfaKapıLatest imagesKayıt OlGiriş yap
Hızlı Kayıt | KeFaLeT Forum

 

 Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_?

Aşağa gitmek 
YazarMesaj
KeFaLeT
KeFaLeT-Patron
KeFaLeT-Patron
KeFaLeT


<b>Mesaj Sayısı</b> Mesaj Sayısı : 135
<b>Yaş</b> Yaş : 44
<b>Nerden</b> Nerden : İstanbulL
<b>Kayıt tarihi</b> Kayıt tarihi : 27/02/10

Değerlendirme
Kullanıcı Güc:
Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? Left_bar_bleue50/50Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? Empty_bar_bleue  (50/50)

Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? Empty
MesajKonu: Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_?   Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_? EmptyC.tesi Nis. 03, 2010 11:21 am

Kod:
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 editorunu calistirarak, ogrendiklerinizi bir yandan da deneyebilirsiniz.
 
 
 

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[img]http://www.siirtliler-board.net/images/smilies/tongue.gif[/img]urple;" 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>
Sayfa başına dön Aşağa gitmek
https://kefalet.yetkin-forum.com
 
Html Nasıl Kullanılır_?Hangi Kod Ne İşe Yarar_?
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Html(Kod)Problem Ve Paylaşım-Form*
» Html(Kod)Problem Ve Paylaşım Bölüm Kuralları

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
KeFaLeT Forum :: • ••^v´¯`×) (Script,Html,Radyo Bölümü ) (×´¯`v^•• • :: Script(Kod)Problem Ve Paylaşım :: Script Sorularınız-
Buraya geçin: