• ..


Setelah sebelumnya kita membuat kerangka web dengan menggunakan HTML5, sekarang saya mencoba membuat desain halaman web sederhana dengan menggunakan HTML5 yang dipadukan dengan CSS.
Untuk tampilannya, bisa dilihat dibawah ini:

 


Desain diatas dapat dibuat dengan menggunakan kode HTML dibawah ini:


<!DOCTYPE HTML>
<html lang="en">

<head>
 <title>Teknik Elektro</title>
 <style type="text/css">
 body
 {
  margin: 5px auto;
  width: 1000px;
 }

 header,nav,section,aside,article,footer
 {
  display: block;
 }

 header
 {
  height: 120px;
  width: 1000px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/header.png")
 }

 nav
 {
  float: left;
  height: 30px;
  width: 1000px;
  background-color: white;
 }

 section
 {
  width: 1000px;
  height: 480px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/section.png")
 }

 aside
 {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  width: 280px;
  height: 405px;
 }

 article
 {
  float: right;
  margin: 20px;
  width: 650px;
  height: 405px;
 }

 footer
 {
  text-align: center;
  clear: both;
  padding: 7px;
  width: 1000px;
  height: 40px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/footer.png");
  background-repeat: no-repeat;
 }

 linkmenu a:link, linkmenu a:visited, linkmenu a:active
 {
  text-decoration: none;
 }

 linkmenu a
 {
  margin-left: 15px;
  font-weight: bold;
  color: white;
 }

 .logo
 {
  float: left;
  margin: 20px;
  width: 120px;
  height: 80px;
 }
 
 .te
 {
  float: left;
  margin-top: 40px;
  width: 800px;
  height: 80px;
 }
 
 .menu
 {
  float: left;
  margin-left: 2px;
  padding: 2px;
  width: 80px;
  height: 25px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/kotak.png");
  background-repeat:no-repeat;
 }
 
 .menu1
 {
  float: right;
  margin-left: 2px;
  padding: 2px;
  width: 80px;
  height: 25px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/kotak.png");
  background-repeat:no-repeat;
 }
 
 .search
 {
  float: right;
  border: 0.5px solid #00a7d7;
 }
 
 .article
 {
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/article.png");
  padding: 20px;
  width: 610px;
  height: 240px;
  background-repeat: no-repeat;
 }
 
 .event
 {
  width: 650px;
  height: 120px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/event.png");
  padding: 10px;
  background-repeat: no-repeat;
 }

 list
 {
  list-style-position: inside;
 }
 </style>
 <LINK REL="SHORTCUT ICON" HREF="http://i371.photobucket.com/albums/oo155/haqiphoenix/TE-icon.png" 

/>
</head>

<body>
 <header>
  <div class="logo">
   <img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/te-logo.png">
  </div>
  <div class="te">
   <img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/teknikElektro.png">
  </div>
  </header>
<hr color=blue></hr>
 <nav>
  <linkmenu>
   <div class="menu">
    <a href="#">Home</a>
   </div>
   <div class="menu">
    <a href="#">Profile</a>
   </div>
   <div class="menu">
    <a href="#">News</a>
   </div>
   <div class="menu">
    <a href="#">E-book</a>
   </div>
   <div class="menu1">
    <a href="#">Search</a>
   </div>
   <div class="search"><input background color="blue" type="text"></div>
  </linkmenu>

 </nav>

 <section>
  <aside>
   <img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/gambar.png">
  </aside>
  
  <article>
   <div class="article">
   Pada bab sebelumnya telah dibahas apa itu CSS (Cascading Style Sheet) dan bagaimana 

cara penggunaannya secara mendasar. Pada bab ini akan membahas lebih lanjut mengenai fungsionalitas CSS 

secara spesifik berkaitan dengan desain web.
Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman website. Dalam desain web yang 

baik, unsur estetika yang harus diperhatikan adalah: warna, tata letak, dan bentuk. Ketiga unsur tersebut 

dapat diatur dengan menggunakan CSS, seperti mengatur warna background, warna huruf, bentuk menu, letak 

menu, dan lain sebagainya.Pada bab sebelumnya telah dibahas apa itu CSS (Cascading Style Sheet) dan 

bagaimana cara penggunaannya secara mendasar. Pada bab ini akan membahas lebih lanjut mengenai 

fungsionalitas CSS secara spesifik berkaitan dengan desain web.
   </div>
   <div class="event">
   <ul>
    <li><a href="#">Elektro Fun and Challenge</a></li>
    <li><a href="#">Elektro Cup 2011</a></li>
    <li><a href="#">Kunjungan Industri 2011</a></li>
    <li><a href="#">Praktek Industri</a></li>
   </ul>
   </div>
  </article>
  
 </section>
 
 <footer>
  Home   |   Profile   |   News   |   E-Book <pre></pre>&copy; haqiphoenix 2011
 </footer>
</body>javascript:void(0)
</html>