HTML'e Giris

Mustafa Akgul
akgul@bilkent.edu.tr

Icindekiler:

Bu notlar esas olarak [3] kaynakdan bazi bolumler alinarak ve ufak tefek degisikliklerle Unix ortaminda kendi kisisel web'ini olusturmak isteyen kisiler icin Turkce bir baslangic dokumani olmayi hedeflemektedir.

Iyi orneklere bakmak ve onlari bicim olarak taklit etmek oldukca hizli bir yoldur. Begendiginiz bir web dokumanini kaynak halinde saklamak mumkundur (Netscape'de `File' menusunde `Save as ..' secenegi ve `source' bicimini secmek; lynx'de ise once \ ve daha sonra `print'i secmek yeterlidir). Daha sonra sevdiginiz bir editorle kendi istediginiz gibi degistirebilirsiniz.

URL: Internet'de Nesne Adresleri

Internet'de sunulan nesne adresleri genellikle, protokol, makina adi, ve o makinada soz konusu protokole gore erisim yolu (path)'i icerir. Internet uzerinde evrensel adrese URL (Uniform Resorce Label) diyoruz. En genel halinde bir URL'i soyle yazabiliriz:
URL: protokol://[[user[:passwd]@]dagitici-makina[:port][/path-selection]
burada [..] olarak belirtilen kisim secimli kisimdir. Bazi URL ornekleri:

file://localhost/ftp/ftp/pub/INFO/Turkce/Internet/inet2.tex
ftp://ftp.bilkent.edu.tr/pub/INFO/Turkce/Internet/inet2.tex
gopher://gopher.bilkent.edu.tr:70/00/bilkent/archive/INFO/.../inet2.tex
http://www.bilkent.edu.tr/prv/ftp/INFO/Turkce/Internet/inet2.tex
wais://dagitici-makina:210/veritabani-adi
telnet://user@makina
news:news-grup
news:makale-numarasi@makina
news://makina/news-grup
ftp://user:passwd@makina
http://www.bilkent.edu.tr/cgi-bin/phf?Qnamecaglar$Qtitle&Qdepartment
http://www2.infoseek.com/Titles?qtturkey
http://query3.lycos.cs.cmu.edu/cgi-bin/pursuit?usenetsite

Ilk 4 URL [1] nolu referansin \TeX \ formatindaki kopyasini belirtir. file: sadece `/ftp' diskini goren Bilkent'teki her makina icin gecerlidir, digerleri evrenseldir. Sondaki ftp://'li ornek'de mosaic gibi bir web istemcisi ile kendi hesabiniza ftp yapmak icin kullanabileceginiz bir URL'dir. Sayet kullanilan port standart ise :port kismina gerek yoktur. `path-selection' kisminda soz konusu nesneye erismek icin gerekli yol belirtilir. Telnet'de `user' kullanilmasi gereken kullanici adidir. Bu genellikle kullaniciya hatirlatilir ve kullanicinin bu bilgiyi girmesi beklenilir. /cgi-bin/phf?.. URL'inde ise,`phf' programina ? in sagindakiler, cesitli saha ve aldigi deger olarak iletilmistir. phf telefon/email adreslerin tutuldugu veri tabanina sorguluyan `ph' programina gecit veren bir programdir.

Kisisel Web Sayfalari

Unix ortaminda bir web sunucusunun calistigi bir bilgisayarda hesabi olan kullanicilar, kendi dizinlerinde bir ozel dizin acip, oraya yerlestikleri dokumanlari tum Internet dunyasina acabilirler. Bu dizinin adi sunucuya bagli olarak secilebilirsede bugun en yaygin hali public_html dizinidir. Bu durumda kendi giris dizininde yarataciginiz public_html dizinin URL'i
http://www-serverin-adi/~username/
seklindedir. burada `username' sizin login adiniz, `www-serverin-adi' da ilgili web sunucusun kanonik adi olmasinda yarar var.
http://www.bilkent.edu.tr/\~ali/
http://www.metaksan.com.tr/\~ant/
gibi. URL bir dizini isaret edince, web sunucusu {\bf index.html} dosyasini arar ve varsa onu sunar; yoksa o dizinin bir ls -l (DIR) ciktisini sunar esas olarak. index.html dosyasi ve onun isaret ettigi dosyalarda referans verilmeyen dosyalari dis kullanici gormez; ama sayet bir kullanici dosyanin adini dolayisiyla URL'ini biliyorsa, o dosyaya erisebilir.

Bir dosyanin web'de sunulabilmesi icin, dosyanin ve dosyaya giden yoldaki dizinlerin web sunucunu calistiran kullaniciya erisim hakki olmasini gerektirir. Bu da sizin ana dizinin x (execute), public_html'in x (execute) dosyalarin ise r (read) hakki olmasi gerekir. Bunun kolay bir yolu, sizin ana dizininizin ve public_html'in 755, public_html'deki dosyalarin ise 644 seklinde izinli olmasi gerekir.

 chmod 755  username;
 chmod  755  public_html ; 
 chmod 644  *
 


komutlari, ana dizinin disinda, ana dizinde ve public_html icinde verilmesi yeterli olur.

HTML Dosyalari

{ Biz burada HTML'in temellerini anlatmayi amacliyoruz. HTML, HTML2 ve HTML3'den anlatmadigimiz pek cok sey olacaktir. Kaynakca'da ve Internet uzerinde pek cok kaynak bulabilirsiniz. Ilk olarak http://www.bilkent.edu.tr/WWW/'den basliyabilirsiniz.}

HTML -- HyperText Markup Language, SGML (Standart Generalized Markup Language)'in akrabasidir, ondan DTD (dokuman tipi tanimlarini) alir. HTML hypertext dokumanlarinin mantiksal yapisini belirler. (Bu anlamda TeX/LaTeX'le benzerlik gosterir). Ama dokumanlarin kullanicinin ekraninda nasil gosterilecegi kullanicinin web programi (Browser) belirler: yetenekleri ve yapilan tercihlere bagli olarak. Dolayisiyla HTML'i WYSIWYG programlarin kavramlarindan ayirmak gerekir.

Web yada http protokolunda sunulan dosyalarin buyuk cogunlugu html dilinde yazilmis dosyalardir ve bunlari cogunlukla .html yada .htm (DOS temelli sistemler) ile gosterilir. Aslinda bir web'i, bir miktar eksigiyle, ftp ve gopher sunuculariyla sunmak mumkundur. Mosaic, Netscsape gibi programlar ftp://host/File.html.Z URL'ini bile alip kullaniciya sunabilirler. Cok az sayida da olsa bu tur sunucular vardir.

Bir HTML dosyasinda cesitli `markup'lar vardir:
<XXX OPSIYONLAR diger tanimlar> Isimlendirme </XXX>
<YYY OPSIYONLAR>
seklinde ya tekli yada esli olurlar. < > HTML `syntax'i icin cok onemlidir. Once onemli tekli isaretleyicileri verelim:
<BASE>, <IMG>, <ISINDEX>, <BR>, <P>, <LINK>, <NEXTID>, <HR> . Kullanilan `markup' kelimelerinde kucuk harf buyuk harf farketmez ama, isaret edilen dosya isimlerinde bu fark onemlidir. Duzgun bir HTML dosyasi su mantiksal yapiyi gosterir:

<HTML>
<HEAD>
.......
</HEAD>
<BODY>
.....
</BODY>
</HTML>

Komutlarin mantiksal yapisi onemlidir, goruntunun ve bosluklarin genelde hic bir onemi yoktur, sadece <PRE> .. </PRE> icinde gecerlidir.

Bilkent baslangic sayfasinin HEAD kismi

<HTML>
<HEAD>
<TITLE>Bilkent University Home Page</TITLE>
<LINK rev=made HREF="mailto:akgul@bilkent.edu.tr">
<!-- OWNER_INFO="Bilkent University" -->
</HEAD>

Bunlara ek olarak NEXITID'yi genellikle editorler koyar, <BASE HREF=URL> seklinde kullanilir, ISINDEX ise o dokuman uzerinde tarama yapilacagi zaman kullanilir.

Hypertext baglantilari

Hypertext'in en onemli ozelligi baska dokumanlara baglantilarin olmasidir. Bu ise <a HREF="URL"> Isimlendirme </A> seklinde olur.

 <a HREF="http://gn.bilkent.edu.tr:7001/">GN </a>
<a HREF="gopher://gopher.bilkent.edu.tr">Main </a> 
<a HREF="telnet://guest@bliss.bilkent.edu.tr">Bilkent
Library - Bliss </A> Use <i>guest</i> for login 
<a HREF="ftp://ftp.bilkent.edu.tr/pub/">FTP Interface </a>  or 
<a HREF="/inet-turkey/"> Internet Services In Turkey </A> 


Ve gercek goruntu


GN
Main
Bilkent
Library - Bliss
Use guest for login
FTP Interface or
Internet Services In Turkey



Burada sirasiyla, http, gopher, telnet, ftp ve dosya'ya olan referansi gorduk. Ayni sunucu uzerinde olan dosyalara isaret ederken HREF="dosya.adi" o anda okunan dosya ile ayni dizindeki bir dosyayi gosterir, HREF=/dir1/dosya.html ise web'in baslangic noktasina gore patikayi belirtir. <a HREF="../../dosyax.html"> seklinde referanslar da gecerlidir; iki ust dizindeki bir dosyaya isaret eder. Sayet <BASE="URL"> belirtilmisse goreceli olarak adreslendirilmis dokumanlar adreslerinin onune `BASE'de belirtilen URL eklenerek yorumlanir.

Bir dokumanin istenen noktalarini isaretlemek ve o noktalara baglanti koymak; dolayisiyla, dokuman icinde bir noktadan oteki noktaya atlamak mumkundur. Bunun icin <A NAME=web> Turkiye deki Webler </a> ornegindeki gibi isaretleyip sonra'da <a HREF="#web"> Webler </a> ya da
<a HREF="http://www.alfa.edu.tr/turkiye.html#web"> Weblerin Listesi </a> seklinde baglanti koyabiliriz.

Belirtilen dosya .html disinda her hangi bir dosya da olabilir: .gif, .jpeg, .txt v.s. sayet bu dosya turu bir MIME tipi ise ve `browser' onu taniyorsa gerekli islemi yapacaktir; aksi halde `default' dosya olarak islem gorecektir: yani .txt ya da .text sonekli dosya duz metin dosyasi olarak sergileyecektir. .gif, .jpeg, .xbm, .xpm degisik formatlarda resim (image) dosyalari, .mpeg film dosyasi, .au ses dosyasi, .Z ve .gz compress/gzip ile sikistirilmis dosya.

Headings, Paragraphs, Breaks}

Dokuman icinde <h2> Metin </h2> seklinde H1'den, h6'ya kadar baslik kullanabilirsiniz. Ana baslik icin H1, giderek alt basliklar icin h2, h3 seklinde kullanabilirsiniz. Iki paragrafi ayirmak icin <p> kullanabilirsiniz. HTML'da <p> .... <p> seklinde de kullanabilirsiniz. Basliklarda (H1,..), Listeleme elemanlarinda, <address> ve <blockquote> icin <p> koymak zorunda degilsiniz. <P> yeni bir paragraf baslatirken bir miktar fazladan bosluk birakir. <br> ise satiri orada keser ama fazla boslugu birakmaz.

Listelemeler

HTML iki ana gurup olarak liste yapmaya izin verir: Tanimsal listeler ve normal listeler. Tanimsal listelerde 3 `markup' var:<DL> </DL> <DT> </DT> ve <DD> </DD>. DL liste gurubunu baslatir, `compact' argumani alabilir, sonucun daha derli toplu olmasini istemek icin. Daha sonra bir satirlik tanim iceren DT ve biraz icerden baslayan daha uzun olabilen ve tanimi aciklayan DD. DD kismi bos birakilabilir. bilkent.html'den ornek verirsek: (kisaltarak), ve biraz degistirerek

<dl compact> Bilkent  Services
<dt> Bilkent Web-Cwis services 
<dd><ul> <li> 
<a HREF="http://www.bilkent.edu.tr/prv/bilkent-cwis/">Bilkent CWIS</a> 
| <a HREF="http://www.ug.bcc.bilkent.edu.tr/">Undergraduate </A>
</ul>
<dt> Bilkent  Gopher  Servers 
<dd><ul>
<li><a HREF="gopher://gopher.bilkent.edu.tr">Main </a> 
</ul>
<dt>Bilkent Library, Catalog, Phonebook etc :
<ul>
<li><a HREF="telnet://bguest@139.179.70.1">Bilkent
Library - Bliss </A> Use <i>guest</i> for login 
<li>Phonebooks <a HREF="gopher://ns.bilkent.edu.tr:105/2"> Main  via
Gopher </a>
</ul>
<dt> Archives in Bilkent 
<dd> Bilkent Main Archive
<ol> <li> <a HREF="ftp://ftp.bilkent.edu.tr/pub/">FTP Interface </a>  
<li><a HREF="http://www.bilkent.edu.tr/prv/ftp/">HTTP Interface </a>
<li> <a HREF="ftp://ftp.cs.bilkent.edu.tr/">Bilkent CS Archive</a>
 <li>  <a HREF="ftp://ftp.bups.bilkent.edu.tr/">Bups Mac
Archive (Prep School) </a>
</ul>
</dl>

Bilkent Services

Bilkent Web-Cwis services

·        Bilkent CWIS | Undergraduate

Bilkent Gopher Servers

·        Main

Bilkent Library, Catalog, Phonebook etc :

Archives in Bilkent

Bilkent Main Archive

1.     FTP Interface

2.     HTTP Interface

3.     Bilkent CS Archive

4.     Bups Mac Archive (Prep School)


Diger liste mekanizmalari OL (sirali listeler icin) , UL, MENU ve DIR'dir. Her listeleme nesnesi

·  ile isaret edilir. Son 3'u arasindaki fark cok azdir. DIR'de liste nesneleri icin isaretleyici kullanmaz. <OL> <li> nesne-1 <li> nesne-2 <li> nesne-3 </OL> seklinde bir listelemede liste isaretleyici olarak 1., 2., 3. gibi sayilar goruruz. OL yerine UL kullandigimizda 1, 2, 3 yerine, web uygulama programina bagli olarak,`*', `bullet', kucuk kareler goruruz.

  1. nesne-1
  2. nesne-2
  3. nesne-3

Bir metin icinde altini cizmek istediginiz kisimlari isaretlemek icin kullanabileceginiz: EM STRONG CODE ikilileri vardir. Normal olarak <EM> Italik </EM>, <strong> Siyah </strong> ve <code> type writer </code> seklinde sunulur. Ayni sekilde <CODE><SAMP> <KBD> <VAR> <DFN> <CITE></CODE> ciftleri arasina konan metin hem ``text'' seklinde gosterilir, hemde yer yer siyah, italik gibi yorumlar alir. Bunlarin hepsi mantiksal isaretlemelerdir, ve Web programi bunlari kendisi yorumlar.

Fiziksel olarak adlandirilan bir diger gurup ise <CODE><TT> <B> <I> <U></CODE> ciftlerinden olusur. Bu tanimlar ise fontlar onceden secilmis, web istemcisine fazla secenek birakilmamis komutlardir. Sirasiyla, typewriter, siyah, italik, ve alti-cizgili (underline) fontlari belirler.

Daha once de belirtigimiz gibi bilgisayar ciktilari, tablolar icin kolay bir yol <CODE><PRE> .. </PRE></CODE> isaretlemesini kullanmaktir. Bu gruplama icinde baslik, paragraf isaretleyici, tab (H1, P) kullanmamak gerekir ama <a HREF=url> .. </a> seklindeki capalari (anchor) kullanabilirsiniz.

<Quotation> ikilisi ise belirtilen metni sayfanin iki tarafindan da yer birakarak iceriden yazar, ve bir yerden aktarilmis oldugunu gosterir. Alinti metnin onunde ve sonunda birer satir da bos birakir. (TeX'deki gibi bir yapisi vardir.)

ADDRESS ikilisi ise adres belirtmek icin kullanilir: ya
<address> <a HREF="adres.html"> M. Akgul </address> seklinde yada

<address>
M. Akgul <br>
Bilkent University <br>
akgul@bilkent.edu.tr
</address>

 

M. Akgul
Bilkent University
akgul@bilkent.edu.tr

Cok kullanilan bir diger tanim ise mailto 'dur. <a HREF="mailto:akgul@bilkent.edu.tr">
akgul@bilkent.edu.tr <a>
size akgul@bilkent.edu.tr capasi olarak sunulur.

Resimler


Resim dosyalarini web icinde sunmanin iki temel yolu var. Birincisi bir capa olarak sunmak ve kullanicinin kendi istegiyle secim yapmasina olanak saglamaktir. <a HREF="kampus.gif"> Kampus Haritasi </a> gibi. Bu resimler ayri bir pencerede gosterilir. Digeri ise metnin icine sikistirilabilen, metnin parcasi, arayuzu kolay, cekici, guzel yapmaya yoneliktir.
<IMG SRC="dosya" ALIGN=yer ALT="alt" ISMAP> kullanilabilecek genel formattir. SRC disindakiler opsiyoneldir. ALIGN icin MIDDLE, BOTTOM ve TOP secilebilir. Goruntuyu etrafindaki metinle ortadan, alttan yada ust'den hizaya koyma komutudur. Hic ALIGN koymazsaniz alt esas alinacakdir. ALT parametresi, istemci resmi goruntuleyemedigi zaman ALT'de belirtilen yaziyi sunar. ALT="[Bilkent Logo]" gibi. ISMAP ise resmin ozel bir sekilde desteklendigini, uzerine fare ile isaretleyince sizi degisik URL'lerin isaret ettigi nesnelere baglayacagini belirtir. Tabii ki bu albenisi olan bir goruntu olur, hazirlamasi biraz uzmanlik ister.

IMG'nin diger onemli bir fonksiyonu capa olarak kullanilmasindadir. Bir resmi adiyla tanitmak yerine kucuk bir kopyasini sunmak kullanici acisindan daha cekicidir:
<a HREF="buyuk.jpg"> <IMG src="kucuk.gif" ALT="Cankaya"> </A> gibi. IMG icin kullanilacak goruntulerin .gif, .xbm, .xpm formatlarinda olmasi gerekir. Sadece netscape gibi yeni istemciler .jpeg dosyalarini metin icinde gosterebilirler.

Dokunmaya Hassas Resimler


Web'de bir resmi (.gif dosyasini) kullanicinin nereye dokunduguna gore degisik URL'lere gondermek mumkundur. Bu kullanici arayuzu acisindan guzel ama hatlara biraz fazla yuklenebilir.

Boyle bir mekanizmanin kurulmasi sunucu yazilimina ve bu is icin kullanilacak `cgi' programina baglidir. Biz burada esas olarak Ncsa imagemap programina gore anlatacagiz. Elinizde bir .gif formatinda bir resim, onun koordinatlari bilinen bolgelere ayrilmasi ve bu bolgeler icin URL'lerin tespit edilmesi gerekiyor. Bu koordinat ve URL bilgisi soyadi `map' olan bir dosyada tutuluyor. Boyle bir mekanizmayi calistirmak icin gerekli HTML parcasi:
<a HREF="/cgi-bin/imagemap/path-to-map-file">
<IMG SRC="/path-to-gif" ISMAP> Tanitim </a>
seklinde olmaktadir. `map' dosyasina basit bir ornek:

default   /examples/none.html
circle   URL1  313,28  313,44
poly     URL2  298,93  251,26 300,0 453,0
rect     URL3  336,119  436,261


Ilgili .gif'i yaratmak, koordinatlari okumak vs icin, xpaint, mapedit, xv gibi programlari ve baskalarini kullanabilirsiniz. Daire (circle)'de merkezin ve cember uzerindeki bir noktanin koordinatlarini bildirmek gerekir. Bir polygon'da (poly) en fazla 100 nokta belirtebilirsiniz. Ilk nokta son nokta ile kendiliginden birlestirilir. Her noktanin $x$ ve $y$ koordinatlarini bildirmek yeterli olur. Dikdortgende (rect) ise ust-sol ve sag alt kosenin koordinatlarini bildirmek gerekir. Bunlarin disinda nokta (point) yontemide var; sadece noktanin koordinatini vermek gerekir. Bu yontemde en yakin noktanin ilgili URL'i kullanilir. `nokta'nin olmadigi durumda `default' disinda ilk uyan bolgeye ait URL islem gorur; hic uyan yoksa `default URL' kullanilir.

mapthis gibi yeni programlar ile map dosyasini kolayca hzirlamak mumkundur. Yeni surum `browserlar' ve sunucular map dosyasindaki bilgiyi html dosyasinda sunup, yuku sunucudan, istemciye kaydirabiliyorlar.

imagemap'in yapisinda bir farklilik oldu ve eskiye uyumlulugu saglamak icin, path-to-map-file'da bazi kisitlamalar meydana geldi. Sayet bu patika bir eleman iceriyorsa, eski tur, yani imagemap'de derlenmis olan conf dizinine gore davaraniyor; sayet en az 2 eleman var ise, yeni sekliyle, map dosyasinin adresi olarak aliniyor. Aklinizda olsun.

Sayac Yerlestirilmesi


Bir web dokumanina erisim sayisini dogrudan olcmek ve okuyuca sunmak icin cesitli mekanizmalar vardir. Normal olarak sunucu tum dokuman isteklerini, istemci programin adini, istemcinin geldigi makina ve URL'i loglara yazar.

Su anda Bilkent'te kullanilan {\em wwwcount=.tar.gz} paketinden elde edilen {\bf Count.cgi} programidir. En basit kullanimi <IMG src="/cgi-bin/Count.cgi?df=isim.dat" align=absmiddle> </CODE> seklinde olabilir. Daha fazla bilgiyi dizininde bulabilirsiniz. Burada isim sizin login adiniz, yada ondan tureyen bir isim olmalidir.

Bir diger ise, kendi home dizininizde basit bir {\em perl} programi calistirmaktir.

Bir satirdan olusan .htaccess dosyasini yaratin:
AddType text/x-server-parsed-html .html
ve herkesin okuma izni olsun. Icinde {\bf 1} sayisinin oldugu adi {\bf countfile} olan bir dosya yaratin. ve {\bf count.cgi} dosyasini yaratin:

#!/usr/local/bin/perl
open (COUNT, "countfile");   # open "countf" counter file
$counter = ;          # input value from file
close (COUNT);               # close file (primarily to "re-set")
open (COUNT, ">countfile");  # open "countf" for 'output'
print COUNT ($counter1);   # increment value of counter by one & write
close (COUNT);               # close file
print $counter;              # put the value on the page

Daha sonra sayiciyi istediginiz yerde
i<!--#exec cmd="./count.cgi" -->
seklinde kullanin.
ftp://ftp.bilkent.edu.tr/pub/UNIX/Internet/Web/Count/
dizininde gerekli kaynak ve dokumentasyon vardir.

Tablolar


Tablolar <table> .. </table> cifti arasina gerekli tanimlar ve bilgiler giriler. Tanim ve bilgiler satir esasina gore girilir : (table row) bir satirin basladigini belirtir. Bir satirdaki, farkli elemanlari ise veri (table data) isaretleyicileri ile belirtiriz. Ornegin 2 satiri 3 sutunu olan bir tablo yada matriks'i soyle gosteririz:

<table>
<tr>
<td> 1-1 </td><td> 1-2 </td> <td> 1-3 </td> </tr>
<tr>
<td> 2-1 </td><td>2-2 </td><td> 2-3 </td> 
</table> 
<BR>
<table border>
<tr>
<td> 1-1 </td><td> 1-2 </td> <td> 1-3 </td> </tr>
<tr>
<td> 2-1 </td><td>2-2 </td><td> 2-3 </td> 
</table>

1-1

1-2

1-3

2-1

2-2

2-3

 

1-1

1-2

1-3

2-1

2-2

2-3



<table border  cellpading=5 cellspacing=10>
<tr>
<td> 1-1 </td><td> 1-2 </td> <td> 1-3 </td> </tr>
<tr>
<td> 2-1 </td><td>2-2 </td><td> 2-3 </td> 
</table>

1-1

1-2

1-3

2-1

2-2

2-3



<table border cellpading2> seklinde bir tanim, tabloya cerceve cizilmesini ve ortaya cikan tablo elamanlari arasinda 2 birimlik bir bosluk istemektedir. Tablo basliklarini <TH> Baslik .. </TH> isaretleyici arasina koymak mumkundur. Bu basliklarin Koyu harflerle yazilmasini sagalayacaktir. <TH ALIGNLEFT COLSPAN2> Baslik </th> orneginde Baslik iki sutuna yayilacak ama sola yapisacaktir. ALIGNLEFT yerine alignright (sag) kullanilabilir. Bir sey belirtilmeyince, ortala anlamina gelmektedir.

Bir tablo elemanini <td> bir <br> iki </td> seklinde ikiye ayirmak mumkundur. Ayni satirdaki diger elemanlar ortadan hizaya konacaktir.

colspan komutuna paralel olarak rowspan komutunu bir tablo elamaninin ayni sutunda birden fazla satira yayilmasini sagalmaktadir:

 
 <TABLE BORDER CELLPADDING=2>
  <TH ALIGN=LEFT>Language</TH>
  <TH ALIGN=LEFT COLSPAN=2>Encapsulation <BR> </TH>
 <TR>
  <TD> Ada 95</TD>
  <TD ROWSPAN=2>Using</TD>
  <TD> Class</TD>
 <TR>
  <TD> C</CODE></CODE></TD>
  <TD> Package</TD>
 </TABLE>

Language

Encapsulation

Ada 95

Using

Class

C

Package



CGI ve Formlar


Bir web sunucunda `cgi-bin' dizinindeki programlar, shell, perl vs scriptleri kullaniciyla etkilesime girebilirler; kullanicidan tarama icin kelime isteyip, o kelimeler icin yapilan tarama sonuclarini kullaniciya sunabilir.

Gene bir web sunucu kullaniciya tarama icin basit kelime girmesini istemenin disinda karmasik secenekler sunabilir ve kullanicidan paragraflar dolusu girdi alabilir.

Bunlar birbirine baglidir, ikisi de cgi-bin'den bir program kullanmak zorundadir.

Bir html dosyasinda tarama olanagi oldugunu istemciye bildirmenin yolu


Bu dizinde arama yapabilirsiniz. Aramak istediğiniz anahtar sözcükleri yazın:


yapisinin bulunmasi. Bunu goren istemci program, sorgulama penceresini/mekanizmasini alir ve sonucu sunucuya gonderir. Tarama yapip sonucu gene istemciye sunmak sunucunun gorevidir.

Bir URL'nin sonunda ? ve ?keyword bulunabilir. Daha dogrusu, istemci bazi anahtar kelimeleri sunucuya bu sekilde bir URL ile gonderir. NCSA cgi-bin'de gelen finger programina bakalim:

#!/bin/sh
 
FINGER=/usr/ucb/finger # burayi denetle !
 
echo Content-type: text/html
echo
 
if [ -x $FINGER ]; then
        if [ $# = 0 ]; then
               cat << EOM
 

Finger Gateway

 
 


Bu dizinde arama yapabilirsiniz. Aramak istediğiniz anahtar sözcükleri yazın:


 
 
This is a gateway to "finger". Type a user@host combination in your
browser's search dialog.

 

EOM

        else

               echo \

               $FINGER "$*"

               echo \

        fi

else

        echo Cannot find finger on this system.

fi

cat << EOM

 

EOM

http://www.alfa.edu.tr/cgi-bin/finger URL'ine erisen bir istemci icin sunucu ?keyword olmadigini gorecek ve yukaridaki scriptin ilk yarisini istemciye sunacaktir. Istemci program ISINDEX'i gorup sorgulama mekanizmasini harekete gecirecek, ve kullanici ekraninda sunu gorecektir:


Finger Gateway


Bu dizinde arama yapabilirsiniz. Aramak istediğiniz anahtar sözcükleri yazın:



This is a gateway to "finger". Type a user@host combination in your browser's search dialog.


kullanicinin doldurdugu `user@host' seklindeki bilgiyi sunucu bilgisyardaki bulunan `finger' programina gecirecek, onun sonucunu da tekrar istemciye sunacaktir.

Buna cok benzeyen ayni basitlikte bir archie gecit programi da vardir. Belirli bir dosya uzerinden `grep' taramasi yapan bir script ise:

#!/bin/sh
echo Content-type: text/html
echo
if [ $# = 0 ]
then
  echo "<HEAD>"
  echo "<TITLE>UTIRC Phonebook Search</TITLE>"
  echo "<ISINDEX>"
  echo "</HEAD>"
  echo "<BODY>"
  echo "<H1>UTIRC Phonebook Search</H1>"
  echo "Enter your search in the search field.<P>"
  echo "This is a case-insensitive substring search: thus"
  echo "searching for 'ian' will find 'Ian' and Adriana'."
  echo "</BODY>"
else
  echo "<HEAD>"
  echo "<TITLE>Result of search for \"$*\".</TITLE>"
  echo "</HEAD>"
  echo "<BODY>"
  echo "<H1>Result of search for \"$*\".</H1>"
  echo "<PRE>"
  grep -i "$*" /u/www/Webdocs/Personnel
  echo "</PRE>"
  echo "</BODY>"
fi

(Burada <'nin < demek oldugunu belirtelim.) Diyelimki bu script'i cgi-bin/grep-per adiyla sakliyoruz ve modu 0755. http://sunucu/cgi-bin/grep-per URL'ini gonderen bir istemciye {\tt if .. else} arasindaki kisim gonderilir. Istemci o zaman bunun taranabilen bir dosya oldugunu anlayip (ISINDEX) kullaniciya tarama mekanizmasini sunacaktir. Kullanici istedigi kelimeyi dolduracak; istemci bunu sunucuya gonderecek. Bu defa else .. fi gecerlik kazanacak, ve bu arada grep -i "$*" /u/www/Webdocs/Personnel islemi sonucu olusan cikti da istemciye gonderilecektir. Sayet bu `script'i kullanmak isterseniz, /u/www/Webdocs/Personnel kismini degistirmek yeterli olacaktir. Yanliz bu `script'in guvenli olmadigini, kullanicidan gelen kelimeleri bir suzgecden gecirmeden shell'e iletmenin tehlikeleri oldugunu belirtmek isterim. Bu script'i perl ile yapmak ve istemciden donen kelimeleri bir guvenirlilik suzgecinden gecirmekte yarar vardir. Bu tip bir perl script'i bu kitapciktaki diger orneklerle birlikte Bilkent arsivinde bulmak mumkundur.

Form'lar kullanicinin bos kisimlarini doldurup sunucuya sunabilecegi bu sekille otomatik kayit, gorus bildirme, ankete katilma, sinav yapma gibi olanaklar sunmaktadir. Basit bir ornek olarak:


<FORM ACTION="url" METHODPOST>
First entry field: <INPUT NAME="entry1"> <P>
Second entry field: <INPUT NAME="entry2"> <P>
Third entry field: <INPUT NAME="entry3"> <P>
To submit the query, press: 
<INPUT TYPE="submit" VALUE="Submit Query">. <P>
</FORM>


Bunu ise lynx'de soyle gorursunuz


First entry field: ____________________
Second entry field: ____________________
Third entry field: ____________________
To submit the query, press Submit Query


First entry field:

Second entry field:

Third entry field:

To submit the query, press: .

 



Yetenekli istemci programlari burada gordugunuz bu formu cok daha guzel bir sekilde sunacaktir.

Web sunucusu kullanicinin doldurdugu bilgileri ACTION'da belirtilen URL'e iletir. Sayet ACTION belirtilmediyse, formu iceren html dosyasi bu bilgiyi ne yapacagini bilmesi gerekir. ACTION'da belirtilen URL'in gosterdigi program bu bilgiyi ne yapacagini bilmek zorunda. Isin en zor tarafi orasi.

METHOD girilen enformasyon ilgili URL'e iletim seklini belirtir. POST ve GET yontemleri var su anda. GET basit formlar icin uygundur; kullanicinin yazdiklari ilgili URL'e `?girdiler' seklinde eklenerek iletilir. Bu arada bosluklar `' ile yer degistirilir. Ornegin <ACTION="http://www.alfa.edu.tr/cgi-bin/mypost" METHOD=GET> ise ve kullanici forma Mustafa Akgul yazdiysa, istemci

CODEhttp://www.alfa.edu.tr/cgi-bin/mypost?MustafaAkgul|
URL'ini kullanir. `mypost' programinin ? ve sonrasini ne yapmasi gerektigini bilmesi gerekir. ISINDEX'de ayni sey gecerlidir. GET yonteminde bu bilgi QUERY_STRING cevresel degiskeni icinde verilir. Baska hangi cevresel degisken oldugunu gormek isteyenler her hangi bir NCSA sunucusuna http://sunucu/cgi-bin/test-cgi gondersinler, ornegin Bilkent'e.

POST yonteminde girdiler `standart input'da verilir. Girdinin buyuklugunu CONTENT_LENGTH cevresel degiskeninden ogrenebilirsiniz. Doldurulacak formda her degiskenin yada boslugun bir adi vardir. Bu bosluk adi - girilen deger cifti `namevalu' ciftleri aralarina \& koyarak iletilir. Yukaridaki ornekde kullanici `birinci', `ikinci', `ucuncu' girdilerini verdi ise, ilgili cgi programina entry1=birinci&entry2=ikinci&entry3=ucuncu
iletilir.

Formlarda doldurulacak bir satir icin kullanilan bazi `tag'ler:
<INPUT NAME="isim" VALUE="default" SIZE="sayi" MAXLENGTH=Sayi TYPE=tipi>.
`isim' ilgili `action' programinin kullanacagi degiskenin adi olacaktir. VALUEdefault, sayet kullanici o satiri doldurmazsa, `isim' degiskeninin alacagi deger'i belirtir. SIZE degiskeni ekranda kac karakterlik yer ayrilacagini belirtir. Kullanicinin yazabilecegi en fazla deger, sayet verildiyse, MAXLENGTH sayisidir. TYPE ise Text, Number, Password, Checkbox, Radio, Submit, Reset degerlerinden biri olmak zorundadir, belirtilmeyince `text' kabul edilir. Normal olarak ilk 3 tip doldurulacak metin olarak, son dordu ise secilecek dugme/kutu olarak sergilenir.

Bazi ornekler verirsek:

<H1>BILKENT UNIVERSITY PHONE BOOK</H1>
(This form will send a PH query to Bilkent ph server.)
<HR>
<FORM ACTION="http://www.bilkent.edu.tr:80/cgi-bin/phf">
<H4>    At least one of these fields must be specified:</H4><UL>
<LI><INPUT TYPE="text" NAME="Qname" MAXLENGTH="256"><B> NAME </B>
<LI><INPUT TYPE="text" NAME="Qtitle" MAXLENGTH="256"><B> TITLE </B>
<LI><INPUT TYPE="text" NAME="Qdepartment" MAXLENGTH="256"><B> DEPARTMENT </B>
<LI><INPUT TYPE="text" NAME="Qoffice_phone" MAXLENGTH="60">
<B> OFFICE PHONE NUM </B>
</UL>
<INPUT TYPE="submit">
</FORM>
<P>
Press <A HREF=./phone_book.help.html>here</A> for help. 
And <A HREF=./phone_book.info.html>here</A> for info on phone data.

BILKENT UNIVERSITY PHONE BOOK

(This form will send a PH query to Bilkent ph server.)


At least one of these fields must be specified:

Press here for help. And here for info on phone data.



Isim, adres, ve `comments' isteyen bir form:


<FORM METHOD="POST"  ACTION="/cgi-bin/comments">
Isim: <INPUT text NAME="isim" size=36><br>
Email:  <input text  name="eposta" size=36> <p>
<textarea  name="oneri" ROWS=8 COLS=40></textare> <p>
<input type="submit" Value="Gonder"> 
<input type="reset" Value="Formu Tazele">
</FORM>

 

Isim:
Email: