Project Zeta – HTML 16 HTML Düzenleri


0

Merhaba.

2 Haftada 1 Yazılım dili sloganıyla başlattığımız Project Zeta kapsamında bugün HTML eğitimlerimizin son günü. 14 gündür HTML konuları ile haşır neşir olduk. Yarından itibaren CSS3 konularına giriş yapacağız.

Son yazımızda HTML düzenlerinden bahsetmeye çalışacağım.

Web siteleri genellikle içeriği birden çok sütunda görüntüler. HTML 5 de bu alanları oluşturmanıza yardımcı elementleri içerir.

  • <header> – Bir belgenin veya bölümün üstbilgisini tanımlar
  • <nav> – Gezinme bağlantıları için bir kapsayıcı tanımlar
  • <section> – Bir belgedeki bir bölümü tanımlar
  • <article> – Bağımsız bir bağımsız makaleyi tanımlar
  • <aside> – İçeriği, içerikten ayırır (bir kenar çubuğu gibi)
  • <altbilgi> – Bir belge veya bölüm için altbilgi tanımlar
  • <details> – Ek ayrıntıları tanımlar
  • <summary> – <details> öğesi için bir başlık oluşturmasını tanımlar

HTML Yerleşim Teknikleri

4 Farklı yerleşim tekniğinden bahsedebiliriz. Hangisini seçmemiz gerektiğine gelin bakalım.

1. HTML Tabloları

<table> elementi bir düzen aracı olarak tasarlanmamıştır. Bu elementin amacı verilerinizi tablolar halinde listelemektir. Sayfa yapılandırması için kullanmayınız. Çünkü bu şekilde yapılandırdığınız sayfalarınızın bakımı da çok zor olacaktır.

2. CSS Çerçeveleri  

Düzeni hızlı şekilde oluşturmak için CSS3 stil dosyalarından yararlarnabiliriz. Bunu önümüzdeki derslerde göreceğiz.

3. CSS Floats

Web düzenlerini CSS float özelliğini kullanarak yapmak yaygın bir işlemdir. Float’un öğrenilmesi kolaydır. 

4. CSS Flexbox

Flexbox, CSS3’le yeni  gelen bir düzen modudur.

Flexbox kullanımı, sayfa düzeni farklı ekran boyutları ve farklı görüntüleme cihazlarından ulaşılması gerektiğinde öğelerin öngörülebilir şekilde hareket etmesini sağlar. Dezavantajları: IE10 ve daha önceki sürümlerinde çalışmaz.

Bugünlük bu kadardı. HTML yazılarımız yine devam ediyor olacak. Ama yarınki yazımdan itibaren CSS3 eğitimlerine başlıyoruz.


Like it? Share with your friends!

0
muratbilginer

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir