BELAJAR MEMBUAT WEB 3 KOLOM HTML & CSS Part 1 ~ Orang Indo

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>
</head>
<body>

</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">

<div id="header"></div>

<div id="kiri"></div>

<div id="tengah"></div>

<div id="kanan"></div>

<div id="footer"></div>

</div>

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...

Posted in: HTML n CSS

Senin, 06 Juni 2011

BELAJAR MEMBUAT WEB 3 KOLOM HTML & CSS Part 1

Kategori

Buku Tamu

Iklan