BERMULA DARI MIMPI: Membuat layout dan web sederhana menggunakan CSS

Membuat halaman web agar lebih mudah dapat memanfaatkan Cascading Style Sheet atau akrab disebut dengan CSS. Dengan CSS, akan mempermudah kita dalam mendesain layout untuk web dengan lebih ringan. Untuk dapat membuat tampilan layout web seperti berikut dengan mengunakan CSS:

Yang pertama dilakukan adalah dengan membuat CSS sebagai berikut, yang disimpan dengan nama modul3_1.css (untuk nama file bisa dirubah sesuai dengan kebutuhan asal tetap dengan ekstensi file .css/ pada tulisan ini nama tersebut hanyalah sebagai contoh)

#wrapper { margin: auto; width: 750px; border: 1px solid red; } #header { height: 80px; border: 1px solid blue; } #inner { float: left; margin: 5px 0; border: 1px solid black; } #sidebar { float: left; margin-right: 20px; width: 180px; height: 330px; border: 1px solid red; } #content1 { float: left; width: 544px; height: 330px; border: 1px solid green; } #top { float: left; width: 544px; height: 120px; border: 1px solid blue; } #content { float: left; width: 374px; height: 207px; border: 1px solid red; } #right { float: right; width:170px; height: 170px; border: 1px solid orange; } #footer { clear: both; height: 50px; border: 1px solid blue; }

Lalu kemudian ketikkan kode html berikut:

<!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" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="modul3_1.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> Header </div> <div id="inner"> <div id="sidebar"> Sidebar </div> <div id="content1"> <div id="top"> Top </div> <div id="content"> Content </div> <div id="right"> Right </div> </div> </div> <div id="footer"> Footer </div> </div> </body> </html>

Setelah selesai layout telah siap dan dapat segera di edit sesuai dengan kebutuhan web yang diperlukan. Berikut ini adalah sedikit contoh untuk mengisi layout-layout tersebut, menjadi sebuah halaman web dengan tampilan berikut ini:

Tidak berbeda jauh dengan sebelumnya awal membuatnya pun dengan membuat file CSS sebagai berikut: (dalam tulisan ini file disimpan dengan nama modul3_2.css)

 #wrapper { margin: auto; width: 750px; border: 0px solid red; } #header { height: 80px; border: 0px solid blue; } #templatemo_menu_panel{ width: 750px; height: 80px; repeat: x; background: url(back.png); } #templatemo_menu_section ul { float: right; width: 350px; margin: 0; padding: 0 27px 0 0; list-style: none; } #templatemo_menu_section ul li a{ float: left; width: 50px; font-size: 10px; font-weight: bold; text-align: center; text-decoration: none; color: #00034b; border-right: 1px solid #5f3b11; } #searchfield{ border: 1px solid #ffffff; color: #000000; font-size: 13px; font-variant: normal; height: 15px; line-height: normal; width: 100px; } #searchbutton{ float: right; cursor: pointer; font-size: 10px; font-weight: bold; height: 20px; margin: 0 0 0 7px; text-align: center; vertical-align: bottom; white-space: pre; width: 50px; } #boxImage{ float: left; margin: 10px; width: 70px; height: 50px; } #boxText{ float: left; margin: 10px; padding: 10px 0 0 0; width: 250px; height: 50px; font-size: 20px; font-weight: bold; text-align: left; color: blue; } #boxButton{ float: right; padding: 30px 0 0 0; width: 50px; height: 15px; } #boxTF{ float: right; padding: 30px 50px 0 0; width: 170px; height: 15px; } #inner { float: left; height:330px; border: 0px solid black; } #sidebar { float: left; width: 200px; height: 330px; background: #ffff78; border: 0px solid red; } #leftmenu ul{ width:200px; list-style-type: none; padding: 0; margin: 0; } #leftmenu a:link, #leftmenu a:visited, leftmenu a:active { padding-left: 15px; text-decoration: none; } #leftmenu a{ padding: 5px 0px 5px 15px; display: block; background: #6cae15 no-repeat left center; margin: 0px 0px 1px; color: #ffffff; } #leftmenu a:hover{ background: #5e9711 no-repeat left center; color: #ffffff; } #content1 { float: left; width: 550px; height: 330px; border: 0px solid green; background: yellow; } #top { float: left; width: 550px; height: 100px; border: 0px solid blue; } #content { float: left; width: 374px; height: 230px; border: 0px solid red; background: #ff70ff; } #right { float: right; width: 150px; height: 150px; font-size: 12px; font-weight: bold; background: #ffffff; border: 0px solid orange; } #fontRight{ font-size: 10px; font-weight: bold; } #footer { clear: both; text-align: center; height: 50px; border: 0px solid blue; background:blue; } 
Lalu buat kode html berikut:
 <!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" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="modul3_2.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="templatemo_menu_panel"> <div id="boxImage" align="right"> <img src="um.jpg" height="70" width="70" /> </div> <div id="templatemo_menu_section"> <ul> <li><a href="#home">Home</a></li> <li><a href="#Situs_Map">Situs Map</a></li> <li><a href="#RSS">RSS</a></li> <li><a href="#Contact">Contact</a></li> <li><a href="#About_US">About Us</a></li> </ul> </div> <div id="boxText"> TEKNIK ELEKTRO </div> <div id="boxTF"> <input type="text" name="q" size="10" id="searchfield" title="searchfield" /> </div> <div id="boxButton"> <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> </div> </div> </div> <div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#News_and_Media">News and Media</a></li> <li><a href="#Tutorials">Tutorials</a></li> <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li> <li><a href="#Downloads">Downloads</a></li> </ul> </div> </div> <div id="content1"> <div id="top"> <img src="teknik_pict.png" height="250" width="625" /> </div> <div id="content"> <h3 align="center">Website Elektro</h3>  " Kejujuran adalah hal yang paling berharga dan tak dapat dinilai dengan uang. Tapi terkadang nilai kejujuran menjadi relatif, ketika kita dihadapkan pada sesuatu yang terkadang menyulitkan posisi kita. Tak terasa kadang kita mampu menggadaikannya." <hr align="left" style="color:red" width="200" /> <img src="confuse.png" align="left" border="3" style="color:black" width="40" height="40" /> </div> <div id="right"> EVENTS <div id="fontRight"> <ul> <li>Lomba Panjat tiang listrik</li> <li>Lomba Tarik Kabel</li> <li>Balap Karung 10 KM</li> </ul> </div> </div> </div> </div> <div id="footer"> © 2010 Teknik Elektro UM Malang, Indonesia </div> </div> </body> </html> 

Pastikan gambar yang digunakan dalam desain web anda telah disimpan dalam folder yang sama dengan kode html dan css-nya.

Dalam tulisan kali ini, penulis masih menemukan kelemahan yakni belum validnya halaman web yang telah dibuat, mohon dimaklumi. Jika ada yang bisa bertukar ilmu dan berkenan memberi tahu dimana letak kesalahannya terimakasih sebelumnya.Kita selalu belajar sebagai manusia dan terus saling melengkapi.