Ok. kali ini saya mau bahas dasar "Membuat Web Sederhana 3 kolom dengan HTML & CSS". Mungkin ane Peruntuhkan bagi yang baru belajar bikin web alias bagi yang Awam. Eiit ada yang perlu kalian tau, ane ngajarin langsung praktek nya sob. Ane ga pake teorinya. Jadi kalian tinggal ikutin step-step nya aja seperti dibawah. ok dari pada basa-basi mendingan langsung aja.
Nah, sekarang yang kalian gunain untuk dasar kalian cukup pake Notepad / Notedpad ++.
untuk notepad mungkin udah ada di windows. untuk notepad ++ bisa kalian download disini
CHECK IT OUT!!!
Buka Notepad / Notedpad ++
1. Langkah pertama, Copy/ketikan seluruh isi script dibawah ini:
<html>
<head>
<title>Web 3 Kolom - Orang Indo</title><!--Boleh koq di ganti judulnya.-->
</head>
<body>
<!-- …………… BAGAN WEB …………….. -->
</body>
</html>
Lalu Save dulu. dan beri nama 3kolom.html. kalian bisa taruh dmn saja. klo mau lebih rapi kalian buat folder dan beri nama apa aja. Save didalam folder tsb.
2. Langkah kedua, kalian membuat bagan dari dalam web tsb, Copy/ketikkan script dibawah ini, di antara <body> dan </body>:
<div id="container"><!--ini bagian container START.-->
<div id="header"></div><!--ini bagian header.-->
<div id="kiri"></div><!--ini bagian sidebar kiri.-->
<div id="tengah"></div><!--ini bagian kontent.-->
<div id="kanan"></div><!--ini bagian sidebar kanan.-->
<div id="footer"></div><!--ini bagian Footer.-->
</div><!--ini bagian container END.-->
Eiit jangan di apa2in dulu ikutin step by step nya klo mau ngerti.
3. Langkah ketiga, setelah kalian membuat bagannya sekarang kalian membuat isinya, Sekarang
kalian buat isi menu kirinya, Copy/ketikkan script dibawah ini, sesudah Code <div id="kiri">:
<h3>Kategori 1</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
4. Langkah keempat, sama seperti langkah ketiga, kalian buat isi kontentnya, Copy/ketikkan
script dibawah ini, sesudah Code <div id="tengah">:
<h1>Judulnya bro 1</h1>
<p>Paragrafnya monggo diisi</p>
<h2>Judulnya bro 2</h2>
<p>Paragrafnya monggo diisi</p>
<h2>Judulnya bro 3</h2>
<p>Paragrafnya monggo diisi</p>
5. Langkah kelima, sama seperti langkah ketiga, kalian buat isi kontentnya, Copy/ketikkan
script dibawah ini, sesudah Code <div id="kanan">:
<h3>Kategori 2</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
Sebelum kalian lanjut langkah keenam. Kalian coba PREVIEW, di browser kalian. Lihat hasilnya seperti apa. Setelah dilihat baru dilanjutkan lagi.
6. Langkah keenam kalian membuat css nya dahulu dari dalam script tsb, Copy/ketikkan script code dibawah ini, sebelum Code </head>:
<style type="text/css">
#container {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
height: 130px;
margin-bottom: 10px;
margin-top: 5px;
border: 1px solid #CCC;
}
#logo {
height: 30px;
width: 200px;
margin-left: 20px;
margin-top: 50px;
}
#kiri {
float: left;
width: 210px;
border: 1px solid #999;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;
}
#tengah {
float: left;
width: 490px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
border: 1px solid #CCC;
padding: 5px;
}
#kanan {
float: left;
width: 210px;
border: 1px solid #CCC;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#footer {
height: 20px;
margin-top: 10px;
border: 1px solid #CCC;
padding: 5px;
}
</style>
Lalu coba kalian PREVIEW lagi di browser kalian.
Apakah sudah betul…??? Oh… ternyata masih belum betul. Coba kalian perhatikan apa yg salah…??? Daripada kalian bingung, ayo lanjutkan lagi.
7. Langkah ketujuh, kalian tambahkan script HTML, Copy/ketikkan script code
dibawah ini, sebelum Code <div id="kiri"> dan 1 lagi sebelum Code <div id="footer">:
<div class="clear"></div>
8. Langkah kedelapan, kalian tambahkan script CSS, Copy/ketikkan script code
dibawah ini, sebelum Code <div id="kiri"> dan 1 lagi sesudah Code <style type="text/css">:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, label, p, blockquote, th, td {
margin:0;
padding:0;
}
.clear{clear:both}
ol, ul {
list-style:none;
}
Lalu coba kalian PREVIEW lagi.
Apakah sudah betul…???
Hasilnya seperti ini...
