Web tasarımı ve programlama dersi için css ile web sayfası tasarımı örneği yapımı

Css ile web sayfası tasarımı örneği yapımı

Css ve Html kullanarak tek sayfadan oluşan bir web sitesi yapılmıştır. Aşağıda örneğin bitmiş halini görebilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>yedi harika</title>
 <link rel="stylesheet" href="harika.css">
</head>
<body>
 <div class="anakutu">
 <div class="resimkutu">
 <img src="7hrk.jpg">
 </div>
 <div class="yataymenu">
 <ul>
 <li><a href="">Anasayfa</a></li>
 <li><a href="">Keops piramidi</a></li>
 <li><a href="">Artemis tapınağı</a></li>
 <li><a href="">Babil asma bahçeleri</a></li>
 <li><a href="">İletişim</a></li>
 </ul>
 <div class="sil"></div> 
 </div>
 <p>İnsanoğlu çağlar boyunca, uzun süre kendinden söz ettirecek, geleceğin hayran kalacağı ve hatta tarih kitaplarında yerini alabilecek eserler vermeye çalışmıştır. Bu nedenle de daha iyisini, daha güzelini yapabilme arzusu insanoğlunun her çağda içinde taşıdığı bir duygudur.</p>
 <p class="altcizgi">
 Uzun yıllardır başta tarihçiler olmak üzere bir çok yazar, araştırmacı ve sanatkarlar “Dünyanın en güzel yapıtı hangisidir ?” sorusuna cevap aramıştır. Dünyanın 7 harikası kavramı ise ilk kez M.Ö 5. yüzyılda tarihçi Heredot tarafından ortaya atılmış ancak gerçekleştirilememiştir. 300 yıl sonra yani M.Ö 2. yüzyılda Sidon’lu Antipatros “Dünyanın Yedi Harikası Üzerine” adlı eserle yedi harikayı sıralamıştır ve bu liste günümüzde de “Dünyanın Yedi Harikası” olarak kabul edilmektedir.</p>
 <div class="kutu bosluk">
 <h2>Keops Piramidi</h2>
 <img src="keops_kucuk.jpg"> 
 <p>İnsanoğlu çağlar boyunca, uzun süre kendinden söz ettirecek, geleceğin hayran kalacağı ve hatta tarih kitaplarında yerini alabilecek eserler vermeye çalışmıştır. Bu nedenle de daha iyisini, daha güzelini yapabilme arzusu insanoğlunun her çağda içinde taşıdığı bir duygudur.
</p>
</div> <div class="kutu"> <h2>Artemis Tapınağı</h2> <img src="artemis_kucuk.jpg"> <p>Lidya kralı Croseus tarafından M.Ö. 550'de tanrıça Artemis adına, yunan mimar Chersiphron tarafından tasarlanmış ve dönemin en ünlü heykeltraşlarına yaptırılmıştır. Tamamen mermerden yapılmış olan bu yapı bronz heykellerle süslenmiştir.</p> </div> <div class="sil"></div> <div class="alt"> Sitemize Hoşgeldiniz </div> </div> </body> </html>

aşağıda verilen css dosyasını html dosyasında verilen dosya ismiyle uzantısı css olarak kaydediniz.

body { background: url('arkaplan.png') repeat; }
.anakutu {
 width: 960px;
 padding: 20px 20px;
 margin:30px auto;
 border: 1px solid #444444;
 background: white; }
.resimkutu {
 margin-bottom: 10px; }
.yataymenu {
 width:960px;
 background: #4096ee; }
ul {
 list-style: none;
 margin: 0;
 padding: 0; }
ul li {
 float: left; }
ul li a {
 text-decoration: none;
 padding: 10px 7px;
 display: block;
 color:white;
 font:bold 12px Century gothic; }
ul li a:hover {
 background: white;
 color:red; }
.sil { clear: both; }
p {
 font:normal 14px Tahoma;
 text-align: justify;
 line-height: 26px; }
.altcizgi { border-bottom: 1px dotted #666666; } 
.kutu {
width:470px;
float: left;
border-bottom: 1px dotted #666666; }
.bosluk {
 margin-right: 20px; }
h2 { 
color:red;
font:bold 20px Arial;
border-bottom: 5px solid red; }
.kutu img {
 width: 150px;
 height: 150px;
 float: left;
 margin-right: 10px; } 
.alt { 
 text-align: center;
 padding: 10px 10px;
 background: #f29600;
 color:white;
 margin-top: 10px;
 font:bold 14px Tahoma; }
  • Yazı Etiketleri :
  • web sayfası tasarımı
  • css ile html sayfası yapımı
  • css + html web sayfası örneği
İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Menu