Membuat Navigasi Pada Dokumen HTML5 ~ Sigit Purnomo Freedom

Minggu, 08 April 2012

Membuat Navigasi Pada Dokumen HTML5

Filled under:

Kebanyakan web mempunyai link navigasi. Link-link tersebut berupa hyperlink atau button, yang biasanya dipisahkan dari bagian dokumen dengan menggunakan elemen <div>. Akan tetapi, meskipun terpisah, itu tidak berarti secara spesifik digunakan untuk navigasi. Pada HTML5, kita dapat mengidentifikasi sesi untuk kebutuhan navigasi dalam markup.
Elemen struktural <nav></nav> dapat digunakan untuk membuat sebuah kontainer untuk menampung elemen navigasi keseluruhan dokumen HTML5 atau divisi lain dalam dokumen. Berikut contoh kode program untuk membuat elemen navigasi pada HTML5 :

<!DOCTYPE html>
 
<head>
<title>Membuat Navigasi pada HTML5</title>
</head>
 
<body>
<header>
<span style="color:red;font-style:italic;">
Baking Cheesecakes
</span>
<hr>
</header>
<nav>
<a href="/Baking/" target="_blank">Baking</a> |
<a href="/ingredients/" target="_blank">Ingredients</a> |
<a href="/mixing/" target="_blank">Mixing</a> |
<a href="/toppings/" target="_blank">Toppings</a>
</nav>
<hgroup draggable="true">
<h1>Cheesecake Tips and Techniques</h1>
<h2>Professional Tips</h2>
</hgroup>
<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">
To create a water bath, use a pan that will allow you to fill it with boiling water that
goes halfway up the spring form pan in which the cake is placed.
</aside>
<p>
When baking a cheesecake, it is important not to over bake it. You only want to bake it
until the middle has a slight wiggle, not until it is rock solid.
</p>
<p>It is important that you use a water bath, discussed at the right, to ensure even baking of
your cheesecake.</p>
<footer> &copy; 2011 - Better Made Cheesecakes - All rights reserved </footer>
 
</body>
 
</html>

Minggu, 08 April 2012