Bilgisayar İnternet WebTasarım















html

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=”fotograflarimuzgun.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.


  • ßilgi-World ßilgi Dünyası
  • © ßilgi-World ßilgi Dünyası hizmetleri. © Tasarımın çalınması durumunda gerekli işlemler yapılacaktır.
  • Sitemiz 1280x800 çözünürlüğünde optimize edilmiştir.
  • Firefox, İnternet Explorer, Opera, Google Chorome gibi tarayıcılarda sorunsuz çalışmakla beraber en iyi firefox ile görüntülenir.
  • Etiketler: |bilgi world| |bilgi-world| |bilgisayar| |webtasarım| |tr.gg| |bedava-sitem| |program| |kodlar|
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol