bu eğitim videosunda html ve css ile html5 etiketleri kullanarak bir blog web sitesinin genel iskelet (taslak) kodlarının oluşturulması anlatılmıştır.

kodlama editörü olarak sublimetext, tarayıcı olarak opera kullanılmıştır.

video ile ilgili sorularınızı alttan yorum olarak sorabilirsiniz.

Videoda bir blog sitesinde olması gereken bölümleri tek tek oluşturuyoruz. Kısaca özetleyecek olursak,

  • header : sitenin üst bölümü, logo ve site adı burada durur.
  • nav : ana menü bölümü.
  • section : yazıların listelendiği içerik bölümü.
  • aside : kategoriler, son yazılar gibi bilgilerin olduğu yan menü (sidebar).
  • footer : sitenin alt bölümü.

Eskiden bu bölümlerin hepsini div ile yapıyorduk. html5 ile birlikte her bölümün kendine ait bir etiketi oldu. Bu etiketler sayfanın görünüşünü değiştirmez ama kodu okuyan birine de arama motorlarına da sayfanın hangi kısmının ne olduğunu anlatır.

Bölümleri html ile oluşturduktan sonra css ile her birine genişlik, yükseklik ve arka plan rengi veriyoruz. İçerik bölümü ile yan menüyü float ile yan yana getiriyor, sonra clear:both ile footer'ın bu iki kutunun altından başlamasını sağlıyoruz. Bunu yapmazsak footer yukarı kayıp içeriğin arkasına giriyor.

Videoda yazdığımız html ve css kodlarının tamamını açıklamaları ile birlikte CSS kodu ile site iskeleti oluşturma yazımda paylaştım. Videoyu izlerken o yazıyı da açık tutarsanız kodları kopyalayıp kendiniz de deneyebilirsiniz.

css kodlarının nereye ve nasıl yazıldığını bilmiyorsanız önce CSS Nedir? ve Harici CSS dosyası oluşturma yazılarıma göz atmanızı tavsiye ederim.