HTML Hakkında

Konu: HTML Hakkında 2007-10-10, 2:51 pm

Alıntı :: HTML Hakkında

HTML Nedir?
HTML Versiyonları
HTML Editörleri
HTML Komutları
HTML'de Kullanılan Teknolojiler
Java
CGI (Common Gateway Interface)
VBScript (Visual Basic Script)

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

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

1.4.2. <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 büyüklüğü belirlenecek yazı 

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 rengi belirlenecek yazı 

& yerine yine altı basamaklı hexadecimal sayılar kullanarak ya da doğrudan renk ismini vererek, ayarlamamızı yaparız.

 Karakter şekli belirlenecek yazı 

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

 Kalın yapılacak yazı 

 İtalik yapılacak yazı 

 Altı çizili yapılacak yazı 

 Satırın biraz üst tarafında görünmesini istediğimiz yazı 

 Satırın biraz alt tarafında görünmesini istediğimiz yazı 

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

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

 Hep aynı satırda yer almasını istediğimiz yazı �.. 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 belirtecini çiftiyle beraber benzer şekilde ALIGN seçeneği ile kullanmalıyız.

 Sağa, sola ya da ortaya yaslayacağımız paragraf 

# = 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:

 Önemli bir yazı �..Bu belirteç vurguyu belirtmek için kullanılır. (Dışarıya biraz eğik çıkar.)

 Çok önemli bir yazı .�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, karası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.

 Küçük yazı �..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:rovelver21@mynet.com><IMG SCR="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.



<MARQUEE ALIGN=# WIDTH=#> Kayan yazı </MARQUEE>



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�

L