<!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">
<html>(Programlama dili)
<head>(Sayfa üst bilgileri bu etiket içine yazılmaktadır.)
<title>İlk Projemiz</title>(Sayfamızın başlığıdır.)
<link rel="stylesheet" type="text/css" href="kutuphane/css/stil.css" />(kütüphane klasöründe ki stil.css dosyasını sayfaya dahil eder.)
</head>
<body>(sayfamızın gövdesi.sayfada görünecek işlemler bu gövde de gerçekleştirilir.)
<div class="cerceve">(sayfa dışı oluşturacağımız çerçeve)
<div class="ust">(sayfa içerisinde üst kısmı oluşturacağımız çeçevedir.)
<div class="logo">(logo bölümünü oluşturmak için kullanılan çerçeve)
<a href="index.html">(logo nun üzerine tıklanınca gidilecek sayfa)
<img src="kutuphane/resim/logo.jpg" alt="Sitemizin logosudur..."/>(resim eklenir)
</a>
</div><!--Logo DIV kapanis-->(açıklama satırı.logo ç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">Ana Sayfa </a> </li>(listenin birinci öğesi olan anasayfayı oluşturmak için kullanılır.)
<li><a href="#">Köpekler</a></li>>(listenin ikinci öğesi olan köpekleri oluşturmak için kullanılır.)
<li><a href="#">Golden Retviever</a></li>>(listenin üçüncü öğesi olan golden retviever oluşturmak için kullanılır.)
<li><a href="#">Çin Aslanı</a></li>(listenin dördüncü öğesi olançin aslanı oluşturmak için kullanılır.)
</ul><!-- ul 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">Busra </a></li>
<li><a href="canan.html">Canan </a></li>
<li><a href="semra.html">Semra </a></li>
<li><a href="diler.html">Diler </a></li>
</div><!-- ortablok1 div kapanis-->
<div class="ortaBlok2">
</div><!-- ortaBlok2 div kapanis-->
<div class="ortaBlok3">
</div><!-- ortaBlok3 div kapanis-->
</div><!-- orta div kapanis -->
</div><!--Cerceve DIV kapanis-->
</body>
</html>
stil.css
.cerceve{width:990px; height:hidden; margin:0px auto;}
.ust{width:990px; height:120px;}
.logo{width:250px; height:120px;float:left;}
.logo img{width:250px; height:120px;}
.menu1{width:520px; height:40px; float:right;}
.menu1 ul{width:520px; height:25px; }
.menu1 ul li{float:left; margin-left:10px; list-style:none;}
.menu1 ul li a
{
display:block;
background:red;
font-size:18px;
color:e2e2e2;
font-family:'Calibri''Tahoma';
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:left; background:#c8c8c8;}
Ekran Görüntüsü
0 yorum:
Yorum Gönder