HTML5 Giriş
HTML5, World Wide Web Consortium W3C (W3C Web'in standartlarını belirleyen ve geliştiren uluslararası bir topluluk.)
ile Web Hypertext Application Technology Working Group (WHATWG)
işbirliğidir.
HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür. Internet Explorer, Google Chrome, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından desteklenmektedir. HTML5, HTML dili için yeni stratejiler ve hedefler ortaya koyan ve farklı web tarayıcıları için standardizasyon sağlayan yeni nesi bir sürüm olarak karşımıza çıkmaktadır. HTML geliştikçe gelişti ve yıllar geçtikçe CSS'in yeni özellikleri ile
birlikte dördüncü sürüme kadar geldi. HTML4 her ne kadar yeterli gibi
gözükse de CSS ile yazılan fazladan kodlar hatalara sebep oluyordu ve
bunu önlemek için HTML5 geliştirildi. HMTL5 ile HTML dilinin işlevselliği, sunum ve programlama gücü artmıştır. Sadeleştirilmiş, düzeltilmiş HTML4 ve XHTML dillerinin son sürümüdür.
HTML5 ile gelen esnek yapı kod hatalarını en aza indiriyor hatta görmezden geliyordu. XHTML'deki küçük/ büyük harf duyarlılığı kalkmıştı. Bununla birlikte çok fazla kod sorunu kısmen çözüldü. CSS ile olan uyum sorunu düzeltildi ve beraberinde getirdiği yeni etiketler ile hem içerik ve görsele hem de arama motorlarına büyük kolaylıklar sağladı. HTML5 hala geliştirilme aşamasında olsa da bugün birçok web tasarımcısı artık bu yeni sürümü tercih etmektedir. Kısmen daha az kod yazma olanağı verse de HTML5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, JavaScript betik dilinden ve CSS'ten almaktadır.
HTML5 Neler Sunuyor?
- Yeni Elementler
- Yeni Özellikler (Attributes)
- Full CSS3 Desteği
- Video ve Ses
- 2D/3D Grafikler
- Yerel Depolama
- Yerel SQL Veritabanı
- Web Uygulamaları
HTML5 <!DOCTYPE> Tanımlaması: HTML dosyamızın HTML5 özelliklerinde olacağını tanımlamak için şu etiket kullanılır.
<!DOCTYPE html>
<!DOCTYPE> Nedir?
DOCTYPE'ın açılımı Document Type'dır yani Türkçe söyleyecek olursak Belge Tipi anlamına gelmektedir. Sayfa başında DOCTYPE kullanarak tarayıcıya o sayfanın hangi tipte bir belge olduğunu söylemiş oluyoruz.
<!DOCTYPE> Neden Gereklidir?
HTML'in yeni yeni yaygınlaşmaya başladığı zamanlarda belli bir standart yoktu. O yüzden tarayıcılar kendi standartlarını oluşturmaya başlamıştı. W3C kuruluşu kurulduktan sonra web dünyasına belli standartlar getirildi. DOCTYPE ile de belgemizin hangi standartlarda olduğunu tarayıcıya bildiriyoruz ki belgemizi ona göre işlesin.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Başlık</title> </head> <body> İçerik...... </body> </html>
Bir HTML5 belgesi her zaman <!DOCTYPE> etiketi ile başlar ve ardından diğer etiketler tanımlanır. HTML5 ile belge türünü ayarlamak için kullanılan <!DOCTYPE> etiketi eski sürümlerdeki tanımlama karmaşasını kaldırmış ve geriye doğru bir uyumluluk sağlamıştır.
Şimdi önceki HTML sürümlerinde kullanılan <!DOCTYPE> tanımlamalarına bakalım ve HTML5 ile nasıl kısa ve kullanışlı bir hale geldiğini görelim.
XHTML 1.0 Transitional <!DOCTYPE> Tanımlaması
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict <!DOCTYPE> Tanımlaması
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 Transitional <!DOCTYPE> Tanımlaması
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 <!DOCTYPE> Tanımlaması
<!DOCTYPE html>
Gördüğünüz gibi HTML5 öncesi <!DOCTYPE> tanımlamaları oldukça uzun. Belge içerisinde <!DOCTYPE> tanımlası yapmazsak tarayıcı sayfayı Quirks Modda çalıştıracaktır. Bir tarayıcı sayfayı Quirks Modda çalıştırır ise W3C standarlarına bağlı kalınmaz. Yani sayfa görünümü ve elemanların yerleşimi kullanılan tarayıcıya bağlı değişiklik gösterebilir.
<!DOCTYPE> tanımlası bu noktada çok önemli. Tanımlama yapılmış ise tarayıcın sayfanın Standart Modda değerlendirilmesini ve göstermesini sağlamış oluyoruz. Bu mod HTML4 bildirimin no quirks mode olarak adlandırılmıştır.
Kısaca <!DOCTYPE> etiketi ve farkını açıkladıktan sonra temel HTML5 kavramlarına devam edelim.
Character Set Bildirimi ve UTF-8
Temel örneğimizde meta etiketini head etiketleri arasında görüyorsunuz. Bu etiket sayfa hakkında tarayıcılara ve arama motorlarına bir takım bilgiler sunmaktadır. Bu etiketin charset özelliği ise sayfada kullanılan karakter kümesini tanımlamamızı sağlayan parametredir.
<meta charset="UTF-8">
Eski HTML sürümlerinde charset kullanımı yine daha zor ve uzundu, Örneğin:
HTML<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5'de artık desteklenmeyen HTML elementleri: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
Yeni Gelen Elementleri: <canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>
Bu elementlerin bir çoğunun işlevlerini az çok isimlerinden anlamışsınızdır. sonraki derslerde bu elementleri detaylı bir şekilde inceleyeceğiz.
HMTL5 Faydalı Linkler
