Kreasi Grafik Batang Statis ~ Dream's Zone

Rabu, Februari 24

Kreasi Grafik Batang Statis

Posted by Wahyu Nur Hidayat, M.Pd on 21.29

Dalam pemrograman web HTML, kita dapat membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel. seperti contoh berikut:

Caranya:

1. Buka Editor teks dan kemudian ketikkan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en"> <head> <title>Grafik Berbasis tabel</title> </head> <body> Kreasi Grafik Statis <table width="561" height="241"> <tr> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;">Perusahaan</td> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;">Pendapatan</td> </tr> <tr>  <td width="172">Angin Reebot Ltd </td> <td width="27"></td> <td width="31"></td> <td width="25"></td> <td width="33"></td> <td width="16"></td> <td width="13"></td> <td colspan="6" bgcolor="#006600"></td> <td width="17">+150%</td> </tr> <tr> <td>Command Prompt, Inc </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td colspan="4" bgcolor="#006600"></td> <td width="16">+55%</td> <td width="16"></td> <td></td> </tr> <tr> <td>Hibernate Ltd </td> <td></td> <td></td> <td></td> <td>-23%</td> <td colspan="2" bgcolor="#FFFF00"></td> <td width="34"></td> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Shutdown Ltd </td> <td></td> <td>-75%</td> <td colspan="4" bgcolor="#FF0000"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="14" style="border-top:#000000 solid"></td> </tr> </table> </body> </html> 

2. Simpan dengan ekstensi .html
3. Eksekusi file tersebut sehingga tampilannya menjadi:

Dream's Zone

Rabu, Februari 24

Kreasi Grafik Batang Statis

0 comments:

Posting Komentar

Wahyu Penjual Mimpi

Labels

Ping Me!!

Blog Archive

pengunjung

Followers

Translate