HTML Site Düzeni

14 Şubat 2021 4543 kez okundu

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.

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<header> <!--Header başlığını oluşturduk-->
<h1>Kod Kampüsü</h1>
</header>

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

<h1>Kod Kampüsü</h1>

</header>

</body>

</html>

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.

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<ul> <!--Üst menüyü oluşturduk-->
<li><a href="https://www.kodkampusu.com">Üst Menü 1</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 2</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 3</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 4</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 5</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 6</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 7</a></li>
</ul>

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

</ul>

</body>

</html>

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.

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<nav> <!--Yan menüyü oluşturduk-->
<a href="https://www.kodkampusu.com">Menü 1</a> <br>
<a href="https://www.kodkampusu.com">Menü 2</a> <br>
<a href="https://www.kodkampusu.com">Menü 3</a> <br>
<a href="https://www.kodkampusu.com">Menü 4</a> <br>
<a href="https://www.kodkampusu.com">Menü 5</a> <br>
<a href="https://www.kodkampusu.com">Menü 6</a> <br>
<a href="https://www.kodkampusu.com">Menü 7</a> <br>
<a href="https://www.kodkampusu.com">Menü 8</a> <br>
<a href="https://www.kodkampusu.com">Menü 9</a> <br>
<a href="https://www.kodkampusu.com">Menü 10</a> <br>
</nav>

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

</nav>

</body>

</html>

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.

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<section> <!--İçeriği oluşturduk-->
<h1>Merhaba Dünya !</h1>
<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit. 
Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit 
consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet 
dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate 
tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni 
Pellentesque luctus sodales risus nec lacinia ipsum.</p>
</section>

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

<h1>Merhaba Dünya !</h1>

<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit.

Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit

consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet

dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate

tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et

ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni

Pellentesque luctus sodales risus nec lacinia ipsum.</p>

</section>

</body>

</html>

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.

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<footer> <!--Footer bölümünü oluşturduk-->
Copyright © 2021 | KodKampüsü.COM | Tüm Hakları Saklıdır.
</footer>

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

</footer>

</body>

</html>

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

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
  </head>
  <body>

<!-- ////////// Header başlığı ////////// -->
<header>
<h1>Kod Kampüsü</h1>
</header>
<!-- ////////// ////////////// ////////// -->


<!-- ///////////// Üst menü ///////////// -->
<ul>
<li><a href="https://www.kodkampusu.com">Üst Menü 1</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 2</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 3</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 4</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 5</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 6</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 7</a></li>
</ul>
<!-- ////////// ////////////// ////////// -->


<!-- ///////////// Yan menü ///////////// -->
<nav>
<a href="https://www.kodkampusu.com">Menü 1</a> <br>
<a href="https://www.kodkampusu.com">Menü 2</a> <br>
<a href="https://www.kodkampusu.com">Menü 3</a> <br>
<a href="https://www.kodkampusu.com">Menü 4</a> <br>
<a href="https://www.kodkampusu.com">Menü 5</a> <br>
<a href="https://www.kodkampusu,com">Menü 6</a> <br>
<a href="https://www.kodkampusu.com">Menü 7</a> <br>
<a href="https://www.kodkampusu.com">Menü 8</a> <br>
<a href="https://www.kodkampusu.com">Menü 9</a> <br>
<a href="https://www.kodkampusu.com">Menü 10</a> <br>
</nav>
<!-- ////////// ////////////// ////////// -->


<!-- ////////////// İçerik ////////////// -->
<section>
<h1>Merhaba Dünya !</h1>
<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit. 
Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit 
consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet 
dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate 
tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni 
Pellentesque luctus sodales risus nec lacinia ipsum.</p>
</section>
<!-- ////////// ////////////// ////////// -->


<!-- ////////////// Footer ////////////// -->
<footer>
Copyright © 2021 | KodKampüsü.COM | Tüm Hakları Saklıdır.
</footer>
<!-- ////////// ////////////// ////////// -->

  </body>
</html>

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

</head>

<body>

<h1>Kod Kampüsü</h1>

</header>

<ul>

</ul>

<nav>

</nav>

<h1>Merhaba Dünya !</h1>

<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit.

Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit

consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet

dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate

tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et

ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni

Pellentesque luctus sodales risus nec lacinia ipsum.</p>

</section>

</footer>

</body>

</html>

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

7.1 : Header CSS

header {
    background-color:SeaGreen;
    color:white;
    padding:10px;	 
    text-align:center;
}

header {

background-color:SeaGreen;

color:white;

padding:10px;

text-align:center;

}

7.2 : Üst Menü CSS

ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: MediumSeaGreen;
}

li {
    float: left;
}

li a {
    color: white;
    display: block;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}

ul {

list-style-type: none;

overflow: hidden;

padding: 0;

margin: 0;

background-color: MediumSeaGreen;

}

li {

float: left;

}

li a {

color: white;

display: block;

text-align: center;

padding: 10px 10px;

text-decoration: none;

}

7.3 : Yan Menü CSS

nav {
    background-color:LightGreen;
    width:100px;
    height:300px;
    float:left;
    display: block;
    color: white;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    line-height:30px;
}

nav {

background-color:LightGreen;

width:100px;

height:300px;

float:left;

display: block;

color: white;

text-align: center;

padding: 10px 10px;

text-decoration: none;

line-height:30px;

}

7.4 : İçerik CSS

section {
    width:490px;
    padding:25px;
    float:left;	 

}

section {

width:490px;

padding:25px;

float:left;

}

7.5 : Footer CSS

footer {
    background-color:DarkSeaGreen;
    color:white;
    text-align:center;
    clear:both;
    padding:5px;	 	 
}

footer {

background-color:DarkSeaGreen;

color:white;

text-align:center;

clear:both;

padding:5px;

}

8. Adım: Kodumuzun son hali

<html>
  <head>
<title> Kod Kampüsü | HTML Site Düzeni </title>
   <style>
header {
    background-color:SeaGreen;
    color:white;
    padding:10px;	 
    text-align:center;
}

ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: MediumSeaGreen;
}
 
li {
    float: left;
}
 
li a {
    color: white;
    display: block;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}

nav {
    background-color:LightGreen;
    width:100px;
    height:300px;
    float:left;
    display: block;
    color: white;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    line-height:30px;
}

section {
    width:490px;
    padding:25px;
    float:left;	 
 
}

footer {
    background-color:DarkSeaGreen;
    color:white;
    text-align:center;
    clear:both;
    padding:5px;	 	 
}
   <style>
  </head>
  <body>

<header>
<h1>Kod Kampüsü</h1>
</header>

<ul>
<li><a href="https://www.kodkampusu.com">Üst Menü 1</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 2</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 3</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 4</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 5</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 6</a></li>
<li><a href="https://www.kodkampusu.com">Üst Menü 7</a></li>
</ul>

<nav>
<a href="https://www.kodkampusu.com">Menü 1</a> <br>
<a href="https://www.kodkampusu.com">Menü 2</a> <br>
<a href="https://www.kodkampusu.com">Menü 3</a> <br>
<a href="https://www.kodkampusu.com">Menü 4</a> <br>
<a href="https://www.kodkampusu.com">Menü 5</a> <br>
<a href="https://www.kodkampusu.com">Menü 6</a> <br>
<a href="https://www.kodkampusu.com">Menü 7</a> <br>
<a href="https://www.kodkampusu.com">Menü 8</a> <br>
<a href="https://www.kodkampusu.com">Menü 9</a> <br>
<a href="https://www.kodkampusu.com">Menü 10</a> <br>
</nav>

<section>
<h1>Merhaba Dünya !</h1>
<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit. 
Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit 
consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet 
dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate 
tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni 
Pellentesque luctus sodales risus nec lacinia ipsum.</p>
</section>

<footer>
Copyright © 2021 | KodKampüsü.COM | Tüm Hakları Saklıdır.
</footer>

  </body>
</html>

100

101

102

103

104

105

106

<html>

<head>

<title> Kod Kampüsü | HTML Site Düzeni </title>

<style>

header {

background-color:SeaGreen;

color:white;

padding:10px;

text-align:center;

}

ul {

list-style-type: none;

overflow: hidden;

padding: 0;

margin: 0;

background-color: MediumSeaGreen;

}

li {

float: left;

}

li a {

color: white;

display: block;

text-align: center;

padding: 10px 10px;

text-decoration: none;

}

nav {

background-color:LightGreen;

width:100px;

height:300px;

float:left;

display: block;

color: white;

text-align: center;

padding: 10px 10px;

text-decoration: none;

line-height:30px;

}

section {

width:490px;

padding:25px;

float:left;

}

footer {

background-color:DarkSeaGreen;

color:white;

text-align:center;

clear:both;

padding:5px;

}

<style>

</head>

<body>

<h1>Kod Kampüsü</h1>

</header>

<ul>

</ul>

<nav>

</nav>

<h1>Merhaba Dünya !</h1>

<p>Lorem ipsum dolor sit Kod Kampüsü, consectetur HTML Site Düzeni elit.

Nulla quis enim sed justo pulvinar semper. Etiam dignissim suscipit

consequat. Praesent diam est, malesuada vel porta sed, faucibus sit amet

dolor. HTML Site Düzeni volutpat vitae lorem ac euismod. Etiam vulputate

tempus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et

ultrices cubilia curae; Suspendisse viverra lacus sapien. HTML Site Düzeni

Pellentesque luctus sodales risus nec lacinia ipsum.</p>

</section>

</footer>

</body>

</html>

Post Views: 4.543

Yorumlar (5)

alaaddin 14 Şubat 2021
Site yaparken bazı konularda zorlanıyordum, aklımdaki bazı soruların cevabı oldunuz, emeğinize sağlık.
Cevapla ↓

Oktay Ala 14 Şubat 2021
Yardımcı olabildiysem ne mutlu :)
Cevapla ↓

Ismail 20 Şubat 2021
üst menüyü oluştururken listeleme yapmamız şart mı , aside kullanırsam olur mu acaba?
Cevapla ↓

Oktay Ala 20 Şubat 2021
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.
Cevapla ↓

Selim 23 Mart 2021
açıklayıcı bir dilde anlatılmış
Cevapla ↓

HTML Site Düzeni

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

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

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

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

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

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

Yorum Yap İptal

Yorumlar (5)

Bir yanıt yazın Yanıtı iptal et

Python Break ve Continue Kullanımı

Python While Döngüsü

C# Görsel Programlama Tek Boyutlu Dizi Örneği

HTML Etiketler

Java’da Diziler (Arrays)