Html ve Css ile Uygulama Örneği

Web tasarım ve programlama (Anadolu Teknik Lisesi – 11.Sınıf – Bilişim Teknolojileri Bölümü – Web Programlama Alanı) dersinde gösterilmiş olan CSS(style) modülü için genel olarak tüm gördüğümüz derslerin bir içeriği niteliği taşıyan uygulama örneğimizin şekli aşağıdaki resimde görülmektedir.

Uygulamada ulaşılması istenen amaç: Öğrencileri özellikle div mantığını anlaması ve tablo kullanmadan web sayfalarının tasarımını yapabilmesini sağlamaktır. Bunun yanı sıra CSS özellikleri örnek uygulamalarda kullanarak pekiştirmelerini sağlamaktır.

Html ve Css İle Uygulama Örneği

Uygulamamızı Adobe’ni DreamWeaver CS4 kod düzenleyicisinde yapıyoruz. Örneğimizin ilk olarak HTML kodlarını yazalım. Aşağıdaki HTML kodlarını DreamWeaver’den açtığımız html sayfasındaki body tagları arasına yazıyoruz.

<div id="discerceve">
	<div id="ust">
    	<div id="ustsol">
        >><a href="#">Anasayfa</a><br />
        >><a href="#">Hakkımızda</a><br />
        >><a href="#">Ürünler</a><br />
        >><a href="#">İletişim</a>
        </div>
        <div id="ustsag">
        <a href="#">www.karadenizboya.com</a>
        </div>
    </div>
 
    <div class="temizle"></div>
 
    <div id="alt">
    	<div id="altsol">
        	<div class="baglantilar">#BAĞLANTILAR#</div>
            <ul>
            	<li><a href="#">GOOGLE</a></li>
                <li><a href="#">E-DEVLET</a></li>
                <li><a href="#">TREN SAATLERİ</a></li>
                <li><a href="#">T.H.Y</a></li>
            </ul>
            <div id="renkler">
            	<div id="renkdis">
                	<div id="renkbas">#RENKLER#</div>
                    <div class="mor"></div>
                    <div class="mavi"></div>
                    <div class="morkod">Kod : 1111</div>
                    <div class="mavikod">Kod : 2222</div>
 
                    <div class="kahve"></div>
                    <div class="mavi"></div>
                    <div class="kahvekod">Kod : 1111</div>
                    <div class="mavikod">Kod : 2222</div>
 
                    <div class="temizle"></div>
                </div>
            </div>
        </div>
        <div id="altorta">orta</div>
        <div id="altsag">
        	<div class="baglantilar">#GÜNÜN SÖZÜ#</div>
            <div class="sagyazi">Hedefi olmayan gemiye hiçbir rüzgar yardım edemez<br />Montaigne</div>
            <div class="baglantilar">#ŞUBELERİMİZ#</div>
            <div id="subecerceve">
            	<div id="subeic">
            	  <ol>
            	    <li class="yesil">ordu           	        
            	      <ul>
            	        <li>ünye
            	          <ol>
            	            <li>saca</li>
            	            <li>yalı</li>
           	              </ol>
            	        </li>
            	        <li>fatsa</li>
           	          </ul>
           	        </li>
            	    <li class="kirmizi">samsun
            	      <ol>
            	        <li>terme
          	          </li>
          	        </ol>
            	      <ul>
            	        <ul>
            	          <li>fenk</li>
            	          <li>cay</li>
           	            </ul>
           	          </ul>
            	      <ol>
            	        <li>bafra</li>
          	        </ol>
            	    </li>
           	      </ol>
           	    </div>
          </div>
        </div>
        <div class="temizle"></div>
    </div>
</div>

Şimde uygulamamıza görsellik vermek için CSS kodlarımızı head tagları arasına yazıyoruz. HTML ve CSS kodlarımız yukarıdan aşağıya doğru bir uyum içerisindedir. HTML kodumuzda bulunan ilk satırın style kodunda en yukarıda yer almaktadır.

<style type="text/css">
body{
background-color:#09F;
}
#discerceve{
width:800px;
border:1px solid #000;
margin:0 auto;/*Cerceveyi ortalar*/
background-color:#FFF;
}
#ust{
height:100px;
}
#ustsol{
width:200px;
background-color:#F90;
height:94px;
border:1px solid #000;
margin:2px;/*Dışardan boşluk*/
float:left;/*sola hizalama*/
}
#ustsag{
width:588px;
margin:2px;
height:64px;
border:1px solid #000;
float:left;
background-color:#F9C;
text-align:center;
padding-top:30px;
font-size:36px;
}
#ustsag a{
color:#FF0;
}
.temizle{
clear:both;
}
#altsol{
width:200px;
float:left;
margin:2px;
}
#altorta{
float:left;
width:400px;
margin:2px;
border:1px solid #000;
background:url(boya.jpg);
height:380px;
}
#altsag{
float:left;
width:180px;
}
.baglantilar{
background:#666;
color:#000;
font-size:18px;
border:1px solid #000;
font-weight:bold;
}
#altsol ul {
padding:0;
margin:0;
list-style:none;
}
#altsol li{
background:#FF0;
border:1px solid #000;
margin-top:2px;
padding:4px 0px 4px 0px;
}
#renkler{
border:1px solid #000;
margin-top:2px;
}
#renkdis{
width:170px;
border:3px solid #F00;
}
#renkbas{
margin:10px;
border:1px solid #900;
}
.mor{
border:1px solid #F00;
background:#60F;
width:60px;
height:30px;
margin:10px;
float:left;
}
.mavi{
border:1px solid #F00;
background:#03F;
width:60px;
height:30px;
margin:10px;
float:left;
}
.morkod{
border:1px solid #F00;
width:60px;
height:20px;
margin:10px;
float:left;
font-size:12px;
}
.mavikod{
border:1px solid #F00;
width:60px;
height:20px;
margin:10px;
float:left;
font-size:12px;
}
.kahve{
border:1px solid #F00;
background:#600;
width:60px;
height:30px;
margin:10px;
float:left;
}
.kahvekod{
border:1px solid #F00;
width:60px;
height:20px;
margin:10px;
float:left;
font-size:12px;
}
.sagyazi{
background:#FF0;
border:1px solid #000;
margin:2px;
padding:10px 0px;
}
#subecerceve{
border:1px solid #000;
margin-top:2px;
}
#subeic{
border:3px solid #00F;
margin:3px;
}
.yesil{
color:#030;
}
.kirmizi{
color:#F00;
}
</style>

Örnek uygulamamızı görmek için tıklayınız.
Html ve Css ile yapılan uygulamamızı indirmek için tıklayınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir