|
HTML Nedir?
HTML
(Hypertext Markup Language); yazı, grafik, ses, film gibi pek
çok farklı yapıdaki verilerden oluşabilen hypertext bir dökümanı
formatlamak ile ilgili komutlar içeren bir yorumlayıcı programlama
dilidir. Dökümanın hypertext olması, bir dökümanın ya da bir
parçasının, başka bir dökümanın içinden çağırılabilmesini ifade
eder. Çağırılan, aynı döküman içinde bir kısım ya da network
üzerinde herhangi bir makinada yer alan başka bir döküman veya
dökümanın bir kısmı olabilir. HTML programlama dilini kullanarak,
kompakt ve etkileşimli Web sayfaları hazırlayabiliriz.
Her yararlı ve iyi şeyin gelişmekte olduğu gibi, HTML dili de
gelişmeye uğramış ve zaman içinde değişik versiyonları çıkmıştır.
Bunlara kısaca bir göz atmakta yarar vardır.
HTML Versiyonları
HTML
1.0: Bu versiyon, daha sonra geliştirilen versiyonlarla
karşılaştırılınca, çok kısıtlı yeteneklere sahip olduğu anlaşılır.
Bu nedenle HTML 1.0 ile yaratılan dökümanlar da oldukça basittir.
HTML 1.0 dökümanlarının temel özellikleri şöyle özetlenebilir: Çok
seviyeli başlıklar, paragraflar, hipermetin referansları,
maddelenmiş listeler için özel formatlama.
HTML 2.0: Bu versiyon, 1994 yılından önce Web
dökümanlarında kullanılan eklentiler ve özellikler temel alınarak
hazırlanmıştır. Bu versiyonun beraberinde getirdiği temel yenilikler
ise, satır içi görüntüler ve doldurulabilen formlardır.
HTML 3.0: Bu versiyonun sağladığı yeni özellikler şu temel
başlıklar altında incelenebilir: Sayfa görünümü üzerinde ileri
derecede kontrol, manşetler, görüntülerdeki popüler noktaların
istemci tarafında işlenmesi, özelleştirilmiş listeler, istemci
çekme/sunucu itme özellikli dinamik dökümanlar, matematik dökümanlar,
stil yaprakları, form içi tablolar.
HTML Editörleri
HTML
kodları herhangi bir editörde yazılabilir. Örneğin; bu iş için Unix
üzerinde pico, vi; DOS altında MSDOS Edit, Windows textpad ya da
herhangi bir metin editörü kullanılabilir. Fakat, HTML komutlarını
hatırlamak, iyi bir programcı için bile güç bir iş olduğu için, tüm
HTML konutlarını hatırlamamıza gerek bırakmayan özel HTML editörleri
geliştirilmiştir. HTML editörleri çok yararlı programlardır. Birçok
işi görsel menüler yardımıyla kolaylıkla yapabilmemizi sağlarlar,
fakat, sayfamızda yapmak istediğimiz birtakım şeylere editörün
özellikleri izin vermezse, o zaman HTML koduna müdahale etmemiz,
yapmak istediğimiz şeyi HTML komutlarını kullanarak
gerçekleştirmemiz gerekir. Ayrıca, Java Appletleri ve bazı CGI
teknikleri ekleyebilmek için de sayfamızın HTML formatıyla
uğraşmamız gerekir. HTML Editörlerini kabaca iki gruba ayırabiliriz.
1) Bu gruba giren editörler, HTML komutlarını menüler ya
da bazı butonlar yardımıyla döküman içine yazmanızı, ilgili
ortamlari kolayca olusturmanizi saglar. Bu editörlerden bazilari,
yazdiginiz HTML kodunun sonuçlarını bir "preview" pencereden
görmenizi saglarlar. Hemen hepsi, tüm HTML belirteç ve komutlarının
anlatıldığı yardım dosyaları sunarlar. Bu tip editörlerin hemen
hepsi, kolay web sayfası hazırlama sihirbazları (wizard) sunarlar.
Böylece, bazı boşlukları doldurarak basit bir web sayfasını kolayca
oluşturabilirsiniz. Ayrıca, hemen hemen tüm editörler,
hazırladığınız sayfaları bir web sunucusuna (FTP ya da HTTP
protokolü ile) gönderebilmek için gerekli araçları (web publishing)
da içerirler. Bu editörler, çoğunlukla, dökümanınız içinde
kullandığınız HTML komutlarını farklı renklerde göstererek
sayfanınızın oluşturulma sürecini kolaylaştırırlar. Çoğu editör,
bazı temel JavaScript programları/özellikleri ekleme ya da hareketli
GIF resimlerini (animated GIF) kolayca hazırlamanızı
sağlayabilirler. Bu editörlerden bazıları, hazırladığınız web
sayfalarındaki HTML kodlarını kontrol edebilirler ve hatalı/eksik
kullanımları saptayabilirler. Bunları yapan bazı yardımcı programlar
da vardır.Bu editörlerden bazıları HotDog Pro , HomeSite, Web Edit,
HotMetal ve DiDo 'dur.
2) Bu gruba giren editörler, yazdiginiz anda tüm
formatlama özellikleri ile birlikte görebildiğiniz (WYSIWYG - what
you see is what you get) türden "görsel HTML editörleri"dir. Bu
programlar kullanılarak, karmaşık HTML kodlarına bulaşmadan oldukça
iyi sayfalar oluşturabilirsiniz. Bu tip editörlerden bazıları, aynı
anda doğrudan HTML koduna da müdahele edebilmenize olanak tanır.
HTML yardımı, kolay sayfa hazırlama sihirbazları, heceleme, web
sunucusuna dosya gönderebilme gibi özellikleri bu programlar da,
genellikle, sunarlar. Benzer şekilde, buton hazırlama, JavaScript
programları/komutları ekleme ya da hareketli GIF resimlerini (animated
GIF) kolayca hazırlamanızı sağlayabilecek özellikler de bu
programlarda son günlerde sıkça karşılaştığımız özelliklerden.
Popüler web istemcilerinden olan Netscape Navigator (4.x) bünyesi
içinde yer alan "Composer" bu tür bir editör. Eger Netscape 3.x
kullanıyorsanız web editörü bu ürünün Gold sürümünde. Popüler görsel
editörlerden bazıları Microsoft Front Page, Symantec Visual Page,
Adobe Page Mill, Claris Home Page' dir. Ayrıca, Microsoft Internet
Explorer 4.x sürümü ile birlikte "Front Page Express" adıyla,
orijinal ürünün daha basit bir sürümü de ücretsiz dağıtılmaktadır.
İkinci gruba giren editörlerden Microsoft FrontPage, hem
yüksek oranda HTML kodlaması gerektiren uygulamaların çok kolay
yapılabildiği görsel editör özelliği ile, hem de düz HTML kodunu
degiştirebilmenize olanak tanıması ile kullanım alanı gittikçe artan
popüler bir editördür.
HTML Komutları
Bir
HTML dökümanının genel olarak görünümü aşağıdaki gibidir:
<HTML> {Html programýnýn baþlangýç komutudur. }
<HEAD> {Bu alanda yazýlan bilgiler Web sayfasýnda görüntülenmezler.
Burada sayfa baþlýðý, anahtar kelime tanýmlamalarý, sayfa içerisinde
kullanýlan karakter bilgisi (dil, code page) gibi sayfanýn doðrudan
kendisine iliþkin tanýmlamalar yapýlýr. }
</HEAD>
<BODY>
{Sayfa üzerinde görülmesi istenen herþey bu bölümde yazýlýr.
Hazýrlanan dökümanýn baþlangýç ve bitiþ bloðu gibidir.}
</BODY>
</HTML> {Html programýnýn bitiþ komutudur. }
Yukarýda
da görüldüðü gibi HTML komutlarý (belirteçleri) < > iþaretleri
arasýna yazýlýrlar ve genelde her HTML belirtecinin / ile baþlayan
bir çifti vardýr. Belirteçlerin çiftler halinde bulunmasý; söz
konusu belirtecin saðladýðý özelliðin sadece belirteç çifti arasýna
yazýlan yazýlara etki edeceðini ifade eder. Bir belirtece ait birden
çok seçenek bulunabilir ve belirteçler seçeneklerle kullanýldýðý
zaman, bu seçeneklerin bir de deðeri bulunur.
<belirtec_adi
secenek_adi1=deger_1 secenek_2=deger_2 ...>
HTML,
büyük harf küçük harf duyarlýlýðý olmayan bir dildir. Fakat
okunabilirliði artýrmak için, HTML belirteçlerinin büyük harf ile
yazýlmasý bir alýþkanlýktýr. Bir HTML dökümaný ile ilgili verilen bu
genel bilgiler, ileride verilecek komutlarýn kullanýmýnýn
anlaþýlmasý ve örneklerin incelenmesinden sonra, daha iyi
anlamlandýrýlacaktýr.
<HEAD>
.......... </HEAD> Arasýnda Kullanýlan Komutlar :
<TITLE>
.......... </TITLE> belirteç çifti: Bu belirteç çifti arasýna
browser' ýn (listeleyici) baþlýk çubuðunda görülecek olan sayfanýn
baþlýðý yazýlýr.
<META> belirteci: Bu belirteç ile kullanýlabilen birçok seçenek
vardýr. Örneðin bir kullanýmý, bu belirteç ile sayfanýzýn içeriðini
yansýtan bazý anahtar kelimeler ve tanýmlamalar verilmesidir. Web
üzerinde arama yapan arama motorlarý sayfalarýn meta belirteçlerine
bakarak gruplandýrma yaparlar. Bununla ilgili aþaðýdaki örnekleri
inceleyiniz.
<META
NAME="Description" CONTENT="HTML öðrenmek için yararlý bilgiler">
<META NAME="Keywords" CONTENT="html, htm, web sayfasý">
<META NAME="Author" CONTENT="Ozge Donmezer">
Baþka
bir kullaným, sayfadaki yazýlarýn hangi dil ailesine ait
karakterlerle yazýldýðýný belirtmek içindir. Yine aþaðýda bunula
ilgili bir örnek verilmiþtir.
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8858-9">
(Türkçe' nin dahil olduðu dil ailesine ait standard tanýmlamasý iso-8859-9'
dur.)
<BODY> .......... </BODY> Arasýnda Kullanýlan Komutlar :
Her
türlü yazý, formatlama bilgileri bu bölüme girdiðinden, bir HTML
dökümanýnýn esas kýsmýný da bu bölüm oluþturduðundan, bu bölümde
oldukça fazla sayýda komuttan söz edilecektir. Bu komutlar belirli
bir mantýk sýrasýna göre verilecektir.
<BODY
BGCOLOR=& TEXT=& LINK=& ALINK=& VLINK=&>
RRGGBB
ile temsil edilen hexadecimal bir sayýdýr. (R= Red, G= Green, B=
Blue) Bu yöntem kullanýlarak deðiþik renkler elde edilebilir. Pek
tercih edilmemekle birlikte sayý yerine doðrudan renk isimleri de
verilebilir (aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow ). Bgcolor
seçeneði, sayfanýn zemininin, text, sayfa içindeki yazýlarýn, link,
baðlantý yazýlarýnýn, alink, aktif durumdaki baðlantý yazýlarýnýn,
vlink, ziyaret edilmiþ baðlantýlarýn renklerini vermemiz için
kullanýlýr.
Sayfanýn
zemin rengini tek renk vermek yerine, fona bir background resmi de
koyabiliriz.
<BODY
BACKGROUND=”image_URL”>
Sayfa
kenarlarý ayarlamalarý da aþaðýdaki þekilde yapýlýr:
<BODY
LEFTMARGIN=& TOPMARGIN=&>
&
marjin miktarýný temsil etmektedir. Leftmarjin seçeneði sol kenarý,
Topmarjin üst kenarý ayarlamamýzý saðlar.Bir döküman içerisindeki
yazýlardan istediðimiz kýsmýnýn font özelliklerini belirlemek için
font belirteci deðiþik seçeneklerle kullanýlýr:
<FONT
SIZE=&> Font büyüklüðü belirlenecek yazý </FONT>
1’
den 7’ ye kadar deðiþebilir. Sayýyý artýrdýkça, belirteç çifti
arasýna yazdýðýmýz yazýnýn büyüklüðü de artar.
<FONT
COLOR=&> Font rengi belirlenecek yazý </FONT>
&
yerine yine altý basamaklý hexadecimal sayýlar kullanarak ya da
doðrudan renk ismini vererek, ayarlamamýzý yaparýz.
<FONT
FACE=”&”> Karakter þekli belirlenecek yazý </FONT>
&
yerine istediðimiz karakter tiplerinden birini yazabiliriz. (Örneðin;
Times New Roman, Arial gibi…)
Döküman
içindeki yazýlardan istediðimiz bir kýsmýna kalýn, italik, altý
çizgili vb özellikleri verebiliriz:
<B>
Kalýn yapýlacak yazý </B>
<I> Ýtalik yapýlacak yazý </I>
<U> Altý çizili yapýlacak yazý </U>
<SUP> Satýrýn biraz üst tarafýnda görünmesini istediðimiz yazý
</SUP>
<SUB> Satýrýn biraz alt tarafýnda görünmesini istediðimiz yazý </SUB>
<STRIKE> Üstü çizili yapýlacak yazý </STRIKE>
HTML
dökümanýmýzda paragraf baþý yapmak, sadece alt satýra geçmek ya da
bir kýsým yazýyý tek bir satýrda yazmak istediðimiz zaman aþaðýdaki
balirteçleri kullanmalýyýz.
<P>
Yeni bir paragraf yapmak istediðimiz zaman kullandýðýmýz bu
belirteç, çiftiyle birlikte kullanýlmaz. Okunabilirliði artýrmak
için, genelde satýrýn sonunda kullanýlýr. Bir satýr boþluk býrakýr.
<BR>
Bir alt satýra geçmek için kullanýlan bu belirtecin de çifti yoktur.
Bu belirteç bir satýr boþluk býrakmadan, bir alt satýra geçer.
<NOBR>
Hep ayný satýrda yer almasýný istediðimiz yazý </NOBR>
Bu belirteç, çiftiyle birlikte kullanýlýr ve belirteç çifti
arasýna yazdýðýmýz yazý, bir satýrda görüntülenir.
Döküman
içinde kullanacaðýmýz baþlýk formatlarýný ayarlamak için
kullanacaðýmýz belirteç ise aþaðýda gösterilmiþtir:
<H&>
Baþlýk <H&>
Bu belirteç çifti arasýna da kullanacaðýmýz baþlýðý yazarýz. &,
1’ den 6’ ya kadar deðiþebilen bir sayýyý temsil eder. Sayý
büyüdükçe, baþlýðýn ebatlarý da küçülür.
Baþlýðý
saða, sola yaslamak ya da sayfanýn tam ortasýnda bulunmasýný
saðlamak için <H&> belirteci ALIGN seçeneðiyle kullanýlýr.
<H&
ALIGN=#> Saða, sola ya da ortaya yaslayacaðýmýz baþlýk </H>
&
yerine 1’ den 6’ ya kadar bir sayý, # yerine de left, right ya da
center gelmelidir.
Bir
paragrafý olduðu gibi saða, sola ya da ortaya yaslamak istedimiz
zaman da <P> belirtecini çiftiyle beraber benzer þekilde ALIGN
seçeneði ile kullanmalýyýz.
<P
ALIGN=#> Saða, sola ya da ortaya yaslayacaðýmýz paragraf </P>
# = left,
right ya da center
Hazýrladýðýmýz
dökümanda kullanmak istediðimiz özel karakter stilleri olabilir.Örneðin
bir yerden alýntý yapmak istediðimizde, alýntý yaptýðýmýz yazýlarýn
biraz eðik (italik gibi) görünmesini isteyebiliriz. Ya da bazý
vurguladýðýmýz kýsýmlarýn daha çok göze çarpmasýný isteyebiliriz.
HTML’ de bu gibi özellikleri saðlayan belirteçler de vardýr. Aþaðýda
bunlar verilecektir:
<EM>
Önemli bir yazý </EM> {Bu belirteç vurguyu belirtmek için
kullanýlýr. (Dýþarýya biraz eðik çýkar.) }
<STRONG>
Çok önemli bir yazý </STRONG> {Bu belirteç çifti güçlü vurguyu
belirtir. (Dýþarýya biraz koyu çýkar.) }
<CODE>
Yazýlar yazýlar </CODE> {Bu belirteç çifti yasa, kural belirten
yazýlar için kullanýlýr. }
<SAMP>
Örnek </SAMP> { Örnek çýktý }
<VAR>
Deðiþken, emin deðil </VAR> {Deðiþken, kararsýz }
<DFN>
Tanýmlama </DFN> {Bu belirteç çifti tanýmlama belirten yazýlar
için kullanýlýr. (Dýþarýya hafif eðik çýkar.)}
<CITE>
Alýntý </CITE> {Bu belirteç çifti alýntý yazýlar için kullanýlýr.
}
<SMALL>
Küçük yazý </SMALL> {Bu belirteç çifti arasýnda yazýlan yazýlar
dýþarýya çok küçük çýkar. }
<BIG>
Büyük yazý </BIG> {Bu belirteç çifti arasýnda yazýlan yazýlar
dýþarýya çok büyük çýkar. }
<ADDRESS>
Yazarýn Adresi </ADDRESS> {Bu format yazarýn adresini yazmak
içindir. }
<BLOCKQUOTE>
Ýçeriden baþla </BLOCKQUOTE> {Bu belirteç çifti arasýna yazýlan
yazý sayfanýn hem saðýndan hem solundan içeriye kayar. }
<DIV
ALIGN=LEFT|CENTER|RIGHT> Herhangi bir yazý ya da yazý grubu </DIV>
{Bu belirteç çifti herhangi bir yazý ya da yazý grubunun saða, sola
ya da ortaya yaslanmasýný saðlar. }
<CENTER>
Ortalanacak yazý </CENTER> {Bu belirteç çifti yazý ve resimleri
sayfada ortalar . }
<PRE>
Formatlý metin </PRE> {Bu belirteçler arasýna yazýlan her þey,
yazýldýðý gibi ekrana çýkar. Boþluklar, tab' lar, satýr bölmeleri vb
korunur. }
<BLINK>
Yanýp sönen yazý </BLINK> {Bu belirteç çifti arasýna yazýlan
yazýlar dýþarý çýktýklarýnda bir yanýp bir sönen þekilde görünürler.
}
Sayfamýzda
herhangi bir yere deðiþik boyutlarda çizgi çizmek isteyebiliriz.
Bunu <HR> belirteciyle yaparýz. Boyutlarýný ayarladýðýmýz
seçenekleriyle birlikte kullanýmý aþaðýdaki gibidir.
<HR
SIZE=# WIDTH=# ALIGN=#> {Çizginin uzunluðunu ayarlamak için
kullandýðýmýz WIDTH seçeneðini WIDTH=50% þeklinde de kullanabiliriz.
Örneðin; bizim kullanýmýmýz sayfanýn %50’ si, yani yarýsý
uzunluðunda bir çizgi çizmek istediðimizi belirtir. }
Sayfamýzdan
yapacaðýmýz baðlantýlara gelince; öncelikle Internet üzerindeki
herhangi bir makinadaki bir dökümana baðlantý yapmaya bakalým:
<A
HREF=”URL_adresi”> Buraya týklayýnýz </A> {Web sayfanýzda
“Buraya týklayýnýz” yazýsý çýkacaktýr ve bu yazý bir link görünümünü
almýþtýr. Üzerine týkladýðýnýzda yazdýðýnýz URL adresine ulaþýrsýnýz.
URL adresi aþaðýdaki gibidir. }
<servis>://<adres>[:port_numarasý]/<dizin>/dosya_adý
<servis>
yerine webin dýþýnda diðer internet servislerini saðlayan
prottokolleri de yazabilirsiniz. Eðer, bulunduðunuz dizinde bir
dökümana baðlantý yapmak istiyorsanýz, sadece dökümanýn adýný
yazmanýz yeterlidir. Kendi makinanýzda fakat baþka bir dizin
altýndaki bir dökümana baðlantý yapmak için, dizin ismini ve döküman
ismini yazmalýsýnýz.
<A
HREF=”fotograflarim\uzgun.gif”> buraya týklayýnýz </A>
Ayný
dökümanýn içinde bir yere baðlantý yapmak istiyorsak o zaman þöyle
demeliyiz:
<A
HREF=”#name”> buraya týklayýnýz </A>
Gitmek
istediðiniz yerin HTML kodunu ise þöyle yazmalýsýnýz:
<A
NAME=”name”></A> Buraya hoþgeldiniz.
“name”
burada sizin tespit edeceðiniz herhangi bir isim olabilir. (Örneðin
1. Bölüme gitmek istiyorsanýz, name yerine 1, ayný þekilde 1.
Bölümün bulunduðu yere de name olarak 1 yazmalýsýnýz.)
Baþka
bir dökümanýn bir parçasýna gitmek istiyorsanýz, <A HREF=”URL#name”>
hedef </A> yazmalýsýnýz. Tabii gideceðiniz döküman parçasýnýn
baþýnda da <A NAME=”name”></A> yazmalýdýr.
HTML
dökümanýnýz içinde bir resim dosyasýný da baðlantý elemaný olarak
kullanabilirsiniz. Örneðin;
Bana
mail göndermek için zarfýn üzerini týklayýn<A HREF=mailto:hizmet@netyardim.net><IMG
SRC="envelope.gif"> </A>
Bu
dýþarýya þöyle çýkar:
Bana
mail göndermek için zarfýn üzerini týklayýn ZARF RESMI
Eðer
baðlantý yapýlacak olan, bir dosyaysa, o dosyanýn türü önemlidir.
Dosyanýn türü, Web sunucusu ve sizin Web istemciniz tarafýndan
bilinen bir dosya türüyse (TXT, GIF, JPG, JPEG, PNG, XBM) baðlantý
yazýsýnýn üzerine týkladýðýnýzda dosya açýlýr. Eðer ilgili dosya
bilinmeyen bir dosya türüyse, o zaman bu baðlantý týklandýðýnda, web
istemcisi o dosyayý "diske saklamak" ya da bir uygulama programýyla
açmak þeklinde iki seçenek sunar. Bazý dosya tipleri ise, web
istemcilerine yüklenen yardýmcý "plug-in" ler ile iþlenebilir.
Bunlardan en popülerleri ses formatlarý (AU, WAV, MID); video
formatlarý (RM, MOV, AVI) ve bazý özel tipte dosyalardýr (AutoCAD
çizim dosyalarý gibi).
Kayan
yazý görüntüsü elde edebilmek için kullanýlacak olan belirteç çifti
<marquee> ... </marquee> ‘dir.
<MARQUEE>
Kayan yazý </MARQUEE> {Bu belirteçler arasýndaki yazý dýþarýya
kayan þekilde çýkar}
Bu
belirteç çiftinin beraber kullanýldýðý seçenekler aþaðýda
verilmiþtir:
<MARQUEE
SCROLLAMOUNT=#> Kayan yazý </MARQUEE>
# burada kayma hýzýný belirten bir sayýdýr.
<MARQUEE
SCROLLDELAY=# SCROLLAMOUNT=#> Kayan yazý </MARQUEE>
Scrolldelay seçeneði yazýnýn hangi aralýklarla bekletileceðini
belirten bir sayýdýr.
Kayan
yazýnýn büyüklüðünü, geniþliðini ayarlayabiliriz. Align seçeneði
ise, top, middle ve bottom deðerlerini alabilir.
<FONT
SIZE=6>
<MARQUEE ALIGN=# WIDTH=#> Kayan yazý </MARQUEE>
</FONT>
Merhaba!
Kayan yazýnýn arkaplan rengini bgcolor seçeneði ile aþaðýdaki gibi
verebiliriz.
<MARQUEE BGCOLOR=#>Kayan yazý </MARQUEE>
<height=# width=#> ANLAMLARINI
<hspace=# vspace=#> ANLAYAMADIM…
Listeler
de incelenmesi gereken önemli bir konudur. Listeleri dört grupta
inceleyebiliriz.
1-
Sýrasýz (Unordered) Listeler: Bir seçenek belirtilmezse, siyah
noktalý listeler oluþturur.
<UL>
<LI> Win 98
<LI> Win NT
</UL>
Fakat,
siyah nokta yerine, içi boþ daire ya da kare þekli çýkarmak ta
mümkündür. Bunun için kullanýlmasý gerekli seçenek TYPE seçeneðidir.
TYPE seçeneðinin alabileceði deðerler disc, circle ve square’ dir.
2-
Sýralý (Ordered) Listeler: Bir seçenek belirtilmezse, 1, 2, 3 …
numaralý listeler oluþturur.
<OL>
<LI> Win 98
<LI> Win NT
</OL>
Burada
da type seçeneðini kullanarak deðiþik sýralý listeler yaratmak
mümkün olur.
<LI
TYPE= #> # = A, a, I, i, 1
3-Açýklamalý
Listeler:
<DL
COMPACT>
<DT> Win98
<DD> Bir iþletim sistemidir.
<DT> WinNT
<DD> Arayüzü Windows 95’ e çok benzeyen bir iþletim sistemidir.
</DL>
4-Ýçiçe
Listeler:
Tüm
liste çeþitleri, 3'den fazla bölüm kullanmadýkça içiçe yazýlabilir.
Örnek olarak;
<UL>
<LI> Ýzmir’ deki üniversiteler
<UL>
<LI> Ege Üniversitesi
<LI> Dokuz Eylül Üniversitesi
</UL>
<LI> Ankara' nýn belli baþlý üniversiteleri
<UL>
<LI> ODTÜ
<LI> Hacettepe
</UL>
</UL>
Ekrandaki
görüntüsü,
•Ýzmir’
deki üniversiteler
•Ege Üniversitesi
•Dokuz Eylül Üniversitesi
•Ankara'nýn belli baþlý üniversiteleri
•ODTÜ
•Hacettepe
HTML'de
Kullanılan Teknolojiler
1.
JAVA
Java,
Sun Microsystems firması tarafından 1991 yılında geliştirilmiş
nesneye yönelik bir programlama dilidir. Java, temel veri tiplerini,
giriş çıkış fonksiyonlarını ve diğer fonksiyonları içeren sınıf
kütüphanesine sahiptir. Bu programlama dili aynı zamanda internet
protokollerinin çoğunu destekleyen fonksiyonlara da sahiptir. Java
çok fazla komut içermemesine rağmen, uygun komutları bünyesinde
barındırdığı için, güçlü bir dil olarak kabul edilmiştir. Java
programlama dili, geliştirilirken C ve C++ dillerini kendine baz
almıştır.
Java ile yazılan bir programın çalıştırılabilmesi için,
iki aşamadan geçirilmesi gerekmektedir. Birinci aşama programın
derlenmesi aşamasıdır. Programın Java derleyicisi ile derlenmesi
sonucunda, byte kod (Java binary kod) denilen makina koduna yakın,
fakat işlemciye özel olmayan kod oluşturulur. İkinci aşama ise,
programın byte kodunun bir byte kod yorumlayıcısından geçirilmesi
aşamasıdır. Byte kod yorumlayıcısı programın çalışmasını sağlar.
Java’ nın bu özellii ona hem avantaj hem dezavantaj getirir.
Derlendikten sonra işlemciye özel kod üretilmemesi sayesinde Java
sistemden bağımsızdır, üzerinde Java yorumlayıcısı bulunduran
herhangi bir sistemde çalışır. Fakat, bir Java yorumlayıcı programı
yürüttüğü için, işletim hızı da yavaşlar.
Java’ da program yazabilmek için bir Java Geliştirme Kiti
(JDK) gereklidir. Herhangi bir editörde (Unix için pine, vi; DOS
altında MSDOS Edit vb…) yazılıp, *.java uzantılı kaydedilen Java
programı dosyası, JDK’ de komut satırına javac dosya_ismi yazılıp
derlenir. Bu işlem sonucunda dosya_ismi .class dosyası oluşur. (Byte
kod dosyası) JDK’ den java yorumlayıcısı çağırılarak, programın
çalıştırılması istenirse, komut satırına java dosya_ismi yazılır.
Java dili ile yazılan programları, Java uygulamaları ve
Java appletleri olmak üzere iki ana grupta toplayabiliriz. Java
uygulaması, herhangi bir probleme çözüm getirmek amacıyla, Java dili
ile yazılmış bir programdır. Örneğin; ekrana “Ben Java öğreniyorum!”
çıktısını veren bir program yazalım:
Class JavaOgreniyorum {
public static void main(String args[]){
System.out.printIn(“Ben Java öğreniyorum!”);
}
}
Bu programı bir editörde yazıp, genelde sınıfa verdiğimiz
isi dosya ismine de verip, kodu JavaOgreniyorum.java olarak
kaydederiz. Daha sonra yukarıda açıklandığı gibi, JDK’ de derlemek
için komut satırına javac JavaOgreniyorum yazıp, JavaOgreniyorum.class
dosyasının oluşmasını sağlarız. Programın çalışması için de java
JavaOgreniyorum komut satırını yazarız.
Java appleti ise, Java desteğine sahip bir listeleyicide
(browserda) görüntülenen Web sayfaları içerisinden çalıştırılabilen
programlardır. Bir Java appleti imajlara benzer, fakat, dinamik ve
interaktif olmasıyla farklılaşır. Bir Web sayfasına java appleti
bağlamak için, önce Java dili ile program yazılıp derlenir. Sonra
HTML ile hazırlanmış Web sayfasında bu dosya referans olarak
gösterilir. HTML dosyası ile applet dosyasının aynı dizinde olması
tavsiye edilir. (bir HTML dosyası ile o sayfada kullanılan imaj
dosyası gibi) Web sayfası yüklendiğinde Web listeleyicisinde
(browserında) gömülü olan Java yorumlayıcısı sayfadaki appletleri
çalıştırmaya başlar. Appletlerin Web sayfasında çalışması için,
kullanılan listeleyicinin Java desteğine sahip olması gerekmektedir.
Bu amaçla geliştirilen ilk listeleyici (browser), HotJava olup (HotJava
Java dili ile yazılmıştır.), daha sonra diğer Web listeleyecilerinin
de Java’ yı destekleyen yeni sürümleri çıkartılmıştır. (Örneğin,
Netscape 2.0 gibi)
Şimdi deminkine benzer bir Java appleti yazmayı ve bunu
bir Web sayfasına bağlamayı deneyelim:
import java.awt.Graphics;
public class JavaOgreniyorumApplet extends java.applet.Applet{
public void paint (Graphics g){
g.drawstring(“Ben Java öğreniyorum!”, 5, 25);
}
}
Burada import komutu da applet’ in JDK içindeki sınıflara
erişimini sağlar.
Bu applet dosyası da deminki Java programına benzer
biçimde, bir editörde yazıldıktan sonra ait olduğu sınıf ismi dosya
ismi olarak verilip JavaOgreniyorumApplet.java şeklinde kaydedilir.
JDK’ de javac JavaOgreniyorumApplet komut satırı yazılıp, programın
derlenmesi sağlanır. Daha sonra oluşturulan byte kodun çalışması
için, java JavaOgreniyorumApplet komut satırı yazılır.
2.
CGI (Common Gateway Interface)
CGI’
ın ne olduğunu anlatmaya geçmeden önce bazı kavramların açıklanması
gerekmektedir. Buna Web Server ve Client ile başlamak yerinde olur.
Web Server’ lar (HTTPd Server), Web sayfalarını üzerinde bulunduran
makinalardır. Bu makinalar genelde kendi üzerlerinde bulunan Web
sayfalarına erişmek için 80 numaralı portu kullanırlar. Client ise,
Web Server’ lar üzerindeki Web sayfalarına erişmek isteyen
makinalardır. Client herhangi bir porttan Web Server ile iletişim
kurabilir. Stdin standard input’ un kısaltılmışıdır ve server
açısından client’ ın server’ a gönderdiği veriler anlamına gelir.
Stdout standard output’ un kısaltılmışıdır ve server’ ın client’ ın
gönderdiği verileri işlemesi sonucunda client’ a gönderdiği sonuç
bilgisi anlamına gelir. Yukarıdaki açıklamalardan da anlaşıldığı
gibi, HTTP protokolü, server’ dan client’ a ve client’ tan server’ a
veri aktarımını destekler. Client’ ın server’ a veri gönderebilmesi,
formlar aracılığıyla olur. Form, client’ ın server’ a veri
ulaştırmasını sağlamak amacıyla HTML dili kullanarak yazılmış Web
sayfalarıdır. Kullanıcının (client) form aracılığıyla server’ a
gönderdiği bilgiyi işleyecek server tarafında çalışan bir programa
ihtiyaç vardır. Bu programa gateway programı denir. CGI (Common
Gateway Interface), client’ ın gönderdiği input verileri alıp,
gateway programına veren (gateway programının çalışmasını sağlayan)
ve programın çıktısını tekrar client’ a ileten, kısaca server ve
server tarafındaki gateway programları arasında iletişimi sağlayan,
bir arayüz, protokoldür. Bir Web Client programının (Web browser),
HTTP server’ ına veri göndermesini sağlamak için hazırlanan formlar,
HTML diliyle aşağıdaki gibi başlar:
<FORM
ACTION=”URL” METHOD=get | post>
…..
…..
</FORM>
Action
seçeneğinde belirtilen URL, formun doldurulduktan sonra, hangi Web
server’ daki hangi program tarafından işleneceği bilgisini ifade
eder. Method seçeneği ise, formun Web server’ ına hangi methodla
ulaştırılacağını belirtir. Yukarıdan da anlaşılacağı gibi, formdaki
bilgiler iki methodla ulaştırılabilir. Get metodu kullanılırsa, veri
çevresel değişkenler aracılığı ile, Web Server’ a ulaştırılır. Bu
metodla bütün form bir query_string değişkeninin içine konur, action
kısmında belirtilen adres ve programın sonuna eklenir ve tek bir URL
olarak gönderilir. http://bla.bla.edu./stuff/program?query_string
Veri büyüklüğü sınırlandırılmıştır. Bu yöntem kullanıldığı zaman,
actionda belirtilen URL önce decode edilmelidir, çünkü form
doldurulup, submit edildiğinde, browser bütün bilgiyi URLencode
eder. Decode işlemi bir CGI script (gateway programı) ile
yapılabilir. Yukarıda submit edilen URL incelendiğinde, soru
işaretine kadar olan kısmın, formun action kısmında yer alan adres
ve program olduğu görülür. Soru işaretinden sonraki kısım ise,
gönderilen verilerin yer aldığı değişkendir. Post metodu
kullanıldığında ise, CGI veriyi stdin olarak, alır ve bütün çevresel
değişkenlere gerekli atamaları yapar. Veri üzerinde herhangi bir
büyüklük sınırlaması yoktur. Verinin gateway programı tarafından
işlendikten sonra, client’ a geri gönderilmesine gelince; çıktılar
MIME çıktıları, redirection ve nonparsed Headings olmak üzere üç
şekilde gönderilebilir. Sadece MIME çıktılara genel olarak bakalım:
Çıktının MIME type gönderilmesi, herhangi bir Web sayfası, ses veya
video dosyası ya da sade text olması demektir. Gateway programı,
standard output’ un MIME tipini belirten başlık mesajlarını koymak
ve altına bir de boş satır bırakmak zorundadır. Örneğin; Content-type:
MIME type (text/html) Data… Data… Bir gateway’ in kullanım amaçları
çok çeşitli olabilir. Bir örnek vermek gerekirse; bir Web server
üzerindeki bir veri tabanı üzerinde, bir bilginin, verilen bir
keyword aracılığıyla araştırılması bir gateway programıyla
halledilebilir. Bir gateway programı herhangi bir programlama diinde
yazılabilir. Fakat, bir gateway yazmak için en çok tercih edilen
programlama dilleri şunlardır: C, C++, Fortran, Perl, TCL, herhangi
bir Unix Shell, Visual Basic, AppleScript. Script diliyle yazılmış
programların kendileri server’ a konur, diğer dillerde yazılmış
programların ise derlenmiş hali server’ a konur. Derlenmiş hali
server’ a konan programların source kodları da bilgi amacıyla
genelde konur. CGI real time çalıştırılır, yani client ne zaman
çalıştırmak isterse, CGI bu isteği alır, verileri çevresel
değişkenlere aktararak gateway’ e gönderir ve gateway’ i
çalıştırmaya başlar ve çıktı programın çalışması bitince, CGI
tarafından alınıp, client’ a gönderilir. Gateway’ lerin server’ a
konması için iki yol izlenebilir: Bunlardan birincisi, herkes kendi
dizini altına programını koyar ve bir de hangi uzantılı dosyaların
server tarafından cgi olarak kullanılacağının server’ a bildirilmesi
için bir .htaccess dosyası hazırlar. Fakat, bu yöntem pek tercih
edilmez, çünkü güvenli gateway programı yazmak kolay bir iş
değildir. Gateway’ ler real time çalıştırıldığından, kötü niyetli
kişiler, gateway server’ı zor durumda bırakacak şekilde
kullanabilirler. Bunu engellemek için, gatewayler server üzerinde
ayrı bir dizin altında tutulurlar. (cgi-bin dizini) Gateway
programları, bu dizine sadece Webmaster’ ların bilgisi ve izni
dahilinde konulabilir.
3.
Visual Basic Script
VisualBasicScript,
JavaScript gibi script diller, HTML’ ye ek olarak tasarlanmıştır. Bu
diller ile programlar HTML içine yazılır ve Web sayfasının
interaktif ve dinamik olmasına hizmet ederler. VBScript eklenmiş
sayfalar bu dili destekleyen listeleyiciler (browserlar) tarafından
görüntülenebilir. Mevcut listeleyiciler (browserlar) arasından
sadece Internet Explorer VBScript desteğine sahiptir. HTML dökümanı
içindeki scriptleri ayırıp (parse), işletmek (process) -bu dili
destekleyen- listeleyicinin (browserın) sorumluluğundadır.
|