HTML
HTML’E GİRİŞ
Mustafa Akgul
akgul@bilkent.edu.tr
Icindekiler:
- URL: Intenet’de Nesne Adresleri
- Kisisel Web Sayfalari
- HTML Dosyalari
- Baslik, Paragraf
- Listeleme,
- Resimler
- Dokunmaya Hassas Resimler (Imageamap)
- Sayac Yerlestirilmesi
- Tablolar
- CGI ve Formlar
- Referanslar
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?usenetsiteIlk 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
URL: protokol://[[user[:passwd]@]dagitici-makina[:port][/path-selection]burada
[..] olarak belirtilen kisim secimli kisimdir. Bazi URL ornekleri: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.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. 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. 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
<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:<PRE> .. </PRE> icinde gecerlidir.Bilkent baslangic sayfasinin HEAD kismi<BASE HREF=URL> seklinde kullanilir, ISINDEX ise o dokuman uzerinde tarama yapilacagi zaman kullanilir.<a HREF="URL"> Isimlendirme </A> seklinde olur.Main
Bilkent
Library - Bliss Use guest for login
FTP Interface or
Internet Services In Turkey
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. 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. 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
- Bilkent Library - Bliss Use guest for login
- Phonebooks Main via Gopher
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.
- nesne-1
- nesne-2
- 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.
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,261Ilgili .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.
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. ($counter1); # increment value of counter by one & write close (COUNT); # close file print $counter; # put the value on the page
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 COUNTDaha 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.
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 | |
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
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 EOMhttp://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
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
At least one of these fields must be specified:
- NAME
- TITLE
- DEPARTMENT
- OFFICE PHONE NUM
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>
Bu dizinde arama yapabilirsiniz. Aramak istediğiniz anahtar sözcükleri yazın:
CGI ve Formlar
Tablolar
Sayac Yerlestirilmesi
Dokunmaya Hassas Resimler
Resimler
Listelemeler
Headings, Paragraphs, Breaks}
TEMEL HTML KODLARI:
2- TEMEL KODLAR
Yazdıklarınızın düzgün görünmesi için her html sayfasına , aşağıdaki kodlarla başlamalı; <html> <head> <title>©ву вяα∂-ℓєт®</title> </head> <body>
ve aşağıdaki kodlarla bitirmelisiniz.
</body></html>
Her web sayfasının bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda görüntülenecektir. Ayrıca Bir ziyaretçi sitenizin adresini kendi “Sık Kullanılanlar” menüsüne kaydetmek isterse site ismi olarak bu başlığı görecektir. Yukarıdaki <title> …… </title> komutları arasına yazacağınız metin web sayfasının başlığı olarak görüntülenecektir.
Aşağıda bazı sık kullanılan kodları görüyorsunuz.
<b> </b> Aradaki metni koyu yapar .
<i> </i> Aradaki metni italik yapar .
<u> </u> Aradaki metnin altını çizer.
<br> Satırbaşına dön komutudur. xhtml standartlarinda <br />
Bu kodları birbirlerinin içinde de kullanabilirsiniz. Örneğin bir metni hem koyu, hem de italik yapmak için <b><i> ….. </i></b> komutları bu şekilde kullanabilirsiniz.
<p> Yeni parağraf .
<blink> </blink> Aradaki metin sinyal verir. (Netscape”te kesinlikle verir. Ama İE4″te bilemem.) her browser goruntuleyemedigi icin kullanilmamalidir.
<h1> HALKBANK</h1> Aradaki metin başlıktır. 1′den 6′ya kadar (h6 gibi) rakam kullanabilirsiniz. 1 en büyük harf, 6 en küçük harftir.
<font size=”1″>HALKBANK</font> Yazı karakterinin boyutunu belirler. 1 en küçük, 6 en büyüktür.
<center>HALKBANK</center> Aradaki metni sayfanın solundan ve sağından merkeze alır.
<blockquote> HALKBANK </blockquote> Bu komutlar arasındaki paragraf soldan ve sağdan merkeze alınır.
<!——–> Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıda örnek görüyorsunuz.
<!– Sol Taraf Başlıyor –>
<!——- <u>Altı çizili yazı…</u> —–>
<pre> </pre> Bu komut aradaki metnin şekline dokunmaz. Yani metni sıkıştırmaz. Ancak bu komutu örneğin 1 sayfa ya da 1 parağraf yazı için kullanamazsınız. Bir satır boyutundan daha kısa satırlar için kullanabilirsiniz. Aksi halde sayfanızda 1 Metre uzunluğunda satırlar oluşur.(Deneyin)
Bu karakteri boşluk bırakmak istediğiniz yere koyabilirsiniz.(Non-Breaking Space) Ancak dikkat edilmesi gereken husus her yalnızca bir harflik boşluk bırakır. Daha çok boşluk için yan yana çok sayıda yazmalısınız.
<hr> Yatay çizgi çizer.
<font color=”blue”>HALKBANK</font> Aradaki metnin rengini belirler. Esasen HTML dilinde her rengin bir kodu vardır. Bu kodları kullanmak daha uygundur.
<body bgcolor=’white’>veya <body bgcolor=’#FFFFFF’> body tagı sayfanın arka planı anlamındadır. Örneğin arka planı beyaz yapmak istiyorsanız, yukarıdaki komutlardan birini yazmalısınız. Eğer arka plan için elinizde bir desen gifi varsa <body background=’ arka.gif’> şeklinde komut yazmalısınız . <body background=’ arka.gif’ bgcolor=’#ffffff’> şeklinde komut girerek hem renk, hem de gif belirtebilirsiniz.
<BODY BGCOLOR=”#000000″ text=”#f0e68c” link=”#00ffff” vlink=”#ff00ff” > Benim bu sayfamın başına yazdığım bu komutta ise arka plan rengi #000000, text rengi #f0e68c , link rengi #00ffff ve vlink (ziyaret edilmiş link) rengi ise #ff00ff olarak belirtiliyor.Sayfa başına bu şekilde komutu girmelisiniz.Text rengini sayfa başında belirlemiş olmanız dilediğiniz kelime veya cümlelerin rengini değiştirmenize engel değildir.
2- SAYFANIN ÜST VE SOL BOŞLUĞU :
Sayfanın üst boşluğuna “Topmargin” ve sol boşluğuna “Leftmargin” denir. Sayfanızda bu tagları kullanmazsanız sol ve üst’te yarım santim boşluk kalır. Değeri piksel cinsinden yazacaksınız.Bu tagları “body” tagının yanında ve aşağıdaki gibi kullanmalısınız.
<body bgcolor=”#ffffff” topmargin=0 leftmargin=0>
Yukarıdaki gibi “0″ yazarsanız üst ve solda boşluk kalmaz.
3-FRAME’Lİ SAYFA :
mumkun oldugunca frame kullanmamak gereklidir. layer kullanin onun yerine
Frame’ler 2 yada daha çok Html sayfasını ekranınızın penceresinde birleştirerek tek sayfa olarak görünmesini sağlar. Örneğin 2 bölümlü bir frame sayfası hazırlayacaksak, öncelikle bu bölümlerin her biri normal bir Html sayfası olarak hazırlanır. Dha sonra Frame komutları kullanılarak bu 2 sayfayı tek sayfa olarak gösterecek 3. sayfa hazırlanır. Bu 3.sayfaya aşağıda belirteceğimiz frame komutları ve diğer iki sayfanın isimleri girilir. Web sayfalarınızda yalnızca 3.sayfanıza link koyarsınız. Diğer 1 v 2 nolu sayfalara link konulmaz. Ancak ziyaretçi sözkonusu 3.sayfanızın kaynağına inip 1 v 2 nolu sayfalarınızın isimlerini öğrenirse, adresinizin sonuna bu sayfa isimlerini ekleyerek yalnızca bu sayfalarınızı da görebilir
<FRAMESET> …</FRAMESET> = Frame komutu bu taglar arasına yazılır.
FRAMESET COL= Dikey pencere oluşturmak için kullanılır.
FRAMESET ROW = Yatay pencere oluşturmak için kullanılır.
<FRAMESET COL=”135,250,*> = Bu komutta 3 adet sayfanın bir sayfada dikey olarak birleşeceği ve 1. sayfaya 135 Piksel ve 2.sayfaya 250 Piksel yer ayrılacağı, 3.sayfaya ayrılan yerin ise değişken (*) olduğu belirtiliyor. Piksel yerine % değerler de verilebilir.
<FRAME SRC=”….”>= Noktalı alana sayfa ismi yada URL ismi yazılır.
<NAME=”…._…”> = Sayfanın referans ismi yazılır.
MARGINWIDTH = Sayfanın sol boşluğu.
MARGINHEIGHT = Sayfanın üst boşluğu.
TARGET=”_TOP” yada TARGET=”_BLANK” = Frameli sayfanızda bir link varsa <a href ile başlayan tag içine mutlaka bu komutlardan birini koymalısınız
2 sayfalı dikey ve yatay çerçeve kodları
<FRAMESET COLS=”135,455″>
<FRAME SRC=”1.htm” NAME=”1″>
<FRAME SRC=”2.htm” NAME=”2″>
</FRAMESET>
——————————————————————————–
<FRAMESET ROWS=”90,*”>
<FRAME SRC=”1.htm” NAME=”1″>
<FRAME SRC=”2.htm” NAME=”2″>
</FRAMESET>
4- LİSTE OLUŞTURMA:
HTML dokümanınızda aşağııdaki gibi numarasız bir liste elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:
<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>
· Birinci Satır
· İkinci Satır
· Üçüncü Satır
Numara sıralı veya harf sıralı liste oluşturmak için aşağıdaki komutlar girilir.
<OL Type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</OL>
Yukarıdaki gibi Type=A yazarsanız sıralamada büyük harf kullanılır.Type=a yazarsanız küçük harfler, Type=I yazarsanız büyük Roma karakterleri ve Type=L yazarsanız numaralar (rakamlar) kullanılır..
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.