Membuat halaman Web dua Kolom
Selasa, September 28, 2010
ryan
,
Membuat halaman web dua kolom menggunakan CSS yang nantinya bisa kita buat sebagai dokumen gabungan antara CSS dengan Html dimana css sebagai template dan html sebagai konten yang terpisah dengan template tujuan penggunaan CSS dalam penayangan sebuah website adalah kemampuannya yang mampu membuat loading website menjadi lebih kenceng deh dan tidak membebani bandwitch yang merupakan processor dari website. Untuk membuat dokumen html atau website dengan dua kolom maka pertama kita harus menyiapkan desainya terlebih dahulu yach untuk desain kita buat dengan photoshop aja deh biar keliatan cantik tampilan webnya, setelah menyiapkan gambar yang
terinspirasi dari benak anda maka selanjutnya kita buat dokumen CSS yang nanti kita simpan dengan nama style.css dan inilah contoh kodenya:------------------------------------------------------------------------------------------------------------------------
#layout {
float: none;
height: auto;
width: 700px;
}
#header {
float: left;
height: 200px;
width: 700px;
background-image: url(images/header.jpg);
}
#kolom1 {
float: left;
height: auto;
width: 200px;
background-image: url(images/kolom1.jpg);
background-repeat: repeat;
}
#kolom2 {
float: left;
height: auto;
width: 500px;
background-image: url(images/kolom2.jpg);
background-repeat: repeat;
}
#footer {
float: left;
height: 50px;
width: 700px;
background-image: url(images/footer.jpg);
}
float: none;
height: auto;
width: 700px;
}
#header {
float: left;
height: 200px;
width: 700px;
background-image: url(images/header.jpg);
}
#kolom1 {
float: left;
height: auto;
width: 200px;
background-image: url(images/kolom1.jpg);
background-repeat: repeat;
}
#kolom2 {
float: left;
height: auto;
width: 500px;
background-image: url(images/kolom2.jpg);
background-repeat: repeat;
}
#footer {
float: left;
height: 50px;
width: 700px;
background-image: url(images/footer.jpg);
}
--------------------------------------------------------------------------------------------------------------------
Setelah anda mempunyai kode seperti itu kita lanjutkan buat htmlnya sekarang, sebelum pembuatan Html maka pertama ingat gambar yang kita buat dengan photoshop simpan di folder ( images ) yang kita buat satu folder dulu sebelum itu intinya (images, style.css, dan web.html ) kita simpan dalam satu folder, okey sekarang ini contoh kode htmlnya dan kita simpan dengan nama (web.html) okey ini contoh scriftnya:
---------------------------------------------------------------------------------------------------------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bali Exotique Island</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layout">
<div id="header"></div>
<div id="kolom1">Our Services
<ul><li>Travel and Tour Package</li>
<li>Wedding Reception</li>
<li>Event Organizer</li>
<li>Adventure Trip</li>
</ul>
</div>
<div id="kolom2">Bali as you know, is the most pleased place to visit. Bali give you an aroma of paradise on earth. Bali can give you an exotique experience of your holiday time. <p>Bali exactly positioned on the bottom side of Indonesia. With great tropic climate, we ensure you get you magistic experience of holiday.<p>Let share the beautifulness bali views with us, we can't get you more service than us. With the cheapest price, we will give you an enormous views of Bali. Bali Exotique Island Travel presented by W3B Int'l Network . Web design by W3B Webdesign Division.</div>
<div id="footer"></div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bali Exotique Island</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layout">
<div id="header"></div>
<div id="kolom1">Our Services
<ul><li>Travel and Tour Package</li>
<li>Wedding Reception</li>
<li>Event Organizer</li>
<li>Adventure Trip</li>
</ul>
</div>
<div id="kolom2">Bali as you know, is the most pleased place to visit. Bali give you an aroma of paradise on earth. Bali can give you an exotique experience of your holiday time. <p>Bali exactly positioned on the bottom side of Indonesia. With great tropic climate, we ensure you get you magistic experience of holiday.<p>Let share the beautifulness bali views with us, we can't get you more service than us. With the cheapest price, we will give you an enormous views of Bali. Bali Exotique Island Travel presented by W3B Int'l Network . Web design by W3B Webdesign Division.</div>
<div id="footer"></div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
jadi deh sekarang tinggal kita buka deh file webnya dengan browser., semoga artikel ini bermanfaat.
catatan:
gambar yang kita buat sesuaikan dengan nama pada CSSnya seperti:
footer.jpg
header.jpg
kolom1.jpg
kolom2.jpg
agar tidak terjadi kesalahan pada saat browser membaca file kita,,,
pengen contohnya Download
broken link download