<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir=ltr lang=tr xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Projemiz</title> (Sayfanın başlığının belirtildiği bölüm)
<link rel="stylesheet" type="text/css" href="kutuphane/css/stil.css" /> (kutuphane klasöründeki stil.css dosyasını sayfaya dahil eder.)
</head>
<body> (Sayfada görünecek kodlar buraya yazılır.)
<div class="cerceve"> (Sayfa içinde en altta bulunan çerçevenin oluşturulması.)
<div class="ust">
<div class="logo"> (Logo bölümünü oluşturmak için kullanılan çerçeve)
<a href="index.html"> (Logo'ya tıklanınca hangi sayfaya gidileceği belirlenir)
<img src="kutuphane/resim/logo.jpg" alt="Sitemizin logosudur..."/> (Logo adlı resmin eklenmesi)
</a>
</div><!--Logo DIV kapanis--> (Açıklama satırı-Logo div çerçevesinin kapanışı)
<div class="menu1"> (menu1 için çerçeve oluşturma)
<ul> (Liste yapmak için kullanılır.)
<li><a href="index.html">Anasayfa</a>
</li> (listenin 1.öğesi olan "anasayfa'yı" oluşturmak için kullanılır.)
<li><a href="#">Köpekler</a></li>
<li><a href="#">Golden Retviever</a></li>
<li><a href="#">Çin Aslanı</a></li>
</ul><!--ul kapanis-->
</div><!--Menu1 DIV kapanis-->
</div><!--ust DIV kapanis-->
<div class="orta">
<div class="ortaBlok1">
<ul>
<li><a href="nuray.html">Nuray</a></li>
<li><a href="seda.html">Seda</a></li>
<li><a href="burcu.html">Burcu</a></li>
<li><a href="busra.html">Büşra</a></li>
<li><a href="canan.html">Canan</a></li>
<li><a href="vildan.html">Vildan</a></li>
<li><a href="kubra.html">Kübra</a></li>
<li><a href="mehmet.html">Mehmet</a></li>
</ul><!--ul kapanis-->
</div><!--ortaBlok1 DIV kapanis-->
<div class="ortaBlok2">
</div><!--ortaBlok2 DIV kapanis-->
<div class="ortaBlok3">
</div><!--ortaBlok3 DIV kapanis-->
</div><!--ortaDIV kapanis-->
</div><!--Cerceve DIV kapanis-->
</body>
</html>
***************************************
stil.css dosyasına yazılan kod
.cerceve{width:990px; overflow:hidden; margin:0px auto;}
.ust{width:990px; height:120px;}
.logo{width:250px; height:120px;float:left;}
.logo a img{width:250px; height:120px;}
.menu1{width:520px; height:40px; float:right;}
.menu1 ul{width:520px; height:25px;}
.menu1 ul li {float:left;margin-right:10px; list-style:none;}
.menu1 ul li a {display:block; background:#cd1821; padding:5px; font-size:18px; color:#e2e2e2; font-family:'Calibri','Tahoma',serif; text-decoration:none;}
.menu1 ul li a:hover{background:yellow; color:#333;}
.orta{width:990px; overflow:hidden; background:#f3f3f3;}
.ortaBlok1{width:145px; overflow:hidden; float:left; background:#f8f8f8;}
.ortaBlok2{width:700px; overflow:hidden; float:left; background:#e8e8e8;}
.ortaBlok3{width:145px; overflow:hidden; float:right; background:#c8c8c8;}
***************************************
Ekran Görüntüsü
0 yorum:
Yorum Gönder