HTML 5 ve CSS 3 yavaş yavaş geliştiricilerin kullanımına giriyor. HTML 5 ve CSS3 üzerinde çalışmalar devam ediyor ama bu, yeniliklerinden faydalanamayacağımız anlamına gelmiyor. O yüzden sıfırdan bir sayfa yaparak HTML 5'in yeni numaralarına deneyeceğiz. Eğitim sonunda HTML 5'in yeni taglerini (etiket) ve kullanım alanlarını öğrenmiş olacaksınız.
Tasarım
Örnek olarak aşağıda gördüğünüz sayfanın kodlamasını yapacağız.
Bu basit tasarımda HTML 5'e başlarken kullanabileceğiniz çoğu temel yapı bulunuyor: Sayfa adı ve sloganı, bir menü, öne çıkan başlık alanı (haberler), gönderiler, harici bağlantıların olduğu bir bölüm, hakkımızda ve telif hakları yazısı...
İskeletin inşası
Öncelikle temel bir yapı ile başlıyoruz ki bu yapı html dosyamızın iskeleti olacak:
Önemli noktalar:
- Görüldüğü gibi Internet Explorer için 3 tane "conditional comment" bulunuyor. İlkinde direkt olarak Google kodundan (Tüm IE sürümleri için) alınan html5 shiv kodu bulunuyor. İkincisinde ise IE7 için geriye dönük uyumluluk sağlayacak olan IE8.js, sonuncusunda da CSS hatalarını çözecek ie.css bulunuyor.
- < body> taginde (tag) "index" 'id'si ve home 'class'ının kullanarak karmaşık web sitelerinin kodlamasını basitleştirebilirsiniz.
- Eski tarayıcılar için geriye dönük daha iyi bir uyumluluk sağlamak amacıyla basitleştirilmiş bir "charset" kullanıldı.
Bu yapı, gelecekte yapabileceğiniz tüm HTML5 projeleri için sağlam ve basit bir başlangıçtır. Bu yapı ile farklı bölümlere tagler atayabilirsiniz.
Header (Başlık)
Header, mümkün olduğu kadar basitleştirilmiş durumda. Yeni < header> taginin tanımı şu şekilde:
"Header öğesi tanıtım ve yönlendirme yardımcıları grubunu temsil eder."
Ek olarak < nav> tagini de kullanıyoruz:
Nav öğesi, sayfa içindeki başka alanlara ya da diğer sayfalara bağlanan bölümleri temsil eder. Sayfadaki tüm bağlantılar nav öğesi içinde olmak zorunda değildir; başlıca navigasyon blokları öğe içine alınmaya daha uygundur."
Nav öğesinin özellikleriyle ilgili anlaşmazlıklar bulunuyor çünkü " başlıca navigasyon blokları" tanımı pek de yardımcı olmuyor. Ancak biz bu noktada sitenin ana navigasyonunu yapılandıracağız ki bundan daha "başlıca"sı yok. Birkaç 'id' ve 'classs'dan sonra 'header' aşağıdaki gibi şekilleniyor:
Manşet Bloğu
Sıra geldi manşet bloğuna. Bu bölüm en iyi < aside> tagi ile oluşturulabilir:
"Aside öğesi, çevresindeki içerikle ilişkisi dolaylı olan, bu yüzden de sayfadan ayrı olarak kabul edilebilecek sayfa bölümünü temsil eder. Örneğin baskı tipografisinde bu bölümler çoğunlukla yan sütunlardır."
- Öncelikle bu bir makale olduğundan < aside> taginin hemen yanına < article> tagini yerleştiriyoruz.
- Buradaki örnekte iki adet birbirini takip eden başlık (Manşet ve HTML5 Devri Başlıyor) bulunuyor. Başlıklar için yeni bir öğe olan < hgroup> tagini kullanacağız. < hgroup>, art arda gelen < h#> taglerini gruplamak için oldukça kullanışlı. Sayfadaki < h#> öğelerini tek bir < h#> grubu (örneğin < h1>) olarak toplamanıza böylece sonraki < h#> öğelerini (< h2>, < h3> vb.) ayırmanıza olanak sağlıyor.
- Bloktaki son öğe ise sağdaki Programlar.com logosu. Bu kısım için de yeni bir tag olan < figure> öğesini kullanacağız. Bu tagi de sayfanın genelinde tek bir nesne gibi görüntülemek istediğimiz öğeleri toplamak için kullanılabilir. Bu tag, nesneye bir başlık ekleyebilmek için < legend> tagini de desteklemesine rağmen bazı tarayıcılarda bu özellik hatalı olup < legend> taginin dışına < fieldset> taglerini de yerleştirmeye çalışabilir. o yüzden şimdilik sadece < figure> tagini kullanacağız.
Manşet bloğu tamamlandığında aşağıdaki gibi gözükecektir:
Body (Gövde)
- Şimdi tüm içeriğin bulunacağı body bölümüne geldik. Bu blokta standart bir doküman bölümü oluşturacağız. İçeriğin tematik olarak gruplandırıldığı bu bölümde doğal olarak < section> tagini kullanacağız.
- Gönderiler için eski < ol> tagini kullanacağız çünkü sıralı bir yazı listesi yapıyoruz. Her < li> bir < article> tagi barındırmalı. < article> içerisine yazı başlığı için < header>, gönderi bilgisi için < footer> ve gönderinin içeriği için de bir < div> ekliyoruz.
- Div kullanılmasının nedeni, içeriğin bir öğe tarafından kapsanmasını gerektiren hAtom 0.1 microformatını kullanacak olmamız. İçerik bölümüne başka bir tag uygun olmadığı için içeriği < div> içine alıyoruz.
Bağlantılar
- Bağlantılar bölümü (blogroll) için < aside> ve < section> tagleri arasında kalabilirsiniz. Sonuçta siteyle ilgili linkler barındırması nedeniyle bu bölümü ana içerikten ayrı kabul edemeyeceğimiz için < section> kullanmak daha uygun olacaktır.
- Ayrıca bu bölümde stil ve gruplama adına gene < div> kullanacağız. Bağlantılar ve sosyal ağ linkleri için iki < div> kullanabiliriz.
- Bölümün geri kalanı için farklı bir durum yok, < ul> ile işinizi görebilirsiniz.
Hakkımızda ve Footer
Footer gayet basit bir bölüm. Yepyeni < footer> tagi içine hakkımızda yazısını ve telif bilgisini alacağız.
"Footer, içeriği bölümleyen en yakın atasının (< section>, < asside>, < body> vb.) alt bilgisini barındırır. Tipik olarak bir footer bölümünde yazıyı kimin yazdığı, telif bilgisi, ilgili bağlantılar ve benzeri bilgiler bulunur."
Bu aşamada sayfadaki herhangi bir içeriğinin değil tüm sayfanın 'footer'nı ayarladımız için < footer> taginin atası < body> olmak durumunda. Bu yüzden 'footer'ı < body> bölümünün içine alıyoruz..
Bu blokta en yakın atası (< article> ya da >body>) için iletişim bilgisi barındıran < address> tagini kullanacağız. Ayrıca semantik değerini artırmak için de hCard microformatından yararlanacağız. Telif Bilgisi için de basitçe < p> içine alacağız.
Sonuç
Son olarak kod parçalarımızı bir araya getirip sayfamızı tamamlıyoruz.
