Data WebMaster
& KONULAR &
  HTML nin YaPISI
 
HTML Dokümanlarının Yapısı

HTML (HyperText Markup Language) dokümanlarında baslıkların, paragrafların, "link"lerin (bağlantı) vb.nin başlangıcını ve sonunu "tag"ler belirler. HTML elemanlarının çoğu bir başlangıç "tag"i, içeriği ve bir de bitiş "tag"iyle tanımlanır. Başlangıç tagleri < ve > ile, bitis tagleri de </ ve > işaretleri ile sınırlanır. Örneğin:

<TITLE>Bu bir sayfa başlığı</TITLE>

<H1>Bu büyük puntoda bir baslık</H1>

<P>Bu da bir paragraf.

Bir HTML dokümanında kabaca, dokümanın türü, giriş ("head" elemanları) ve içerik ("body" elemanları) bulunur:

<!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.2 Draft//EN">

<HTML>

<HEAD>

<TITLE>başlık</TITLE>

... diğer HEAD elemanları

</HEAD>

<BODY>

... içerik

</BODY>

</HTML>

Yukarıdaki tagler bir arada bir HTML dokümanın iskeletini oluşturur, ama bu öyle önemli bir iskelet değil aslında bunların hiçbirini tanımlamasanız da soyadı .html/.htm olan (serveriniza göre değişir) ve diger tagleri içeren sayfanız rahatça çalışır
 
Simdi yukarıda geçen bu tagleri açıklamak gerekirse:

<!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.2 Draft//EN">

nin anlamı, yazdığınız sayfanın HTML 3.2 standartlarını içerdiğidir. (HTML 3.2'nin son sekli yayınlandığında "Draft" yerine "Final" gelecek.) Bazı "browser"lar henüz sadece HTML 2.0 standartlarını destekliyor. Bir de Netscape'e özgü HTML tagleri var, <CENTER>, <FONT>, <FRAMESET> gibi. Hangi tag'in hangi standarda uyduğunu (HTML 2.0, HTML 3.2, Netscape) sırasıyla belirtmeye çalıştım, özellikle herkese hitap etme kaygısında olanlar için.

<HTML>

</HTML>

tagleri HTML dokümanının başlangıcını ve sonunu ifade ederler.
 
HEAD elemanı

<HEAD>

</HEAD>

tagleri de dokümanın "bas"ini oluştururlar, bir mailin bas kısmi gibi. Bu taglerin arasındaki kısımda dokümanın baslığı (title elemanı), dokümanın kendi URL’i (base elemanı), meta, isindex gibi dokümanın kendi özellikleriyle ilgili elemanlar belirtilebilir. Head tagleri hiç bulunmasa da olur, ama TITLE olmazsa olmaz bir elemandır. Diger head elemanları ancak özel durumlarda gereklidirler.
 
BODY elemanı

<BODY>

</BODY>

taglerinin arasında ise dokümanın "gövdesi" bulunur, ama BACKGROUND gibi body'nin içerebildiği özellikler atanmadığı sürece bu elemana da gerçekte gerek yoktur.
 
BODY yapısı
 
Body, dokümanın browserda gözüken kısmıdır ve aşağıdaki elemanların sıfır veya daha fazlasını içerir:
Başlıklar (heading; H1'den H6'ya) - önem sırasına göre değişen Başlıklar
Yazı biçimi elemanları - paragraflar, sıralı ve sırasız listeler, formlar, tablolar vb.
Çizgiler (horizontal rule; HR)
Yazı ve karakter stili elemanları - italik, kalın vb.
Resimler, linkler ve diger elemanlar.
 
Title olayı
 
Kullanım: <TITLE>...</TITLE>
 
HTML 2.0
 
Eveet, ise title'inizi koymakla başlamak en iyisi.. Title, Netscape ya da başka bir browser'da browser penceresinin başlığında gözükecek olan yazıdır. Yani örneğin bu sayfanınki için sunu yazdım:

<TITLE> TITLE ve diger HEAD elemanları </TITLE>

Su an Netscape'inizin (browser'inizin yani) başlık çubuğuna bakarsanız bunun sonucunu görebilirsiniz
 
Her HTML dokümanının TITLE elemanı bulunmalıdır ve bu başlık dokümanın neyi içerdiği hakkında kabaca fikir vermelidir, çünkü bu başlık dokümanın hem gösterilmekte olduğu penceredeki etiketi hem de "search engine"lerde ve bookmarklarda gözükecek olan adidir. Bu başlık, "heading"lerin aksine, dokümanın içinde görüntülenmeyecektir.
 
TITLE elemanı dokümanın "bas" (head) kısmında bulunmalıdır ve sade olmalıdır yani paragraf, kalın/italik gibi özellikler eklenmez. Bir dokümanda ancak bir TITLE olabilir.
 
Bu TITLE'in uzunluğunun bir limiti yoktur ama uzun Başlıklar yerine göre sorun yaratabilirler, bu yüzden başlıkların 64 karakterden kısa olması tavsiye edilir. Ama unutmayın ki çok kısa bir başlık da, Önsöz diyelim, konudan uzaktayken (örneğin bookmarklarin arasında) anlamsız kaçacaktır
 
Diger head elemanları
 
BASE
 
BASE elemanı, doküman yabancı ellerde okundugu durumlarda, dokümanın kendi URL'inin kaydedilmesine yarar. dokümanın içindeki Bazı URL'ler bu adrese göreceli olarak "kısmi" verilmis olabilir. Herhangi bir BASE adresi atanmamissa dokümanın BASE adresi, bulundugu adres olur.

Fon resmi: BACKGROUND
 
Kullanım: <BODY BACKGROUND="yol/resim_adi.gif" >
 
HTML 3.0
 
Hazirladiginiz sayfalarin fonuna resim koymak istiyorsaniz, <BODY> tag'inin içine BACKGROUND="yol/resim_adi.gif" özelligini eklemeniz yeterlidir. Diyelim sayfanizin bulundugu directory'nin altinda "resimler" adli dir.de duran fon.gif'i sayfanizin fonuna koymak istiyorsunuz:

<BODY BACKGROUND="resimler/fon.gif">

Resmi seçerken üstüne gelecek olan yazilarin okunmasini engellememesine dikkat edin. Yazilarin rengini de resimle yeterli kontrast saglayacak sekilde ayarlamak yardimci olacaktir.
 
Fon ve yazi renkleri: BGCOLOR, TEXT, LINK, ALINK, VLINK
 
Kullanim: <BODY BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK=...>
 
HTML 3.2
 
Sayfanizin fonunun ve yazilarinin renklerini de <BODY> tag'inin içinde tanimlayabilirsiniz. Örnegin bu sayfanin BODY tag'i, yani:

<BODY BGCOLOR="#E0E0E0" TEXT="#900090" LINK="#00A000" ALINK="#FF00FF" VLINK="#909090">

su gördügünüz renkleri tanimliyor:
Açik gri bir fon rengi (BGCOLOR)
Koyu mor metin rengi (TEXT)
Yesil baglantilar (LINK)
Pembe aktif baglantilar (ALINK; active link) - yani mouse ile baglantinin üstüne tiklandigi andaki renk
Koyu gri daha önce ziyaret edilmis baglantilar (VLINK; visited link)

Linklerin renklerine ne oldugunu görmeniz için ana sayfaya gönderen örnek bir link koyalim; büyük olasilikla o sayfaya ugrayip da buraya geldiginiz için bu link "visited link" renginde olacaktir. Henüz ugranmamis bir link için ise hmm suraya (hey, geri dönmeyi unutmayin!) gönderebiliriz... ALINK'in rengini denemek için de bu iki linkten birinin üzerinde mouse'u tiklayip basili tutmaniz yeterlidir.
 
Simdiii, "bu renkler nasil tanimlaniyor, ne garip bir ifade bu?" diye soruyorsaniz, bunlar aslinda renklerin hekzadesimal #RRGGBB degerleridir. Bu da ne demek diye sormaya devam ediyorsaniz, bilgisayarda renkler her biri 0-255 arasi degisen birer Red, Green ve Blue degeri ile tanimlanmaktadir. Yani her renk kirmizi, yesil ve mavinin bir kombinasyonundan olusmaktadir. Bunun "hexadecimal" ifadesi de 16'lik sayi sistemine çevrilmis halidir.
 
Kendi renklerinizi yaratirken asagidaki hekzadesimale çevirme ve renk ipuçlarindan da yararlanabilirsiniz...
 
Bu sekilde tanimlanan renkler sayfanin tamami için geçerlidir.
 
Bazi yazilari renklendirmek: COLOR
 
Kullanim: <FONT COLOR="#RRGGBB">
  
  BuGüN 52 ziyaretçiKişi Siteye Girdi.____ ©2008 Data WebMaster