kapsamlı html desrleri buyrun

[Krezus]

Içindekiler
Kisaltmalar
HTML dökümanin hazirlanmasi
Temel belirtecler
Konular
Basliklar
Paragraf ve satirlar
Baglantilar
Bagil baglantilar
Kaynak baglantilari
Döküman baglantilari
Diger döküman baglantilari
Diger komutlar
Listeler
Düz listeler
Numarali listeler
Tanimli listeleri
Içiçe listeler
Formatli metinler
HTML yorum satirlari
Özel karakterler
Resim görüntüleme
Tablo hazirlama
Tablo örnekleri
Formlar














HTML dökümanin hazirlanmasi
HTML Dökümanlari tamami ASCII karakterlerden ve herhangi bir editörde yazilabilen metinlerden olusmustur. UNIX üzerinde pico veya vi kullanarak HTML dökümanlarinizi hazirlayabilirsiniz.
Bunun disinda, kullanicinin bu dili bilmedigi farzedilerek Windows ve DOS altinda çalisan çesitli programlarhazirlanmistir. Ayrica, HTML kodunun dogrulugunu kontrol eden yardimci programlarada Internet üzerinden erisilebilir.

Temel bir döküman asagidaki gibi yazilabilir:


< title> Burasi konunun yazilacagi yer </title>
< h1> Bu, 1 numarali baslik </h1>
HTML dünyasina hosgeldiniz. <br>
Birinci paragrafimiz. <p>
Bu da ikinci.. <p>
HTML yazarken, metnin Web programinin anlayacagi sekilde gösterilebilmesi için belirteçler kullanir. Yukaridaki örnekte:

< title> ve < /title> belirteçleri, dökümanin konusunu gösterir.
< h1> ve < /h2> belirteçleri, dökümanin basligini tanimlar.
< p> belirteci, paragraf tanimlar.
Tüm HTML belirteçleri, küçüktür isareti (< ), belirteç ismi ve büyüktür isaretinden (> ) olusur. Genellikle her belirtecin < h1> ve < /h1> örneklerindeki gibi bir çifti olur ve sondaki belirtecin ismi önüne ayraç gelir.
Yukaridaki örnekte < h1> , Web programina 1 numarali baslik formatinda yazmasini, </h1> ise bu formati kapatmasini söyler. < p> belirteci istisna bir durumdur ve < /p> olarak kapatilmaz.

Not1: HTML belirteçleri "case sensitive"dir..? < title > , < tITLE> veya < tiTlE> belirteçleri ayni görevi yaparlar.

Temel Belirteçler
Konular
Her HTML sayfasinin ile ayrilan bir konusu olmak zorundadir. Konular genellikle sayfadan bagimsiz olarak ekranin en üstüne basilir.


<title> Sayfamin konusu </title>
Basliklar
HTML, 1'den 6'ya kadar numaralanmis 6 çesit baslik destekler. Basliklar normal karakterlerden daha büyük ve kalin yazilirlar. Temel olarak,


<Hy> Sayfamin basligi </Hy>
olarak tanimlanmis bir belirteçte y, 1 ile 6 arasi bir deger alabilir. Y sayisi arttikça fontun büyüklügü azalir.
Pek çok uygulamada, sayfanin konusu ile basligini ayni tutabilirsiniz.

Paragraflar
Diger kelime islemcilerdekinin aksine, HTML dökümanlarinda programci özel bir belirteç kullanmadikça bir cümle herhangi bir yerinden ayrilip kalan kismi altta görünebilir, birden fazla bos satir tek satir olarak algilanir.
Asagidaki örnekte, kaynak kodunda iki satir olmasina karsin, WWW "browser" bunu algilamaz ve ekranda tek satir olarak görüntüler. Bir "browser" satir sonlarini ve bos satirlari gözardi edeceginden, paragraflari mutlaka < p> belirteci ile ayirmalisiniz.

HTML'ye hosgeldiniz <br>
Bu ilk paragraf <p>
Buna göre asagidaki örnek, okudugunuz dosyanin basindaki örnekle ayni çiktiyi verir.

<title> Burasi konunun yazilacagi yer </title>
<h1> Bu, 1 numarali baslik </h1>
HTML dünyasina hosgeldiniz. Birinci paragrafimiz. <p>
Bu da ikinci.. <p>

HTML dosyalarinin okunurlugunu artirmak için basliklar ile karsilik gelen belirteçleri ayni satirda, paragraf düzenleyen komutlar ise satir sonunda olmalidir.

Satir sonu belirteci
Paragraf, iki satir arasinda bir satir bosluk birakirken, satir sonu belirteci kullanildigi kursör alta geçer ve takip eden tüm metin,bosluk birakmadan bir alttan yazilir.

Bu ilk satir. <br>
Ikinci satir daha uzun. <br>
Ama bu bir paragraf sonu..<p>
Sayfanin ortalanmasi
Paragraflar ortalanirken < center> ve </center> belirteçlerinden yararlanilir. Ortalanmasi istenen tüm metin, bu iki belirtecin arasina yazilir.


<center>
In practical terms, HTML is a collection of styles.
</center>
Baglantilar
HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sinirli kalmamasidir. Böylece bir sayfadan digerine baglanti yapilabilir. HTML'in bu görevini yerine getirmesini saglayan belirteç <a> 'dir Dökümaninizdan baska dökümana baglanti ypabilmek için:

1. 1. Belirteci girin.
(Kisaca ilk satira <a yazin)

2. 2. Hangi dökümana geçis yapmak istiyorsaniz, ismini yazin.
HREF="dosyaismi"

3. 3. Bu dökümani ekranda hangi isimle göstermek istediginizi belirtin.

4. 4. Belirteci kapatin.
</a>

Kisa bir örnekle açiklayalim:


<a href="internet.html"> Internet nedir? </a>
Ekranda "Internet Nedir?" yazisi belirecek ve kullanicidan burayi seçmeyi bekleyecektir. Kullanici fare ile bu yazi üzerine tikladiginda ise program kontrolü yine bir HTML dosya olan internet.html dosyasina birakacaktir. Bu durumda bulundugunuz dizinden farkli bir dizindeki dosyaya baglanti yapmak isterseniz, o dosyanin ait oldugu dizini yazmak zorundasiniz.Buna göre "languages/Fortran/introduction.html" dosyasini kullanabilmek için

<a href="languages/Fortran/introduction.html" >
Fortran diline giris </a>
seklinde bir belirteç yazmak gerekir.

Kaynak Baglantilari
HTML'in bir diger özelligi ise, tek bir makinaya bagimli kalmadan diger Internet servisleriyle baglanti kurabilmesidir. Bunun için URL (Uniform Resource Locator) kullanilir. URL, http,gopher, news olabilecegi gibi telnet de olabilir. Kullanim "sentaksi",

URL-ismi://makina-ismi[:port]/dizinler/dosya-ismi

Burada URL,

file : Kendi sisteminizde bir dosyaya,
http : Bir WWW sunucusu üzerindeki dosyaya,
gopher : Gopher sunucusu üzerindeki dosyaya,
news : Bir UseNet newsgroup'taki dosyaya,
WAIS : WAIS sunucusu üzerindeki dosyaya

erismek için kullanilir.

Port numarasi, genellikle yazilmaz. Size aksi durum belirtilmedikçe, kullanmaniza gerek yoktur.
Siz de okudugunuz dosyaya ulasmak için,

<a href=http://compclup.ceng.metu.edu.tr/web.lat5.html>
yazdiniz.

Halihazir döküman bölgeleri baglantilari
Bir metin üzerinde belirli bölgelere ulasmak için yine belirteçler kullanilabilir. Diyelim ki bir döküman hazirladiniz ve bunu kullanicinin erisebilecegi 2 parçaya ayirmak istiyorsunuz. Yapmaniz gereken, bu üç parçanin isimlerini belirlemek ve dökümanda yerlerini ayirmaktir. Örnekte,

<a href="bu_dökümanin#1.parça"> Buradan ilk bölüme gidin </a>
<a href="bu_dökümanin#2.parça"> Buradan ikinci bölüme </a>
<a name="1.parça"> Iste ilk bölüm>
Ilk bölüm ile ilgili metinler burada... </br>
<a name="2.parça"> Iste ikinci bölüm>
Ikinci bölüm ile ilgili metiner burada.. </bt>
<a href= ile basladiginiz belirteçte önce döküman ismini, sonra da dökümanin içindeki parça ismini girmelisiniz. <a name= belirtecinde ise o belirteçten itibaren parçanin basladigini anliyoruz.

Kullanici ilk bölüme gitmek için fareyi kullandiginda ekranda ,

Ilk bölüm ile ilgili bilgiler burada

ifadesini görecektir.

Diger döküman bölgelerine baglanti
Yukaridaki örnek dogrultusunda farkli olarak tek yapilmasi gereken, döküman ismine, hangi dökümana baglanti yapmak istiyorsak o ismi vermektir.


<a href="diger_döküman_ismi#parça_ismi"> baska dökümana geçis</a>
<a name=parça_ismi>
Ana komutlar
Listeler
Dökümanlarin göze hos görünmelerini saglamak amaciyla listeler yaygin olarak kullanilir. HTML, pek çok liste çesidi destekler. Bunlar, düz listeler, numarali listeler, tanimli listeler ve içiçe listelerdir.

Düz listeler
Düz liste yaratmak için,

1. 1. Listeye baslamak için belirteç açilir.
<ul>

2. 2. Liste elemanlarini teker teker girerken basina <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.

3. 3. Listeyi bitirmek için belirteç kapatilir.
</ul>

Örnek olarak,

<ul>
<li> Elma
<li> Armut
</ul>
Örnek, ekranda su sekilde görülür :

Elma
Armut

<li> belirteçleri içinde paragraflar, diger dökümanlara baglantilar, ve diger belirteçler kullanabilirsiniz

Numarali Listeler
Numarali listeler, düz listelerden farkli olarak, <ul> belirteci yerine <ol> kullanirlar. Ekranda liste elemanlarinin basinda 1'er artan numaralar görünür.
Asagidaki HTML kodu,

<ol>
<li> Linux Isletim Sistemi
<li> Unix Isletim Sistemi
</ol>
ekrana sunlari yazar:

1. 1. Linux Isletim Sistemi

2. 2. Unix Isletim Sistemi

Tanimli listeler
Genellikle birden fazla basligi olan, her baslik altinda kisa bir metin içeren yazilar, tanimli listeler ile olusturulur. Tanimi yapilacak baslik, <dt> ile belirtilir, <dd> ile baslik altina metin girilir. Tüm liste, <dl> ile </dl> arasina alinir.

<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another participant in the National MetaCenter
for Computational Science and Engineering.
</DL>
Ekrandaki çikti su sekilde görünür:

NCSA

NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

Içiçe Listeler
Tüm liste çesitleri, 3'den fazla bölüm kullanmadikça içiçe yazilabilir. Örnek olarak,

<ul>
<li> Istanbul'un büyük semtleri
<lu>
<li> Beyoglu
<li> Taksim
<li> Bakirköy
</lu>
<li> Ankara'nin belli basli yerlesim birimleri
<lu>
<li> Kizilay
<li> Ulus
</lu>
</lu>
Ekrandaki görüntüsü,

Istanbul'un büyük semtleri
Beyoglu
Taksim
Bakirköy
Ankara'nin belli basli yerlesim birimleri
Kizilay
Ulus


Formatli Metinler
HTML'de, programda yazildigi gibi ekrana çikti vermeyi saglayan komutlar <pre> ve </pre> belirteç çiftleridir. Bunlar kullanildigi zaman tüm metin, yazildigi gibi ekranda görünür. Asagidaki satirlar,


<pre>
PATH=.:~/bin/:$PATH
export PATH
# Set up the terminal:
stty erase "^?" kill "^U" intr "^C" eof "^D"
stty hupcl ixon ixoff
date '+Tarih :%D'
TERM=vt100
</pre>
ekranda su sekilde görünür :

PATH=.:~/bin/:$PATH
export PATH
# Set up the terminal:
stty erase "^?" kill "^U" intr "^C" eof "^D"
stty hupcl ixon ixoff
date '+Tarih :%D'
TERM=vt100
HTML'de yorum satirlari
HTML dokumanda yorumlayici tarafindan gözönüne alinmayacak olan yorum satirlari <!-- ve --> belirteçleri arasina alinir. Bu sayede programi yazmayi kolaylastiracak yorumlar eklenebilir. Örnegin,

<!--
karakterler..
karakterler...
-->
veya

<!-- karakterler... --
-- karakterler.. --
>
Özel karakterler
Web programi, birtakim karakterleri ekranda göstermek için farkli bir format kullanir. Asagida, bu tür farkli karakterleri göstermek için girilmesi gereken kodlar verilmistir.

&lt;

< (küçüktür)

&gt;

> (büyüktür)

&amp;

& (ve)

&quot;

" (tirnak)

Resim Görüntüleme
Eger Web sayfalarini gezerken grafik destekleyen bir program ( Mosaic, Netscape) kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir. Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar. Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir.

Ekranda resim görüntülemek için,

<img src="resmin bulundugu dizin">
demeniz yeterlidir. Burada, nasil HTML dökümanlarin hepsi .html ile bitiyorsa, tüm resim dosyalarinin sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadikça görüntülenen resmin alt kismi ile metin yanyana gelirler.

<img src="../images/G.GIF">
Metin resmin altinda ..
Örnegi, ekranda su sekilde gösterilir:

Metin resmin altinda ..

Sözkonusu metni resmin yanina veya üstüne koymak için ALIGN=TOP opsiyonunu yerlestirin.

<img src="../images/G.GIF" align=top>
Metin resmin üstünde ..
Metin resmin üstünde ..



Veya ortaya almak için ALIGN=MIDDLE kullanin.

<img src="../images/G.GIF" align=bottom>
Metin resmin yaninda ..
Metin resmin yaninda ..

Görüntünün orijinal formatinda degisiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayi ve width=sayi ara belirteçleri kullanilir. "Sayi" degiskeni piksel olarak verilir.




<img src="../images/G.GIF" height=20>


Tablo Hazirlama
Grafik destekli Web programlarinin tablo destegi ile çok çesitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit tablonun olusturulmasi için yeterli degildir. Kullanici, istegi dogrultusunda bunlari gerçeklestirmelidir.

Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.

Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir. Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.

Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir.

Örnegin,

<TABLE BORDER>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>
Yukaridaki örnek, asagidaki gibi görünür:


Average
other
category
Misc

height
weight


males
1.9
0.003



females
1.7
0.002









Dikkat edilmesi gereken noktalar:

Default olarak, header hücreler merkeze alinir, digerleri saga yanasik olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanilir.
Her hücre bos olabilir.
Tablodaki her satirdaki kolon sayisinin esit olmadigi durumlarda kayip hücreler tablonun sagina yerlestirilir ve içleri bos kalir.
Tablodaki satir sayisi <tr belirteci tarafindan belirlenir.
<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.
Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.
Tablo ebadi
Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kisa uzunluk da en genis kelime veya resmin uzunlugu ile bagintilidir.

Align

Tablonun dik halinin nasil olacagini belirler.

Left

Metini ekranin soluna yanasik yazar.

Right

Metini ekranin sagina yanasik yazar.

Colspec

Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf ve onu izleyen bir sayi ile listelenirler (örnegin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttigi yazilari L harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir. Burada belirteç opsiyonlari mutlaka büyük harfle yazilir.

Border

Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar.
<table border=10>

Nowrap

Programin tablo içinde paragraflari otomatik olarak kesmemesi için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.

Tablo Örnekleri
Temel bir 3X2 tablo
A
B
C

D
E
F


<table border>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>


"Rowspan" kullanilmasi
1. hücre
2. hücre
3. hücre

4. hücre
5. hücre


<table border>
<tr>
<td>1. hücre</td>
<td rowspan=2>2. hücre</td>
<td>3. hücre</td>
</tr>
<tr>
<td>4. hücre</td> <td>5. hücre</td>
</tr>
</table>
1. hücre
2. hücre
3. hücre
4. hücre

5. hücre
6. hücre
7. hücre


<table border>
<tr>
<td rowspan=2>1. hücre</td>
<td>2. hücre</td> <td>3. hücre</td>
<td>4. hücre</td>
</tr>
<tr>
<td>5. hücre</td> <td>6. hücre</td> <td>7. hücre
</td>
</tr>
</table>


"Colspan" kullanilmasi
1. hücre
2. hücre

3. hücre
4. hücre
5. hücre


<table border>
<tr>
<td>1. hücre</td>
<td colspan=2>2. hücre</td>
</tr>
<tr>
<td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td>
</tr>
</table>


"Colspan" ve Basliklarin birlikte kullanilmasi
Head1
Head2

A
B
C
D

E
F
G
H


<table border>
<tr>
<th colspan=2>Head1</th>
<th colspan=2>Head2</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>


Yan Basliklarin kullanimi
Baslik1
1. hücre
2. hücre
3. hücre

Baslik2
4. hücre
5. hücre
6. hücre

Baslik3
7. hücre
8. hücre
9. hücre


<table border>
<tr><th>Baslik1</th>
<td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>
<tr><th>Baslik2</th>
<td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>
<tr><th>Baslik3</th>
<td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>

"Rowspan" ve yan basliklarin birlikte kullanilmasi
Baslik1
1. hücre
2. hücre
3. hücre
4. hücre

5. hücre
6. hücre
7. hücre
8. hücre

Baslik2
9. hücre
10. hücre
11. hücre
12. hücre


<table border>
<tr><th rowspan=2>Baslik1</th>
<td>1. hücre</td> <td>2. hücre</td><td>3. hücre</td> <td>4. hücre</td>
</tr>
<tr><td>5. hücre</td> <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>
</tr>
<tr><th>Baslik2</th>
<td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>
</tr>
</table>


10 birim kenari olan tablo
1. hücre
2. hücre

3. hücre
4. hücre


<table border=10>
<tr> <td>1. hücre</td> <td>2. hücre</td>
</tr>
<tr> <td>3. hücre</td> <td>4. hücre</td>
</tr>
</table>


Cellpadding ve Cellspacing belirteçlerinin kullanilmasi
A
B
C

D
E
F


<table border cellpadding=10 cellspacing=0>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
A
B
C

D
E
F


<table border cellpadding=0 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
A
B
C

D
E
F


<table border cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>


Tablo içinde birden fazla satir kullanimi
Ocak
Subat
Mart

Bu 1. Hücre
2. Hücre
Diger hücre,
3. hücre

4. Hücre
ve iste bu
5. hücre
6. hücre


<table border>
<tr>
<th>Ocak</th>
<th>Subat</th>
<th>Mart</th>
</tr>
<tr>
<td>Bu 1. hücre</td>
<td>2. hücre</td>
<td>Diger hücre,<br>3. hücre</td>
</tr>
<tr>
<td>Cell 4</td>
<td>ve iste bu<br>5. hücre</td>
<td>6. hücre</td>
</tr>
</table>


Hücrenin sagina, soluna ve ortasina metin yazmak
Ocak
Subat
Mart

Hepsi ortada
2. hücre
Diger hücre,
3. hücre

saga yanasik
merkezde
default,
sola yanasik


<table border>
<tr>
<th>Ocak</th>
<th>Subat</th>
<th>Mart</th>
</tr>
<tr align=center>
<td>Hepsi ortada</td>
<td>2. Hücre</td>
<td>Diger hücre,<br>3. hücre</td>
</tr>
<tr>
<td align=right>saga yanasik</td>
<td align=center>merkezde</td>
<td>default,<br>sola yanasik</td>
</tr>
</table>

Form Hazirlama
Formlar, kullanicidan bilgi girisi oldugu zaman bunlari okunmaya hazir duruma getirmeye yarar. Diger bir deyisle, kullanici ile programci arasinda bir köprü kurar. Programciya mail atmak, WWW üzerinden arastirma yapmak, belirli bir anahtar sözcügü kullanarak arama yapmak, ve hatta telefon bilgi bankalarina girmek form kullanarak halledilir.

Form konusunu anlayabilmek için, HTML programlamayi bilmek ve en azindan bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.

Form hazirlanirken asagidaki adimlar izlenir :

Programin, form hazirladigimizi bilmesi için, <form .. belirteci açilir. Bu belirtecin iki parametresi vardir:
Method

"Method", kullanicinin girdigi bilgileri ne sekilde alacagimizi belirler. Bu konunun disinda kalmasina ragmen, POST metodunu kullanmanizi tavsiye ederim.

Action

Bu bölüme, alinan girdileri isleyecek programin ismi yazilir. Bu program ayri bir cgi-bin/ dizini altinda durmalidir.

Örnek bir form baslangici söyle olabilir:

<form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/postala" >
Simdi kullanicinin girecegi bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun için asagidaki parametreleri kullanan <INPUT .. > belirtecine gerek vardir.
Name

Kullanicinin klavyeden girdigi bilgilerin tutuldugu degisken burada tutulur.

Size

Bu sayi, ekranda kullaniciya ayrilan boslugun ne uzunlukta olacagini saptar.

Type

Anket tipi (burada anlatilmayacaktir)

Örnek bir girdiyi olusturmak için su tür bir program yazilabilir.

<INPUT NAME="isim" SIZE=36>
Birden fazla satir kullanma durumunda, farkli bir opsiyonu, <TEXTAREA ...> </TEXTAREA> opsiyonunu seçmelisiniz :

Name

Yine ayni degisken ismi.

Rows

Bu sayi kullanicinin yazdigi alanin kaç satir olacagini belirler.

Cols

Bu sayi kullanicinin yazdigi alanin kaç sütun olacagini belirler.

<TEXTAREA NAME="body" rows=10 cols=60></TEXTAREA>
Yukaridaki alana küçük bir metin de yerlestirebilirsiniz.

<TEXTAREA name="body rows=10 cols=60>
Bu metin, kullanicinin yazacagi alanda görüntülenir.
</TEXTAREA>
Neredeyse bitti. Kullanicinin tüm bilgileri girdikten sonra formu ister yollamasi, isterse tekrar silmesi için ikon yaratan bir <input .. belirtecine gerek vardir. Bu belirtecin aldigi opsiyonlar,

Type

Kullanilan formun isleme sokulabilmesi için type degeri submit olmalidir. Baska bir opsiyon da kullanicinin girdigi tüm bilgileri silmektir. Bunun için type'dan sonra reset gelmelidir.

Value

Buton içine bir mesaj yazacaksaniz, bu opsiyonu kullanin. Kullaniciyi bilgilendirmek amaciyla herhangi bir metin yazilabilir.

Reset opsiyonu, formu tamamen temizlemez, sadece formdaki degerler eski hale dönerler.

Tipik bir örnek:

<input type="submit" value="Bu formu gönder" >
<input type="reset" value="Temizle" >
Artik formun yazilimi bitmistir. Formun sonuna </FORM> belirteci konarak form kapatilir.
Tamamlanmis form ekranda su halde görünür.


--------------------------------------------------------------------------------

E-mail adresiniz :

Isminiz :

Buraya birseyler yazabilirsiniz:

Deneme




--------------------------------------------------------------------------------


<hr>
<p>
<form method="POST"
action="http://the-sabotage.orgcgi-bin/deneme"><P>
E-mail adresiniz : <INPUT NAME="email" SIZE=38>>/P><P>
Isminiz : <INPUT NAME="name" SIZE=42><P>
Buraya birseyler yazabilirsiniz: <P>
<TEXTAREA name="body" rows=10 cols=50>Something>/TEXTAREA>
<P>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle"></P>
</FORM>
<p>
<hr>
Yukaridaki formu doldurup gönderin. Form, compclup.ceng.metu.edu.tr adresi üzerinde bir programi çalistiracaktir. Bu program degiskenlerin ismini ve aldiklari degerleri ekrana basacaktir.

Kullanicinin yazdigini okuyabilmek
Bundan sonra kullanicinin forma ne tür bilgiler girdigini bulmak kaldi. Form bilgilerini okuyabilmek için tercihan perl veya shell bilmek gerekir. Burada örnegi verilecek cgi-bin programlarini herhangi bir dilde yazabilirsiniz, buradaki örnekler, hemen herkesin asina oldugu shell script ile yazilacaktir.

Simdi asagidaki bilgilerin girilmesini isteyen bir form hazirlayalim ve .html formatinda yazalim.

Haftanin bir günü (gün)
Bir sifat (sifat)
Bir fiil (fiil)
Yarattiginiz form, cgi-bin dizini altindaki (bu dizine yazma hakki elde etmeniz gereklidir) form.cgi programini çalistirsin.

Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz..

--------------------------------------------------------------------------------

Haftanin bir günü
Bir sifat
Bir fiil


<html>
<title> Form hazirlama </title>

<h3> Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz..</h3>
<hr>
<form method="POST"
action="http://www.the-sabotage.orgcgi-bin/madlib.pl">
<UL>
<LI> Haftanin bir günü <input name="gun">
<LI> Bir sifat <input name="sifat">
<LI> Bir fiil <input name="fiil">
</UL>

<input type="submit" value="Formu postala">
<input type="reset" value="Ekrani temizle">
</form>
</html>

Yukarida sadece çalistirilmayi bekleyen bir form hazirladik. Aslinda bu haliyle program çalismayacaktir, çünkü henüz cgi-bin altina yerlestirmemiz gereken shell programimizi (kodu) yazmadik. Yazacagimiz kodun amaci, kullanicinin girdigi bilgileri ekranda aynen göstermek.

Kod, programcinin istegi dogrultusunda kolayca degistirilebilir.

##
# ayraç.sh
# Bu program, çagirildigi zaman, ekrana $STRING_QUERY degiskeni
# içindeki degerleri basar. Program, $QUERY_STRING içindeki degisken
# sayisini 3 olarak kabul eder.
##

#!/bin/bash
echo "Content-type: text/plain"
echo
deger=`echo "$QUERY_STRING" | awk -F"&" '{ print $1 " " $2 " " $3 }'`
echo $deger
deger1=`echo "$deger" | awk '{ print $1 }'`
deger2=`echo "$deger" | awk '{ print $2 }'`
deger3=`echo "$deger" | awk '{ print $3 }'`
sabit1=`echo "$deger1" | awk -F"=" '{print $2}'`
sabit2=`echo "$deger2" | awk -F"=" '{print $2}'`
sabit3=`echo "$deger3" | awk -F"=" '{print $2}'`
echo $sabit1 $sabit2 $sabit3