Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div

Sudah lama tidak update dikarenakan sibuk tetapi kali ini menyempatkan diri untuk posting tentang CSS, disini mau kasih tau cara membuat layout web sederhana menggunakan CSS dan fungsi div. Sederhana sekali pembuatan layout menggunakan CSS, dalam sebuah tampilan web dasarnya mempunyai bagian-bagian seperti header, menu, sidebar, content, dan footer.

contoh yang dapat dihasilkan dari css

Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas ;

nama file cssnya.css

#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#menu{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}

file htmlnya, simpan dengan nama index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Belajar CSS bersama WWDQ</title>
<link rel="stylesheet" href="cssnya.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="inner2">
<div id="menu">
Menu
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>

<link rel="stylesheet" href="cssnya.css" type="text/css" /> <--yang berwarna merah itu file cssnya, anda harus menaruh file .cssnya dengan file .html dalam 1 direktori/folder, atau boleh pisah tetapi pada kode html harus ditulis nama direktorinya. Contoh :
<link rel="stylesheet" href="../namafolder/cssnya.css" type="text/css" />

Ingat ini hanya pembagian lahan wrapper untuk header, menu, sidebar, content, dan footer, jadi masih polos. disini lah anda berkreasi memperbaiki tampilan menjadi semenarik mungkin menggunakan CSS

Semoga Bermanfaat

Bila Kurang Jelas, silakan bertanya dibawah ini .

Post Info :
Judul = Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div

Url = http://wwdq.blogspot.com/2011/05/pembuatan-layout-web-sederhana.html

Author = Riloaw. At : 21.02 Rabu, 11 Mei 2011 | Comment:6

Artikel Terkait