Merhaba.

2 Haftada 1 Yazılım dili sloganıyla başlattığımız Project Zeta kapsamında bugün HTML eğitimlerimizin son günü. 14 gündür HTML konuları ile haşır neşir olduk. Yarından itibaren CSS3 konularına giriş yapacağız.

Son yazımızda HTML düzenlerinden bahsetmeye çalışacağım.

Web siteleri genellikle içeriği birden çok sütunda görüntüler. HTML 5 de bu alanları oluşturmanıza yardımcı elementleri içerir.

  • <header> – Bir belgenin veya bölümün üstbilgisini tanımlar
  • <nav> – Gezinme bağlantıları için bir kapsayıcı tanımlar
  • <section> – Bir belgedeki bir bölümü tanımlar
  • <article> – Bağımsız bir bağımsız makaleyi tanımlar
  • <aside> – İçeriği, içerikten ayırır (bir kenar çubuğu gibi)
  • <altbilgi> – Bir belge veya bölüm için altbilgi tanımlar
  • <details> – Ek ayrıntıları tanımlar
  • <summary> – <details> öğesi için bir başlık oluşturmasını tanımlar

HTML Yerleşim Teknikleri

4 Farklı yerleşim tekniğinden bahsedebiliriz. Hangisini seçmemiz gerektiğine gelin bakalım.

1. HTML Tabloları

<table> elementi bir düzen aracı olarak tasarlanmamıştır. Bu elementin amacı verilerinizi tablolar halinde listelemektir. Sayfa yapılandırması için kullanmayınız. Çünkü bu şekilde yapılandırdığınız sayfalarınızın bakımı da çok zor olacaktır.

2. CSS Çerçeveleri  

Düzeni hızlı şekilde oluşturmak için CSS3 stil dosyalarından yararlarnabiliriz. Bunu önümüzdeki derslerde göreceğiz.

3. CSS Floats

Web düzenlerini CSS float özelliğini kullanarak yapmak yaygın bir işlemdir. Float’un öğrenilmesi kolaydır. 

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright &copy; W3Schools.com</footer>

</div>

</body>
</html>

4. CSS Flexbox

Flexbox, CSS3’le yeni  gelen bir düzen modudur.

Flexbox kullanımı, sayfa düzeni farklı ekran boyutları ve farklı görüntüleme cihazlarından ulaşılması gerektiğinde öğelerin öngörülebilir şekilde hareket etmesini sağlar. Dezavantajları: IE10 ve daha önceki sürümlerinde çalışmaz.

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
}

header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}

@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
  <h1>City Gallery</h1>
</header>

<nav class="nav">
<ul>
  <li><a href="#">London</a></li>
  <li><a href="#">Paris</a></li>
  <li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article class="article">
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see what happens!</strong></p>
</article>

<footer>Copyright &copy; W3Schools.com</footer>
</div>

</body>
</html>

Bugünlük bu kadardı. HTML yazılarımız yine devam ediyor olacak. Ama yarınki yazımdan itibaren CSS3 eğitimlerine başlıyoruz.


muratbilginer