HTML 4 ile sayfa oluştururken genel olarak sayfa yapısında başlık, navigasyon, içerik, menü ve alt menü gibi div’ler kullanırız. Daha sonra bu div’lere CSS’ler yazarak yerleşimlerini ve içeriğini ayarlarız. HTML 5 de bu bölümleri gruplama yapmak daha da kolaylaşmıştır. Bunun için HTML 5 içerisinde kullanılan yapısal etiketler tercih edilir. Div benzeri gruplamalar için section etiketini kullanırız. Bu etiketle beraber div elemanını kullanmaya devam edebiliriz.

Section etiketi bir belge veya uygulama da genel bir bölümü temsil eder. Bir section’ı başlık veya gruplama olarak düşünebiliriz.

section yapısı

Sayfaları bölümlere ayırmak ve bu bölümleri isimlendirmek ziyaretçilerin sayfada ulaşmak istedikleri veriye daha kolay ulaşması açısından yardımcı olacaktır. Örneğin ziyaretçi kolayca bir makaleden bir diğerine devam et benzeri linklere ihtiyaç duymadan geçebilir. Sayfa tasarımcı ise birçok sayfa oluşturma derdinden kurtulacak ve div’ler arasında boğulmayacaktır.

Örnek olarak yeni bir HTML5 sayfası oluşturalım. Dreamweaver 6.0 ile belgelerimizi oluşturalım ve aşağıdaki kodlarımıza adım adım bakalım.

Karsınıza aşağıdaki gibi sade bir ekran sizi karşılayacak.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Şimdi kodlarımızı yazalım ve ardından kodlarımızın açıklamasına geçelim.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
section#ust{background-color:#09C;}
section#sol{background-color:#909;
width:50%;
float:left;
}
section#sag{background-color:#C63;}
</style>
</head>
<body>
<div id="sayfa">
<section id="ust">
<h1>burası sayfamızın üst kısmıdır.</h1>
</section>
<section id="sol">
<p>burası sayfamızın sol tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum.</p>
</section>
<section id="sag">
<p>burası sayfamızın sağ tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum.</p>
</section>
</div>
</body>
</html>

Section elemanları gruplama da ve farklı özellikleri vermede kullanılır. Bu yüzden style özelliğimiz ile onlara biraz görünüm kazandırdık.
background-color: ile arka plan renklerini verdik.
width:50%; ile yarısının görünmesini ayarladık.
float:left; ile sağ section’ın yanına gelmesi için bu özelliği ekledik.
Şimdi dökümanınızı .html ile kaydedin ve bir tarayıcı ile açın. Aşağıdaki gibi bir ekran karşılayacaktır.

sonuç ekranı

Written by Sümeyra Akbıyık
hakkımdaki her şeyi bu blogda bulabilirsin. Haydi sende bir göz gezdirmeye ne dersin?

Leave a Comment