Membuat Web Sederhana dengan CSS

Rabu, 03 Maret 2010

Diposting oleh Andhika Aratida P.

Pada kesempatan kali ini, kita akan membahas tentang bagaimana cara membuat web sederhana dengan menggunakan CSS dan kode html. Dalam pembuatan web ini, kita memanfaatkan divisi agar web kita dapat tersusun secara rapi. Berikut ini adalah contoh kode CSS yang dapat dimanfaatkan dalam pembuatan web.

* { margin: 0; }
 
 body { margin:5px auto; padding:0; font:0.72em/150% verdana; }
 
 #wrapper { margin:auto; width:980px;}
 
 #header { height:100px; margin:0px auto;background:#000;}
 
 #header-content{height:100px; margin:auto; background:#fff url(header.jpg);}
 
 #menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;}
 
 #logo { float:left; margin:10px 10px 10px 50px; height:50px;}
 
 #site-title h2{ float:left; padding:0px 80px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;}
 
 #search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}
 
 #inner { float:left; margin:0px;}
 
 #footer { clear:both; height:60px; background:#99FF33;}
 
 #footer p { text-align:center;}
 
 #sidebar { float:left; width:200px; height:400px; background-color:#FFCC66}
 
 #content { float:right; width:780px; height:400px; background:#FFF}
 
 #content-top { clear:both; margin:auto; width:780px; height:140px; background-image:url(perpus.gif)}
 
 #content-main { float:left; margin:auto; width:480px; height:240px;}
 
 #content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;}
 
 .style1 {font-size:x-small}
 
 #content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;}
 
 #content-right { float:right; margin:10px auto; width:260px; border: 2px solid green; background:#99FF33}
 
 #content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;}
 
 #content-right ul{ padding: 10px 20px 20px 40px; list-style:square;}
 
 #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:#000 }
 
 #leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}

Setelah membuat kode CSS, tentunya kita membuat kode HTML agar kode CSS yang telah dibuat dapat dimanfaatkan dengan baik. Berikut ini adalah contoh mengakses file CSS agar dapat menghasilkan sebuah web sederhana.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
 <head>
 
 <title>Demo</title>
 
 <link type="text/css" rel="stylesheet" href="websederhana.css" />
 
 </head>
 
 
 
 <body>
 
 <div id="wrapper">
 
 <div id="header">
 
 <div id="header-content">
 
 <div id="menu-top">
 
 Home | Sitemap | RSS | Contact | About Us
 
 </div>
 
 <div id="logo">
 
 <img src="logo_um.png" width="50"/>
 
 </div>
 
 <div id="site-title">
 
 <h2>TEKNIK ELEKTRO</h2>
 
 </div>
 
 <div id="search">
 
 Search : <input name="q" size="20" type="text"/>
 
 </div>
 
 </div>
 
 </div>
 
 
 
 <div id="inner">
 
 <div id="sidebar">
 
 <div id="leftmenu">
 
 <ul>
 
 <li><a href="#">Home</a></li>
 
 <li><a href="#">News and Media</a></li>
 
 <li><a href="#">Tutorials</a></li>
 
 <li><a href="#">Tips and Tricks</a></li>
 
 <li><a href="#">Download</a></li>
 
 </ul>
 
 </div>
 
 </div>
 
 <div id="content">
 
 <div id="content-top">
 
 
 
 </div>
 
 <div id="content-main">
 
 <h3>Pelatihan Asisten</h3>
 
 <hr />
 
 
 
 Senin, 1 Maret 2010
 
 
 
 Mulai hari senin tanggal 1 hingga 3 Maret jurusan Teknik Elektro mengadakan pelatihan asisten. [...]
 
 </div>
 
 <div id="content-right">
 
 <h3>Program Studi</h3>
 
 <ul>
 
 <li><a href="#">S1 Pendidikan Teknik Informatika</a></li>
 
 <li><a href="#">S1 Pendidikan Teknik Elektro</a></li>
 
 <li><a href="#">D3 Teknik Elektro</a></li>
 
 <li><a href="#">D3 Teknik Elektronika</a></li>
 
 </ul>
 
 </div>
 
 </div>
 
 </div>
 
 <div id="footer">
 
 
 
 © 2010 Teknik Elektro UM. Malang, Indonesia.
 
 </div> 
 
 </div>
 
 </body>

PTI 478

Ketika Hidup Menjadi Hidup

Mung Mampir Ngombe

Selamat Datang--Welcome--Wellcommen--Ahlan Wasahlan--Sugeng Rawuh