^

Saturday, September 3, 2011

Create a Simple Tab Like Page with HTML5





Type    : Tutorial
Labels : HTML5
Level   : Easy


Hi guys...
In this Tutorial, i want to share my project with HTML5. I want to create a Simple Tab Like Page on my Website. Its must be something like this.


And when i click the other tab, its look like this.


Its very simple to create "Tab Like" page like that. What you need is create three html, and link it with each other. In this case, i create studikasus.html, studikasus2.html, and studikasus3.html and link it each other. /shock


Source for studikasus.html
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Gambar-gambar Menarik</title> 
</head> 
 
<body bgcolor="black"> 
<table width="800" align="center" cellspacing="0"> 
  <tr> 
    <td width="15" rowspan="9" bgcolor="yellow"></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="white" align="center">Gambar Lucu</td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"><a href="studikasus2.html">Gambar Kreatif </a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"><a href="studikasus23.html">Gambar Unik </a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="15" rowspan="9" bgcolor="yellow"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="1-1.jpg">1. Sule Bieber </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="1-2.jpg">2. Sule Lagi </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="1-3.jpg">3. Sule Selalu</a> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="1-4.jpg">4. Sule Sule Sule</a> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="1-5.jpg">5. Pisang Sule</a> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td colspan="9" bgcolor="yellow" align="center">Copyright @ 2011 Gulpi Qorik O. P. </td> 
  </tr> 
</table> 
</body> 
</html>
Source for studikasus2.html

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Gambar-gambar Menarik</title> 
</head> 
 
<body bgcolor="black"> 
<table width="800" cellspacing="0" align="center"> 
  <tr> 
    <td width="15" rowspan="9" bgcolor="yellow"> </td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"> <a href="studikasus.html">Gambar Lucu </a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="white" align="center"> Gambar Kreatif </td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"> <a href="studikasus3.html">Gambar Unik</a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="15" rowspan="9" bgcolor="yellow"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="2-1.jpg">1. Monalisa </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="2-2.jpg">2. Monas </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="2-3.jpg">3. Motorcross </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="2-4.jpg">4. Monggo Madu </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="2-5.jpg">5. Mojokerto </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td colspan="9" bgcolor="yellow" align="center">Copyright @ 2011 Gulpi Qorik O. P. </td> 
  </tr> 
</table>  
</body> 
</html>

Source for studikasus3.html

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Gambar-gambar Menarik</title> 
</head> 
 
<body bgcolor="black"> 
<table width="800" cellspacing="0" align="center"> 
  <tr> 
    <td width="15" rowspan="9" bgcolor="yellow"> </td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"> <a href="studikasus.html">Gambar Lucu </a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="yellow" align="center"> <a href="studikasus2.html">Gambar Kreatif </a></td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="200" bgcolor="white" align="center">Gambar Unik</td> 
    <td width="15" bgcolor="black"> </td> 
    <td width="15" rowspan="9" bgcolor="yellow"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="3-1.jpg">1. Ajaib </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="3-2">2. Aneh tapi nyata </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="3-3.jpg">3. Bukan sulap </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="3-4.jpg">4. Bukan sihir </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"><a href="3-5.jpg">5. Tapi Penipuan </a></td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td bgcolor="white"> </td> 
    <td colspan="5" bgcolor="white"> </td> 
    <td bgcolor="white"> </td> 
  </tr> 
  <tr> 
    <td colspan="9" bgcolor="yellow" align="center">Copyright @ 2011 Gulpi Qorik O. P. </td> 
  </tr> 
</table> 
</body> 
</html>
Its done. Happy coding with your own creation, be creative!

You can view the demo below:
Demo Tutorial HTML5 Tab Like Page

-Fin /bye

Keyword (Indonesia) : tutorial html5 membuat halaman tab sederhana dengan html
Written by at 2:18 PM
Category:
Related Posts Plugin for WordPress, Blogger...

2 comments:

  1. rhecizenNovember 7, 2011 at 9:13 AM

    sampe sekarang saya masih sedikit bingung perbedaan html biasa sama html5 ^:)^

    ReplyDelete
  2. BangdosNovember 7, 2011 at 6:03 PM

    @rhecizen : wkwkwk, ada beberapa fitur yang di tambah di html5, seperti fitur canvas, yang memungkinkan kita menggambar sesuka hati di halaman html. juga memungkinkan untuk buat game dengan canvas nya html5. :)

    ReplyDelete

Subscribe to: Post Comments (Atom)