Desain Web dengan CSS (Tugas Web Desain)

Just another WordPress.com site

Desain Web dengan CSS (Tugas Web Desain)

March 1, 2011

Desain web merupakan bagian terpenting dari sebuah halaman website. Dalam desain web yang baik, unsur estetika yang harus diperhatikan adalah: warna, tata letak, dan bentuk. Ketiga unsur tesebut dapat diatur dengan menggunakan CSS.

Berikut ini adalah contoh desian web yang menggunakan CSS untuk mengatur halaman web:

Pada desain tersebut dihasilkan 4 errors dan 94 warings,hal ini disebabkan desain tersebut menggunakan HTML 5,sedangakn validator yang dipakai pada Mozilla firefox belum mengenal elemen-elemen baru pada HTML 5.

Karena memanfaatkan fungsi link, maka minimal ada 2 program yang dibuat agar halaman web tersebut dapat dijalankan. Coding yang pertama dikhususkan untuk elemen CSS. Codingnya adalah sebagai berikut:

wrapper,tilte,header,event,font1,font2,font3,logo,action,search,formsearch,content,bg1,bg2,bg3,artikel,section,footer,foot{
display:block;
}

wrapper{
height:780px;
width:1150px;
border:1px solid #9900CC;
}

#font1{
font-family:Century Gothic;
font-style:bold;
color:#3300FF;
font-size:16px;}

#font2{
font-family:Century Gothic;
font-style:bold;
color:#3300FF;
font-size:12px;}

#font3{
font-family:Broadway BT;
color:#FFFF00;
font-size:25px;}

header{
height:130px;
width:1150px;
background-color:#00CC99;
}

#judul{
margin-top: 15px;
float:left;
height:100px;
width:1150px;
background-color:#FF66CC;
}

#logo{
margin-left:10px;
margin-top:10px;
float:left;
height:80px;
width:100px;
background-image:url(logooke.jpg);
}

#title{
margin-left:100px;
margin-top:10px;
float:left;
height:25px;
width:400px;

}

#action{
margin-left:20px;
margin-top:5px;
float:right;
height:10px;
width:300px;
}

#search{
margin-left:35px;
margin-top:10px;
float:right;
height:10px;
width:260px;
}

#formsearch{
margin-right:50px;
margin-top:5px;
float:right;
height:20px;
width:150px;
background-color:white;
}

section{
height:600px;
width:1150px;
background-color:#FFCCFF;
}

footer{
height:50px;
close:both;
width:1150px;
background-color:#00CC99;
}

#content{
float:left;
height:600px;
width:200px;
background-color:#00CC99;
}

#home{
float:left;
height:30px;
width:200px;
background-color:#FF66CC;
border:1px solid white;
}

#bg1{
float:left;
height:125px;
width:250px;
background-image:url(by1.jpg);
}

#bg2{
float:left;
height:125px;
width:380px;
background-image:url(by2.jpg);
}

#bg3{
float:left;
height:125px;
width:320px;
background-image:url(by3.jpg);
}

#artikel{
margin-top:40px;
margin-left:40px;
float:left;
height:200px;
width:475px;
font-family:Broadway BT;
color:#00CC99;
font-size:12px;
}

#event{
margin-top:40px;
margin-right:20px;
float:right;
height:200px;
width:300px;
font-family:Broadway BT;
color:#00CC99;
font-size:12px;
border:1px solid #00CC99;
}

#foot{
float:left;
height:40px;
width:1150px;
background-color:#FF66CC;
font-family:Century Gothic;
color:#FFFF00;
font-size:14px;
}

SIMPAN CODING DIATAS DENGAN nama ‘ tugas-rumah.css”.

Selanjutnya kita akan mendesain halaman html yang di link-kan dengan desain css yang barusaja dibuat. Untuk mendesian halaman web, ketikkan program sebagai berikut dan SIMPAN DENGAN NAMA “tugas-rumah.html”. Jika semua program telah selesai dibuat, maka insyaAllah hasilnya sama dengan gambar yang sudah ditampilkan diatas. Semoga bermanfaat. Wassalam

<!DOCTYPE HTML>
<html lang=”en”>

<head>
<title>TUGAS RUMAH</title>
<link rel=”stylesheet” href=”tugas-rumah.css” type=text/css />
</head>

</div>

</div>
</header>

<div id=”content”>
<div id=”home” align=”center”><span id=”font1″> Home
</div>
<div id=”home” align=”center”><span id=”font1″> News & Media
</div>
<div id=”home” align=”center”><span id=”font1″> Tutorials
</div>
<div id=”home” align=”center”><span id=”font1″> Tips & Trik
</div>
<div id=”home” align=”center”><span id=”font1″> Downloads
</div>
</div>
<div id=”bg1″>
</div>
<div id=”bg2″>
</div>
<div id=”bg3″>
</div>
<div id=”artikel”>LOMBA DESAIN WEB
<p>23 Februari 2010 [07.00]</p>
Lorem ipsum dolor sit amet, constrectur adipicing
<br>elit, sed do euisem tempor incididunt ut labore et</br>
<br>dolore magna aliqua. Ut ernin ad minim veniam, quis</br>
<br>nostud evercition ullamco laboris nisi ut aliquip ex ea commodo cosequat.
<p>Read more…</p>

</div>
<div id=”event”>EVENT
<p> -Lomba bayi sehat</p>
<p> -Lomba ibu cerdas</p>
<p> -Lomba kekompakan bayi dan ibu </p>
</div>
</section>

</body>
</html>

Category:

Learning

BlogNya Renjana

Just another WordPress.com site