Tutorial div dasar - Penggunaan dasar div - DIV adalah salah satu tag HTML yang berguna untuk mengelompokan satu halaman menjadi beberapa bagian, mungkin begitu istilah sederhananya. Pada artikel ini saya akan memberikan tutorial mengenai penggunaan dasar div untuk membuat suatu halaman web.
Berikut ini adalah tampilan dari penggunaan div yang telah saya buat.
Sederhana kan, karena ini adalah tampilan dasar penggunaan div. Jika Anda baru pertama kali belajar tag div silahkan phami dengan seksama, usahakan jangan mengcopy kodenya lebih baik menulisnya sendiri karena akan lebih mudah diingat dan dipahami (:
- Pertama buka editor Anda. Ketikan script html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Learn</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--HEADER-->
<div id="header">
</div>
<!--END HEADER-->
<!--MENU-->
<div id="menu">
</div>
<!--END MENU-->
<!--CONTENT-->
<div id="content">
</div>
<!--END CONTENT-->
<!--FOOTER-->
<div id="footer">
</div>
<!--END FOOTER-->
</div>
</body>
</html>
- Simpanlah dengan nama index.html
- Tag wrapper adalah tah div utama yang didalamnya berisi tag header, menu, content, footer.
- Sekarang buka file baru simpan dengan nama style.css
- Kemudian ketikan script dibawah ini:
#wrapper{
height: 600px;
width: 900px;
background-color: red;
margin: 0 auto;
}
#header{
height: 100px;
width: 900px;
background-color: blue;
text-align: center;
}
#menu{
height: 30px;
width: 900px;
margin-top: 5px;
background-color: blue;
}
#content{
height: 400px;
width: 900pxpx;
margin-top: 5px;
background-color: blue;
}
#footer{
height: 65px;
width: 900px;
margin-top: 5px;
background-color: blue;
}
- Simpanlah.
- Lalu tes dengan browser yang Anda miliki, jika hasilnya sama maka Anda berhasil. Selamat mencoba (:
