Header Alanını Kodluyoruz

March 24, 2018 Berkay Gülyaz 0 Comments

Hepinize merhaba arkadaşlar. Artık o büyük gün geldi. Uzun zamandır soruyordunuz Berkay ne zaman kodlamaya başlayacaksın diye(!), artık başlıyorum. İlk önce ufak bir tanımlamayla başlayayım. Header nedir? Header sayfanın en üstünde bulunur ve burada genellikle şirketin logosu ve kategoriler bulunur.
Bu kısa tanımlamanın ardından metin editörümüzü açıp kodlamaya geçelim. İlk önce her zaman olduğu gibi ana tagleri yazalım.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Ana tagleri yazdıktan sonra head bloğu içerisine meta taglerini ve css ile google font sitesinden çekeceğimiz font sitilini çekelim.

<head>
    <meta charset="utf-8"><!--Sayfanın Türkçe karakter olması için-->
    <title>PhotoTime</title><!--Sekmede sayfanın adının gözükmesi için-->
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"><!--Google fonts sayfasından çektiğimiz font-->
<head>

Artık css ile işlemlerimizi yapmaya başlayabiliriz. Css sayfamızı açalım ve alttaki kodları yazalım.

*{
    text-decoration: none;
}

Bu kod sayfanın tamamında bulunan linklerin altında çizgi çıkmasını engellemek içindir. * işareti tümü anlamına gelir.

.container{
	width: 1020px;
	margin: 0px auto;
	position: relative;
}

Container adında bir class oluşturduk. Container’ın olayı, standart bir genişlik oluşturuyorsunuz ve bunu sayfada kullanıyorsunuz. Kullandığımız tasarıma baktığımız zaman çoğu bölümün aynı hizada olduğunu farkedeceksiniz. İşte containerı bu yüzden kullanıyoruz.

Artık header alanımızı kodlamaya başlayalım.

HTML

<div id="header">
<div class="container">
	<ul class="left">
		<li><a href="#">HOME</a></li>
		<li><a href="#">PHOTOAPP</a></li>
	</ul>
</div><!--container-->
</div><!--header-->

Burada ufak bir kuraldan bahsetmek istiyorum. Her kod bloğu arasında sadece bir adet id olabilir. Bunun da sebebini şöyle açıklayayım. En yakınınızdaki bir okulu düşünün. O okulun bir adı vardır. İçerisinde de bir sürü sınıf şubesi vardır. O okulun adı ile aynı başka okul olamaz ama aynı şube isimleri başka okullarda olabilir.Yani id özeldir.

Css

#header{
	width: 100%;
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 40px;
	position: absolute;
        background-color:#111111;<!--Şimdilik arka planı siyah olarak ayarlıyoruz-->
}

Burada az da olsa html-css bilenlerin dikkatini bir şey çekmiştir. Height yerine padding vardim. Bunun sebebi header alanında bulunan yazıları ve logoyu ortalayabilmek.

#header .left{
	display: inline-block;
	float: left;
	width: 32%;/*Logonun bulunacağı alana da genişlik kalması için*/
	padding-top: 20px;/*Logo ile aynı hizada olabilmesi için*/
	padding-left: 140px;
}
#header .left li{
	float: left;/*Yazıların yana yana durması için*/
	display: block;
	margin-right: 75px;/* Home yazısı PhotoApp yazısını 75px sağa doğru atması için*/
}
#header .left li a{
	color: #ffffff;
	font-size: 15px;
	font-family: 'Poppins', sans-serif;/*Google Fonts sitesinden çektiğimiz font stilini tanımlıyoruz*/
}
#header .left li a:hover{
	color: #16a085;
	-webkit-transition: color 0.5s ease-out;
	-moz-transition: color 0.5s ease-out;/*Mozilla için*/
	-o-transition: color 0.5s ease-out;/*Opera için*/
	transition: color 0.5s ease-out;
}

Hover Css3 animasyonlarından bir tanesidir. Burada yazının beyaz olan rengini turkuaz rengine(bana göre turkuaz 🙂 ) çevirmek için kullandık. Transition zaten geçiş anlamına gelir. Hover’ın başka kullanım şekilleri de vardır. Yeri geldiğinde onları da göstereceğim.

NOT: Gördüğünüz gibi HTML ve Css’te comment alanları birbirinden farklıdır. Siz de yazarken buna dikkat edin aksi halde kodunuz çalışmaz.

HTML

<div id="header">
<div class="container">
	<ul class="left">
		<li><a href="#">HOME</a></li>
		<li><a href="#">PHOTOAPP</a></li>
	</ul>
	<div class="logo">
		<a href="#"><img src="assets/img/logo.png"></a><!--assets klasörünün içerisindeki img klasörünün içinde bulunan logo.png dosyası-->
	</div>
</div><!--container-->
</div><!--header-->

Logomuz da bir linkten oluşuyor. Bunun sebebi başka bir internet sayfasına gittiğinizde de logonun üzerine bastığınızda yine ana sayfada olabilmeniz içindir.(Bizim şu anda bir linkimiz olmadığı için # işaretini koyuyoruz.)

Css

#header .logo{
	display: inline-block;
	float: left;/*Logonun ortada durması için*/
}

HTML

<div class="container">
	<ul class="left">
		<li><a href="#">HOME</a></li>
		<li><a href="#">PHOTOAPP</a></li>
	</ul>
	<div class="logo">
		<a href="#"><img src="assets/img/logo.png"></a>
	</div>
	<ul class="right">
		<li><a href="#">DESIGN</a></li>
		<li><a href="#">DOWNLOAD</a></li>
	</ul>
</div><!--container-->
</div><!--header-->

Css

#header .right{
	display: inline-block;
	float: right;/*Bu kod bloğunun sağ tarafta bulunması için*/
	padding-top: 20px;
	width: 32%;
}
#header .right li{
	float: left;
	display: block;
	margin-right: 75px;
}
#header .right li a{
	color: #ffffff;
	font-size: 15px;
	font-family: 'Poppins', sans-serif;
}
#header .right li a:hover{
	color: #16a085;
	-webkit-transition: color 0.5s ease-out;
	-moz-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
}

Belki fark etmişsinizdir neredeyse yine aynı kodları yazdık.Sadece birkaç tane kod çıkardık.

Bugünlük bu kadar. Bir sonraki yazımda banner alanını kodlayacağız.Hepinize iyi çalışmalar.

Leave a Reply:

Your email address will not be published. Required fields are marked *