Close it

Rabu, 11 Mei 2011

3 Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div►► URL : http://wwdq.blogspot.com/2011/05/pembuatan-layout-web-sederhana.html.

Share
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 = Rizal Loa Wanda. At : 21.02 Rabu, 11 Mei 2011 | Comment:3

Artikel Terkait

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

3 komentar:

  1. fungsi inner untuk apa?

    BalasHapus
  2. kang, mau tanya? itu plugin buat menampilkan di script di blogspot gimana kaya punya akang/mas/bpk??? makasih.... :-)

    BalasHapus
  3. mas boleh buatkan satu contoh lengkap dengan menu,artinya jika diklik menu akan di tampilkan form di div content

    BalasHapus

No Spam Please :)


Tambahkan Bookmark halaman ini untuk mempermudah Pencarian Anda [CTRL+D].