HTML Layout Yapısı!

#HTML

HTML Layout Yapısı html belgelerinin bölümlerinin anlamlı ifadeler ile tasarlanmasını sağlayan bir şemadır. SEO için gerekli bir çalışmadır.

HTML Layout Yapısı!
HTML Layout Yapısı!

HTML Layout Örneği;

HTML Mizanpaj Öğeleri

Web siteleri genellikle birden çok sütunda (dergi veya gazete gibi) içerik görüntüler.

HTML, bir web sayfasının farklı bölümlerini tanımlayan birçok anlamsal öğe sunar:

<header> – Bir belge veya bölüm için bir başlık tanımlar.
<nav> – Gezinti bağlantıları için bir kapsayıcı tanımlar.
<section> – Belgedeki bir bölümü tanımlar
<article> – Bağımsız bir bağımsız makale tanımlar
<aside> – İçeriğin dışında kalan içeriği tanımlar (kenar çubuğu gibi)
<footer> – Bir belge veya bölüm için altbilgi tanımlar
<details> – Ek ayrıntıları tanımlar
<summary> – bir başlık tanımlar <details> öğesi için.

HTML Mizanpaj Teknikleri

Çok sütunlu mizanpajlar oluşturmanın beş farklı yolu vardır. Her yolun avantajları ve dezavantajları vardır:

  • HTML tabloları (önerilmez)
  • CSS float özelliği
  • CSS flexbox
  • CSS çerçevesi
  • CSS ızgarası

Hangisini Seçmeli?

HTML Tabloları

<table> öğesi, bir yerleşim aracı olarak tasarlanmadı! <table> öğesinin amacı, sekmeli verileri görüntülemektir. Bu nedenle, sayfa düzeniniz için tablo kullanmayın! Kodunuza bir karışıklık getirecekler. Birkaç ay sonra sitenizi yeniden tasarlamanın ne kadar zor olduğunu hayal edin.

İpucu: Sayfa düzeniniz için tablo kullanmayın!

CSS Altyapıları

Mizanpajınızı hızlı bir şekilde oluşturmak istiyorsanız, W3.CSS veya Bootstrap gibi bir çerçeve kullanabilirsiniz .

CSS Float

CSS float özelliğini kullanarak tüm web düzenlerini yapmak yaygındır. Şamandıranın öğrenilmesi kolaydır – şamandıraların ve net özelliklerin nasıl çalıştığını hatırlamanız yeterlidir.

Dezavantajları: Yüzen elemanlar, belge akışına bağlanır ve bu da esnekliğe zarar verebilir.

CSS Flexbox

Flexbox, CSS3’te yeni bir düzen modudur.

Flexbox kullanımı, sayfa düzeninin farklı ekran boyutlarına ve farklı görüntüleme cihazlarına uyması gerektiğinde öğelerin öngörülebilir şekilde davranmasını sağlar. 

Dezavantajları: IE10 ve önceki sürümlerde çalışmaz.

CSS Izgara Görünümü

CSS Izgara Düzeni Modülü, satırlar ve sütunlarla ızgara tabanlı bir düzen sistemi sunar;

Dezavantajları: IE’de ve Edge 15 ve önceki sürümlerinde çalışmaz.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt //