Uzun bir aradan sonra yine merhabalar. (Yazmayalı çok uzun zaman olmuş gerçekten) Bu makalemizde sizlerle web tasarımında son dönemlerde oldukça sık kullanılan açılır navigasyonları nasıl oluşturacağımızı anlatacağız.

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

Html dilinin şu anda kullanılan 4. versiyondan 5′e geçiş sürecini yaşadığını biliyoruz. Bu alanda W3C grubunun yaptığı ara çalışmaları da görme imkanımız oldu. Html 5.0 dili gerçekten bünyesine katılan yeni özellikler sayesinde sanıyorum yeniden gönüllerimizi fethedecek. 2003 yılının son dönemlerinde geliştirilmeye başlanan Html5.0 yapılan öngörüye göre 2010 yılının sonlarına doğru final sürümüyle karşımızda olacak. Sanıyorum bu döneme kadar yapılan ara çalışmalarla da gelişimi daha yakından görebileceğiz. Tabi yine tarayıcı uyumu konusu gündeme geliyor. Html5.0′ın final sürümü duyurulduğunda tarayıcı cephesinde ne gibi bir gelişme yaşanır bunu zaman gösterir. Ancak kişisel görüşüm daha önce yaşadığımız tarayıcı uyumsuzluğu sorunlarının bu sefer daha az olacağıdır. (Bazı kaynaklarda 2012 gibi tarihler gördüm ama umarım bu kadar uzun bir süreç olmaz)

Bu yazımızda sizlerle Html5.0 ile hayatımıza girecek olan bazı yeni etiketleri tanıtacağız. Html5.0′ın biraz daha esnek yapıya bürünerek geliştiğini görmek gerçekten heyecan verici. Dilerseniz hemen yeni etiketlerimize bir bakalım.

Header, Section, Nav, Article, Aside, Footer Etiketleri

Html5.0′ın biraz daha esnek bir yapıya büründüğünü söylemiştik. Bu esnek yapıyı yeni kullanmaya başlayacağımız Yapısal etiketlerde de görebiliyoruz.