- HTML etiketleri açılı parantezler (< >) içerisinde yazılır.
- Genel olarak < etiketadı > Buraya yazılan içerik sayfada görünür < /etiketadı> şeklinde bir kullanıma sahiptir.
- Yukarıdaki örnekte görüldüğü gibi HTML etiketleri normal olarak açma ve kapatma etiketleri ikilisi olarak yazılırlar. Ancak bazı etiketler tekli olarak yazılır. Bu şekilde yazılan etiketlere boş (empty) etiketler denir. <br> ve <hr> etiketleri buna örnektir.
- < etiketadı > şeklindeki açma etiketine başlangıç etiketi, < /etiketadı > etiketine, kapanış etiketi de denir.
Temel HTML etiketleri
Başlık etiketleri: Dokümanlarda yazı başlıklarını farklı boyutlarda kullanmayı tercih edebiliriz. HTML dokümanlarında 6 farklı büyüklükte yazı başlığı kullanılabilir. Bunlar <h1>, <h2>,<h3>,<h4>,<h5> ve <h6> etiketleridir. <h1> en büyük başlığı oluşturuken, <h6> ise en küçük başlığı oluşturur. Bir başlık etiketinin kullanılması, tarayıcının başlıktan önce ve başlıktan sonra bir satır aralık bırakmasını sağlar.
<!DOCTYPE html>
<html>
<head>
<title>Başlık etiketleri</title>
</head>
<body>
<h1>YAZI BAŞLIĞI</h1>
<h2>YAZI BAŞLIĞI</h2>
<h3>YAZI BAŞLIĞI</h3>
<h4>YAZI BAŞLIĞI</h4>
<h5>YAZI BAŞLIĞI</h5>
<h6>YAZI BAŞLIĞI</h6>
</body>
</html>
|
Yukarıdaki etiketleri kod editörüne yapıştırıp çalıştırıldığında sonuç aşağıdaki gibi olacaktır.
YAZI BAŞLIĞIYAZI BAŞLIĞIYAZI BAŞLIĞIYAZI BAŞLIĞIYAZI BAŞLIĞIYAZI BAŞLIĞI |
|
|
NOT: Aşağıdaki etiketleri denemek için kopyalayıp kod editörüne yapıştırın.
Paragraf etiketi: Bir metni farklı paragraflar şeklinde oluşturmak için <p> etiketini kullanmak gerekir. Her paragraf <p> açılış etiketi ile başlar, <p> kapanış etiketi ile son bulur.
Paragraf etiketi: Bir metni farklı paragraflar şeklinde oluşturmak için <p> etiketini kullanmak gerekir. Her paragraf <p> açılış etiketi ile başlar, <p> kapanış etiketi ile son bulur.
<!DOCTYPE html>
<html>
<head>
<title>Başlık etiketleri</title>
</head>
<body>
<p>Burası metnin birinci paragrafı</p>
<p>Burası metnin ikinci paragrafı</p>
<p>Burası metnin üçüncü paragrafı</p>
<p>Burası metnin dördüncü paragrafı</p>
</body>
</html>
|
Sonuç aşağıdaki gibi olacaktır. Paragraf oluşturmak için tarayıcının satır boşluğu eklediğine (alt satıra geçtiğine) dikkat edin.
Burası metnin birinci paragrafı
Burası metnin ikinci paragrafı
Burası metnin üçüncü paragrafı
Burası metnin dördüncü paragrafı
|
Break (ayırma) etiketi: Satır bırakma etiketi de denir. Bulunulan satırdan bir alt satıra geçişi sağlar. <br> etiketi şeklinde kullanılabildiği gibi <br /> şeklinde kullanımı önerilir. Bu etiketin kullanıldığı satırdan bir alt satıra geçiş sağlar. Boş (empty) etiketlerden biridir. Boş etiket, kapanış etiketi olmayan etiket demektir.
<br /> : br karatkarleri ile / (slash) arasında bir boşluk olduğunu unutmayınız. Bu ikisinin bitişik yazılışı bazı tarayıcılarda hataya neden olacaktır. Ayrıca XHTML kullanımı olan dokümanlarda <br> şekilndeki kullanım geçerli bir kullanım değildir.
Aşağıdaki örneği inceleyin. Paragraf içerisinde bir alt satıra ayırma etiketi ile nasıl geçiş yapıldığına dikkat edin.
<!DOCTYPE html>
<html>
<head>
<title>Ayırma etiketi örneği</title>
</head>
<body>
<p>Bir paragrafta <br /> alt satıra <br /> geçmek istersek <br /> break-ayırma etiketini <br /> kullanırız </p>
</body>
</html>
|
Sonuç:
Bir paragrafta
alt satıra
geçmek istersek
break-ayırma etiketini
kullanırız
|
Ortalama (center) etiketi: HTML dokümanında yer alacak her hangi bir içeriğin sayfada ortalanması için <center> etiketi kullanılır.
<!DOCTYPE html>
<html>
<head>
<title>Başlık etiketleri</title>
</head>
<body>
<p>normal paragraf</p>
<center><p>ortalanmış paragraf</p></center>
</body>
</html>
|
Sonuç:
normal paragraf
ortalanmış paragraf
|
Yatay çizgi etiketi (Horizontal Line): Bir dokümanda yatay çizgilerle bölümler oluşturmak isteyebiliriz. Bunun için <hr /> boş etiketi kullanırız. Boş etiketlerin kapanış etiketi olmadığına yukarıda değinmiştik.
<!DOCTYPE html>
<html>
<head>
<title>Başlık etiketleri</title>
</head>
<body>
<p>Burası metnin birinci paragrafı</p>
<hr />
<p>Burası metnin ikinci paragrafı</p>
</body>
</html>
|
Sonuç:
Burası metnin birinci paragrafı
Burası metnin ikinci paragrafı
|
Format koruma etiketi (preserve formatting) : HTML dokümanı içerisinde etiketleri yazarken, bazen yazmış olduğumuz etiketleri okunabilir yapmak için biçimini korumak isteyebiliriz. <pre></pre> etiketleri arasında yazdığımız etiketlerin biçimini/formatını korumuş oluruz.
<!DOCTYPE html>
<html>
<head>
<title>Başlık etiketleri</title>
</head>
<body>
<pre>
function denemeFonksiyon(metin){
alert(metin)
}
</pre
</body>
</html>
|
Sonuç:
function denemeFonksiyon(metin){
alert(metin) } |
<pre></pre> etiketleri arasındaki yazılış biçiminin(formatın) değişmediğine dikkat edin. Sizler de <pre> etiketini kaldırarak biçimin değiştiğini görebilirsiniz.
Bir sonraki dersimiz: HTML elemanlarını
Hiç yorum yok:
Yorum Gönder