HTML Site Düzeni - Kod Kampüsü

Trang chủ » Html Css Site Kodları » HTML Site Düzeni - Kod Kampüsü

Có thể bạn quan tâm

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

Konu Başlıkları

Toggle
      • 1. Adım: Header başlığı oluşturmak
  • Kod Kampüsü
      • 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
  • Merhaba Dünya !
      • 5. Adım: Footer bölümü oluşturmak
      • 6. Adım: Bütün kodları birleştirelim ve kontrol edelim
  • Kod Kampüsü
  • Merhaba Dünya !
      • 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
  • Kod Kampüsü
  • Merhaba Dünya !

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>
123456789101112<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>

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>
123456789101112131415161718<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>

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>
123456789101112131415161718192021<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>

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>
12345678910111213141516171819<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>

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>
123456789101112<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>

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>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<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>

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

7.1 : Header CSS

header { background-color:SeaGreen; color:white; padding:10px; text-align:center; }
123456header {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; }
12345678910111213141516171819ul {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:10px10px;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; }
123456789101112nav {background-color:LightGreen;width:100px;height:300px;float:left;display:block;color:white;text-align:center;padding:10px10px;text-decoration:none;line-height:30px;}

7.4 : İçerik CSS

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

7.5 : Footer CSS

footer { background-color:DarkSeaGreen; color:white; text-align:center; clear:both; padding:5px; }
1234567footer {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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<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>
Post Views: 5.593

Từ khóa » Html Css Site Kodları