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>

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

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

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

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

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

<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>

<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>

<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>

CGI ve Formlar

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 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



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

#!/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

<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>

<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.

<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>