Temel Düzey HTML

Ders 2 – HTML Yapısı Ve Yazım Kuralları

Temel HTML 5 Ders 2 - HTML Kod Yapısı Ve Yazım Kuralları

Temel HTML derslerinin ikinci bölümünde HTML kurallarını ve html’nin yapısını göreceğiz. Eğer birinci dersimize bakmadıysanız bakmanızı şiddetle tavsiye ederim çünkü temel kavramları bilmeden web tasarıma başlamak mantıksız olacaktır. Bu dersimizin amacı sizlere günümüzdeki HTML 5’in yapısını ve kurallarını öğretmektir!!!

HTML Yapısı

HTML hiyerarşik bir yapıya sahiptir bu yapıyı örneklerle daha iyi anlayacağınızdan eminim.

    
<html>
    <head>
     <title>Ders 2-HTML Yapısı Ve Yazım Kuralları</title>
    </head>
    <body>      
     <p>TeknoSelfi Web Tasarım Eğitimleri Temel HTML Yapı Ve Kuralları</p>
    </body>
</html>



Örnekte gördüğünüz, bir html dosyasında her zaman bulunan bir yapıdır bu yapıya DOM Ağacı denmektedir. geri kalan tüm html etiketleri dom ağacındaki belirli yerlere gelmektedir. Eminim sizde dom ağacındaki hiyerarşiyi fark etmişsinizdir. Eğer fark etmediyseniz aşağıdaki basite indirgenmiş dom ağacını incelediğinizde fark edeceksiniz.

   
<html> <head><title>...</title></head> <body><p>...</p></body> </html>

Gördüğünüz gibi <body> ve <head> tagları <html> tagının içinde açılıp kapatılmış. <title> (başlık etiketi) ise head içinde, <p> (paragraf etiketi) ise body içinde açılıp kapatılmış bulunmaktadır.

Hatırlatma: Bir html etiketi <etiket> şeklinde açılır sonra etiket isminin başına “/” (slash) getirilerek </etiket> şeklinde kapatılır.

<html> etiketinin içinde bulunan <head> etiketi baş anlamına gelmektedir ve bu etiketin içine yazılanlar, <title> başlık hariç ziyaretçi tarafından web tarayıcıda görülmemektedir. Aynı şekilde <html> etiketinin içinde bulunan <body> etiketi gövde anlamına gelmektedir ve buraya yazılan her şey ziyaretçi tarafından görülmektedir.

<title> başlık demektir ve tarayıcının sekmesinde görülmektedir.

HTML 5 <title> Etiketinin Tarayıcıdaki Görünümü

“title” Etiketinin Tarayıcıdaki Görünümü

HTML Yazım Kuralları

XHTML de kurallar çok katıydı fakat yeni gelen HTML sürümü yani günümüzde kullandığımız HTML5 daha esnek kurallar sunuyor buda işimizi kolaylaştırıyor.

Doğru Dokuman Tipini (DOCTYPE) Kullanma:

İnternet taryıcısının sayfanın hangi türde olduğunu anlamasını sağlar eğer tanımlama yapılmazsa tarayıcı kendi kendine dosyanın türünü bulacaktır. Bu tanımlamanın yapılması bir zorunluluktur. <!DOCTYPE html> Daima HTML Dom Ağacının başına getirilmelidir. Oluşturduğunuz web sayfasının başına konulduğunda belgenin bir html dosyası olduğunu tarayıcı anlayacak ve karşınıza yaptığınız web sayfasını sunacaktır. Önceki html sürümlerinde uzun bir dokuman tanımlaması yapılmaktaydı bu tanımlama HTML5 ile kaldırılıp yerine kısa tanımlama olan <!DOCTYPE html> getirildi ve geliştiricilere kolaylık sağlandı.

    

<!DOCTYPE html>
<html>
     <head>
         <title> Ders 2-HTML Yapısı Ve Yazım Kuralları </title>
     </head> 
     <body>         
         <p>HTML 5 Kod Yapısı Ve Kurallar</p>
     </body>
</html>

Önemli: Büyük harfle yazılan <!DOCTYPE html> ile küçük harfle yazılan <!doctype html> arasında hiçbir fark yoktur.

Etiketlerin Küçük Harfle Yazılması:

HTML 5 ögelerinin küçük harfle yazılması tarayıcı tarafından okunmasını kolaylaştır aynı zamanda biz geliştiricilere kolaylık sağlar. Etiketlerin büyük harflerle yazılması bir sorun çıkarmaz ama küçük harfle yazmanızı tavsiye ederiz.

Açılan Etiketlerin Kapatılması:

Açılan etiket mutlaka kapatılmalı eğer kapatılmazsa yazdığınız hiçbir şey doğru düzgün çalışmayacaktır. Tabi bu bütüne etiketler için geçerli değildir bu ayrıcalıklı etiketleri ilerde beraberce işleyeceğiz.

Yorum Yap