Desain Halaman Web Sederhana menggunakan CSS

postingan sebelumnya telah dibahas tentang desain layout web, sekarang tinggal desain halaman web sederhana....silahkan di coba! Be Creative...!
Caranya:

Buat file CSS dengan nama file tugas2.css

* { margin: 0; }
body { padding:0; margin:5px auto; font:0.85em/160% Comic Sans MS; }
#wrapper { margin:auto; width:980px;}
#header { height:80px; margin:0px auto;background:#000;}
#header2{height:70px; margin:auto; background:#fff url(bg1.jpg);}
#subheader { clear:both; margin:auto; width:780px; height:140px; background-image:url(head2.jpg)}
#logoUM { float:left; margin:1px 1px 1px 1px; height:65px;}
#menu { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold; color:white;}
#title h2{ float:left; padding:0px 10px; height:40px; margin:20px 0px; font:2.1em/100% 'Cooper Black'; font-weight: bold;}
#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold; color:white;}
#inner { float:left; margin:0px;}
#footer { clear:both; height:60px; background:blue;}
#footer p { text-align:center;}
#sidebar { float:left; width:200px; height:400px; background-color:#99FF33}
#content { float:right; width:780px; height:400px; background:#fff}
#submenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;}
#submenu a { padding: 5px 0px 5px 15px; display:block; background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#submenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
#submenu ul { width:200px; list-style-type:none; padding:0; margin:0;}
#events-show { float:left; margin:auto; width:480px; height:240px;}
#events-show p, h3{ padding: 10px 20px 0px 20px; text-align:justify;}
#events-show hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;}
#events { float:right; margin:10px auto; width:260px; border: 2px solid green; background:#99FF33}
#events h3{ padding: 10px 20px 0px 20px; text-align:justify;}
#events ul{ padding: 10px 20px 20px 40px; list-style:square;}

Setelah itu buat file HTML dengan nama file sama, beda ekstensi (.html)

</p><p><!DOCTYPE html <br>     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" <br><br><head><br>  <title>Tugas P2</title><br>  <link type="text/css" rel="stylesheet" href="tugas2.css" /><br></head><br><br><body><br><div id="wrapper"><br>  <div id="header"><br>      <div id="header2"><br>       <br>       <div id="menu"><br>        Home | Sitemap | RSS | Contact | About Us<br>        </div><br><br>        <div id="logoUM"><br>        <img src="UM.png" width="65"/><br>        </div><br><br>        <div id="title"><br>        <h2>TEKNIK ELEKTRO</h2><br>        </div><br><br>        <div id="search"><br>        Search : <input name="q" size="20" type="text"/><br>        </div><br>        <br>      </div><br>  </div><br><br>  <div id="inner"><br>    <div id="sidebar"><br>      <div id="submenu"><br>        <ul><br>          <li><a href="#">Home</a></li><br>          <li><a href="#">News</a></li><br>          <li><a href="#">E-Book</a></li><br>          <li><a href="#">Download</a></li><br>        </ul><br>      </div><br>    </div><br>  <br>  <div id="content"><br>    <div id="subheader"><br>  </div><br>  <br>  <div id="events-show"><br>    <h3>Semarak Lomba Desain Header Blog</h3><br>    <hr /><br>    <p class="style1"><br>    Rabu, 10 Februari 2010<br>    <p><br>    Hari Senin kemarin (08/02/2010) para juri maupun panitia mengumumkan tiga pemenang lomba desain header blog yang diselenggarakan oleh Jurusan Teknik Elektro. dari peserta yang mengikuti sebanyak 17 orang, hasil karya yang telah diterima mencapai 100 lebih. antusiasme peserta lomba. [...] <br>  </div><br><br>  <div id="events"><br>    <h3>Events</h3><br>        <ul><br>            <li><a href="#">Pengukuhan Asisten Genap 2010</a></li><br>            <li><a href="#">Lomba Desain Header Blog Elektro</a></li><br>            <li><a href="#">SemNas</a></li><br>        </ul><br>    </div><br>  </div><br><br>  </div><br><br>  <div id="footer"><br>  <br/><br>  <p><b><font color="white">©2010 Teknik Elektro UM. Malang, Jawa Timur, Indonesia.</font></b></p><br>  </div><br>  <br></div><br><br></body></p><p><br></p><p><br>Bim salabim....Cring...cring...jadilah halaman web sederhana seperti yang terlihat di bawah ini:</p><p><br></p><p style="text-align: center; clear: both;" class="separator"><a style="margin-left: 1em; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJau3IbOPx86NNabywTrcHdBhWmMmdIZpOK8V8Rys9UopRVLvoAFssYkoN_FVasoVwndUxl-1aZZkL_rbllnHqAuUDPM64TCK2n3lKmvZfCPBKhJxInXtNvLlgwC-PGgOjK5cW0t9fD8/s1600-h/Screenshoot2.jpg" imageanchor="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJau3IbOPx86NNabywTrcHdBhWmMmdIZpOK8V8Rys9UopRVLvoAFssYkoN_FVasoVwndUxl-1aZZkL_rbllnHqAuUDPM64TCK2n3lKmvZfCPBKhJxInXtNvLlgwC-PGgOjK5cW0t9fD8/s400/Screenshoot2.jpg" style="" border="0" width="400" height="290"></a></p><p> Ma'af script buat HTMLnya masih 'Amburadul'...O iya jangan lupa untuk mempersiapkan terlebih dahulu gambar-gambar yang dibutuhkan untuk keperluan header dll. bisa dalam .jpg, .png, maupun .gif...</p><p><br></p><p>Selamat mencoba...Semoga Bermanfaat!<br></p><p><br></p>

Setelah membuat kedua file tersebut dalam satu folder...monggo sodara-sodara sekalian menikmati hasilnya,dengan cara dibuka file HTMLnya...