Type : Tutorial
Labels : HTML5
Level : Easy
Hello guys.
In this tutorial, i want to share how to create a simple chart on HTML5. I use only Table tag to create the chart, so lets check it out.
First, open your text editor, and start to type the opening of all html. If you are new to html, you should learn the basic first, its for your own sake /blush. You can learn the basic from here : http://www.w3schools.com/html/
If you want to skip to learn the basic, this is the basic code of all html page. :)
<!DOCTYPE HTML> <html lang="en"> <head> <title>Grafik statistik</title></head> <body> this is where you place your thing. </body> </html>Then you must learn how the table tag learn too. But if you insist to skip it too, /XD okay-okay, its yours:
<table align="center" border="0" cellpadding="0" cellspacing="0"> <tr style="height:20"> <td width="20">100</td> <td width="2" rowspan="15" bgcolor="black"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> <td width="20"></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td rowspan="11" bgcolor="blue"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td rowspan="10" bgcolor="red"></td> <td rowspan="10" bgcolor="lime"></td> <td></td> <td rowspan="10" bgcolor="aqua"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td rowspan="9" bgcolor="yellow"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td>50</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td rowspan="5" bgcolor="red"></td> <td></td> <td></td> <td></td> <td rowspan="5" bgcolor="aqua"></td> <td></td> <td></td> <td rowspan="5" bgcolor="blue"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="5" bgcolor="aqua"></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td rowspan="4" bgcolor="blue"></td> <td></td> <td rowspan="4" bgcolor="yellow"></td> <td></td> <td></td> <td rowspan="4" bgcolor="lime"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="4" bgcolor="lime"></td> <td rowspan="4" bgcolor="yellow"></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td rowspan="3" bgcolor="lime"></td> <td></td> <td></td> <td rowspan="3" bgcolor="yellow"></td> <td></td> <td></td> <td rowspan="3" bgcolor="red"></td> <td></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td rowspan="2" bgcolor="red"></td> <td></td> <td></td> <td rowspan="2" bgcolor="blue"></td> <td></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td></td> <td bgcolor="aqua"></td> <td></td> <td></td> </tr> <tr style="height:10"> <td>0</td> <td colspan="26" bgcolor="black"></td> </tr> <tr style="height:20"> <td></td> <td></td> <td></td> <td colspan="5"><center>Herlambang</center></td> <td></td> <td colspan="5"><center>Nidhom</center></td> <td></td> <td colspan="5"><center>Bian</center></td> <td></td> <td colspan="5"><center>Sonny</center></td> <td></td> </tr> </table> <p><br> </p> <table width="580" style="height:200" align="center" border="0" cellpadding="2" cellspacing="5"> <tr> <td width="50">Keterangan:</td> <td></td> </tr> <tr> <td bgcolor="red"></td> <td>: Kemampuan membaca</td> </tr> <tr> <td bgcolor="blue"></td> <td>: Kemampuan menulis</td> </tr> <tr> <td bgcolor="lime"></td> <td>: Kemampuan mendengar</td> </tr> <tr> <td bgcolor="yellow"></td> <td>: Kemampuan berbicara</td> </tr> <tr> <td bgcolor="aqua"></td> <td>: Kemampuan menggambar</td> </tr> </table>
Its very long script right? /sweat Make sure you place that code after <body> tag :)
-Fin /bye
Keyword (Indonesia) : tutorial html5 membuat diagram batang atau grafik sederhana di html
No comments:
Post a Comment