HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

Önceki dersimizde <heading>, <hgroup>, <i>, <mark>, <menu>, <meter> HTML5 temel etiketlerini işlemiştik. Temel etiketler HTML5 için önemlidir çünkü HTML5’in varolmasını sağlayan ana unsurlardır o yüzden örneklerle ve açıklamalarla gitmeye devam edeceğiz.

<noscript> … </noscript> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<noscript> Etiketi, script’i desteklemeyen tarayıcılar için, kullanıcıyı sayfanın o bölümünde bir script olduğunu ama çalışmadığını söylemek ve uyarmak için kullanılır. Normalde günümüzde script desteklemeyen tarayıcı yoktur ama kullanıcılar bir şekilde ayarlar ya da eklentilerle scriptleri etkisiz hale getirmiş olabilirler. Bundan dolayı da bu etiketi kullanabiliriz.

Kullanımı

<script type=”text/javascript”>

document.write(“burası bir javascipt çıktısıdır”)

</script>

<noscript>Tarayıcınızdan yada eklentilerinizden kaynaklı bir sorundan dolayı sayfanızda scriptler çalışmamaktadır. </noscript>

<object> … </object> HTML5 Temel Etiketi Nedir? Nası Kullanılır?

Web sayfalarımıza müzik, video, java nesneleri, pdf dokümanları gibi dosyaları ekleyip çalıştırmanızı sağlar. <object> etiketi ile sayfalarımıza resim ekleyebilsek te bunun için zaten mevcut olan bir img etiketine sahibiz ve doğru kullanımı da o şekilde olacaktır.

Kullanımı:

<object data=”htmletiketleri.swf” />

Destekleyen Tarayıcılar:

İe9 üstü ve diğer tüm tarayıcılar desteklemektedir.

Aldığı Özellikler:

HTML standart özelliklerinin yanı sıra bazı ek özelliklerde almaktadır: class, dir, id, lang, style, tabindex, title, data, form, height, name, type, usemap, width

<progress> … </progress> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

 Bu etiket bir görevin tamamlanma yüzdesini gösterir. Örneğin sayfalar açılırken yükleniyor ya da loader ekranı çıkar işte bu noktada progress kullanılabilir. Bu etiket bir göstergeyi göstermek için kullanılmamalıdır, onun için <meter> etiketi kullanılmalıdır.

Kullanımı:

<h2>Görev İlerlemesi</h2>

<p>İlerleme Durumu: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>

<script type="text/javascript">

    var i = 0;

    var progressBar = document.getElementById("bar");

    function countNumbers(){

        if(i < 100){

            i = i + 1;

            progressBar.value = i;

            // İlerleme etiketini desteklemeyen tarayıcılar için

            progressBar.getElementsByTagName("span")[0].textContent = i;

        }

        // Bu betiği tekrar çalıştırmadan önce bir süre bekleyin

        setTimeout("countNumbers()", 500);

    }

    countNumbers();

</script>

Destekleyen Tarayıcılar:

İe9 üstü ve diğer tüm tarayıcılar desteklemektedir.

Aldığı Özellikler:

HTML standart özelliklerinin yanı sıra bazı ek özelliklerde almaktadır: class, dir, id, lang, style, tabindex, title, max, value

_… HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<sub> Etiketi içerisine yazılan metin alt simge ifadesi olarak kullanılmaktadır.

Kullanımı:

<p>  C<sub>2</sub>HCI<sub>2</sub>O<sub>2</sub> </p>

Destekleyen Tarayıcılar:

İe6 üstü ve diğer tüm tarayıcılar desteklemektedir.

Aldığı Özellikler:

HTML standart özelliklerinin yanı sıra bazı ek özelliklerde almaktadır: class, dir, id, lang, style, tabindex, title

^… HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<sup> Etiketi <sub> Etiketinin tersi olarak aralığına aldığı metni üst simge olarak tanımlar.

Kullanımı:

2<sup>4</sup> x 4<sup>2</sup> = ?

Destekleyen Tarayıcılar:

İe6 üstü ve diğer tüm tarayıcılar desteklemektedir.

Aldığı Özellikler:

HTML standart özelliklerinin yanı sıra bazı ek özelliklerde almaktadır: class, dir, id, lang, style, tabindex, title

<time> … <time> HTML5 Temel Etiketi Nedir? Nasıl Kullanılır?

<time> Etiketi aralığına yazılacak metnin zaman bildirdiğini ifade etmek için kullanılır.

Kullanımı:

<p>

Bu sabah okula saat: <time>09:30</time>da gideceğim

</p>

Diğer bir kullanımı da şu şekildedir.

<p>

Benim doğum <time datetime=”1980-07-01”>Tarihimdir</time>

</p>

Destekleyen Tarayıcılar:

İe6 üstü ve diğer tüm tarayıcılar desteklemektedir.

Aldığı Özellikler:

Aldığı tek özellik datetime özelliğidir.