Bir HTML dökümanının genel olarak görünümü aşağıdaki gibidir:
<HTML>HTML sayfasının başlangıç komutudur.
<HEAD> Bualanda yazılan bilgiler Web sayfasında görüntülenmezler. Burada sayfabaşlığı, anahtar kelime tanımlamaları, sayfa içerisinde kullanılankarakter bilgisi (dil, code page) gibi sayfanın doğrudan kendisineiliş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 sayfasının bitiş komutudur.
Yukarıdada görüldüğü gibi HTML komutları < > işaretleri arasınayazılırlar ve genellikle her HTML komutunun / ile başlayan bir çiftivardır. Komutların çiftler halinde bulunması; söz konusu komutunsağladığı özelliğin sadece komut çifti arasına yazılan yazılara etkiedeceğini ifade eder. Bir belirtece ait birden çok seçenek bulunabilirve komutlar seçeneklerle kullanıldığı zaman, bu seçeneklerin bir dedeğ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. Fakatokunabilirliği artırmak için, HTML komutlarınin büyük harf ileyazılması bir alışkanlıktır. Bir HTML dökümanı ile ilgili verilen bugenel bilgiler, ileride verilecek komutların kullanımının anlaşılmasıve örneklerin incelenmesinden sonra, daha iyi anlamlandırılacaktır.
<HEAD> </HEAD> Tagları Arasında Kullanılan Komutlar
<TITLE> </TITLE> komut çifti: Bu komut çifti arasına tarayıcı'ın (listeleyici) başlık çubuğunda görülecek olan sayfanın başlığı yazılır.
<META>belirteci: Bu komut ile kullanılabilen birçok seçenek vardır. Örneğinbir kullanımı, bu komut ile sayfanızın içeriğini yansıtan bazı anahtarkelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan aramamotorları sayfaların meta komutlarıne 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="Joomla! Türkiye"> Başka bir kullanım, sayfadaki yazıların hangi dil ailesine aitkarakterlerle yazıldığını belirtmek içindir. Yine aşağıda bunula ilgilibir ö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> Tagları Arasında Kullanılan Komutlar
Her türlü yazı, formatlama bilgileri bu bölüme girdiğinden, bir HTMLdökümanının esas kısmını da bu bölüm oluşturduğundan, bu bölümdeoldukça fazla sayıda komuttan söz edilecektir. Bu komutlar belirli birmantı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. Pektercih edilmemekle birlikte sayı yerine doğrudan renk isimleri deverilebilir (aqua, black, blue, fuchsia, gray, green, lime, maroon,navy, olive, purple, red, silver, teal, white, yellow ). Bgcolorseç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çinkullanı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 solkenarı, Topmarjin üst kenarı ayarlamamızı sağlar.Bir dökümaniçerisindeki yazılardan istediğimiz kısmının font özelliklerinibelirlemek 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, komut ç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 dabir kısım yazıyı tek bir satırda yazmak istediğimiz zaman aşağıdakibalirteçleri kullanmalıyız.
<P> Yeni bir paragraf yapmak istediğimiz zaman
kullandığımız bu komut, çiftiyle birlikte kullanılmaz. Okunabilirliğiartırmak için, genelde satırın sonunda kullanılır. Bir satır boşlukbırakır.
<BR> Bir alt satıra geçmek için kullanılan bu komutun de çifti yoktur. Bu komut 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 komut, çiftiyle birlikte kullanılır ve komut ç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 komut ise aşağıda gösterilmiştir:
<H&> Başlık
<H&>Bu komut çifti arasına da kullanacağımız başlığı yazarız. &, 1’ den6’ 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 yada 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 istedimizzaman da <P> komutuni çiftiyle beraber benzer şekilde ALIGNseç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 stilleriolabilir.Örneğin bir yerden alıntı yapmak istediğimizde, alıntıyaptığımız yazıların biraz eğik (italik gibi) görünmesiniisteyebiliriz. Ya da bazı vurguladığımız kısımların daha çok gözeçarpmasını isteyebiliriz. HTML’ de bu gibi özellikleri sağlayankomutlar de vardır. Aşağıda bunlar verilecektir:
<EM> Önemli bir yazı
</EM> Bu komut vurguyu belirtmek için kullanılır. (Dışarıya biraz eğik çıkar.)
<STRONG> Çok önemli bir yazı
</STRONG> Bu komut çifti güçlü vurguyu belirtir. (Dışarıya biraz koyu çıkar.)
<CODE> Yazılar yazılar
</CODE> Bu komut ç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 komut çifti tanımlama belirten yazılar için kullanılır. (Dışarıya hafif eğik çıkar.)
<CITE> Alıntı
</CITE> Bu komut çifti alıntı yazılar için kullanılır.
<SMALL> Küçük yazı
</SMALL> Bu komut çifti arasında yazılan yazılar dışarıya çok küçük çıkar.
<BIG> Büyük yazı
</BIG> Bu komut ç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 komut ç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 komut çifti herhangi bir yazı ya da yazı grubunun sağa, sola ya da ortaya yaslanmasını sağlar.
<CENTER> Ortalanacak yazı
</CENTER> Bu komut çifti yazı ve resimleri sayfada ortalar .
<PRE> Formatlı metin
</PRE> Bu komutlar 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 komut ç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ğiniWIDTH=50% şeklinde de kullanabiliriz. Örneğin; bizim kullanımımızsayfanın %50’ si, yani yarısı uzunluğunda bir çizgi çizmek istediğimizibelirtir.
Sayfamızdan yapacağımız bağlantılara gelince;öncelikle Internet üzerindeki herhangi bir makinadaki bir dökümanabağlantı yapmaya bakalım:
<A href=”URL_adresi”> Buraya tıklayınız
[/url]Web sayfanızda “Buraya tıklayınız” yazısı çıkacaktır ve bu yazı birlink görünümünü almıştır. Üzerine tıkladığınızda yazdığınız URLadresine 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 servislerinisağlayan prottokolleri de yazabilirsiniz. Eğer, bulunduğunuz dizindebir 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ındakibir dökümana bağlantı yapmak için, dizin ismini ve döküman isminiyazmalısınız.
<A href=”fotograflarim\uzgun.gif”> buraya tıklayınız [/url]
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 [/url]
Gitmek istediğiniz yerin HTML kodunu ise şöyle yazmalısınız:
<A NAME=”name”>[/url] 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şkabir dökümanın bir parçasına gitmek istiyorsanız, <Ahref=”URL#name”> hedef [/url] yazmalısınız. Tabii gideceğinizdöküman parçasının başında da <A NAME=”name”>[/url]yazmalıdır.
HTML dökümanınız içinde bir resim dosyasını da bağlantı elemanı olarak kullanabilirsiniz. Örneğin;
Google 'a e-posta göndermek için tıklayın
\n info@google.com< language="Java" type="text/java"> Bu mail adresi spam botlara karşı korumalıdır, görebilmek için Javascript açık olmalıdır < language="Java" type="text/java"> " target="_blank"><IMG SCR="http://www.google.com/logos/Logo_25wht.gif"> Bu dışarıya şöyle çıkar:
Google 'a e-posta göndermek için tıklayın
Eğerbağlantı yapılacak olan, bir dosyaysa, o dosyanın türü önemlidir.Dosyanın türü, Web sunucusu ve sizin Web istemciniz tarafından bilinenbir 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 birdosya türüyse, o zaman bu bağlantı tıklandığında, web istemcisi odosyayı "diske saklamak" ya da bir uygulama programıyla açmak şeklindeiki seçenek sunar. Bazı dosya tipleri ise, web istemcilerine yüklenenyardımcı "plug-in" ler ile işlenebilir. Bunlardan en popülerleri sesformatları (AU, WAV, MID); video formatları (RM, MOV, AVI) ve bazı özeltipte dosyalardır (AutoCAD çizim dosyaları gibi).
Kayan yazı görüntüsü elde edebilmek için kullanılacak olan komut çifti
<marquee> ...
</marquee> ‘dir.
<MARQUEE> Kayan yazı </MARQUEE> Bu komutlar arasındaki yazı dışarıya kayan şekilde çıkar:
Bu komut ç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> 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> Joomla!
- <LI> Türkiye
- </UL>
Fakat, siyah nokta yerine, içi boş daire ya da kare şekli çıkarmak tamü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> Joomla!
- <LI> Türkiye
- </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> Joomla!
<DD> Bir içerik yönetim sistemidir.
<DT> Joomla! Türkiye
<DD> Birçok ödüle layık görülen Joomla! nın resmi Türkiye sitesidir.
</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;
- <LI> İzmir’ deki üniversiteler
- <UL>
- <LI> Ege Üniversitesi
- <LI> Dokuz Eylül Üniversitesi
Web’in ortak dili HTML kullanılarak hazırlanan sayfalarda, tablo ve formkonuları da oldukça önmelidir. Fakat, burada amaç, tüm HTML komutlarınıvermek değil, HTML dilinin temel mantığını anlatmak olduğu için, bukonulardan bahsedilmeyecektir
