Tanımlanmış DOCTYPE ile Tanımlanmamış DOCTYPE Arasındaki Farklar

2.9/5

0 yorum

Hakan Taşan tarih

19 Haziran 2015

DOCTYPE'ın ne olduğunu ve DOCTYPE tanımlamanın neden önemli olduğunu başka bir makalede anlatmıştım. Eğer yazdığımız kodun her tarayıcıda aynı şekilde görünmesini istiyorsak standardı sağlamalıyız. Bunu DOCTYPE kullanarak yapacağız. Şimdi ise bir örnekle DOCTYPE'ı tanımlanmış bir sayfayla DOCTYPE'ı tanımlanmamış bir sayfayı çalıştırıp aradaki farka bakacağız.

Aşağıda soldaki resimde DOCTYPE tanımlanmadan oluşturulan bir div var. Bu div'in height özelliği 100% olarak ayarlı. Kodları çalıştırdığımızda div bütün sayfayı kaplıyor. Ancak biz böyle istemiyoruz. Sadece div etiketinin height özelliğinin 100% olarak çalışmasını istiyoruz. Sağdaki resimde yani DOCTYPE tanımlanarak oluşturulmuş div tam da istediğimiz şekildir. Böylelikle div etiketi kendi boyutuna göre sayfada yer kaplıyor. Görüldüğü üzere tarayıcılara kodlarımızı doğru bir şekilde okutmak için belli bir standarda ihtiyaç vardır ve bu da DOCTYPE'dır.

DOCTYPE Tanımsız Resim DOCTYPE Tanımlı Resim

DOCTYPE Tanımsız Kodlar

<html>
<head>
    <style>
    div
    {
        height:100%;
        width:200px;
        background:orange;
        border:1px solid black
    }
    </style>
</head>
<body>
    <div>Bütün Sayfayı Dikine Kaplar</div>
</body>
</html>

DOCTYPE Tanımlı Kodlar

<!DOCTYPE html>
<html>
<head>
    <style>
    div
    {
        height:100%;
        width:200px;
        background:orange;
        border:1px solid black
    }
    </style>
</head>
<body>
    <div>Sadece Yazı Kadarını Dikine Kaplar</div>
</body>
</html>