Merhaba.

HTML 5 Eğitimlerimizde bu yazımda temel etiketleri ve etiket mantığını anlatmaya çalışacağım.

Daha önceki derslerimizde oluşturduğumuz index.html dosyamızı açtığımızda bizim için bir standart kodlama getirmişti.

Docytype konusunu aşağıdaki linkten okuyabilirsiniz.

Yazı Linki

Etiket Nedir?

Bir önceki derslerimizde ifade ettiğim gibi HTML etiketler yani tagler ile yönetilir.

<etiket> bu şekilde küçük büyük işaretleri arasına yazdığımız değerler bir etikettir. İstisnalar hariç bütün etiketler </etiket> şeklinde bitmek zorundadır.

İlk açılan son kapanır kuralı geçerlidir. Bunu birazdan daha net anlayacağız.

Etiketleri yazarken küçük ya da büyük harf duyarlılığı yoktur istediğiniz gibi yazabilirsiniz.

<HTML> </HTML> ile <html> </html> arasında hiç bir fark yoktur.

Bir HTML belgesi için olmazsa olmaz 3 etiket vardır.

1 <html> </html>

Bütün etikleri kapsayan etikettir. Bu aslında bir HTML kodlaması yapacağımızı bildirmemize yardımcı olur.

<html> </html> şeklindedir.

Yapılacak olan diğer tüm kodlamalar bu iki etiket arasında yapılır.

2 <head> </head>

2.1 <title> </title> Etiketi

Bu etiket arasında siteyle alakalı bilgiler girilir. Örneğin Site ismi <title> </title> etiketleri arasına girilir.

2.2 <meta/> Etiketi

<meta/> etiketi de head arasında tanımlanan bir diğer etikettir.

Meta etiketi ile ilgili biraz detay vermek gerekirse;

<meta> etiketi veri hakkında bilgiler verir.

Bu etiket HTML belgesi hakkında meta verileri sağlar. Meta verileri tarayıcıda gözükmezler.

Meta etiketleri genellikle sayfanın description(açıklama), keywords(anahtar kelimeler), author(sayfa yazarı), last modified(son değiştirilme tarihi) ve diğer meta verilerini tanımlamak için kullanılır.

Meta verileri tarayıcılar (sayfa yüklenirken nasıl görüntüleneceği), arama motorları (indexleme ve anahtar kelimeler) veya diğer web servisleri tarafından kullanılır.

Ayrıca kodlamada gördüğümüz

charset=utf-8 ne anlama geliyor sorusu aklınıza gelebilir. Site üzerinde kullanılacak karakter setinin tanımlamasıdır. utf-8 de tüm dünyanın ortak olarak kullandığı unicode karakter setini anlatır. Yani bu sayede yazmış olduğumuz Türkçe karakterler yabancı bir sayfada bile açılsa tarayıcının dosyamızı bu karakter setine göre yorumlayıp istediğimiz gibi görüntülemesini sağlar.

Head etiketleri arasında ayrıca CSS, JavaScript gibi stil ve program kodlamalarıda istenirse burada yapılabilir. Ya da başka dosyalarda yapılan bu kodlamaların tanıtılması bu alanda yapılabilir. İleriki yazılarda net bir şekilde örneklerini göreceğiz.

Ama şimdi gelin sitemizin ismini title olarak ayarlayalım.

Siz istediğiniz ismi verebilirsiniz. Ben Project Zeta yazacağım.

Gördüğünüz gibi site ismimiz istediğimiz şekilde oluştu. Bunu title etiketi ile yaptık.

3 <body> </body>

HTML in en kapsamlı etiketi olup aslında sayfa üzerinde görünecek tüm bilgilerin içerisine yazıldığı bölümdür.

Body etiketi arasına ne yazarsanız internet sayfanızda o gözükür.

Şimdi gelin body etikleri arasına bir kaç ifade yazalım.

Bunu yazıp çalıştıralım.

Daha sonrasında Enter tuşuna basıp bir alta geçip paragrafı yazmaya şöyle devam edelim.

Bu kodlamayı çalıştırdığımızda beklediğimiz gibi çalışmadı sanırım. Alt satıra geçmesini beklerken yan yana yazdı.

<br/> Etiketi

Demek ki HTML Enter tuşu gibi bir komutu algılayamıyor. Bir alt satıra geçmek için şunu yapmamız gerekecek alt satıra geçmek istediğimiz yere <br/> etiketini koyalım.

<br/> etiketi özel bir etiket olup kapanış etiketine gerek duymaz.

Bununda aslında basit bir nedeni var çünkü <br/> bir alt satıra geçme kodudur ve arasına herhangi bir ifade girilmesi gereken bir etiket değildir.

Bitiş işaretimiz olan / aynı etiketin sonunda kullanılır. HTML 5 de bunu kullanmasanız bir şey farketmez. Hatasız çalışacaktır. <br> yazmanızda kafidir.

Gelin bunu yapalım şimdi.

Şimdi çıktımıza bakalım.

İstediğimiz şekilde gerçekleşmiş oldu.

Bu dersimizi de burada sonlandırıyoruz. Sizler denemelerinize farklı ifadelerle devam edebilirsiniz.

Bir sonraki dersimizde artık etiketlerimize derinlemesine giriş yapmış olacağız. Daha zevkli bir hale gelecek. HTML eğitimleri.

Yorumlarınızı eksik etmezseniz sevinirim. Selametle.