Menata Layout Web dengan CSS (part 1) - Dalam membuat sebuah website, penataan layout sebenarnya memiliki peran yang penting untuk membuat pengunjung tertarik mengunjungi sebuah web tersebut namun terkadang beberapa orang mengabaikan masalah penataan layout website mereka sehingga website menjadi terkesan berantakan. Salah satu cara yang bisa digunakan dalam penataan layout yaitu dengan memanfaatkan css. Jika kita ingin membuat layout website maka dengan menggunakan CSS, kita perlu membuat 2 buah file terlebih dahulu. 1 file berekstensi .html dan yang 1 lagi berekstensi .css. Pada file .css inilah kita bisa meletakkan kode-kode untuk misalnya menata margin dari komponen website, memberi border dan mewarnainya, memberi gambar (background) dan lain-lain.
Misalnya kita ingin membuat layout seperti pada Gambar 1 :
Gambar 1
langkah-langkah yang dilakukan adalah sebagai berikut :
1. Buat bidang besar dan beri nama misalnya 'wrapper'.
2. Di dalam wrapper kita isi dengan tiga komponen yaitu header, body dan footer.
3. Bagi komponen body menjadi dua bagian, katakanlah namanya komponen sidebar dan sidebar2.
4. Komponen sidebar2 dibagi lagi menjadi 3 komponen yaitu top, content dan right.
5. Buat file .css untuk menentukan style dari masing-masing komponen yang kita buat.
Source kode untuk file .html nya adalah sebagai berikut :
<!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>lay out simple</title>
<link rel="stylesheet" href="tgsprak1.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="webbody">
<div id="sidebar">sidebar</div>
<div id="sidebar2">
<div id="top">top</div>
<div id="content">content</div>
<div id="right">right</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Sementara untuk file .css nya adalah (sebagai contoh saya menamai file .css dengan tgsprak1.css) :
#wrapper{
margin:auto;
width:750px;
height : 600px;
border: 1px solid red;
}
#header{
margin : 0px auto;
height: 80px;
border: 1px solid yellow;
}
#webbody{
margin : 5px auto;
height: 455px;
border: 1px solid green;
}
#sidebar{
margin : 0px;
float: left;
width:180px;
height: 455px;
border: 1px solid purple;
}
#sidebar2{
margin : 0px;
float: right;
width:537px;
height: 455px;
border: 1px solid purple;
}
#top{
margin : 0px;
width:537px;
height: 155px;
border: 1px solid black;
}
#content{
margin : 0px;
float: left;
width:322px;
height: 290px;
border: 1px solid green;
}
#right{
margin : 0px;
float: right;
width:190px;
height: 180px;
border: 1px solid green;
}
#footer {
height: 50px;
border: 1px solid blue;
Margin: 5px auto;
}
Nah, Selamat Mencoba....
Misalnya kita ingin membuat layout seperti pada Gambar 1 :
Gambar 1
langkah-langkah yang dilakukan adalah sebagai berikut :
1. Buat bidang besar dan beri nama misalnya 'wrapper'.
2. Di dalam wrapper kita isi dengan tiga komponen yaitu header, body dan footer.
3. Bagi komponen body menjadi dua bagian, katakanlah namanya komponen sidebar dan sidebar2.
4. Komponen sidebar2 dibagi lagi menjadi 3 komponen yaitu top, content dan right.
5. Buat file .css untuk menentukan style dari masing-masing komponen yang kita buat.
Source kode untuk file .html nya adalah sebagai berikut :
<!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>lay out simple</title>
<link rel="stylesheet" href="tgsprak1.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="webbody">
<div id="sidebar">sidebar</div>
<div id="sidebar2">
<div id="top">top</div>
<div id="content">content</div>
<div id="right">right</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Sementara untuk file .css nya adalah (sebagai contoh saya menamai file .css dengan tgsprak1.css) :
#wrapper{
margin:auto;
width:750px;
height : 600px;
border: 1px solid red;
}
#header{
margin : 0px auto;
height: 80px;
border: 1px solid yellow;
}
#webbody{
margin : 5px auto;
height: 455px;
border: 1px solid green;
}
#sidebar{
margin : 0px;
float: left;
width:180px;
height: 455px;
border: 1px solid purple;
}
#sidebar2{
margin : 0px;
float: right;
width:537px;
height: 455px;
border: 1px solid purple;
}
#top{
margin : 0px;
width:537px;
height: 155px;
border: 1px solid black;
}
#content{
margin : 0px;
float: left;
width:322px;
height: 290px;
border: 1px solid green;
}
#right{
margin : 0px;
float: right;
width:190px;
height: 180px;
border: 1px solid green;
}
#footer {
height: 50px;
border: 1px solid blue;
Margin: 5px auto;
}
Nah, Selamat Mencoba....
