Metin
resmin altinda ..
Bu doküman, Web programcilari için, mosaic, netscape, lynx gibi
web programlarini kullanabildikleri gözönüne alinarak yazilmistir. Yazinin amaci
yeni baslayanlara ve HTML programlama hakkinda az bilgisi olanlara yol göstermektir.
Içerik olarak yapilacak her türlü öneri için:
webmaster@kesdi.com
adresine mail atmaniz yeterlidir.
WWW
World Wide Web
SGML
Standard Generalized Markup Language
HTML
Hypertext Markup Language
VRML
Virtual Reality Modeling Language
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:
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.
Her HTML sayfasinin ile ayrilan bir konusu
olmak zorundadir. Konular genellikle sayfadan bagimsiz olarak ekranin en üstüne
basilir.
<title> Sayfamin konusu </title>
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.
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.
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>
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>
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.
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.
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.
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>
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 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 :
<li> belirteçleri içinde paragraflar, diger dökümanlara baglantilar,
ve diger belirteçler kullanabilirsiniz
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
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.
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ü,
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 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.. --
>
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.
<
< (küçüktür)
>
> (büyüktür)
&
& (ve)
"
" (tirnak)
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.
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 |
Misc |
|
| height |
weight |
|
||
| males
|
1.9 |
0.003 |
|
|
| females
|
1.7 |
0.002 |
|
|
|
|
|
|
|
|
Dikkat edilmesi gereken noktalar:
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.
| 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>
| 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>
| 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>
| 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>
| 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>
| 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>
| 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>
| 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>
| Ocak |
Subat |
Mart |
| Bu 1. Hücre |
2. Hücre |
Diger hücre, |
| 4. Hücre |
ve iste bu |
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>
| Ocak |
Subat |
Mart |
| Hepsi ortada |
2. hücre |
Diger hücre, |
| saga yanasik |
merkezde |
default, |
<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>
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 :
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" >
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" >
Tamamlanmis form ekranda su halde görünür.
<hr>
<p>
<form method="POST"
action="http://kesdi.com/cgi-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.
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.
Yarattiginiz form, cgi-bin dizini altindaki
(bu dizine yazma hakki elde etmeniz gereklidir) form.cgi programini çalistirsin.
<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.kesdi.com/cgi-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
Bu döküman sadece HTML programlamaya giris
niteligindedir.