… Yeni Nesil HTML !

Evet, bu ifadeyi kullanmak sanırım yanlış olmayacaktır. HTML5, HTML dilinin en son ve güncel sürümüdür. HTML 4’ün geliştirilmiş versiyonudur. İlk kez, 22 Ocak 2008’de duyurulmuştur. Henüz tarayıcılar tarafından tam olarak desteklenmese de birçok tarayıcı HTML5’i kısmen de olsa desteklemektedir.

HTML5, birçok yeni elementi yapısında barındırmaktadır. audio , video , canvas gibi yeni gelişmiş elementler ile HTML4 ile yapamadığınız birçok şeyi HTML5 ile yapabileceksiniz.

Özellikle video alanında getirdiği yenilik bizler için oldukça faydalı olmaktadır. Eskiden Web sayfasında video oynatabilmek için Flash kullanmak gerekirdi fakat artık buna gerek kalmadan direkt HTML içine video gömebiliyoruz. Resim ekler gibi video ekleyebiliyoruz artık ve işin en güzel tarafı da, videonun üzerinde sağ tıklayıp aynen resim kaydeder gibi videoyu bilgisayarımıza indirebiliyoruz. Kulağa hoş geliyor, öyle değil mi?

HTML5’in getirdiği bazı yenilikleri sıralamak gerekirse:

HTML5 birçok yeni elementi barındırdığı gibi, HTML4’te kullanılan bazı elementleri de kaldırmıştır. 

Aşağıda video etiketi ile HTML içinde kolayca bir video oynatıldığını görebilirsiniz. Hatta bu video üzerinde sağ tıklayıp bilgisayarınıza kaydedebilirsiniz…

HTML5 Tarayıcı Desteği

Daha önce de söylediğimiz gibi, HTML5 henüz tarayıcılar tarafından tam desteklenmemektedir. Bazı özellikleri tüm tarayıcılar desteklerken bazı özellikleri de kısmen desteklenmektedir.

Aşağıda HTML5 ile gelen temel yeniliklerin tarayıcılar tarafından desteklenip desteklenmediği tablo halinde gösterilmiştir.

HTML5 ile Gelen Yeni Elementler

HTML5’te Kaldırılan Elementler

NOT: Kaldırılan elementlerin birçoğunun kaldırılma sebebi bunların işlevlerinin zaten CSS ile yapılabiliyor olmasıdır.

HTML5 İçin DTD Tanımlaması

HTML5, XHTML yapısının kullandığı DTD tipini kullanmaz. Aksine, çok sade bir tanımlama kullanır. HTML DTD aşağıdaki gibi tanımlanır.

Şaşırdınız mı?

 Evet, hepsi bu kadar! HTML sayfalarınızın başına bu tanımlamayı eklediğiniz zaman bu sayfanın bir HTML5 sayfası olduğunu belirtmiş oluyorsunuz.

Aşağıda bir HTML5 sayfa yapısını görmektesiniz.

NOT:HTML5 büyük - küçük harf duyarlı değildir. Yani, elementlerin isimleri büyük de olsa küçük de olsa tüm tarayıcılarda sorunsuz çalışacaktır.

Aşağıdaki ifadeler arasında bir fark yoktur.

Yeni Mantıksal Elementler

HTML5 ile gelen yeni mantıksal elementler aşağıda listelenmiştir.

Bu bölümleri belirtmek için eskiden

div id=”header”

div id=”footer”

gibi CSS yapısı kullanırdık. Ama artık, bu bölümlerin kendine özgü etiketleri mevcut ve bu etiketlere CSS uygulayarak istediğiniz şekilde biçimlendirebilirsiniz.

Eski Yapı

HTML5 Yapısı

canvas Elementi

Bu element, sayfa üzerinde bir çizim tuvali oluşturur. Bunun üzerine şekiller, resimler, grafikler çizebilirsiniz. canvas elementi tek başına çizim için yeterli değildir. canvas üzerine çizim yapabilmek için Javascript kullanılır.

HTML içinde tanımladığımız canvas’ın, JavaScript ile kullanılabilmesi için canvasa bir “id” değeri veriyoruz. Bu id değeri ile Javascript’le canvas elementini görüp üzerinde çizimler yapabiliriz.

video Elementi

Bu element ile herhangi harici bir nesne kullanmadan, direkt HTML içinde video oynatabiliyoruz.

DİKKAT!

HTML5’te tüm video formatları desteklenmez. Şimdilik Theora, Vorbis, Ogg, H.264, AAC ve MP4 formatları desteklenmektedir. Eğer başka bir formatta video yayınlayacak iseniz önce bu videoyu geçerli bir formata çevirmeniz gerekir.

Şimdi basitçe bir örnek yapalım…

Hepsi bu kadar işte!

“Controls” Özelliği

Bu özellik ile video butonlarını görüntüleyebilirsiniz.

Yeni Form Elemanları

HTML5 ile birçok yeni form elemanı eklenmiştir. Bu elemanlar, bizlere oldukça kullanım kolaylığı sağlamaktadır. Fakat tekrar belirteyim ki, bu elemanların çoğu henüz tarayıcılar tarafından desteklenmemektedir.

PlaceHolder Text

Evet arkadaşlar, bu makalemde sizlere az da olsa HTML5’in getirdiği yeniliklerden bahsettim.

Faydalı olması dileğiyle…