header ve footer etiketleri de html5 ile gelen yeni yapısal etiketlerdendir.
header sayfanın başlık kısmının tanımlandığı yani başlık kısmında olması gereken ögelerin gruplandığı bölümdür diyebiliriz.

Sadece başlığı yazacaksak h1 ile h6 arasındaki etiketler kullanılabilir. Header içerisinde örneğin sayfanın banner’ı, başlığı, logosu gibi bilgilerde yer alır.

Bir sayfada birden fazla header da kullanılabilir. Özellikle siteye ait içindekiler tablosu oluşturulurken header işimize yarayabilir. header ayrıca section, article ve aside etiketleri içinde kullanılabilir. section ile sayfayı bölümledikten sonra istersek bu bölümü başlık kısmıyla da ayırabiliriz.

footer da header’a benzer bir yapıda geliştirilmiştir. Sayfanın ya da bölümlendirmenin en altında kullanılacak olan elemanları gruplamak için kullanılır.

Şimdi temiz bir html5 projesini Dreamweaver’da açalım. Body kısmının en üstüne header etiketimizi body kısmının en altına da footer etiketimizi yazmaya başlayalım. Ardından bu kısımlara css’ler verelim.

Aşağıdaki kodumuzu inceleyebilirsiniz.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header {background-color:#C09;}
header h1{color:#00C; float:right;}
div#sayfa{width:100%; height:250px; background:#C66;}
footer{background-color:#C9F; height:90px; clear:both;}
</style>
</head>
<body>
<header>
<img src="ikon.jpg" width="120px" height="120px"/>
<h1>burası sayfamızın başlık logo kısmının bulunduğu yerdir.</h1>
</header>
<div id="sayfa">
<p>merhaba ben sayfanın tam orta kısmıyım............</p>
</div>
<footer>
<p>Copyright 2015 Sümeyra Akbıyık | Tüm haklar saklıdır.</p>
</footer>
</body>
</html>

Çıktı

Bu koda biraz daha yakından bakacak olursak logomuzun boyutunu ayarladık. Burada dikkat edilmesi gereken nokta ise resim ve html dosyanızın aynı dizin içinde bulunduğunu söyleyelim. Html dosyaya resim eklemek için buraya tıklayınız.

Logomuzun hemen yanına sayfamızın adını yazmak istediğimiz için h1 etiketine css ile float:left özelliği kazandırdık. Böylece logomuzun hemen yanına sayfamızın adını yazdık. Konumuz header ve footer’ı anlatmak olduğu için body kısmını çok sade şekilde şekillendirdik.

Ardından footer kısmımız için css kodlarımızı yazdık. Burada yeni öğrendiğiniz terim clear terimi olmalı. clear:both kodu ile önceki yazılan float değerlerinden etkilenmemesi için kendine ait bir alan oluşturduk. Yoksa ki footer kısmımızı da farklı şekilde görebilirsiniz.

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

    1 Yorum

  1. duygu Aralık 8, 2018 at 1:08 pm Cevapla

    elinize sağlık güzel bir blog, güzel bir paylaşım.

Leave a Comment