• ..


Kali ini, saya mencoba membuat kerangka sebuah web dengan menggunakan HTML5. HTML5 sendiri masih tergolong sangat jarang digunakan. Selain itu, HTML5 juga menuntut kompatibilitas sebuah browser, tidak semua broses dapat mendukung penggunaan HTML5.
Berikut ini adalah contoh tampilan kerangka web menggunakan HTML5 :




Untuk kode HTML-nya dapat dilihat dibawah ini :

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

<head>
 <title>Desain Layout html5</title>
 <link rel="Stylesheet" href="studikasus.css" type="text/css">
</head>

<body>
 <header>
  header 
 </header>
 
 <nav>
  nav
 </nav>
 
 <section>

  <article>
   article
  </article>
  
  <aside>
   aside
  </aside>
 </section>
 
 <footer>
  footer
 </footer>
</body>
</html>

Sedangkan untuk kode css-nya, dapat dilihat dibawah ini:
body
{
 margin: 10px auto;
 width: 750px;
}

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

header
{
 height: 80px;
 border: 1px solid green;
 width: 750px;
}

nav
{
 float: left;
 height: 40px;
 border: 1px solid blue;
 width: 750px;
}

section
{
 width: 750px;
 height: 435px;
 border: 1px solid red;
}

aside
{
 float: left;
 margin: 20px;
 width: 400px;
 height: 350px;
 border: 1px dashed red;
}

article
{
 float: right;
 margin: 20px;
 width: 250px;
 height: 350px;
 border: 1px dashed black;
}

footer
{
 clear: both;
 width: 750px;
 height: 20px;
 border: 1px solid green;
}