Html-Layout

Bu derste Html5 in bize sundugu ozellikleden bahsedecegiz,
Daha onceki orneklerde de cok azda olsa soyle ifadeler kullandik.

<div id="header">
    ...
</div>
yani dedikki bu div icinde header kodlari yer alacak,bu sebeple div icin anlamli bir isim olan header ismini (ID numarasini) verdik. ayni sekilde sayfa alt bilgileri icinde "footer" kullanmistik.

Iste bu konuda Html5 bize daha kullanisli yeni ogeler sundu. "Anlamlı Elemanlar" yani amacini kullaniciya/tarayiciya/AramaMotorlarina vs acikca ifade eden ogeler. div ve span anlamini net sekilde gostermez,fakat,table gibi,form gibi elementler gorevi hakkinda bize bilgi verir, yukardaki header ornegini simdi tekrar yazalim
<header>
    ...
</header>
Biliyoruz ki web sayfalarinda genel olarak bir duzen goze carpar, ustte header sonra linkler,icerik bolumu,footer genel olarak boyledir, tabiki linkler saga/sola/asagiya alinabilir yada icerik alani cesitli gruplara ayrilabilir.

Html - Header

header : Bir belgenin/bolumun ust kismini tanimlar.(h1-h6,hgroup,nav yada logo,resim,.. kullanilabilir)
Bir belgede 1 tane header olmak zorunda degildir.(birkac tanede olabilir)
<header>
  <h1>Ana Sayfa Header</h1>
  <img src="logo.png" alt="bizim logo">
</header>

Html - footer

footer : Bir belgedeki/bolumdeki alt bilgi ihtiyacini karsilar,
Yazar ismi,telif hakki bilgileri,iletisim bilgileri ,ihtiyaca gore bazi linkler burda yer alabilir.
yukarda biraz kapali olara verilsede bir belgede bikactane footer olabilir.
<footer>
  <p>Yazar Adi Soyadi</p>
  <p>E-mail Adresi</p>
</footer>

Html - nav

nav : Toplu kullanilan linkler icin bir kapsayici gorevi gorur
header alaninin hemen altinda/icinde kullanilan menü linkleri icin kullanimi daha yaygindir. sadece burda kullanmak zorunda degiliz tabiki.
  <nav>
    <ul>
      <li><a href="#">Eset</a></li>
      <li><a href="#">Bitdefender</a></li>
      <li><a href="#">Avira</a></li>
      <li><a href="#">Avast</a></li>
    </ul>
  </nav>

Html - section

section : Belgedeki/bolumdeki bir bolumu tanimlar.
Bir bolum genellikle bi konu üzerine odaklanmis kisimdir.
<section>
  <h1>Bu Kismin Basligi</h1>
  <p>Bu kismin aciklamasi</p>
</section>

Html - article

article : Belgedeki icerigin bagimsiz bir bolumunu temsil eder,genelde bir baslik atayarak kullanimi onerilir.
Bir forum yazisi, bir dergi veya gazete makalesi yada kullanici tarafindan gelen yorumlar icin uygundur.
Bir yayinin tarihi ve saati article ile tarif edilebilir,
Elemani tanimlarken kullandigimiz "bagimsiz" ifadesi onemli bu kisim sayfa icinde kendi kendine yetebilmelidir, ornegin yeniden kullanilabilirlik acisindan problem olusturmamalidir.
<article>
    <header>
      <h2>Responsive Design Nedir?</h2>
    </header>

    <section>
        <p>Section alani</p>
    </section>

    <footer>
    <p>
      Tarih:
      <time datetime="2019-06-17 16:00">2019-06-17</time>
      by Staff.
    </p>
  </footer>
</article>
Webde bu konuyu article arastirdim fakat bazilari boyle kullanimini oneriyor,bazilari daha farkli soyluyor eger isterseniz w3.org bu kaynaktan yada baska kaynaklardan sizde arastirabilirsiniz.

Html - aside

aside : Sayfanin ana iceriginden ayri sayilabilecek diger icerikler icin kullanilir. Yan menü linkleri,reklam icerikleri,yazar biyografisi.
<aside>
  <h3>Alt Baslik</h3>
  <p>Paragraf</p>
</aside>

Html - figure ve figcaption

figure ogesini kullanarak bir gorseli ve ona ait aciklama bilgisini bir kapsayici icinde gruplayabiliriz.
figcaption ile figure icerisinde yer alan gorsele aciklama eklenebilir.
Resim
Burda da Resim Aciklamasi Var
<figure>
  <img src="img/resim.jpg"  alt="Resim"  />
  <figcaption>Burda da Resim Aciklamasi Var</figcaption>
</figure>



Html - Main

Ismindende belli oldugu gibi belgenin özel ana icerigini belirtir.
Yukarda ozel ifadesini vurguladim cunku bu main alaninda diger sayfalarda da tekrarlanan telif hakki bilgileri,arama kutusu,gezinme baglantilari gibi ogeleri icermemelidir.
<main>
  <h1>Belge Basligi</h1>
  <p>Aciklama Paragrafi</p>

  <article>
    <h2>Alt Baslik-1</h2>
    <p>Aciklama-1</p>
  </article>

  <article>
    <h2>Alt Baslik-2</h2>
    <p>Aciklama-2</p>
  </article>

</main>



HTML5Shiv

Yeni gelen HTML5 semantik öğeleri modern tarayicilarda desteklenir.Fakat, eski tarayıcılara yeni gelen ve bilinmeyen bu ogeleri nasil ele alinacagi anlatilabilir. belgede ilgili yere su kodlari ekleyebilirsiniz.
<head>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <![endif]-->
 </head>

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>Html5 Layout</title>
    <style>
    body{padding:0px;margin:0px;}

    header,section,nav,footer,article,aside{
      border:1px solid rgba(0,0,0,.2);
      padding: 10px;
      margin: 10px;
      box-sizing: border-box !important;
    }

    article,aside{
      display: inline-block;
      vertical-align: top;
      border-color: rgba(255,0,0,.6);
    }
    article{
      width: 70%;
    }

    aside{
      width: 20%;
    }

    nav ul li,  aside ul li{
      list-style-type: none;
      display: inline-block;
      margin-right: 10px;
    }

    aside ul li{
      display: block;
    }
    </style>

</head>
<body>

  <header>
    <h2>Header Alani</h2>
  </header>

  <nav>
    <ul>
      <li><a href="#">Eset</a></li>
      <li><a href="#">Bitdefender</a></li>
      <li><a href="#">Avira</a></li>
      <li><a href="#">Avast</a></li>
    </ul>
  </nav>

  <article>
    <h1>Article Alani</h1>
    <section id="article1">
        <h2>Burasi Section-1</h2>
         <div class="icerik">
           <p>Burasi Section-1 icerik alani</p>
         </div>
    </section>

    <section id="article2">
      <h2>Burasi Section-2</h2>
       <div class="icerik">
         <p>Burasi SECTION-2 icerik alani</p>
       </div>
    </section>
  </article>

  <aside>
    <p>Aside Alani</p>
    <ul>
      <li><a href="#">Eset</a></li>
      <li><a href="#">Bitdefender</a></li>
      <li><a href="#">Avira</a></li>
      <li><a href="#">Avast</a></li>
    </ul>
  </aside>

  <footer>
     <p>Burasida Footer Alani</p>
  </footer>



</body>
</html>
Html Layout Dosyamiz Burda
Sayfa yerlesim duzeni icin CSS'in de bize sundugu guzellikler var,CSS float,Css Flexbox,CSS frameworkleri..
CSS konusunda bunlar detayli anlatilacak,ayrica ilerleyen Html derslerimizde bu konuya tekrar devam edebiliriz.
Bu derste yararlanilan kaynak:https://www.w3.org

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com