HTML Dersleri 2: HTML Etiketleri

HTML Dersleri 2: HTML Etiketleri

Merhaba,

HTML derslerimize kaldığımız yerden devam ediyoruz. Daha önce ki dersimiz olan HTML Dersleri 1: HTML Nedir ? adlı yazımda sizlere HTML hakkında detaylı ön bilgi vermiştim. Bu yazımda ise html için olmazsa olmaz dediğimiz HTML Etiketlerini göreceğiz. Hiç vakit kaybetmeden anlatmaya başlıyorum…

Daha önce ki HTML Ders Yazılarım:

  1. HTML Dersleri 1: HTML Nedir ?
  2. Temel HTML 5 Etiketleri
  3. HTML 5’de En Sık Kullanılan Meta Etiketler
  4. HTML 5’de En Sık Kullanılan Meta Etiketler #2

<!DOCTYPE html> Etiketi

Bu etiket html sayfamızın son teknoloji olan HTML 5 ile hazırlandığını kullanıcının bağlantı kurduğu sunucu ya da web tarayıcısına bildirir. Bu etiketi kullanırsanız oluşturduğunuz html dosyası son teknolojileri destekler ve son teknoloji yapılarını burada kullanabilirsiniz.

<html> </html> Etiketi

Birinci satırda <html> etiketi ile HTML sayfamıza başlıyoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi içerisinde tanımlanıp içerikleri yazılıyor. En son olarak da </html> etiketi ile HTML sayfamızı bitiriyoruz.
Yazdığımız html dosyasının başında bu etiketin tanımlanmaması şu an kullanılan web istemciler açısından bir sorun oluşturmayacaktır. Fakat sitenizi ziyaret eden ziyaretçi eski bir istemci kullanıyorsa bu etiketi kullanmamanız bir takım sorunlar oluşturabilir (sonsuz uzunlukta sayfa gibi). En iyisi siz her html dosyasına başlarken ve bitirirken bu etiketi kullanın.
Doctype ve HTML etiketlerinin kullanım örneği:
<!DOCTYPE html>
<html>
.......
.......
.......
</html>

<head> </head> Etiketi

Bu etiket HTML dosyamızın en üst kısmını belirtmemiz sağlar ve bu kısımda genelikle Meta Etiketler, Title ve  CSS dosyalarımızın komut satırları yer alır ve sayfamızın en başını oluşturduğu için kullanıcının bağlantı kurduğu web tarayıcısı ilk başta bu kısmı çözümleyip okuyacaktır. Bu yüzden bu kısımı sadece gerekli olan etiketleri ekleyin, saçma sapan gereksiz kod yazmayın.

<title> </title> Etiketi

Bu etiket <head> etiketiyle </head> etiketi arasında yazılır. <title> etiketi arasına yazdığımız yazılar çalıştırıldığında sayfa başlığı olarak eklenecektir. Aşağıda ki resimde ki gibi olacaktır.

html-title-etiketi

<meta></meta> Etiketi

Daha önce ki yazılarımda HTML 5’de en sık kullanılan meta etiketleri detaylı bir şekilde anlatmıştım. O yazılarıma aşağıda ki bağlantılarla ulaşabilirsiniz.

HTML 5’de En Sık Kullanılan Meta Etiketler

HTML 5’de En Sık Kullanılan Meta Etiketler #2

CSS (Link Rel=”stylesheet”) Etiketi

Bu etiket oluşturduğumuz html sayfasına, css dosyalarımızı dahil etmemiz salayan etiketler arasında yer almaktadır. Bu etiketin bir örneği aşağıdadır. Bu kısım biraz CSS diline girdiği için çok fazla detay vermeden yazıma devam edeceğim.

<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
<link rel="stylesheet" href="ornek.css" type="text/css" />
</head>
</html>

 

<body> </body> Etiketi

Bu etiket oluşturduğumuz html sayfasının gövdesini oluşturur. Oluşturacağımız html sayfasında yer alacak; resim,yazı,video vb birçok element bu etiket arasında yazılır. Sayfamızın içerik alanıda diyebiliriz.

En temel olmazsa olmaz dediğimiz etiketler bunlar idi. Birde ekstra olarak aşağıda ki etiketleri veriyorum, kısa açıklamalarınıda ekleyeceğim. Gerekli olmayan fakat işimize yarayacak etiketler diyebiliriz.

<!– Açıklama/yorum –> Etiketi

Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir. (İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)

<br> Etiketi

Bir alt satıra geçmek ya da bir satırlık boşluk bırakmak için kullanılan, kapanış etiketi olmayan ara etiketlerdendir.

<hr> Etiketi

Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi kapanış etiketi yoktur.

<p> </p> Etiketi

Bu etiketi parağraf yazıları için kullanılmaktadır. Her türlü metinsel ifadeleri bu etiketi kullanarak parağraf formatında html sayfanızda çalışmasını sağlayabilirsiniz.

Ve daha birçok HTML Etiketleri var ancak geri kalan HTML Etiketleri ihtiyaç durumunda internetten araştırarak bulabilirsiniz.Bir sonra ki HTML ders yazımda görüşmek dileği ile esen kalın efenim 🙂

 

Bir önceki yazım olan HTML Dersleri 1: HTML Nedir ? başlıklı yazımda html, HTML Dersleri ve HTML Nedir ? hakkında bilgiler verilmektedir.