Pertama : Struktur dasar HTML
<html><head>
<title> </title>
</head>
<body>
<!-- make template with 2 coloumn -->
<!-- its basic structure -->
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Kemudian kita berikan content.
<html><head>
<title> </title>
</head>
<body>
<!-- make template with 2 coloumn -->
<!-- its basic structure -->
<div id="wrap">
<div id="header">
<h1>Document Header</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">option satu</a></li>
<li><a href="#">option dua</a></li>
<li><a href="#">option tiga</a></li>
</ul>
</div>
<div id="main">
<h2>kolom dua</h2>
<p> Password adalah bagian dari proses authentikasi. Sebuah istilah yang merupakan ‘benteng’ terakhir dari sebuah sistem keamanan pada sebuah data atau informasi. Konkretnya, salah satu cara yang umum digunakan untuk mengamankan sebuah sistem adalah dengan mengatur akses pemakai (user) ke dalamnya melalui mekanisme pencocokan kebenaran (authentication) dan pemberian hak akses (access control)
</p>
</div>
<div id="sidebar">
<h2>kolom dua</h2>
<ul>
<li><a href="#">Link Satu</a></li>
<li><a href="#">Link Satu</a></li>
<li><a href="#">Link Satu</a></li>
<li><a href="#">Link Satu</a></li>
</ul>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
Kedua : Mensetting element margin, padding ke 0 & Mensetting warna background dan warna text dari element body & html
*{
margin:0;
padding:0;
border:0;
}
body,html{
background-color:#a7a09a;
color:#000;
}
Ketiga : Setelah itu kita tentukan lebar dari area content (#wrap) dari halaman web kita, dan menengahkan posisi horizontalnya, yaitu dengan mengatur marginnya. Dan juga memberi warna background agar tampak beda dengan background dari element body
#wrap{width:750px;margin:0 auto;background:#99c;}
Kemudian kita akan memberikan tampilan yang berbeda. Dengan mengatur background dari tiap” section.
#header{
background:#ddd;
}
#nav{
background:#c99;
}
#main{
background:#9c9;
}
#sidebar{
background:#c9c;
}
#footer{
background:#cc9;
}
Keempat : Setelah itu kita akan membuat dua kolom (#main dan #sidebar) yaitu dengan menggunakan float, dan juga kita akan menentukan lebarnya dari masing – masing.
#main{
float:left;
width:500px;
background:#9c9;
}
#sidebar{
float:right;
width:250px;
background:#c9c;
}
Kelima : Yang perlu diperhatikan lebar dari #main & #sidebar jika dijumlahkan adalah lebar dari #wrap. Posisi dari #sidebar adalah sebelah kanan dari #main. Tapi klo kita coba lihat ternyata ada #footer di sebelah kanan #main. Bagaimana cara memindahkannya agar turun ke bawah ?.Kita bisa menggunakan clear:both.
#footer{
clear:both;
background:#cc9;
}
Keenam : Klo kita lihat background #sidebar tidak menyatu dengan batas dari #footer. Untuk menyatukannya kita ganti background #sidebar sama dengan #wrap
#sidebar{
float:right;
width:250px;
background:#99c;
}
Ketujuh : Sekarang klo kita lihat #nav tampil dengan unordered list, sekarang kita akan mengubahnya agar #nav tidak tampil seperti unordered list. Berarti kita perlu merestylenya.
#nav ul{margin:0;paddiing:0;list-style:none;}#nav li{display:inline;margin:0;padding:0;}
Kedelapan : Hemm. .hampir selesai. Sekarang kita sisa mengatur margin dan padding agar tampak lebih indah dari tiap element.
#header{
padding:5px 10px;
background:#ddd;
}
h1{
margin:0;
}
#nav{
padding:5px 10px;
background:#c99;
}
#main{
float:left;
width:480px;
padding:10px;
background:#9c9;
}
h2{
margin:0 0 1px;
}
#sidebar{
float:right;
width:220px;
padding:10px;
margin-left:10px;
background:#99c;
}
#footer{
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p{
margin:0;
}
Sumber : TUTORIAL
Posting Komentar
Posting Komentar