2. Temel Bilgiler

Bu bölümde, web programlamasının temellerini ele alıyoruz. Bu bölümün temel amacı, web programlamasının, bunları uygulamak için kullanılan belirli teknolojiden bağımsız olan temel ilkelerini tanıtmaktır. Web geliştirme felsefesini yavaş yavaş “içselleştirmek” için test etmeniz önerilen çok sayıda örnek sunulmaktadır. Bu örnekleri test etmek için gerekli ücretsiz araçlar, belgenin sonunda “Web araçları” başlıklı ekte sunulmuştur.

2.1. Bir web uygulamasının bileşenleri

Machine Serveur

15İstemci Makinesi

Numara	Rol	Yaygın örnekler
`1`	OS Sunucu	Linux, Windows
`2`	Web Sunucusu	Apache (Linux, Windows) IIS (NT), PWS (Win9x), Cassini (Windows + .NET platformu)
`3`	Sunucu tarafında çalıştırılan komut dosyaları. Bunlar, sunucu modülleri veya sunucu dışındaki programlar tarafından çalıştırılabilir (CGI).	PERL (Apache, IIS, PWS) VBSCRIPT (IIS, PWS) JAVASCRIPT (IIS, PWS) PHP (Apache, IIS, PWS) JAVA (Apache, IIS, PWS) C#, VB.NET (IIS)
`4`	Veritabanı - Bu, veritabanını kullanan programla aynı makinede veya İnternet üzerinden başka bir makinede bulunabilir.	Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) Access (Windows) SQL Sunucusu (Windows)
`5`	OS İstemci	Linux, Windows
`6`	Web Tarayıcısı	Netscape, Internet Explorer, Mozilla, Opera
`7`	Tarayıcı içinde istemci tarafında çalıştırılan komut dosyaları. Bu komut dosyaları, istemci bilgisayarın disklerine erişemez.	VBscript (IE) Javascript (IE, Netscape) PerlScript (IE) Applet'ler JAVA

2.2. Form içeren bir web uygulamasında veri alışverişi

İstemci Bilgisayarı Sunucu Bilgisayarı

Numara	Rol
`1`	Tarayıcı, URL için ilk kez (http://machine/url)'i istiyor. Hiçbir parametre aktarılmadı.
`2`	Web sunucusu, bu URL'e ait web sayfasını tarayıcıya gönderir. Bu sayfa statik olabilir veya veritabanı içeriğini (SB, SC) kullanmış olabilecek bir sunucu komut dosyası (SA) tarafından dinamik olarak oluşturulabilir. Burada komut dosyası, URL'in herhangi bir parametre verilmeden istendiğini algılayacak ve başlangıç sayfası olan WEB'i oluşturacaktır. Tarayıcı sayfayı alır ve görüntüler (CA). Tarayıcı tarafındaki komut dosyaları (CB), sunucu tarafından gönderilen başlangıç sayfasını değiştirmiş olabilir. Ardından, kullanıcı (CD) ve komut dosyaları (CB) arasındaki etkileşimler sonucunda web sayfası değiştirilecektir. Özellikle formlar doldurulacaktır.
`3`	Kullanıcı, web sunucusuna gönderilmesi gereken form verilerini onaylar. Tarayıcı, duruma göre ilk URL'i veya başka bir URL'i yeniden ister ve aynı anda form değerlerini sunucuya iletir. Bunu yapmak için GET ve POST adlı iki yöntemi kullanabilir. İstemciden gelen isteği aldığında, sunucu istenen URL ile ilişkili komut dosyasını (SA) çalıştırır; bu komut dosyası parametreleri algılar ve işler.
`4`	Sunucu, program tarafından oluşturulan WEB sayfasını (SA, SB, SC) gönderir. Bu adım, önceki 2. adımla aynıdır. Artık işlemler 2. ve 3. adımlara göre gerçekleştirilir.

2.3. Notations

Bundan sonra, bir dizi aracın kurulduğunu varsayacağız ve aşağıdaki gösterimleri kullanacağız:

kısaltma	anlam
`<apache>`	Apache sunucusunun dizin yapısının kökü
`<apache-DocumentRoot>`	Apache tarafından sunulan web sayfalarının kök dizini. Web sayfaları bu kök dizinin altında bulunmalıdır. Dolayısıyla, URL http://localhost/page1.htm adresi, <apache-DocumentRoot>\page1.htm dosyasına karşılık gelir.
`<apache-cgi-bin>`	cgi-bin takma adıyla ilişkili dizin ağacının kök dizinidir ve buraya Apache için CGI komut dosyaları yerleştirilebilir. Böylece, URL http://localhost/cgi-bin/test1.pl adresi, <apache-cgi-bin>\test1.pl dosyasına karşılık gelir.
`<IIS-DocumentRoot>`	IIS, PWS veya Cassini tarafından sunulan web sayfalarının kök dizini. Web sayfaları bu kök dizin altında bulunmalıdır. Dolayısıyla, URL http://localhost/page1.htm, <IIS-DocumentRoot>\page1.htm dosyasına karşılık gelir.
`<perl>`	Perl dil ağacının kök dizininde bulunur. perl.exe yürütülebilir dosyası genellikle <perl>\bin.
`<php>`	PHP dil ağacının kök dizininde bulunur. php.exe yürütülebilir dosyası genellikle <php>.
`<java>`	Java ağacının kökü. Java ile ilişkili yürütülebilir dosyalar <java>\bin. içinde bulunur
`<tomcat>`	Tomcat sunucusunun kök dizininde bulunur. Servlet örnekleri <tomcat>\webapps\examples\servlets'te, sayfa örnekleri ise JSP'te ve <tomcat>\webbapps\examples\jsp'te bulunur

Bu araçların her biri için, kurulumlarına ilişkin yardım içeren ek bölüme başvurulabilir.

2.4. Statik Web Sayfaları, Dinamik Web Sayfaları

Statik bir sayfa, HTML dosyasıyla temsil edilir. Dinamik bir sayfa ise web sunucusu tarafından "anında" oluşturulur. Bu bölümde, web kavramının evrenselliğini göstermek amacıyla farklı web sunucuları ve farklı programlama dilleriyle çeşitli testler sunuyoruz. Apache ve IIS adlı iki web sunucusu kullanacağız. IIS ticari bir ürün olmakla birlikte, daha sınırlı ancak ücretsiz iki sürümü de mevcuttur:

Win9x makineler için PWS
Cassini, Windows200 sistemler için ve XP

<IIS-DocumentRoot> klasörü genellikle [lecteur:\inetpub\wwwroot] klasörüdür; burada [lecteur], IIS'in kurulduğu sürücüdür (C, D, ...). Aynı durum PWS için de geçerlidir. Cassini için <IIS-DocumentRoot> klasörü, sunucunun nasıl başlatıldığına bağlıdır. Ek bölümde, Cassini sunucusunun bir DOS penceresinde (veya bir kısayol aracılığıyla) aşağıdaki şekilde başlatılabileceği gösterilmektedir:

dos>webserver /port:N /path:"P" /vpath:"/V"

Cassini web sunucusu olarak da bilinen [WebServer] uygulaması üç parametre kabul eder:

/port: web hizmetinin bağlantı noktası numarası. Herhangi bir değer olabilir. Varsayılan değer 80'dir
/path: diskteki bir klasörün fiziksel yolu
/vpath: önceki fiziksel klasöre atanan sanal klasör. Yukarıdaki yardım panelinde belirtilenden farklı olarak, sözdiziminin /path=yol değil, /vpath:yol olduğuna dikkat edilmelidir.

Cassini şu şekilde başlatılırsa:

dos>webserver /port:N /path:"P" /vpath:"/"

o zaman P klasörü, Cassini sunucusunun web dizin yapısının köküdür. Dolayısıyla <IIS-DocumentRoot> ile işaret edilen klasör budur. Aşağıdaki örnekte olduğu gibi:

dos12>webserver /path:"d:\data\devel\webmatrix" /vpath:"/"

Cassini sunucusu 80 numaralı bağlantı noktasında çalışacak ve <IIS-DocumentRoot> dizin ağacının kökü [d:\data\devel\webmatrix] klasörüdür. Test edilecek web sayfaları bu kök dizin altında bulunmalıdır.

Bundan sonra, her web uygulaması, herhangi bir metin dosyasıyla oluşturulabilecek tek bir dosya ile temsil edilecektir. IDE gibi bir dosya gerekmez.

2.4.1. HTML statik sayfası (HyperText İşaretleme Dili)

Aşağıdaki HTML kodunu ele alalım:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

ve bu da aşağıdaki web sayfasını oluşturur:

Testler

Test1

Apache sunucusunu başlatın
essai1.html komut dosyasını <apache-DocumentRoot> içine yerleştirin
URL dosyasını (http://localhost/essai1.html) bir tarayıcıyla görüntüleyin
Apache sunucusunu durdurun

Test2

IIS/PWS/Cassini sunucusunu başlatın
essai1.html betiğini <IIS-DocumentRoot> içine yerleştirin
URL http://localhost/essai1.html sayfasını bir tarayıcıyla görüntülemek

2.4.2. Bir ASP sayfası (Active Server Pages)

essai2.asp betiği:

<html>
  <head>
    <title>essai 1 : une page asp</title>
   </head>
   <body>
     <center>
     <h1>Une page asp générée dynamiquement par le serveur PWS</h1>
     <h2>Il est <% =time %></h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

aşağıdaki web sayfasını oluşturur:

Test

IIS/PWS sunucusunu başlatın
essai2.asp komut dosyasını <IIS-DocumentRoot> içine yerleştirin
bir tarayıcıyla URL http://localhost/essai2.asp adresine erişin

2.4.3. Bir PERL betiği (Practical Extracting and Reporting Language)

essai3.pl komut dosyası:

#!d:\perl\bin\perl.exe

($secondes,$minutes,$heure)=localtime(time);

print <<HTML
Content-type: text/html

<html>
  <head>
    <title>essai 1 : un script Perl</title>
   </head>
   <body>
     <center>
     <h1>Une page générée dynamiquement par un script Perl</h1>
     <h2>Il est $heure:$minutes:$secondes</h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

HTML
;

İlk satır, perl.exe yürütülebilir dosyasının yoludur. Gerekirse bu yolun değiştirilmesi gerekir. Bir web sunucusu tarafından çalıştırıldığında, komut dosyası aşağıdaki sayfayı oluşturur:

Web

Web sunucusu: Apache
Bilgi amaçlı olarak, Apache sürümüne göre <apache>\confs dizininde bulunan Apache sürümüne göre srm.conf veya httpd.conf yapılandırma dosyasını inceleyin ve essai3.pl dosyasını yerleştireceğiniz <apache-cgi-bin> dizinini öğrenmek için cgi-bin ile ilgili satırı arayın.
essai3.pl betiğini <apache-cgi-bin>
http://localhost/cgi-bin/essai3.pl URL'sini çağırın

perl sayfasının yüklenmesi, asp sayfasına göre daha uzun sürer. Bunun nedeni, Perl betiğinin bir Perl yorumlayıcısı tarafından çalıştırılması ve bu yorumlayıcının betiği çalıştırabilmesi için önceden yüklenmesi gerekmesidir. Yorumlayıcı bellekte sürekli olarak kalmaz.

2.4.4. Bir PHP betiği (HyperText İşlemcisi)

essai4.php betiği

<html>
  <head>
    <title>essai 4 : une page php</title>
   </head>
   <body>
     <center>
     <h1>Une page PHP générée dynamiquement</h1>
     <h2>
<?
          $maintenant=time();
          echo date("j/m/y, h:i:s",$maintenant);
?>
     </h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

Yukarıdaki komut dosyası aşağıdaki web sayfasını oluşturur:

Testler

Test1

<Apache>\confs içindeki Apache yapılandırma dosyası srm.conf veya httpd.conf'i inceleyin
Bilgi amaçlı olarak, php dosyasındaki yapılandırma satırlarını kontrol edin
Apache sunucusunu başlatın
essai4.php dosyasını <apache-DocumentRoot> dosyasına yerleştirin
URL'i http://localhost/essai4.php adresinden isteyin

Test2

IIS/PWS sunucusunu başlatın
bilgi için, PWS'in php ile ilgili yapılandırmasını kontrol etmek
essai4.php'i <IIS-DocumentRoot>\php'e yerleştirin
URL'ten http://localhost/essai4.php adresini isteyin

2.4.5. Bir JSP betiği (Java Server Pages)

heure.jsp komut dosyası

<%  //saati gösteren Java programı %>

<%@ page import="java.util.*" %>

<% 
     // saati hesaplamak için JAVA kodu
  Calendar calendrier=Calendar.getInstance();
  int heures=calendrier.get(Calendar.HOUR_OF_DAY);
  int minutes=calendrier.get(Calendar.MINUTE);
  int secondes=calendrier.get(Calendar.SECOND);
   // saat, dakika ve saniye küresel değişkenlerdir
   // bu değişkenler HTML kodunda kullanılabilir
%>

<% // HTML kodu %>
<html>
  <head>
     <title>Page JSP affichant l'heure</title>
  </head>
  <body>
     <center>
     <h1>Une page JSP générée dynamiquement</h1>
     <h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
     <br>
     <h3>A chaque fois que vous rechargez la page, l'heure change</h3>
  </body>
</html>

Web sunucusu tarafından çalıştırıldığında, bu komut dosyası aşağıdaki sayfayı oluşturur:

Testler

heure.jsp betiğini <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) veya <tomcat>\webapps\examples\jsp (Tomcat 4.x) dizinine yerleştirin
Tomcat sunucusunu başlatın
URL adresine http://localhost:8080/examples/jsp/heure.jsp adresinden erişin

2.4.6. Bir ASP.NET sayfası

heure1.aspx komut dosyası:

<html>
<head>
    <title>Démo asp.net </title>
</head>
<body>
    Il est <% =Date.Now.ToString("hh:mm:ss") %>
</body>
</html>

Web sunucusu tarafından çalıştırıldığında, bu komut dosyası aşağıdaki sayfayı oluşturur:

Bu test için, .NET platformunun kurulu olduğu bir Windows makinesi gereklidir (bkz. ek).

heure1.aspx betiğini <IIS-DocumentRoot> içine yerleştirin
IIS/CASSINI sunucusunu başlatın
URL'i http://localhost/heure1.aspx adresinden isteyin

2.4.7. Sonuç

Yukarıdaki örnekler şunu göstermiştir:

bir HTML sayfası bir program tarafından dinamik olarak oluşturulabilir. Web programlamanın tüm anlamı budur.
Kullanılan diller ve web sunucuları çeşitlilik gösterebilir. Şu anda aşağıdaki başlıca eğilimler gözlemlenmektedir:
- Apache/PHP (Windows, Linux) ve IIS/PHP (Windows) ikilileri
- Windows platformlarında, ASP.NET teknolojisi; bu, IIS sunucusunu bir .NET diliyle (C#, VB.NET, ...) birleştirir
- farklı sunucularda (Tomcat, Apache, IIS) ve farklı platformlarda (Windows, Linux) çalışan Java servlet ve JSP sayfaları teknolojisi.

2.5. Tarayıcı tarafı komut dosyaları

Bir HTML sayfası, tarayıcı tarafından çalıştırılacak komut dosyaları içerebilir. Tarayıcı tarafında kullanılan birçok komut dosyası dili vardır. Bunlardan bazıları şunlardır:

Dil	Kullanılabilen tarayıcılar
Vbscript	IE
Javascript	IE, Netscape
PerlScript	IE
Java	IE, Netscape

Birkaç örnek verelim.

2.5.1. Tarayıcı tarafında bir VBScript komut dosyası içeren bir web sayfası

vbs1.html sayfası

<html>
  <head>
    <title>essai : une page web avec un script vb</title>
    <script language="vbscript">
      function reagir
        alert "Vous avez cliqué sur le bouton OK"
      end function
    </script>
   </head>

   <body>
<center>
     <h1>Une page Web avec un script VB</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
       </tr>
      </table>
   </body>
</html>

Yukarıdaki HTML sayfası, sadece HTML kodunu değil, aynı zamanda bu sayfayı yükleyen tarayıcı tarafından çalıştırılmak üzere tasarlanmış bir programı da içerir. Kod şu şekildedir:

    <script language="vbscript">
      function reagir
        alert "Vous avez cliqué sur le bouton OK"
      end function
    </script>

<script></script> etiketleri, HTML sayfasındaki komut dosyalarını sınırlandırmak için kullanılır. Bu komut dosyaları farklı dillerde yazılabilir ve kullanılan dili belirten, <script> etiketindeki language seçeneğidir. Burada bu seçenek VBScript'tir. Bu dili ayrıntılı olarak ele almayacağız. Yukarıdaki komut dosyası, bir mesaj görüntüleyen réagir adlı bir işlev tanımlar. Bu işlev ne zaman çağrılır? Bunu bize aşağıdaki HTML kod satırı gösterir:

         <input type="button" value="OK" name="cmdOK" onclick="reagir">

onclick özniteliği, kullanıcı OK düğmesine tıkladığında çağrılacak fonksiyonun adını belirtir. Tarayıcı bu sayfayı yükledikten ve kullanıcı OK düğmesine tıkladığında, şu sayfa görüntülenir:

Testler

Yalnızca IE tarayıcısı VBScript komut dosyalarını çalıştırabilir. Netscape'in bunu yapabilmesi için eklentilere ihtiyacı vardır. Aşağıdaki testler yapılabilir:

Apache sunucusu
vbs1.html komut dosyası, <apache-DocumentRoot> içinde
IE tarayıcısıyla http://localhost/vbs1.html URL'sini çağırmak
IIS/PWS sunucusu
<pws-DocumentRoot> içindeki vbs1.html komut dosyası
IE tarayıcısıyla http://localhost/vbs1.html URL'sini çağır

Tarayıcı tarafında bir JavaScript komut dosyası içeren bir web sayfası

La page : js1.html

<html>
  <head>
    <title>essai 4 : une page web avec un script Javascript</title>
    <script language="javascript">
      function reagir(){
        alert ("Vous avez cliqué sur le bouton OK");
      }
    </script>
   </head>

   <body>
     <center>
     <h1>Une page Web avec un script Javascript</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
       </tr>
    </table>
   </body>
</html>

Burada, önceki sayfayla aynı bir şey var; tek fark, VBScript dilinin yerine Javascript dilinin kullanılmış olmasıdır. Bu dilin avantajı, hem IE hem de Netscape tarayıcıları tarafından desteklenmesidir. Bu kodun çalıştırılması aynı sonuçları verir:

Testler

Apache sunucusu
js1.html komut dosyası, <apache-DocumentRoot> içinde
http://localhost/js1.html URL'sini IE veya Netscape tarayıcısıyla çağırın
IIS/PWS sunucusu
js1.html komut dosyası, <pws-DocumentRoot> içinde
http://localhost/js1.html URL'sini IE veya Netscape tarayıcısıyla çağırın

2.6. İstemci-sunucu iletişimi

Bir web uygulamasının aktörlerini gösteren başlangıç şemamıza geri dönelim:

Sunucu Makinesi

Burada, istemci makine ile sunucu makine arasındaki veri alışverişine odaklanacağız. Bu veri alışverişi bir ağ üzerinden gerçekleşir ve iki uzak makine arasındaki veri alışverişinin genel yapısını hatırlamakta fayda var.

2.6.1. OSI Modeli

OSI (Açık Sistemler Arabağlantı Referans Modeli) olarak adlandırılan ve ISO (Uluslararası Standartlar Örgütü) tarafından tanımlanan açık ağ modeli, makineler arasındaki iletişimin yedi katmanlı bir modelle temsil edilebildiği ideal bir ağı tanımlar:

Her katman, alt katmandan hizmet alır ve üst katmana kendi hizmetlerini sunar. A ve B adlı farklı makinelerde bulunan iki uygulamanın iletişim kurmak istediğini varsayalım: bu iletişim, Application katmanında gerçekleşir. Ağın işleyişinin tüm ayrıntılarını bilmelerine gerek yoktur: her uygulama, iletmek istediği bilgiyi bir alt katmana, yani Présentation katmanına aktarır. Dolayısıyla uygulamanın, yalnızca Présentation katmanıyla arayüz oluşturma kurallarını bilmesi yeterlidir. Bilgi Présentation katmanına ulaştığında, başka kurallara göre Session katmanına aktarılır ve bu süreç, bilgi fiziksel ortama ulaşana ve hedef makineye fiziksel olarak iletilene kadar devam eder. Orada, gönderen makinede geçirdiği işlemin tersi bir işleme tabi tutulur.

Her katmanda, bilgiyi göndermekle görevli gönderen işlem, bilgiyi kendisiyle aynı katmana ait diğer makinedeki bir alıcı işleme gönderir. Bunu, katman protokolü olarak adlandırılan belirli kurallara göre yapar. Dolayısıyla, nihai iletişim şeması şu şekildedir:

Farklı katmanların rolleri şöyledir:

`Physique`	Fiziksel bir ortam üzerinden bitlerin iletilmesini sağlar. Bu katmanda, terminal veya bilgisayar gibi veri işleme uç ekipmanları (E.T.T.D.) ile modülatör/demodülatör, çoklayıcı, yoğunlaştırıcı gibi veri devre sonlandırma ekipmanları (E.T.C.D.) bulunur. Bu seviyede dikkat edilmesi gereken noktalar şunlardır: . bilginin kodlama şeklinin seçimi (analog veya dijital) . iletim modunun seçimi (senkron veya asenkron).
`Liaison de données`	Fiziksel katmanın fiziksel özelliklerini gizler. İletim hatalarını algılar ve düzeltir.
`Réseau`	Ağa gönderilen bilgilerin izlemesi gereken yolu yönetir. Buna routage denir: bir bilginin alıcısına ulaşması için izlemesi gereken yolu belirlemek.
`Transport`	Önceki katmanlar yalnızca makineler arası iletişime izin verirken, bu katman iki uygulama arasındaki iletişimi mümkün kılar. Bu katman tarafından sağlanan bir hizmet, çoklama olabilir: taşıma katmanı, birden fazla uygulamaya ait bilgileri iletmek için aynı ağ bağlantısını (makineden makineye) kullanabilir.
`Session`	Bu katmanda, bir uygulamanın uzak bir makinede bir çalışma oturumu açmasına ve sürdürmesine olanak tanıyan hizmetler bulunur.
`Présentation`	Bu katman, farklı makinelerdeki verilerin temsilini standartlaştırmayı amaçlar. Böylece, A makinesinden gelen veriler, ağa gönderilmeden önce A makinesinin Présentation katmanı tarafından standart bir biçime göre "düzenlenir". Veriler, alıcı makine B’nin Présentation katmanına ulaştığında, bu katman verileri standart formatları sayesinde tanıyacak ve makine B’deki uygulamanın tanıyabilmesi için veriler farklı bir şekilde biçimlendirilecektir.
`Application`	Bu aşamada, genellikle kullanıcıya yakın olan e-posta veya dosya aktarımı gibi uygulamalar yer alır.

2.6.2. TCP/IP modeli

OSI modeli ideal bir modeldir. TCP/IP protokol dizisi, aşağıdaki şekilde buna yakındır:

ağ arayüzü (bilgisayarın ağ kartı), OSI modelinin 1. ve 2. katmanlarının işlevlerini yerine getirir
IP katmanı (İnternet Protokolü), 3. katmanın (ağ) işlevlerini yerine getirir
TCP katmanı (Aktarım Kontrol Protokolü) veya UDP katmanı (Kullanıcı Datagram Protokolü), 4. katmanın (taşıma) işlevlerini yerine getirir. TCP protokolü, makineler arasında alışverişi yapılan veri paketlerinin hedeflerine güvenli bir şekilde ulaşmasını sağlar. Aksi takdirde, kaybolan paketleri geri gönderir. UDP protokolü bu işi yapmaz ve bu görevi uygulama geliştiricisi üstlenir. Bu nedenle, %100 güvenilir bir ağ olmayan internette en çok kullanılan protokol TCP'tir. Bu durumda TCP-IP ağından söz edilir.
Uygulama katmanı, OSI modelinin 5. ila 7. katmanlarının işlevlerini kapsar.

Web uygulamaları Application katmanında bulunur ve dolayısıyla TCP-IP protokollerine dayanır. İstemci ve sunucu makinelerinin Application katmanları, hedeflerine iletilmek üzere modelin 1 ila 4. katmanlarına devredilen mesajları birbirleriyle paylaşır. Anlaşabilmeleri için, her iki makinenin uygulama katmanlarının aynı dili veya protokolü "konuşması" gerekir. Web uygulamalarının kullandığı protokol HTTP (HyperText Aktarım Protokolü) olarak adlandırılır. Bu, metin tabanlı bir protokoldür; makineler birbirlerini anlamak için ağ üzerinden metin satırları alışverişinde bulunurlar. Bu iletişim standartlaştırılmıştır; yani istemcinin sunucuya tam olarak ne istediğini belirtmek için belirli sayıda mesajı vardır ve sunucunun da istemciye yanıtını vermek için belirli sayıda mesajı vardır. Bu mesaj alışverişi şu şekildedir:

İstemci --> Sunucu

İstemci, web sunucusuna istekte bulunduğunda,

ne istediğini belirtmek için HTTP biçiminde metin satırları

isteklerini belirtmek için HTTP biçiminde metin satırları
isteğe bağlı olarak bir belge

Sunucu --> İstemci

Sunucu, istemciye yanıt verirken

ne gönderdiğini belirtmek için HTTP biçiminde metin satırları
boş bir satır
isteğe bağlı olarak bir belge

Dolayısıyla, veri alışverişi her iki yönde de aynı biçime sahiptir. Her iki durumda da bir belge gönderilebilir; ancak bir istemcinin sunucuya belge göndermesi nadirdir. Ancak HTTP protokolü bunu öngörmektedir. Bu sayede, örneğin bir internet servis sağlayıcısının aboneleri, bu sağlayıcıda barındırılan kişisel sitelerine çeşitli belgeleri indirebilirler. Alışverişe konu olan belgeler herhangi bir türde olabilir. Resimler içeren bir web sayfasını talep eden bir tarayıcıyı ele alalım:

tarayıcı web sunucusuna bağlanır ve istediği sayfayı talep eder. Talep edilen kaynaklar, URL (Uniform Resource Locator) ile benzersiz bir şekilde tanımlanır. Tarayıcı yalnızca HTTP başlıkları gönderir, herhangi bir belge göndermez.
Sunucu buna yanıt verir. Öncelikle, hangi tür yanıt göndereceğini belirten HTTP başlıklarını gönderir. İstenen sayfa mevcut değilse bu bir hata olabilir. Sayfa mevcutsa, sunucu yanıtının HTTP başlıklarında, bu başlıkların ardından bir HTML (HyperText İşaretleme Dili) belgesi göndereceğini belirtir. Bu belge, HTML biçiminde bir dizi metin satırından oluşur. Bir HTML metni, tarayıcıya metni nasıl görüntüleyeceği konusunda talimatlar veren etiketler (işaretleyiciler) içerir.
İstemci, sunucunun HTTP başlıklarından, bir HTML belgesi alacağını anlar. Müşteri bu belgeyi analiz eder ve belki de içinde resim referansları olduğunu fark eder. Bu resimler HTML belgesinde bulunmamaktadır. Bu nedenle, ihtiyaç duyduğu ilk resmi istemek için aynı web sunucusuna yeni bir istek gönderir. Bu istek, istenen kaynak farklı olması dışında 1. adımda yapılan istekle aynıdır. Sunucu, bu isteği işleyerek müşteriye istenen görüntüyü gönderir. Bu sefer, yanıtında HTTP başlıkları, gönderilen belgenin bir görüntü olduğunu ve HTML belgesi olmadığını belirtecektir.
İstemci, gönderilen görüntüyü alır. 3. ve 4. adımlar, istemci (genellikle bir tarayıcı) sayfanın tamamını görüntüleyebilmesi için gerekli tüm belgelere sahip olana kadar tekrarlanır.

2.6.3. HTTP protokolü

Örnekler üzerinden HTTP protokolünü inceleyelim. Bir tarayıcı ile bir web sunucusu arasında ne tür veriler alışverişi yapılır?

2.6.3.1. Bir HTTP sunucusunun yanıtı

Burada bir web sunucusunun istemcilerin isteklerine nasıl yanıt verdiğini inceleyeceğiz. Web hizmeti veya HTTP hizmeti, genellikle 80 numaralı bağlantı noktasında çalışan bir TCP-IP hizmetidir. Başka bir bağlantı noktasında da çalışabilir. Bu durumda, istemci tarayıcısı, gönderdiği URL isteğinde bu bağlantı noktasını belirtmek zorunda kalır. Bir URL genel olarak şu şekildedir:

protocole://machine[:port]/yol/bilgiler

ile

http	http kullanılır. Bir tarayıcı, ftp, news, telnet gibi hizmetler için de istemci olarak kullanılabilir.
makine	web hizmetinin çalıştığı makinenin adı
bağlantı noktası	web hizmetinin bağlantı noktası. 80 ise, bağlantı noktası numarası atlanabilir. Bu en yaygın durumdur
yol	istenen kaynağa giden yol
bilgiler	istemcinin isteğini netleştirmek için sunucuya verilen ek bilgiler

Bir kullanıcı URL dosyasının yüklenmesini istediğinde tarayıcı ne yapar?

URL dosyasının machine[:port] bölümünde belirtilen makine ve bağlantı noktasıyla bir TCP-IP iletişimi açar. Bir TCP-IP bağlantısı açmak, iki makine arasında bir iletişim "kanalı" oluşturmak anlamına gelir. Bu kanal oluşturulduktan sonra, iki makine arasında alışverişi yapılan tüm bilgiler bu kanal üzerinden aktarılır. Bu TCP-IP kanalının oluşturulması, henüz Web protokolünü (HTTP) gerektirmez.
TCP-IP kanalı oluşturulduktan sonra, istemci web sunucusuna isteğini iletecek ve bunu HTTP biçiminde metin satırları (komutlar) göndererek yapacaktır. İstemci, URL'in yol/bilgi kısmını sunucuya gönderecektir
sunucu da aynı şekilde ve aynı kanaldan yanıt verecektir
İki taraftan biri kanalı kapatma kararını verecektir. Bu, kullanılan HTTP protokolüne bağlıdır. HTTP 1.0 protokolünde, sunucu her yanıtından sonra bağlantıyı kapatır. Bu durum, bir web sayfasını oluşturan farklı belgeleri almak için birden fazla istek göndermesi gereken bir istemcinin, her istek için yeni bir bağlantı açmasını gerektirir; bu da bir maliyet oluşturur. HTTP/1.1 protokolünde ise istemci, sunucuya bağlantıyı kendisi kapatmasını söyleyene kadar açık tutmasını isteyebilir. Böylece, bir web sayfasındaki tüm belgeleri tek bir bağlantı ile alabilir ve son belgeyi aldıktan sonra bağlantıyı kendisi kapatabilir. Sunucu bu kapatma işlemini algılayacak ve bağlantıyı kendisi de kapatacaktır.

Bir istemci ile web sunucusu arasındaki veri alışverişini incelemek için curl adlı bir araç kullanacağız. Curl, farklı protokolleri (DOS, FTP, TELNET, GOPHER, ...). curl, http://curl.haxx.se/ adresinden indirilebilir. Buradan tercihen Windows win32-nossl sürümünü indireceğiz; çünkü win32-ssl sürümü, curl paketinde bulunmayan ek DLL dosyaları gerektirir. Bu paket, bundan sonra <curl> olarak adlandıracağımız bir klasöre açmanız gereken bir dizi dosya içerir. Bu klasörde [curl.exe] adlı bir yürütülebilir dosya bulunur. Bu, web sunucularına sorgu göndermek için kullanacağımız istemcimiz olacaktır. Bir DOS penceresi açalım ve <curl> klasörüne gidelim:

dos>dir curl.exe
22/03/2004  13:29              299 008 curl.exe

E:\curl2>curl
curl: try 'curl --help' for more information

dos>curl --help | more
Usage: curl [options...] <url>
Options: (H) means HTTP/HTTPS only, (F) means FTP only
 -a/--append        Append to target file when uploading (F)
 -A/--user-agent <string> User-Agent to send to server (H)
    --anyauth       Tell curl to choose authentication method (H)
 -b/--cookie <name=string/file> Cookie string or file to read cookies from (H)
    --basic         Enable HTTP Basic Authentication (H)
 -B/--use-ascii     Use ASCII/text transfer
 -c/--cookie-jar <file> Write cookies to this file after operation (H)
 ....

Bu uygulamayı kullanarak bir web sunucusuna sorgu gönderip, istemci ile sunucu arasındaki veri alışverişini inceleyelim. Şu durumla karşı karşıya kalacağız:

Web sunucusu herhangi biri olabilir. Burada, curl web istemcisi ile web sunucusu arasında gerçekleşecek veri alışverişini ortaya çıkarmaya çalışıyoruz. Daha önce, aşağıdaki HTML adlı statik sayfayı oluşturmuştuk:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

ve bunu bir tarayıcıda görüntülediğimizde:

Görüldüğü gibi, istenen URL şudur: http://localhost/aspnet/chap1/statique1.html. Dolayısıyla web servisinin sunucusu localhost (=yerel sunucu) ve bağlantı noktası 80'dir. Bu web sayfasının HTML metnini görüntülemek istersek (Görünüm/Kaynak), başlangıçta oluşturulan HTML metnini buluruz:

Şimdi CURL istemcimizi kullanarak aynı URL dosyasını isteyelim:

dos>curl http://localhost/aspnet/chap1/statique1.html
<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

Görüyoruz ki web sunucusu, istenen sayfanın HTML kodunu temsil eden bir dizi metin satırı göndermiştir. Daha önce, bir web sunucusunun yanıtının şu biçimde olduğunu belirtmiştik:

Ancak burada HTTP başlıklarını görmedik. Bunun nedeni, [curl]'in varsayılan olarak bunları göstermemesidir. --include seçeneği, bunların görüntülenmesini sağlar:

E:\curl2>curl --include http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

Sunucu, bir dizi HTTP başlığını ve ardından boş bir satırı başarıyla gönderdi:

HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close

`HTTP/1.1 200 OK`	sunucu şunu söylüyor HTTP protokolünün 1.1 sürümünü anladığını istenen kaynağa sahip olduğunu (kod 200, mesaj OK)
`Server:`	sunucu kendini tanıtıyor. Burada bir Cassini sunucusu söz konusu
`Date: ...`	yanıtın tarihi/saati
`X-ASPNet-Version: ...`	Cassini sunucusuna özgü başlık
`Cache-Control: public`	İstemciye, kendisine gönderilen yanıtı önbelleğe alıp alamayacağı konusunda bilgi verir. [public] özniteliği, istemciye sayfayı önbelleğe alabileceğini belirtir. [no-cache] özniteliği ise istemciye sayfayı önbelleğe almaması gerektiğini belirtirdi.
`ETag:`	...
`Content-type: text/html`	sunucu, HTML (html) biçiminde metin (text) göndereceğini belirtir.
`Content-Length: 161`	HTTP başlıklarından sonra gönderilecek belgenin bayt sayısı. Bu sayı aslında essai1.html dosyasının bayt cinsinden boyutudur: `dos>dir essai1.html 08/07/2002 10:00 161 essai1.html`
`Connection: close`	sunucu, belge gönderildikten sonra bağlantıyı kapatacağını bildiriyor

İstemci, HTTP başlıklarını alır ve artık HTML belgesini temsil eden 161 bayt alacağını bilir. Sunucu, HTTP başlıklarının sonunu belirten boş satırın hemen ardından bu 161 baytı gönderir:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

Burada, başlangıçta oluşturulan HTML dosyasını görüyoruz. İstemcimiz bir tarayıcı olsaydı, bu metin satırlarını aldıktan sonra bunları yorumlayarak klavyeyi kullanan kullanıcıya aşağıdaki sayfayı gösterirdi:

Aynı kaynağı istemek için [curl] istemcimizi bir kez daha kullanalım, ancak bu sefer yalnızca yanıt başlıklarını isteyelim:

dos>curl --head http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:11:54 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close

HTML belgesi olmadan da önceki ile aynı sonucu elde ediyoruz. Şimdi hem bir tarayıcı hem de genel amaçlı TCP istemcisi ile bir resim isteyelim. Öncelikle bir tarayıcı ile:

univ01.gif dosyası 4052 bayt büyüklüğündedir:

dos>dir univ01.gif
23/03/2004  08:14             4 052 univ01.gif

Şimdi [curl] istemcisini kullanalım:

dos>curl --head http://localhost/aspnet/chap1/univ01.gif
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:18:44 GMT
Cache-Control: public
ETag: "1C410A6795D7500:1C410A6868B1476"
Content-Type: image/gif
Content-Length: 4052
Connection: Close

Yukarıdaki istek-yanıt döngüsünde aşağıdaki noktalara dikkat edilmelidir:

`--head`	Kaynağın yalnızca HTTP başlıklarını istiyoruz. Zira bir resim, metin dosyası değil ikili bir dosyadır ve ekranda metin olarak görüntülenmesi okunabilir bir sonuç vermez.
`Content-Length: 4052`	bu, univ01.gif dosyasının boyutudur
`Content-Type: image/gif`	Sunucu, istemcisine image/gif ve c.a.d türünde bir belge ile GIF formatında bir resim göndereceğini bildirir. Eğer resim JPEG formatında olsaydı, belge türü image/jpeg olurdu. Belge türleri standartlaştırılmıştır ve MIME (Multi-purpose Mail Internet Extension) türleri olarak adlandırılır.

2.6.3.2. Bir HTTP istemcisinin isteği

Şimdi şu soruyu soralım: Bir web sunucusuyla "iletişim kuran" bir program yazmak istiyorsak, belirli bir kaynağı elde etmek için programın web sunucusuna hangi komutları göndermesi gerekir? Önceki örneklerde istemcinin ne aldığını gördük, ancak ne gönderdiğini görmedik. curl’ün [--verbose] seçeneğini kullanarak, istemcinin sunucuya ne gönderdiğini de göreceğiz. Öncelikle statik sayfayı isteyelim:

dos>curl --verbose http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:37:06 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close
<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>
* Closing connection #0

İlk olarak, [curl] istemcisi, localhost (=127.0.0.1) makinesinin 80 numaralı bağlantı noktasıyla bir TCP/IP bağlantısı kurar

* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80

Bağlantı kurulduktan sonra, HTTP isteğini gönderir. Bu istek, boş bir satırla biten bir dizi metin satırından oluşur:

GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

Bir web istemcisinden gelen HTTP isteğinin iki işlevi vardır:

istenen kaynağı belirtmek. Burada bu işlevi ilk satır olan GET yerine getirir
isteği gönderen istemci hakkında bilgi vermek; böylece sunucu, yanıtını bu özel istemci türüne göre uyarlayabilir.

[curl] istemcisi tarafından yukarıda gönderilen satırların anlamı şöyledir:

`GET ressource protocole`	belirli bir HTTP protokol sürümüne göre belirli bir kaynağı talep etmek için. Sunucu, HTTP biçiminde bir yanıt gönderir; bunu bir boş satır ve ardından talep edilen kaynak izler
`User-Agent`	istemcinin kim olduğunu belirtmek için
`host: machine:port`	sorgulanan web sunucusunun makinesini ve bağlantı noktasını belirtmek için (HTTP 1.1 protokolü)
`Pargma`	burada, müşterinin önbellek yönetmediğini belirtmek için.
`Accept`	MIME türleri, istemcinin yönetebildiği dosya türlerini belirtir

[curl]'in --head seçeneğiyle işlemi yeniden başlatalım:

dos>curl --verbose --head --output reponse.txt http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:54:22 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close

Sadece müşteri tarafından gönderilen HTTP başlıklarına odaklanıyoruz:

HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

Yalnızca kaynağı talep eden komut değişmiştir. GET komutu yerine artık HEAD komutu kullanılmaktadır. Bu komut, sunucunun yanıtının HTTP başlıklarıyla sınırlandırılmasını ve istenen kaynağı göndermemesini talep eder. Yukarıdaki ekran görüntüsünde alınan HTTP başlıkları gösterilmemiştir. Bunlar, [curl] komutundaki [--output reponse.txt] seçeneği nedeniyle bir dosyaya kaydedilmiştir:

dos>more reponse.txt
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:54:22 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close

2.6.4. Sonuç

Birkaç örnek üzerinden, bir web istemcisinin isteğinin ve web sunucusu tarafından ona verilen yanıtın yapısını inceledik. İletişim, iki taraf arasında metin biçiminde alışverişi yapılan bir dizi komuttan oluşan HTTP protokolü aracılığıyla gerçekleşir. İstemcinin isteği ve sunucunun yanıtı aşağıdaki gibi aynı yapıya sahiptir:

İstemciden gelen bir istek (genellikle "talep" olarak adlandırılır) durumunda, [Document] kısmı çoğu zaman yoktur. Bununla birlikte, bir istemcinin sunucuya bir belge göndermesi mümkündür. Bunu, PUT adlı bir komutla yapar. Bir kaynağı talep etmek için kullanılan iki yaygın komut GET ve POST'tir. İkincisi biraz ileride ele alınacaktır. HEAD komutu, yalnızca HTTP başlıklarını talep etmeye yarar. GET ve POST komutları, tarayıcı türü web istemcileri tarafından en sık kullanılan komutlardır.

Bir istemcinin isteği üzerine, sunucu aynı yapıya sahip bir yanıt gönderir. İstenen kaynak, [Document] bölümünde iletilir; ancak istemcinin komutu HEAD ise, bu durumda yalnızca HTTP başlıkları gönderilir.

2.7. HTML dili

Bir web tarayıcısı çeşitli belgeleri görüntüleyebilir; bunlardan en yaygın olanı HTML belgesidir (HyperText İşaretleme Dili). Bu belge, <balise>texte</balise> biçimindeki etiketlerle biçimlendirilmiş bir metindir. Örneğin, <B>important</B> etiketi, önemli metni kalın olarak görüntüler. Yalnızca bir satır görüntüleyen <hr> etiketi gibi tek başına kullanılan etiketler de mevcuttur. HTML metninde bulunabilecek etiketleri burada ele almayacağız. Tek bir satır HTML kodu yazmadan bir web sayfası oluşturmaya olanak tanıyan çok sayıda WYSIWYG yazılımı mevcuttur. Bu araçlar, fare ve önceden tanımlanmış denetimler kullanılarak yapılan bir sayfa düzeninin HTML kodunu otomatik olarak oluşturur. Böylece sayfaya (fareyle) bir tablo ekleyebilir ve ardından yazılım tarafından oluşturulan HTML koduna bakarak bir web sayfasında tablo tanımlamak için kullanılacak etiketleri öğrenebilirsiniz. İşin sırrı bundan ibarettir. Ayrıca, dinamik web uygulamalarının web istemcilerine gönderilecek HTML kodunu kendileri oluşturması gerektiğinden, HTML dilini bilmek zorunludur. Bu kod program tarafından oluşturulur ve elbette, istemcinin istediği web sayfasını alabilmesi için neyin oluşturulması gerektiğini bilmek gerekir.

Özetle, web programlamaya başlamak için HTML dilinin tamamını bilmek gerekmez. Ancak bu bilgi gereklidir ve Word, FrontPage, DreamWeaver ve onlarca diğer web sayfası oluşturma yazılımı kullanılarak edinilebilir. HTML dilinin inceliklerini keşfetmenin bir başka yolu da, internette gezinerek ilginç ve sizin için henüz bilinmeyen özellikler barındıran sayfaların kaynak kodlarını incelemektir.

2.7.1. Bir örnek

Internet Explorer ile birlikte gelen ücretsiz bir araç olan FrontPage Express ile oluşturulan aşağıdaki örneği ele alalım. Burada Frontpage tarafından oluşturulan kod sadeleştirilmiştir. Bu örnek, bir web belgesinde bulunabilecek bazı öğeleri göstermektedir; örneğin:

bir tablo
bir resim
bir bağlantı

Bir HTML belgesi genel olarak şu şekildedir:

<html>
    <head>
        <title>Un titre</title>
        ...
    </head>
    <body attributs>
        ...
    </body>
</html>

Belgenin tamamı <html>...</html> etiketleri ile çevrelenmiştir. Belge iki bölümden oluşur:

<head>...</head>: Bu, belgenin görüntülenmeyen kısmıdır. Bu kısım, belgeyi görüntüleyecek tarayıcıya bilgi sağlar. Burada genellikle, tarayıcının başlık çubuğunda görüntülenecek metni belirleyen <title>...</title> etiketleri bulunur. Ayrıca, belgenin anahtar kelimelerini tanımlayan ve daha sonra arama motorları tarafından kullanılan diğer etiketler de bulunabilir. Bu bölümde, çoğunlukla javascript veya vbscript ile yazılmış ve tarayıcı tarafından çalıştırılacak komut dosyaları da bulunabilir.
<body öznitelikleri>...</body>: Bu, tarayıcı tarafından görüntülenecek kısımdır. Bu kısımda yer alan etiketler, tarayıcıya belgenin "istenen" görsel biçimini belirtir. Her tarayıcı bu etiketleri kendine özgü bir şekilde yorumlar. Bu nedenle, iki farklı tarayıcı aynı web belgesini farklı şekilde görüntüleyebilir. Bu durum genellikle web tasarımcıları için bir baş ağrısıdır.

Örnek belgemizin HTML kodu şöyledir:

<html>

  <head>
      <title>balises</title>
  </head>

  <body background="/images/standard.jpg">
      <center>
        <h1>Les balises HTML</h1>
        <hr>
      </center>

    <table border="1">
      <tr>
        <td>cellule(1,1)</td>
        <td valign="middle" align="center" width="150">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </table>

    <table border="0">
      <tr>
        <td>Une image</td>
        <td><img border="0" src="/images/univ01.gif" width="80" height="95"></td>
      </tr>
      <tr>
        <td>le site de l'ISTIA</td>
        <td><a href="http://istia.univ-angers.fr">ici</a></td>
      </tr>
    </table>
  </body>
</html>

Kodda sadece bizi ilgilendiren noktalar vurgulanmıştır:

Etiket	etiketler ve örnekler HTML
`titre du document`	<title>balises</title> balises, belgeyi görüntüleyen tarayıcının başlık çubuğunda görünecektir
`barre horizontale`	<hr>: yatay bir çizgi görüntüler
`tableau`	<table öznitelikleri>....</table>: tabloyu tanımlamak için <tr öznitelikler>...</tr> : bir satır tanımlamak için <td öznitelikler>...</td> : bir hücre tanımlamak için örnekler: <table border="1">...</table> : border özniteliği, tablonun kenarlığının kalınlığını belirler <td valign="middle" align="center" width="150">hücre(1,2)</td> : içeriği hücre(1,2) olacak bir hücre tanımlar. Bu içerik dikey olarak (valign="middle") ve yatay olarak (align="center") ortalanır. Hücrenin genişliği 150 piksel olacaktır (width="150")
`image`	<img border="0" src="/images/univ01.gif" width="80" height="95"> : kenarlığı olmayan (border="0"), yüksekliği 95 piksel (height="95"), genişliği 80 piksel (width="80") olan ve kaynak dosyası web sunucusunda /images/univ01.gif adresinde bulunan (src="/images/univ01.gif") bir resim tanımlar. Bu bağlantı, URL http://localhost:81/html/balises.htm ile elde edilen bir web belgesinde yer almaktadır. Ayrıca, tarayıcı burada referans verilen görüntüyü almak için http://localhost:81/images/univ01.gif adresindeki URL dosyasını isteyecektir.
`lien`	<a href="http://istia.univ-angers.fr">burada</a>: ici metninin URL http://istia.univ-angers.fr adresine bir bağlantı olarak işlev görmesini sağlar.
`fond de page`	<body background="/images/standard.jpg"> : sayfa arka planı olarak kullanılacak resmin, web sunucusundaki /images/standard.jpg adresinde bulunduğunu belirtir. Örneğimizde, tarayıcı bu arka plan resmini almak için http://localhost:81/images/standard.jpg adresindeki URL dosyasını isteyecektir.

Bu basit örnekte görüldüğü gibi, belgenin tamamını oluşturmak için tarayıcının sunucuya üç istek göndermesi gerekir:

http://localhost:81/html/balises.htm adresine, belgenin HTML kaynağını almak için
http://localhost:81/images/univ01.gif adresinden univ01.gif resmini almak için
http://localhost:81/images/standard.jpg, standard.jpg arka plan görüntüsünü almak için

Aşağıdaki örnek, yine FrontPage ile oluşturulmuş bir web formunu göstermektedir.

FrontPage tarafından oluşturulan ve biraz sadeleştirilmiş HTML kodu şöyledir:

<html>

  <head>
      <title>balises</title>
    <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//sil
        </script>
  </head>

  <body background="/images/standard.jpg">
    <form method="POST" >
      <table border="0">
        <tr>
          <td>Etes-vous marié(e)</td>
          <td>
              <input type="radio" value="Oui" name="R1">Oui
              <input type="radio" name="R1" value="non" checked>Non
          </td>
        </tr>
        <tr>
          <td>Cases à cocher</td>
          <td>
              <input type="checkbox" name="C1" value="un">1
              <input type="checkbox" name="C2" value="deux" checked>2
              <input type="checkbox" name="C3" value="trois">3
          </td>
        </tr>
        <tr>
          <td>Champ de saisie</td>
          <td>
              <input type="text" name="txtSaisie" size="20" value="qqs mots">
          </td>
        </tr>
        <tr>
          <td>Mot de passe</td>
          <td>
              <input type="password" name="txtMdp" size="20" value="unMotDePasse">
          </td>
        </tr>
        <tr>
          <td>Boîte de saisie</td>
          <td>
               <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
          </td>
        </tr>
        <tr>
          <td>combo</td>
          <td>
              <select size="1" name="cmbValeurs">
                <option>choix1</option>
                <option selected>choix2</option>
                <option>choix3</option>
              </select>
          </td>
        </tr>
        <tr>
          <td>liste à choix simple</td>
          <td>
              <select size="3" name="lst1">
                <option selected>liste1</option>
                <option>liste2</option>
                <option>liste3</option>
                <option>liste4</option>
                <option>liste5</option>
              </select>
          </td>
        </tr>
        <tr>
          <td>liste à choix multiple</td>
          <td>
              <select size="3" name="lst2" multiple>
                <option>liste1</option>
                <option>liste2</option>
                <option selected>liste3</option>
                <option>liste4</option>
                <option>liste5</option>
              </select>
          </td>
        </tr>
        <tr>
          <td>bouton</td>
          <td>
              <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
          </td>
        </tr>
        <tr>
          <td>envoyer</td>
          <td>
              <input type="submit" value="Envoyer" name="cmdRenvoyer">
          </td>
        </tr>
        <tr>
          <td>rétablir</td>
          <td>
              <input type="reset" value="Rétablir" name="cmdRétablir">
          </td>
        </tr>
      </table>
      <input type="hidden" name="secret" value="uneValeur">
    </form>
  </body>
</html>

<--> HTML etiketiyle görsel kontrol eşleşmesi şu şekildedir:

Denetim	HTML etiketi
`formulaire`	<form method="POST" >
`champ de saisie`	<input type="text" name="txtSaisie" size="20" value="birkaç kelime">
`champ de saisie cachée`	<input type="password" name="txtMdp" size="20" value="unMotDePasse">
`champ de saisie multilignes`	<textarea rows="2" name="areaSaisie" cols="20"> satır1 satır2 satır3 </textarea>
`boutons radio`	<input type="radio" value="Evet" name="R1">Evet <input type="radio" name="R1" value="hayır" checked>Hayır
`cases à cocher`	<input type="checkbox" name="C1" value="bir">1 <input type="checkbox" name="C2" value="iki" checked>2 <input type="checkbox" name="C3" value="üç">3
`Combo`	<select size="1" name="cmbValeurs"> <option>seçenek1</option> <option selected>seçenek2</option> <option>seçenek3</option> </select>
`liste à sélection unique`	<select size="3" name="lst1"> <option selected>liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select>
`liste à sélection multiple`	<select size="3" name="lst2" multiple> <option>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select>
`bouton de type submit`	<input type="submit" value="Gönder" name="cmdRenvoyer">
`bouton de type reset`	<input type="reset" value="Sıfırla" name="cmdRétablir">
`bouton de type button`	<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()">

Bu farklı denetimleri tek tek inceleyelim.

2.7.1.1. Form

formulaire

<form method="POST" >

balise HTML

<form name="..." method="..." action="...">...</form>

attributs

name="frmexemple": formun adı

method="..." : tarayıcının, formda toplanan değerleri web sunucusuna göndermek için kullandığı yöntem

action="..." : URL formda toplanan değerlerin gönderileceği adres.

Bir web formu, <form>...</form> etiketleriyle çevrelenir. Formun bir adı olabilir (name="xx"). Formda bulunan tüm denetimler için durum böyledir. Bu ad, web belgesinde form öğelerine başvurması gereken komut dosyaları varsa yararlıdır. Bir formun amacı, kullanıcının klavye veya fare ile girdiği bilgileri toplamak ve bunları bir web sunucusundaki URL adresine göndermektir. Hangi adrese? action="URL" özniteliğinde belirtilen adrese. Bu öznitelik yoksa, bilgiler formun bulunduğu belgenin sunucusuna gönderilir. Yukarıdaki örnekte durum budur. Şimdiye kadar, web istemcisini her zaman bir web sunucusundan bilgi “isteyen” bir varlık olarak gördük, asla ona bilgi “veren” bir varlık olarak değil. Bir web istemcisi, web sunucusuna (formda bulunan) bilgileri nasıl verir? Buna biraz ileride ayrıntılı olarak değineceğiz. POST ve GET adlı iki farklı yöntem kullanabilir. method="méthode" özniteliği, yöntemi GET veya POST olan <form> etiketindeki bu öznitelik, tarayıcıya, formda toplanan bilgileri action="URL" özniteliğiyle belirtilen URL adresine göndermek için hangi yöntemi kullanması gerektiğini bildirir. method özniteliği belirtilmediğinde, varsayılan olarak GET yöntemi kullanılır.

2.7.1.2. Giriş alanı

champ de saisie

<input type="text" name="txtSaisie" size="20" value="birkaç kelime">

<input type="password" name="txtMdp" size="20" value="unMotDePasse">

balise HTML

<input type="..." name="..." size=".." value="..">

input etiketi çeşitli denetimler için mevcuttur. Bu farklı denetimleri birbirinden ayıran şey type özniteliğidir.

attributs

type="text": bunun bir giriş alanı olduğunu belirtir

type="password": giriş alanındaki karakterler * karakterleriyle değiştirilir. Normal giriş alanından tek farkı budur. Bu kontrol türü, şifre girişi için uygundur.

size="20": alanda görünen karakter sayısı - daha fazla karakter girilmesini engellemez

name="txtSaisie" : kontrolün adı

value="birkaç kelime" : giriş alanında görüntülenecek metin.

2.7.1.3. Çok satırlı giriş alanı

champ de saisie multilignes

<textarea rows="2" name="areaSaisie" cols="20">

ligne1

ligne2

ligne3

</textarea>

`balise HTML`	<textarea ...>metin</textarea> içinde başlangıçta metin bulunan çok satırlı bir giriş alanı görüntüler
`attributs`	rows="2": satır sayısı cols="'20" : sütun sayısı name="areaSaisie": denetimin adı

2.7.1.4. Radyo düğmeleri

boutons radio

<input type="radio" value="Evet" name="R1">Evet

<input type="radio" name="R1" value="hayır" checked>Hayır

balise HTML

<input type="radio" attribut2="valeur2" ....>metin

yanında metin bulunan bir radyo düğmesi görüntüler.

attributs

name="radio": kontrolün adı. Aynı adı taşıyan radyo düğmeleri, birbirini dışlayan bir düğme grubu oluşturur: bunlardan yalnızca biri seçilebilir.

value="değer" : radyo düğmesine atanan değer. Bu değer, radyo düğmesinin yanında görüntülenen metinle karıştırılmamalıdır. Metin yalnızca görüntüleme amaçlıdır.

checked: Bu anahtar kelime varsa, radyo düğmesi işaretlenir; yoksa işaretlenmez.

2.7.1.5. Onay kutuları

cases à cocher

<input type="checkbox" name="C1" value="bir">1

<input type="checkbox" name="C2" value="iki" checked>2

<input type="checkbox" name="C3" value="üç">3

balise HTML

<input type="checkbox" attribut2="valeur2" ....>metin

yanında metin bulunan bir onay kutusu görüntüler.

attributs

name="C1": denetimin adı. Onay kutuları aynı adı taşıyabilir veya taşımayabilir. Aynı adı taşıyan onay kutuları, birbiriyle ilişkili bir grup oluşturur.

value="değer" : onay kutusuna atanan değer. Bu değer, radyo düğmesinin yanında görüntülenen metinle karıştırılmamalıdır. Metin yalnızca görüntüleme amaçlıdır.

checked: Bu anahtar kelime varsa, radyo düğmesi işaretlidir; yoksa işaretli değildir.

2.7.1.6. Açılır liste (combo)

Combo

<select size="1" name="cmbValeurs">

<option>choix1</option>

<option selected>seçim2</option>

<option>choix3</option>

</select>

balise HTML

<select size=".." name="..">

<option [selected]>...</option>

...

</select>

<option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler

attributs

name="cmbValeurs" : kontrolün adı.

size="1": görünür liste öğelerinin sayısı. size="1", listeyi bir açılır listeyle eşdeğer hale getirir.

selected: Bir liste öğesi için bu anahtar kelime varsa, söz konusu öğe listede seçili olarak görünür. Yukarıdaki örneğimizde, choix2 liste öğesi, kombo kutusu ilk kez görüntülendiğinde seçili öğe olarak görünür.

2.7.1.7. Tek seçimli liste

liste à sélection unique

<select size="3" name="lst1">

<option selected>liste1</option>

<option>liste2</option>

<option>liste3</option>

<option>liste4</option>

<option>liste5</option>

</select>

`balise HTML`	<select size=".." name=".."> <option [selected]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir listede görüntüler
`attributs`	etiketleri arasında yer alan metinleri bir liste halinde görüntüler; bu, yalnızca bir öğe görüntüleyen açılır listeyle aynıdır. Bu denetim, önceki açılır listeden yalnızca size>1 özniteliği ile ayrılır.

2.7.1.8. Çoklu seçim listesi

liste à sélection unique

<select size="3" name="lst2" multiple>

<option selected>liste1</option>

<option>liste2</option>

<option selected>liste3</option>

<option>liste4</option>

<option>liste5</option>

</select>

`balise HTML`	<select size=".." name=".." multiple> <option [selected]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir listede görüntüler
`attributs`	multiple: listeden birden fazla öğenin seçilmesine olanak tanır. Yukarıdaki örnekte, liste1 ve liste3 öğelerinin her ikisi de seçilmiştir.

2.7.1.9. button türü düğme

bouton de type button

<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()">

balise HTML

<input type="button" value="..." name="..." onclick="effacer()" ....>

attributs

type="button": bir düğme kontrolü tanımlar. İki farklı düğme türü daha vardır: submit ve reset.

value="Sil" : düğme üzerinde görüntülenen metin

onclick="fonksiyon()" : kullanıcı düğmeye tıkladığında çalıştırılacak bir fonksiyon tanımlamaya olanak tanır. Bu fonksiyon, görüntülenen web belgesinde tanımlanan komut dosyalarının bir parçasıdır. Yukarıdaki sözdizimi, javascript sözdizimidir. Komut dosyaları vbscript ile yazılmışsa, onclick="fonksiyon" şeklinde, parantezler olmadan yazılmalıdır. İşleve parametreler aktarılması gerekiyorsa sözdizimi aynı kalır: onclick="fonksiyon(val1, val2,...)"

Örneğimizde, Effacer düğmesine tıklandığında aşağıdaki effacer JavaScript işlevi çağrılır:

    <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//sil
        </script>

effacer işlevi şu mesajı görüntüler:

2.7.1.10. Gönder düğmesi

bouton de type submit

<input type="submit" value="Gönder" name="cmdRenvoyer">

`balise HTML`	<input type="submit" value="Gönder" name="cmdRenvoyer">
`attributs`	type="submit": Düğmeyi, form verilerini web sunucusuna gönderen bir düğme olarak tanımlar. Kullanıcı bu düğmeye tıkladığında, tarayıcı form verilerini <form> etiketinin action özniteliğinde tanımlanan URL adresine, aynı etiketin method özniteliğinde tanımlanan yönteme göre gönderir. value="Gönder" : düğme üzerinde görüntülenen metin

2.7.1.11. Sıfırlama düğmesi

bouton de type reset

<input type="reset" value="Sıfırla" name="cmdRétablir">

`balise HTML`	<input type="reset" value="Sıfırla" name="cmdRétablir">
`attributs`	type="reset": Düğmeyi form sıfırlama düğmesi olarak tanımlar. Kullanıcı bu düğmeye tıkladığında, tarayıcı formu aldığı duruma geri döndürür. value="Sıfırla" : düğme üzerinde görüntülenen metin

2.7.1.12. Gizli alan

champ caché

<input type="hidden" name="secret" value="uneValeur">

balise HTML

<input type="hidden" name="..." value="...">

attributs

type="hidden": bunun gizli bir alan olduğunu belirtir. Gizli bir alan, formun bir parçasıdır ancak kullanıcıya gösterilmez. Ancak, kullanıcı tarayıcısından kaynak kodunu görüntülemesini isterse, <input type="hidden" value="..."> etiketini ve dolayısıyla gizli alanın değerini görebilir.

value="birDeğer" : gizli alanın değeri.

Gizli alanın amacı nedir? Bu, web sunucusunun bir kullanıcının istekleri boyunca bilgileri saklamasına olanak tanır. Bir web alışveriş uygulamasını ele alalım. Müşteri, bir kataloğun ilk sayfasında art1 adlı üründen q1 adet satın alır ve ardından kataloğun başka bir sayfasına geçer. Müşterinin q1 ve art1 numaralı ürünleri satın aldığını hatırlamak için sunucu, bu iki bilgiyi yeni sayfanın web formundaki gizli bir alana yerleştirebilir. Bu yeni sayfada müşteri, q2 ve art2 ürünlerini satın alır. Bu ikinci formun verileri sunucuya gönderildiğinde (submit), sunucu sadece (q2, art2) bilgilerini almakla kalmayacak, aynı zamanda kullanıcı tarafından değiştirilemeyen gizli bir alan olarak formun bir parçası olan (q1, art1) bilgilerini de alacaktır. Web sunucusu daha sonra (q1,art1) ve (q2,art2) bilgilerini yeni bir gizli alana yerleştirecek ve yeni bir katalog sayfası gönderecektir. Ve bu şekilde devam eder.

2.7.2. Bir web istemcisi tarafından web sunucusuna form değerlerinin gönderilmesi

Önceki çalışmada, web istemcisinin görüntülediği bir formun değerlerini bir web sunucusuna göndermek için iki yönteme sahip olduğunu belirtmiştik: GET ve POST yöntemleri. Bir örnek üzerinden bu iki yöntem arasındaki farkı inceleyelim. Daha önce incelediğimiz sayfa statik bir sayfadır. Bu belgeyi isteyecek tarayıcı tarafından gönderilen HTTP başlıklarına erişebilmek için, sayfayı bir .NET web sunucusu (IIS veya Cassini) için dinamik bir sayfaya dönüştürüyoruz. Burada, bir sonraki bölümde ele alınacak olan .NET teknolojisiyle değil, istemci-sunucu iletişimi ile ilgileniyoruz. ASP.NET sayfasının kodu şöyledir:

<%@ Page Language="vb" CodeBehind="params.aspx.vb" AutoEventWireup="false" Inherits="ConsoleApplication1.params" %>
<script runat="server">

    Private Sub Page_Init(Byval Sender as Object, Byval e as System.EventArgs)
       ' isteği kaydediliyor
    saveRequest
  end sub
  Private Sub saveRequest
       ' geçerli isteği request.txt sayfa klasörüne kaydediyor
    dim requestFileName as String=Me.MapPath(Me.TemplateSourceDirectory)+"\request.txt"
    Me.Request.SaveAs(requestFileName,true)
  end sub
</script>

<html>
    <head>
        <title>balises</title>
        <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//sil
        </script>
    </head>
    <body background="/images/standard.jpg">
....
    </body>
</html>

İncelenen sayfanın HTML içeriğine, VB.NET kodunu ekliyoruz. Bu kod hakkında yorum yapmayacağız; ancak şunu belirtmek isteriz ki, yukarıdaki belge her çağrıldığında, web sunucusu web istemcisinin isteğini, çağrılan belgenin bulunduğu klasördeki [request.txt] dosyasına kaydedecektir.

2.7.2.1. GET Yöntemi

İlk bir test yapalım; belgedeki HTML kodunda, FORM etiketi şu şekilde tanımlanmıştır:


        <form method="get">

Önceki belge (HTML + VB kodu) [params.aspx] olarak çağrılır. Bu belge, bir web sunucusunun dizin yapısında .NET (IIS/Cassini) konumuna yerleştirilir ve http://localhost/aspnet/chap1/params.aspx URL'si ile çağrılır:

Tarayıcı az önce bir istek gönderdi ve bu isteğin [request.txt] dosyasına kaydedildiğini biliyoruz. Bu dosyanın içeriğine bir göz atalım:

GET /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

[curl] müşterisinde daha önce karşılaştığımız öğeleri burada da görüyoruz. Diğerleri ise ilk kez karşımıza çıkıyor:

`Connection: keep-alive`	İstemci, sunucudan yanıt verdikten sonra bağlantıyı kapatmamasını ister. Bu, daha sonraki bir istek için aynı bağlantıyı kullanmasına olanak tanır. Bağlantı süresiz olarak açık kalmaz. Sunucu, bağlantı çok uzun süre kullanılmadığında bağlantıyı kapatır.
`Keep-Alive`	[Keep-Alive] bağlantısının açık kalacağı süre (saniye cinsinden)
`Accept-Charset`	İstemcinin işleyebildiği karakter kategorisi
`Accept-Language`	İstemcinin tercih ettiği diller listesi.

Formu şu şekilde dolduruyoruz:

Yukarıdaki [Envoyer] düğmesini kullanıyoruz. HTML kodunun içeriği şöyledir:

<form method="get">
    ...
    <input type="submit" value="Envoyer">
    ...
</form>

[Submit] türündeki bir düğme etkinleştirildiğinde, tarayıcı, <form> etiketindeki form parametrelerini, varsa <form action="URL"> etiketinin [action] özniteliğinde belirtilen URL adresine gönderir. Bu öznitelik yoksa, form parametreleri formu oluşturan URL adresine gönderilir. Bu durumda da durum böyledir. Dolayısıyla, [Envoyer] düğmesi, tarayıcının URL [http://localhost/aspnet/chap1/params.aspx] adresine, form parametrelerini aktararak bir istek göndermesine neden olmalıdır. [params.aspx] sayfası alınan isteği kaydettiği için, istemcinin bu parametreleri nasıl aktardığını öğrenmemiz gerekir. Hadi deneyelim. [Envoyer] düğmesine tıklıyoruz. Tarayıcıdan şu yanıtı alıyoruz:

Bu başlangıç sayfasıdır, ancak tarayıcının [Adresse] alanında URL değerinin değiştiğini görebiliriz. Şu şekilde olmuştur:

http://localhost/aspnet/chap1/params.aspx?R1=Evet&C1=bir&C2=iki&txtSaisie=web+programlama&txtMdp=bu bir sır&areaSaisie=temeller+%0D%0Aweb+programlama&cmbValeurs=seçim3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Gönder&secret=uneValeur

Formda yapılan seçimlerin URL'te yer aldığı görülüyor. İstemcinin isteğini kaydeden [request.txt] dosyasının içeriğine bakalım:

GET /aspnet/chap1/params.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

Tarayıcının, herhangi bir parametre iletmeden belgeyi talep ettiği sırada başlangıçta gönderdiği isteğe oldukça benzeyen bir HTTP isteği görülmektedir. İki fark vardır:

`GET URL HTTP/1.1`	Form parametreleri, belgenin URL kısmının arkasına ?param1=val1&param2=val2&... şeklinde eklenmiştir.
`Referer`	İstemci, bu HTTP başlığıyla, isteği gönderdiğinde görüntülediği belgenin URL değerini belirtir

GET komutunda parametrelerin nasıl aktarıldığını daha yakından inceleyelim: URL?param1=değer1&param2=değer2&... HTTP/1.1 komutunda, burada parami web formundaki denetimlerin adları, "değer" ise bunlara atanan değerlerdir. Aşağıda üç sütunlu bir tablo sunuyoruz:

1. sütun: Örnekteki HTML kontrolünün tanımını içerir
2. sütun: Bu kontrolün bir tarayıcıda nasıl görüntülendiğini gösterir
3. sütun: Örnekteki GET isteğinde olduğu şekliyle, 1. sütundaki kontrol için tarayıcı tarafından sunucuya gönderilen değeri gösterir

HTML kontrolü	görsel	geri gönderilen değer(ler)
<input type="radio" value="Evet" name="R1">Evet <input type="radio" name="R1" value="hayır" checked>Hayır		R1=Evet - kullanıcı tarafından işaretlenen radyo düğmesinin value özniteliğinin değeri.
<input type="checkbox" name="C1" value="bir">1 <input type="checkbox" name="C2" value="iki" checked>2 <input type="checkbox" name="C3" value="üç">3		C1=bir C2=iki - kullanıcı tarafından işaretlenen kutuların value öznitelik değerleri
<input type="text" name="txtSaisie" size="20" value="birkaç kelime">		txtSaisie=web+programlama - kullanıcı tarafından giriş alanına yazılan metin. Boşluklar + işaretiyle değiştirilmiştir
<input type="password" name="txtMdp" size="20" value="unMotDePasse">		txtMdp=bu bir sır - Kullanıcının giriş alanına yazdığı metin
<textarea rows="2" name="areaSaisie" cols="20"> satır1 satır2 satır3 </textarea>		giriş alanı=web+programlamanın+temelleri%0D%0A web+programlama - kullanıcı tarafından giriş alanına yazılan metin. %OD%OA satır sonu işaretidir. Boşluklar + işaretiyle değiştirilmiştir
<select size="1" name="cmbValeurs"> <option>seçim1</option> <option selected>seçim2</option> <option>seçenek3</option> </select>		cmbDeğerler=seçim3 - tek seçimli listeden kullanıcı tarafından seçilen değer
<select size="3" name="lst1"> <option selected>liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select>		lst1=liste3 - tek seçimli listeden kullanıcı tarafından seçilen değer
<select size="3" name="lst2" multiple> <option selected>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select>		lst2=liste1 lst2=liste3 - kullanıcı tarafından çoklu seçim listesinden seçilen değerler
<input type="submit" value="Gönder" name="cmdRenvoyer">		cmdRenvoyer=Gönder - form verilerini sunucuya göndermek için kullanılan düğmenin adı ve value özniteliği
<input type="hidden" name="secret" value="uneValeur">		secret=birDeğer - gizli alanın value özniteliği

Sunucunun kendisine iletilen parametrelerle ne yaptığı merak edilebilir. Aslında hiçbir şey yapmadı. Şu komut alındığında

GET /aspnet/chap1/params.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

komutunu aldığında, web sunucusu parametreleri URL'e http://localhost/aspnet/chap1/params.aspx belgesine, c.a.d'e ise başlangıçta oluşturduğumuz belgeye iletti. İstemcinin bize gönderdiği parametreleri almak ve işlemek için herhangi bir kod yazmadık. Dolayısıyla her şey, sanki istemcinin isteği şu şekildeymiş gibi gerçekleşiyor:

GET /aspnet/chap1/params.aspx

Bu nedenle, [Envoyer] düğmemize yanıt olarak, parametre içermeyen URL ve [http://localhost/aspnet/chap1/params.aspx] istekleriyle başlangıçta elde ettiğimiz sayfanın aynısını aldık.

2.7.2.2. POST yöntemi

HTML belgesi artık, tarayıcının form değerlerini web sunucusuna göndermek için POST yöntemini kullanacak şekilde programlanmıştır:

    <form method="POST" >

URL [http://localhost/aspnet/chap1/params.aspx] aracılığıyla yeni belgeyi talep ediyoruz, GET yönteminde olduğu gibi formu dolduruyoruz ve [Envoyer] düğmesiyle parametreleri sunucuya gönderiyoruz. Sunucudan aşağıdaki yanıt sayfasını alıyoruz:

Böylece, GET ve c.a.d yöntemlerinde olduğu gibi aynı sonucu, yani başlangıç sayfasını elde ediyoruz. Bir fark göze çarpmaktadır: tarayıcının [Adresse] alanında, iletilen parametreler görünmemektedir. Şimdi, istemci tarafından gönderilen ve [request.txt] dosyasına kaydedilen isteğe bakalım:

POST /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 210
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecrey&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur

Müşterinin HTTP sorgusunda yeni öğeler ortaya çıkıyor:

`POST URL HTTP/1.1`	GET sorgusu, POST sorgusuyla değiştirilmiştir. Parametreler artık sorgunun bu ilk satırında yer almıyor. Parametrelerin artık boş bir satırdan sonra HTTP sorgusunun arkasına yerleştirildiği görülebilir. Kodlamaları, GET sorgusundaki kodlamalarıyla aynıdır.
`Content-Length`	"gönderilen" karakter sayısı, c.a.d. Web sunucusunun, istemciden gönderilen belgeyi almak için HTTP başlıklarını aldıktan sonra okuması gereken karakter sayısı. Söz konusu belge, burada form değerlerinin listesidir.
`Content-type`	HTTP başlıklarından sonra istemcinin göndereceği belgenin türünü belirtir. [application/x-www-form-urlencoded] türü, bunun form değerlerini içeren bir belge olduğunu gösterir.

Bir web sunucusuna veri iletmek için iki yöntem vardır: GET ve POST. Bir yöntem diğerinden daha mı iyidir? Gördüğümüz gibi, bir formun değerleri tarayıcı tarafından GET yöntemiyle gönderilirse, tarayıcının Adresse alanında istenen URL değerini URL?param1=val1&param2=val2&... biçiminde görüntülediğini görmüştük. Bunu bir avantaj ya da dezavantaj olarak değerlendirebiliriz:

kullanıcının bu ayarlanmış URL bağlantısını sık kullanılanlarına eklemesine izin vermek istiyorsak bir avantaj
kullanıcıların, örneğin gizli alanlar gibi formdaki belirli bilgilere erişmesini istemiyorsak, bu bir dezavantajdır

Bundan sonra, formlarımızda neredeyse tamamen POST yöntemini kullanacağız.

2.8. Conclusion

Bu bölümde, web geliştirmenin çeşitli temel kavramları ele alınmıştır:

kullanılabilir çeşitli araçlar ve teknolojiler (Java, ASP, asp.net, PHP, Perl, VBScript, JavaScript)
HTTP protokolü aracılığıyla istemci-sunucu iletişimi
HTML dili kullanılarak bir belgenin tasarımı
veri girişi formlarının tasarımı

Bir örnek üzerinden, bir istemcinin web sunucusuna nasıl bilgi gönderebileceğini gördük. Sunucunun bu bilgileri nasıl

bu bilgileri nasıl alabileceğini
işleyebileceğini
işleme sonucuna bağlı olarak müşteriye dinamik bir yanıt gönderebileceğini

Bu, web programlamanın bir alanıdır; bu konuyu bir sonraki bölümde ASP.NET teknolojisinin tanıtımıyla ele alacağız.