Desain Layout Web Sederhana dengan code CSS

Pada kesempatan kali ini, kita akan membahas mengenai pembuatan halaman web sederhana dengan menggunakan code css untuk penyusunan kerangka awal elemen halaman web.
Dengan menggunakan CSS ini, kita dapat dengan mudah mengatur semua elemen halaman web, seperti border, padding, font, spacing, colour, background dan lain-lain dengan simple dalam satu paket code saja.
Langkah-langkah utama dalam pembuatan halaman web sederhana adalah, pertama membuat kerangka Wb dengan kode css, kemudian memperindah halaman dengan kode html.

Untuk lebih mudahnya kita dapat mencoba membuat contoh program 1 di bawah ini:
1. Contoh Membuat Kerangka Halaman Web
<br />#wrapper { <br /> <br />margin: auto; <br /> <br />width: 750px; <br /> <br />border: 0px solid red; <br /> <br />} <br /> <br />#header { <br /> <br />height: 80px; <br /> <br />border: 0px solid blue; <br /> <br />} <br /> <br />#templatemo_menu_panel{ <br /> <br /> width: 750px; <br /> <br /> height: 80px; <br /> <br /> repeat: x; <br /> <br /> background: url(tux.jpg); <br /> <br />} <br /> <br /> <br /> <br />#templatemo_menu_section ul { <br /> <br /> float: right; <br /> <br /> width: 350px; <br /> <br /> margin: 0; <br /> <br /> padding: 0 27px 0 0; <br /> <br /> list-style: none; <br /> <br />} <br /> <br /> <br /> <br />#templatemo_menu_section ul li a{ <br /> <br /> float: left; <br /> <br /> width: 50px; <br /> <br /> font-size: 10px; <br /> <br /> font-weight: bold; <br /> <br /> text-align: center; <br /> <br /> text-decoration: none; <br /> <br /> color: #ff00ff; <br /> <br /> border-right: 1px solid #5f3b11; <br /> <br />} <br /> <br /> <br /> <br />#searchfield{ <br /> <br /> border: 1px solid #ffffff; <br /> <br /> color: #000000; <br /> <br /> font-size: 13px; <br /> <br /> font-variant: normal; <br /> <br /> height: 15px; <br /> <br /> line-height: normal; <br /> <br /> width: 100px; <br /> <br />} <br /> <br /> <br /> <br />#searchbutton{ <br /> <br /> float: right; <br /> <br /> cursor: pointer; <br /> <br /> font-size: 10px; <br /> <br /> font-weight: bold; <br /> <br /> height: 20px; <br /> <br /> margin: 0 0 0 7px; <br /> <br /> text-align: center; <br /> <br /> vertical-align: bottom; <br /> <br /> white-space: pre; <br /> <br /> width: 50px; <br /> <br />} <br /> <br />#boxImage{ <br /> <br /> float: left; <br /> <br /> margin: 10px; <br /> <br /> width: 70px; <br /> <br /> height: 50px; <br /> <br />} <br /> <br /> <br /> <br />#boxText{ <br /> <br /> float: left; <br /> <br /> margin: 10px; <br /> <br /> padding: 10px 0 0 0; <br /> <br /> width: 250px; <br /> <br /> height: 50px; <br /> <br /> font-size: 20px; <br /> <br /> font-weight: bold; <br /> <br /> text-align: left; <br /> <br /> color: solid blue; <br /> <br />} <br /> <br />#boxButton{ <br /> <br /> float: right; <br /> <br /> padding: 30px 0 0 0; <br /> <br /> width: 50px; <br /> <br /> height: 15px; <br /> <br />} <br /> <br /> <br /> <br />#boxTF{ <br /> <br /> float: right; <br /> <br /> padding: 30px 50px 0 0; <br /> <br /> width: 170px; <br /> <br /> height: 15px; <br /> <br />} <br /> <br />#inner { <br /> <br />float: left; <br /> <br />height:330px; <br /> <br />border: 0px solid black; <br /> <br />} <br /> <br />#sidebar { <br /> <br />float: left; <br /> <br />width: 200px; <br /> <br />height: 330px; <br /> <br />background: #fff000; <br /> <br />border: 0px solid red; <br /> <br />} <br /> <br />#leftmenu ul{ <br /> <br /> width:200px; <br /> <br /> list-style-type: none; <br /> <br /> padding: 0; <br /> <br /> margin: 0; <br /> <br />} <br /> <br />#leftmenu a:link, #leftmenu a:visited, leftmenu a:active { <br /> <br /> padding-left: 15px; <br /> <br /> text-decoration: none; <br /> <br />} <br /> <br />#leftmenu a{ <br /> <br /> padding: 5px 0px 5px 15px; <br /> <br /> display: block; <br /> <br /> background: #6cae15 no-repeat left center; <br /> <br /> margin: 0px 0px 1px; <br /> <br /> color: black; <br /> <br />} <br /> <br />#leftmenu a:hover{ <br /> <br /> background: blue no-repeat left center; <br /> <br /> color: #00ffff; <br /> <br />} <br /> <br />#content1 { <br /> <br />float: left; <br /> <br />width: 550px; <br /> <br />height: 330px; <br /> <br />border: 0px solid green; <br /> <br />background: yellow; <br /> <br />} <br /> <br />#top { <br /> <br />float: left; <br /> <br />width: 550px; <br /> <br />height: 100px; <br /> <br />border: 0px solid blue; <br /> <br />} <br /> <br />#content { <br /> <br />float: left; <br /> <br />width: 374px; <br /> <br />height: 230px; <br /> <br />border: 0px solid red; <br /> <br />background: #fff89d; <br /> <br />} <br /> <br />#right { <br /> <br />float: right; <br /> <br />width: 150px; <br /> <br />height: 150px; <br /> <br />font-size: 12px; <br /> <br />font-weight: bold; <br /> <br />background: cyan; <br /> <br />border: 0px solid orange; <br /> <br />} <br /> <br />#fontRight{ <br /> <br />font-size: 10px; <br /> <br />font-weight: bold; <br /> <br />} <br /> <br />#footer { <br /> <br />clear: both; <br /> <br />text-align: center; <br /> <br />height: 50px; <br /> <br />border: solid blue; <br /> <br />background: yellow; <br /> <br />} <br />

Simpan code css diatas dengan nama style1.css dan simpan dalam folder wamp/www, untuk kemudian di-load pada file html.

Langkah berikutnya adalah membuat file html.

untuk membuat file html buat code seperti di bawah ini:

<br /> <br /><head> <br /> <title>Desain Layout Sederhana</title> <br /> <link rel="stylesheet" href="style1.css" type="text/css" /> <br /></head> <br /> <br /><body> <br /> <br /> <div id="wrapper"> <br /> <div id="header"> <br /> Header <br /> </div> <br /> <br /> <div id="inner"> <br /> <div id="sidebar"> <br /> Sidebar <br /> </div> <br /> <div id="content1"> <br /> <div id="top"> <br /> Top <br /> </div> <br /> <div id="content"> <br /> Content <br /> </div> <br /> <div id="right"> <br /> Right <br /> </div> <br /> </div> <br /> </div> <br /> <div id="footer"> <br /> Footer <br /> </div> <br /> </div> <br /></body> <br /> <br /></html> <br />

Berikut ini adalah layout hasil code program di atas:



Setelah kita berhasil membuat elemen dan kerangka dasar dari halaman web sederhana yang ingin kita buat, sekarang kita kan mencoba membuat halaman web sederhana yang lengkap dengan isi dan tampilan yang menarik.

2. Contoh Membuat Halaman Web Sederhana

Seperti halnya pada contoh pertama, mula-mula kita membuat kerangka web dengan code css.

<br />#wrapper { <br /> <br />margin: auto; <br /> <br />width: 750px; <br /> <br />border: 0px solid red; <br /> <br />} <br /> <br />#header { <br /> <br />height: 80px; <br /> <br />border: 0px solid blue; <br /> <br />} <br /> <br />#templatemo_menu_panel{ <br /> <br /> width: 750px; <br /> <br /> height: 80px; <br /> <br /> repeat: x; <br /> <br /> background: url(tux.jpg); <br /> <br />} <br /> <br /> <br /> <br />#templatemo_menu_section ul { <br /> <br /> float: right; <br /> <br /> width: 350px; <br /> <br /> margin: 0; <br /> <br /> padding: 0 27px 0 0; <br /> <br /> list-style: none; <br /> <br />} <br /> <br /> <br /> <br />#templatemo_menu_section ul li a{ <br /> <br /> float: left; <br /> <br /> width: 50px; <br /> <br /> font-size: 10px; <br /> <br /> font-weight: bold; <br /> <br /> text-align: center; <br /> <br /> text-decoration: none; <br /> <br /> color: #ff00ff; <br /> <br /> border-right: 1px solid #5f3b11; <br /> <br />} <br /> <br /> <br /> <br />#searchfield{ <br /> <br /> border: 1px solid #ffffff; <br /> <br /> color: #000000; <br /> <br /> font-size: 13px; <br /> <br /> font-variant: normal; <br /> <br /> height: 15px; <br /> <br /> line-height: normal; <br /> <br /> width: 100px; <br /> <br />} <br /> <br /> <br /> <br />#searchbutton{ <br /> <br /> float: right; <br /> <br /> cursor: pointer; <br /> <br /> font-size: 10px; <br /> <br /> font-weight: bold; <br /> <br /> height: 20px; <br /> <br /> margin: 0 0 0 7px; <br /> <br /> text-align: center; <br /> <br /> vertical-align: bottom; <br /> <br /> white-space: pre; <br /> <br /> width: 50px; <br /> <br />} <br /> <br />#boxImage{ <br /> <br /> float: left; <br /> <br /> margin: 10px; <br /> <br /> width: 70px; <br /> <br /> height: 50px; <br /> <br />} <br /> <br /> <br /> <br />#boxText{ <br /> <br /> float: left; <br /> <br /> margin: 10px; <br /> <br /> padding: 10px 0 0 0; <br /> <br /> width: 250px; <br /> <br /> height: 50px; <br /> <br /> font-size: 20px; <br /> <br /> font-weight: bold; <br /> <br /> text-align: left; <br /> <br /> color: solid blue; <br /> <br />} <br /> <br />#boxButton{ <br /> <br /> float: right; <br /> <br /> padding: 30px 0 0 0; <br /> <br /> width: 50px; <br /> <br /> height: 15px; <br /> <br />} <br /> <br /> <br /> <br />#boxTF{ <br /> <br /> float: right; <br /> <br /> padding: 30px 50px 0 0; <br /> <br /> width: 170px; <br /> <br /> height: 15px; <br /> <br />} <br /> <br />#inner { <br /> <br />float: left; <br /> <br />height:330px; <br /> <br />border: 0px solid black; <br /> <br />} <br /> <br />#sidebar { <br /> <br />float: left; <br /> <br />width: 200px; <br /> <br />height: 330px; <br /> <br />background: #fff000; <br /> <br />border: 0px solid red; <br /> <br />} <br /> <br />#leftmenu ul{ <br /> <br /> width:200px; <br /> <br /> list-style-type: none; <br /> <br /> padding: 0; <br /> <br /> margin: 0; <br /> <br />} <br /> <br />#leftmenu a:link, #leftmenu a:visited, leftmenu a:active { <br /> <br /> padding-left: 15px; <br /> <br /> text-decoration: none; <br /> <br />} <br /> <br />#leftmenu a{ <br /> <br /> padding: 5px 0px 5px 15px; <br /> <br /> display: block; <br /> <br /> background: #6cae15 no-repeat left center; <br /> <br /> margin: 0px 0px 1px; <br /> <br /> color: black; <br /> <br />} <br /> <br />#leftmenu a:hover{ <br /> <br /> background: blue no-repeat left center; <br /> <br /> color: #00ffff; <br /> <br />} <br /> <br />#content1 { <br /> <br />float: left; <br /> <br />width: 550px; <br /> <br />height: 330px; <br /> <br />border: 0px solid green; <br /> <br />background: yellow; <br /> <br />} <br /> <br />#top { <br /> <br />float: left; <br /> <br />width: 550px; <br /> <br />height: 100px; <br /> <br />border: 0px solid blue; <br /> <br />} <br /> <br />#content { <br /> <br />float: left; <br /> <br />width: 374px; <br /> <br />height: 230px; <br /> <br />border: 0px solid red; <br /> <br />background: #fff89d; <br /> <br />} <br /> <br />#right { <br /> <br />float: right; <br /> <br />width: 150px; <br /> <br />height: 150px; <br /> <br />font-size: 12px; <br /> <br />font-weight: bold; <br /> <br />background: cyan; <br /> <br />border: 0px solid orange; <br /> <br />} <br /> <br />#fontRight{ <br /> <br />font-size: 10px; <br /> <br />font-weight: bold; <br /> <br />} <br /> <br />#footer { <br /> <br />clear: both; <br /> <br />text-align: center; <br /> <br />height: 50px; <br /> <br />border: solid blue; <br /> <br />background: yellow; <br /> <br />} <br /> <br />

Simpan code di atas dengan nama styleq.css , untuk kemudian diload pada file html.
Langkah berikutnya adalah menbuat file html.

<br /><!DOCTYPE html <br /> <br />PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /> <br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /> <br /> <br /> <br /><head> <br /> <br /> <title>Desain Layout Sederhana</title> <br /> <br /> <link rel="stylesheet" href="styleq.css" type="text/css" /> <br /> <br /></head> <br /> <br /> <br /> <br /><body> <br /> <br /> <br /> <br /> <div id="wrapper"> <br /> <br /> <div id="header"> <br /> <br /> <div id="templatemo_menu_panel"> <br /> <br /> <div id="boxImage" align="right"> <br /> <br /> <img src="unm.bmp" height="50" width="50"/> <br /> <br /> </div> <br /> <br /> <br /> <br /> <div id="templatemo_menu_section"> <br /> <br /> <ul> <br /> <br /> <li><a href="#home">Home</a></li> <br /> <br /> <li><a href="#Situs_Map">Site Map</a></li> <br /> <br /> <li><a href="#RSS">RSS</a></li> <br /> <br /> <li><a href="#Contact">Contact</a></li> <br /> <br /> <li><a href="#About_US">About Us</a></li> <br /> <br /> </ul> <br /> <br /> </div> <br /> <br /> <div id="boxText"> <br /> <br /> TEKNIK ELEKTRO <br /> <br /> </div> <br /> <br /> <div id="boxTF"> <br /> <br /> <input type="text" name="q" size="10" id="searchfield" title="searchfield" /> <br /> <br /> </div> <br /> <br /> <div id="boxButton"> <br /> <br /> <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> <br /> <br /> <div id="inner"> <br /> <br /> <div id="sidebar"> <br /> <br /> <div id="leftmenu"> <br /> <br /> <ul> <br /> <br /> <li><a href="#home">Home</a></li> <br /> <br /> <li><a href="#News_and_Media">News and Media</a></li> <br /> <br /> <li><a href="#Tutorials">Tutorials</a></li> <br /> <br /> <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li> <br /> <br /> <li><a href="#Downloads">Downloads</a></li> <br /> <br /> </ul> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> <br /> <br /> <div id="content1"> <br /> <br /> <div id="top"> <br /> <br /> <img src="teknik.jpg" height="100" width="550"/> <br /> <br /> </div> <br /> <br /> <div id="content"> <br /> <br /> <h3 align="center"><font color="black">Pemuda Indonesia Berkarya</font></h3> <br /> <br /> <p align="left" style="color:black; font-style:italic"> <br /> <br /> <!-- menggunakan path absolut --> <br /> <br /> "Masa depan bangsa adalah tanggunga jawab para generasi penerus bangsa, yaitu para pemuda yang terus bertumbuh dan berkembang seiring <br /> dengan kemajuan zaman, namun tetap berpegang teguh pada pribadi bangsa yang luhur" <br /> <br /> <hr align="right" style="color:yellow" width="130" /> <br /> <br /> <img src="futsal.jpg" align="right" border="2" style="color:red" width="50" height="30" /> <br /> <br /> <br /> <br /> </div> <br /> <br /> <div id="right"> <br /> <br /> EVENTS <br /> <br /> <div id="fontRight"> <br /> <br /> <ul> <br /> <br /> <li>Kompetisi Basket</li> <br /> <br /> <li>Kompetisi Robot</li> <br /> <br /> <li>Kompetisi Seni</li> <br /> <br /> </ul> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> </div> <br /> <br /> <div id="footer"> <br /> <br /> © 2010 Teknik Elektro UM Malang, Indonesia <br /> <br /> </div> <br /> <br /> </div> <br /> <br /></body> <br /> <br /> <br /></html> <br />

Hasil dari code di atas adalah:



Itulah tadi beberapa langkah dan contoh membuat halaman web sederhana dengan bantuan code css. Selamat Mencoba..