<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> // html kodumuzun bütün tarayıcılarda sorunsuz çalışabilmesi için eklenir.
<html>
<head>
<title>vildan</title> // web sayfasının başlığı yazılır.
<link rel ="stylesheet" type="text/css" href="kutuphane/css/style.css"/> // sayfada kullanılacak stil şablonlarının bulunduğu dosyayı belirtir.
</head>
<body>
<div class="cerceve">
<div class="ust">
<div class="logo">
<a href="index.html">
<img src="kutuphane/resim/logo.jpg" alt="sitemizin logosu"/> // sayfada resim göstermek için kullanılır.resmin kaynağı belirtilmelidir. "alt" ile de resme isim verilir.
</a>
</div><!--logo div kapanıs-->
<div class="menu1">
<ul> //listenin ana başlık tagıdır
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="#"> Çiçek Çeşitleri </a></li>
<li><a href="#"> Çiçek Fiyatları </a></li>
<li><a href="#"> Online Satış </a></li>
</ul>
</div><!--menu1 div kapanıs-->
<div class="logo1">
<a href="index.html">
<img src="kutuphane/resim/logo1.jpg" alt="sitemizin logosu"/>
</a>
</div><!--logo div kapanıs-->
</div><!-- ust div kapanıs-->
<div class="orta">
<div class="ortaBlok1">
<ul>
<li><a href="gul.html">Gül</a></li>
<li><a href="karanfil.html">Karanfil</a></li>
<li><a href="orkide.html">Orkide</a></li>
<li><a href="yasemin.html">Yasemin</a></li>
<li><a href="acelya.html">Açelya</a></li>
<li><a href="lilyum.html">Lilyum</a></li>
<li><a href="sarmasık.html">Sarmaşık</a></li>
</ul>
</div><!--ortablok1 kapanıs-->
<div class="ortaBlok2">
<p>
<br>
Çiçekçilik Nedir?
</br>
<br>
Çiçekçilik; yıllık ya da çok yıllık bitkilerin yalnız çiçek, yaprak ve gövdelerinin estetik güzelliklerinden
faydalanmak amacı ile üretilmesi sanatıdır.
Çiçek yetiştiricileri, soğuk iklimlerde normal, ılıman iklim bölgelerinde ise turfanda çiçek ya da süs bitkilerini,
cam çerçevelerle örtülü kuytu yerlerde, ya da seralarda yetiştirler.
Buralarda özellikle havanın belli bir dereceden düşük olmaması ve rutubet oranının, belli bir oranda olmasi dikkat
edilmesi gereken şartlardandır. Sıcak iklim bölgelerinde ise çiçek ya da süs bitkileri açıkta yetiştirilir.
Özel olarak yetiştirilen bu bitkiler tohum ya da soğan halinde, yetiştirilmiş olarak fide, fidan şeklinde, kökleri
toprakla dolu saksi, fıçı ve kasalar içinde piyasaya çıkarıldığı gibi, çiçek pazarlarında ve çiçekçi dükkânlarında
kesik olarak da satılırlar.
</br>
</p>
</div><!--ortablok2 kapanıs-->
<div class="ortaBlok3">
<ul>
<li><a href="dogumGunu.html">Doğum Günü</a></li>
<li><a href="acilisKutlama.html">Açılış-Kutlama</a></li>
<li><a href="gecmisOlsun.html">Geçmiş Olsun</a></li>
<li><a href="anneBaba.html">Anne-Baba</a></li>
<li><a href="sevgiAsk.html">Sevgi-Aşk</a></li>
<li><a href="törenDugun.html">Tören-Düğün</a></li>
<li><a href="diger.html">Diğer</a></li>
</ul>
</div><!--ortablok3 kapanıs-->
</div><!-- orta div kapanıs-->
<div class="alt">
<div class="menu2">
<ul>
<li><a href="hakkimizda.html"> Hakkımızda</a></li>
<li><a href="yardim.html"> Yardım</a></li>
<li><a href="odeme.html"> Ödeme</a></li>
<li><a href="iletisim.html"> İletişim</a></li>
</ul><!--ul kapanıs-->
</div><!--menu2 dıv kapanıs -->
<p>
<a href="http://vildanozgen.blogspot.com/"> vildan özgen </a>
</p>
</div><!--alt div kapanıs-->
</div><!--cerceve div kapanıs-->
</body>
</html>
css kodları
.cerceve{width:990px; overflow:hidden;} //overflow:hidden; Belirttiğimiz boyutların dışına çıkan kısmın gizlenmesini sağlar.
.ust{width:990px; height:150px; background:lightblue;padding:5px;} //Padding içerik alanı ile kenarlık arasındaki alanı ayarlar.
.logo{width:200px;height:125px;float:left;} // Float konumlandırma için kullanılır.
.logo a img{width:200px;height:125px;float:left;}
.menu1{width:600px; height:25px; position:relative; left:120px; top:30px;}
.menu1 ul{width:600px; height:25px;}
.menu1 ul li{float:left;margin-right:10px; list-style:none;} //Margin özelliği elementin etrafındaki boşlukları ayarlar.
.menu1 ul li a{display:block; background:red; font-size:15px; color:black; padding:5px;
text-decoration:none; font-family:'Tahoma',serif;} //Display özelliği çeşitli yazıları, başlıkları, menüleri, linkleri vs. alt alta, yan yana veya görünmez bir şekilde kullanmamızı sağlar.
.menu1 ul li a:hover{background:yellow;color:black;}
.logo1{width:200px;overflow:hidden;float:right;position:relative; margin: -40px 10px 0px 0px;}
.logo1 a img{display:block;width:180px; height:125px;overflow:hidden; float:right;}
.orta{width:990px;overflow:hidden; background:#f3f3f3; }
.ortaBlok1{width:145px;height:300px; float:left; background:lightblue;}
.ortaBlok2{width:700px;height:300px; float:left; background:lightgrey;}
.ortaBlok2 p br{text-align:center; font-size:15px; color:yellow; text-decoration:none;padding:5px;}
.ortaBlok3{width:145px;height:300px; float:right; background:lightblue;}
.alt{width:990px; overflow:hidden;background:lightblue; padding:6px;}
.menu2{width:250px; height:120px; float:left;}
.alt p a{color:red; font-size:20px: text-decoration:none;float:right;position: relative; top: 70px; right: 200px; left: -10px;}
.alt p a:hover{text-decoration:underline; color:purple; font-size:25px; float:right;} // Hover özelliği menünün üstüne gelindiğinde renginin,fontunun,arka plan renginin değişmesini sağlar.
Hiç yorum yok:
Yorum Gönder