1. <html> </html>
2. <head> </head>
3. <body> </body>
4. <title> </title>
5. <center> </center>
6. <hx> </hx> Başlık Etiketleri
1. <html> </html>
Html kodlarımız bu iki etiketin arasına yazılır.Örneğimizi inceleyelim.
1 <html>
2 <head>… head etiketinin içeriği ….</head>
3 <body>
4 ….
5 body etiketinin içeriği
6 ….
7 </body>
8 </html>
2.<head></head>
Sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.
<html>
<head>
<title>…..</title>
</head>
<body>
….
body etiketinin içeriği
….
</body>
</html>
Yorum alanında kullanılabilecek diğer etiketler: SCRIPT, STYLE, META, LINK, OBJECT, TITLE, BASE
3.<body></body>
Geniş içerikli bir etikettir. Bu etiketin bileşenleri aşağıda listelenmiştir:
Girilecek Kod
text=”renk” Yazı rengini değiştirmede kullanılır.
link=”renk” Sayfamızdaki linklere atanacak olan rengini belirleriz.
vlink=”renk” Ziyaret edilmiş olan bağlantıların rengini belirleriz.
alink=”renk” Sayfamızdaki aktif bağlantıların rengini belirleriz.
Background=
”resim dosyası” Eğer sayfamızın arka planına bir renk değilde bir resim eklemek istersek.
Topmargin=”deger” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.
leftmargin=”deger” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.
rightmargin=”deger” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.
Onload=”betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
Onunload=”betik” Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.
Yukarıda ki tabloda belirtilen renk değerleri Html içinde kullanılan renk kodları ile temsil edilir. Bu renk kodları RGB(Red Green Blue) dediğimiz Kırmızı Yeşil Mavi renklerinin karışımından oluşur. Değerler iki basamaklı ve hexadesimaldir. Her bir renk 00 ile ff arasında değer alır. Hexadesimal değerleri kullanmak istersek # karakterini kodun önüne koymamız lazım.
Örnek verecek olursak:
<body text=”#000000” bgcolor=”#ffffff” link =”#50fa66” vlink=”aefcce” alink=”#000000”>
Renk kodlarını kullanabileceğimiz gibi direkt olarak renk isimlerini de kullanabiliriz:
Black, maroon, gren, navy, purple, teal, oliver, gray , silver, red, lime, blue, magenta, aqua, yellow, white
4.<title></title>
Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.
<head>
<title>İlk HTML denemem</title>
</head>
Gibi bir kod parçası istemcimizin başlık çubuğunda aşağıdaki gibi bir görünüm oluşturacaktır. Bu etiket ile body etiketinde olduğu gibi renk seçenekleri kullanılamaz.
5.<center></center>
Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar.
<center>Ortalanacak içerik</center>
Burası center etiketinin yorum aralığının dışında
Normal şartlarda HTML sola dayalı olarak çıktı verecektir. Ama yukarıdaki gibi bir kod örneğinin çıktısı aşağıdaki gibi olacaktır.
6. <hx> </hx>
Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.
Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align=”center”>Bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır.
<h1 align=”center” style=”color:black;”>Bu başlıklar gittikçe küçülecek!!!</h1>
<h2 align=”center” style=”color:blue;”>Bu başlıklar gittikçe küçülecek!!!</h2>
<h3 align=”center” style=”color:navy;”>Bu başlıklar gittikçe küçülecek!!!</h3>
<h4 align=”center” style=”color:green;”>Bu başlıklar gittikçe küçülecek!!!</h4>
<h5 align=”center” style=”color:maroon;”>Bu başlıklar gittikçe küçülecek!!!</h5>
<h6 align=”center” style=”color:purple;”>Bu başlıklar gittikçe küçülecek!!!</h6>
Yukarıdaki Html kodunun çıktısı: