HTML Site Düzeni

HTML Site Düzeni
HTML Site Düzeni
5

HTML ile sitemizi veya belgemizi düzenlerken, CSS yardımıyla çeşitli özelleştirmeler ve zenginleştirmeler yapmaktayız. Düzeni oluştururken semantik etiketleri kullanmaktayız.
Div ile oluşturulan bölümlere birer semantik etiket tanımlayarak sitenin iskeleti tanımlanmış olur.
Mevcutta özelleştirilecek olan sayfaya; başlık, üst menü, içerik, yan menü, footer gibi bölümler ekleyerek HTML site düzeni oluşturmuş oluruz.

HTML Semantik Etiketler
 
<header> Sitenin üst bölümünü oluşturur.

<nav> Site içerisinde menü oluşturur.

<section> Site içerisinde bölüm olduğunu belirtir.

<article> Site içerisinde yazı bölümü oluşturur.

<aside> Sitenin sidebar bölümünü oluşturur.

<footer> Sitenin alt bölümünü oluşturur.
 
 
Adım adım site düzenini nasıl oluşturacağımıza ayrıntılı bir şekilde bakalım. Görmüş olduğunuz bu tasarım düzenini birlikte inceleyeceğiz.
HTML Site Düzeni

İçindekiler

1. Adım: Header başlığı oluşturmak

<header> içerisinde, <h1> etiketiyle bir başlık oluşturalım.

 

2. Adım: Üst menüyü oluşturmak

Sitemizin üst menüsünü listeler yardımıyla yapabiliriz. Sıralı – sırasız listeler fark etmeden isteğinize göre seçebilirsiniz.

 

3. Adım: Yan menüyü oluşturmak

Sitede, üst menü haricinde isterseniz sağ / sol menüler de ekleyebilirsiniz. Menüyü oluştururken <nav> etiketini kullanabiliriz.

 

4. Adım: İçerik bölümünü oluşturmak

Sitemizin veya HTML Dökümanımızın verilerinin bulunacağı, yazıların gözükeceği bölümü oluştururken <section> etiketini kullanmaktayız.

 

5. Adım: Footer bölümü oluşturmak

Footer bölümü, sitenin en alt bölümüdür. Buraya genellikle sitenin hakları gibi bilgiler girilir. İsterseniz bir menü ekleyebilir veya herhangi bir açıklama girebilirsiniz. Bu bölümü oluştururken <footer> etiketi içerisinde yazmaktayız.

 

6. Adım: Bütün kodları birleştirelim ve kontrol edelim

 

7. Adım: CSS Özelleştirmeleri yapalım

7.1 : Header CSS

 

7.2 : Üst Menü CSS

 

7.3 : Yan Menü CSS

 

7.4 : İçerik CSS

 

7.5 : Footer CSS

 

8. Adım: Kodumuzun son hali

İlginizi Çekebilir

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorumlar (5)

  1. Site yaparken bazı konularda zorlanıyordum, aklımdaki bazı soruların cevabı oldunuz, emeğinize sağlık.

  2. üst menüyü oluştururken listeleme yapmamız şart mı , aside kullanırsam olur mu acaba?

    • Div Etiketini üst menü için kullanabilirsiniz. aside etiketi, sağ ve sol sidebar oluşturmak için kullanılır. sidebar içerisinde menü ve türevleri, kategoriler gibi içerikler bulunur.

  3. açıklayıcı bir dilde anlatılmış

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir