Merhaba,

Şimdiye kadar ki yazılarda temiz bir HTML sayfası oluşturduk ve body bölümünü doldurarak artık sayfamızın içeriğini doldurmaya başlayacağız.

Body bölümü web sayfamızın görünen yüzüdür. Web sayfamızı oluşturan ve web sayfamızı ziyaret edenlerin görüntüleyeceği tüm içerik öğeleri bu bölümde yer alır. Daha önceki HTML sürümlerinde olmayan, <header> , <nav> , <section> , <article> , <aside> , <footer> gibi etiketleri kullanarak sayfa düzenimizi oluşturacağız. Bu etiketler bir işlev sağlamaktan ziyade web sayfamızın bölümlerini ayrıştırmak – sınıflandırmak için kullanabileceğimiz etiketlerdir.  Görsel de örnek bir web sayfa yapısı hazırladım. Bu örnek sayfa yapısına göre sayfamızın navigasyon (menu), logo vb. bilgileri sayfamızın üst kısmında bir arada tutan bir <header> etiketimiz ve içerisinde navigasyonu (menu) tutacak olan <nav> etiketlerimiz var. Sağ tarafa ek bilgiler yerleştirebileceğimiz bir <aside> bölümü, sol tarafta ise sayfamızın içeriğini taşıyacak bölümler yani <section> bulunmakta. <section> içerisinde aynı tip içerikleri koyduğumu düşünerek yerleştirdiğim 2 tane <article> ve sayfamızın en alt kısmında iletişim bilgileri, telif hakkı bilgileri gibi ögeleri koymak için <footer> bölümümüz mevcut. Görselin üzerine tıklayarak büyütebilirsiniz. Bir önceki yazıda hazırladığımız HTML kodlarına bu bölümleri de yerleştirelim. Ve her bir bölümün içine daha önce öğrendiğimiz <p> etiketiyle bir yazı yazalım.

<!DOCTYPE html>
<html>
   <head>

      <title>Web Sitemizin Başlığı</title>

      <meta charset="utf-8">

      <meta name="description" content="Sayfamız hakkındaki açıklama metni.">
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <meta name="author" content="Oğuz Kağan Tetik">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

   </head>
   <body>
      <header>
         <nav><p>Burası Menü</p></nav>
      </header>

      <section>
         <article><p>Bu birinci blog yazısı.</p></article>
         <article><p>Bu ikinci blog yazısı.</p></article>
      </section>

      <aside><p>Burada bir yan menü var.</p></aside>

      <footer><p>Burası da sayfamızın en alt bilgi kısmı.</p></footer>

   </body>
</html>

Bu kodları not defterine yazıp HTML olarak kaydettikten sonra web tarayıcınızda çalıştırdığınızda aşağıdaki gibi bir sonuç elde edersiniz. (Görselin üzerine tıklayarak büyütebilirsiniz.)


Beklediğiniz gibi bir sonuç olmadı değil mi? Çünkü bu etiketler yukarıda da belirttiğim gibi bölümlerimizi ayrıştırmak – sınıflandırmak için kullanılıyor. Hangi bölümün nerede nasıl durması gerektiğini ise HTML kodları değil daha sonra çok detaylı bir şekilde öğreneceğimiz stil kodları belirler. Fakat çok basit bir stil kodu eklemesiyle ilk yazıdaki görünümü sağlamanız mümkün. Kodu bahsettiğim düzeni görebilmeniz için paylaşıyorum.

<!DOCTYPE html>
<html>
   <head>

      <title>Web Sitemizin Başlığı</title>

      <meta charset="utf-8">

      <meta name="description" content="Sayfamız hakkındaki açıklama metni.">
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <meta name="author" content="Oğuz Kağan Tetik">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <style type="text/css">
        header, footer, section, article, aside {
          margin: 10px;
          background: #1f6c7e;
          color: white;
          padding: 24px 15px;
          display:block;
        }

        header, footer {
          text-align:center;
          clear: both;
        }

        section {
          float: left;
          width: 60%;
        }

        aside {
          float: right;
          width: 25%;
        }
        
        article {
          margin: 10px;
          color: white;
          padding: 24px 15px;
          background: #239dba;
        }
        
        nav {
          color: white;
          background: #239dba;
          width: 50%;
          float: right;
          margin-top: -25px;
        }
      </style>
   </head>
   <body>
   
      <header>
         <nav><p>Burası Menü</p></nav>
      </header>

      <section>
         <article><p>Bu birinci blog yazısı.</p></article>
         <article><p>Bu ikinci blog yazısı.</p></article>
      </section>

      <aside><p>Burada bir yan menü var.</p></aside>

      <footer><p>Burası da sayfamızın en alt bilgi kısmı.</p></footer>

   </body>
</html>

Kodu çalıştırdığınızda elde ettiğiniz sonuç, yukarıda paylaştığım ilk görseldeki düzene benzer olacaktır.

[codepen_embed height=”512″ theme_id=”0″ slug_hash=”xMrGKm” default_tab=”result” user=”oktetik”]See the Pen <a href=’https://codepen.io/oktetik/pen/xMrGKm/’>HTML -5 – Pen -1</a> by Oğuz Kağan Tetik (<a href=’https://codepen.io/oktetik’>@oktetik</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Sayfamızın head bölümüne eklediğim CSS kodları ile, bölümlerimizi konumlandırdım ve hatta renk gibi (arkaplan) stil özellikleri de verdim. Burdaki eklemeler HTML’in değil CSS’in konusu olduğu için burada bahsetmeyeceğim. Ancak buradan çıkarabileceğiniz sonuç HTML sayfalarını CSS desteği olmadan istediğiniz şekle sokmanız mümkün değil.

Bu yazıyı daha fazla uzatmamak için burada sonlandırıyorum. Body içerisinde kullanabileceğimiz diğer etiketleri bir sonraki yazıda göstermeye çalışacağım.