Rabu, 24 Februari 2010

PTI 478

Tabel Perbandingan Item dengan Pengelompokan (HTML)

06.30
Pada kesempatan sebelumnya, kita telah membuat grafik batang statis dengan menggunakan elemn tabel. Sekarang kita mencoba untuk membuat contoh yang lain, yaitu membuat tabel perbandingan dengan adanya pengelompokan.


Cara mengelompokan tabel dengan menggunakan rules="groups", fungsinya digunakan untuk membuat garis horizontal per group data yang kita buat. Sedangkan colgroups digunakan untuk membuat garis-garis vertikal yang membatasi kolom-kolom pada tabel.


Contoh tampilan seperti di bawah ini: 



Adapun kode programnya seperti di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">


<head>
<title>Tabel Pengelompokan</title>
</head>


<body>
<font color="Black" face="Arial Black" size="5"> Tabel Dengan Fitur Pengelompokan </font>
<br/>
<br/>
<table border="2" cellspacing=0 frame=hsides rules="groups"
summary="Grafik Berbasis Tabel 2">
<caption>PERBANDINGAN FITUR</caption>
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center" span="2">
<thead valign="middle">


<tr>
<th width="35">No
<th width="200">Fitur
<th width="100">Enterprise
<th width="50">Pro
<th width="50">Free
</tr>


<tbody>
<tr><td>1<td>Garansi seumur hidup<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>4<td>Cetak laporan<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>5<td>Notifikasi error<td align="center">X<td align="center">X<td align="center">X</tr>


<tbody>
<tr><td>6<td>Ubah tema<td align="center">X<td align="center">X<td align="center">X</tr>
<tr><td>7<td>Try ikon<td align="center">X<td align="center">X<td align="center">X</tr>


</table>
<p >By... </p>
<p><em><a href="endrakilla.blogspot.com" target="_blank"><strong>endrakilla.blogspot.com</strong></a></em></p>


</body>
</html>

Untuk lebih kreatif, mungkin bisa mengedit body dengan mengisikan background atau ditambah oleh fitur yang lain. Untuk sementara sekian dulu, mungkin kalau ada masukan silakan menitipkan komentar di bawah. Semoga bisa bermanfaat. Trims.. :-)
  • »»  read more
  • 0 komentar

    • Selasa, 23 Februari 2010

    PTI 478

    Membuat grafik batang statis dengan menggunakan elemen tabel (HTML)

    06.00
    Dalam halaman web, kita pernah melihat tampilan grafik batang. Dalam hal ini, tampilan tersebut dibuat dalam format html.


    Di bawah ini, akan terlihat tampilan grafik batang statis dengan menggunakan elemen tabel. Di sini terdapat 2 kolom judul, yaitu perusahaan dan pendapatan. Kemudian dari pendapatan sendiri, menunjukkan sebuah persentase jika dibandingkan dengan yang sebelumnya. Biasanya digunakan angka-angka, tetapi di sini mencoba untuk mengubahnya menjadi grafik batang statis.





    Berikut juga disertakan coding dari tampilan seperti di atas.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>GRAFIK BERBASIS TABEL</title>


    </head>


    <body>


    <font color="Black" face="Arial Black" size="5" >Membuat grafik batang statis dengan menggunakan elemen tabel</font>
    <br/>
    <br/>
    <table width="600" >
    <tr>
    <td width="600" colspan="2">
    <table rules="rows" frame="hsides" align="left" cellspacing="0" cellpadding="10">
    <tr><!-- Mengatur lebar kolom -->
    <th width="200">PERUSAHAAN</th>
    <th width="500">PENDAPATAN</th>
    </tr>
    </table>
    </td>
    </tr>


    <tr>
    <td>
    <table frame="below" align="left" cellspacing="0"cellpadding="3">
    <tr><!-- Mengatur lebar kolom -->
    <td width="200">Angin Reboot Ltd</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="150" colspan="5" >
    <table border="1">
    <tr>
    <th width="150" height="16" colspan="5" bgcolor="#008000"></th>
    </tr>
    </table>
    </td>
    <td >+150%</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    </tr>


    <tr><!-- Mengatur lebar kolom -->
    <td width="200">Command Prompt Inc</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="50" colspan="2"><table border="1">
    <tr>
    <td width="50" height="16" colspan="2" bgcolor="#008000">
    </td>
    </tr>
    </table>
    </td>
    <td width="25">+50%</td>
    <td width="25"></td>
    <td width="25"></td>
    </tr>


    <tr><!-- Mengatur lebar kolom -->
    <td width="200">Hibernate Ltd</td>
    <td width="50"></td>
    <td width="25"></td>


    <td width="25" align="right">-23%</td>
    <td width="25"><table border="1" align="right">
    <tr>
    <td width="20" height="16" bgcolor="#FFFF00">
    </td>
    </tr>
    </table>
    </td>
    <td width="25"></td>
    <td width="25"></td>
    </tr>


    <tr><!-- Mengatur lebar kolom -->
    <td width="200">Shutdown Ltd</td>
    <td width="25"></td>


    <td width="25"></td>
    <td width="25">-75%</td>
    <td width="100"><table border="1">
    <tr>
    <td width="100" height="16" colspan="3" bgcolor="#FF0000">
    </td>
    </tr>
    </table>
    </td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <p >By... </p>
    <p><em><a href="endrakilla.blogspot.com" target="_blank"><strong>endrakilla.blogspot.com</strong></a></em></p>


    </body>
    </html>


    Mudah-mudahan contoh ini dapat bermanfaat bagi para pembaca. Silakan beri masukan di bawah ini, harap maklum (masih belajar). hehehe...Sampai jumpa di materi-materi lainnya..
  • »»  read more
  • 0 komentar

    • Minggu, 21 Februari 2010

    Assembly

    Modul Operasi Aritmatika

    18.16
    Salah satu bahasa pemrograman yang beredar di kalangan pendidikan yaitu bahasa pemrograman assembly atau biasa dikenal dengan bahasa rakitan. Pemrograman ini dipergunakan untuk menjalankan suatu perangkat keras dan dengan memasukkan perintah ke dalamnya.

    Operasi aritmatika juga biasa digunakan di dalamnya dengan elemen-elemen seperti pengurangan, penambahan, perkalian, pembagian, dan pembandingan. Berikut ini akan dilampirkan modul dari operasi aritmatika. Dapat didownload di sini atau pada link di bawah ini.

    http://www.ziddu.com/download/8686598/MODUL3OperasiAritmatika.pdf.html
  • »»  read more
  • 0 komentar

    • Rabu, 17 Februari 2010

    PTI 478

    HTML Validator

    05.20
    Dalam pemrograman web, biasanya dimulai dari tahap yang paling mudah, yaitu menggunakan HTML atau dengan script. Bagi para pemula, dianjurkan menggunakan HTML terlebih agar lebih paham dalam mengelola script dan mengerti fungsi masing-masing scripting.

    Untuk mengetahui script yang kita buat valid atau tidak, kita bisa menggunakan alat/tool pembantu. Ada bermacam-macam versi. Di sini versi khusus untuk mozilla firefox. Ini disertakan pada add-on firefox. Tetapi jika ingin mudahnya, bisa download add-on html validator terlebih dahulu kemudian bisa di-include-kan ke dalam add-on.

    File bisa didownload pada link di bawah ini. Pilih salah satu yang cocok dengan firefox anda.
    Selamat mencoba. ^_^

    http://www.ziddu.com/download/8627266/tidy_firefox_win_0853.rar.html
    http://www.ziddu.com/download/8627267/tidy_firefox_win_0861.rar.html
  • »»  read more
  • 0 komentar
    • PTI 478

    Daftar Alamat Blog PTI 07 A

    03.07
    Berikut adalah daftar alamat blog peserta matakuliah PTI478 Pemrograman Berbasis Web Offering A.

    Tita Sari Rahmawati http://rangerstita.blogspot.com
    Iva Asmaul Husna http://cewekit.blogspot.com
    Dwi Priyatmoko http://choeicruut.blogspot.com
    Nenen Virgin Setia H. http://intelegentshe.blogspot.com
    Yogy Ro’idah S. M. http://yluphe.blogspot.com
    Gilang Kurniaji http://warkop-it.blogspot.com
    Philip Faster Eka A. http://philipfaster.wordpress.com
    Arief Rahman Yusuf http://ariefrahmanyusuf.blogspot.com
    Aditya Imam Pratama http://adityaarema.blogspot.com
    Romita Apriyani http://meonependtium.blogspot.com
    Devi Artikasari http://dejoartiq.blogspot.com
    Aditya Yuli Setyawan http://adicagurti.blogspot.com
    Amanda Rehana A. T. http://arebeats.blogspot.com
    Retno Damayanti http://retnoimoetz.blogspot.com
    Endra Kuswara http://endrakilla.blogspot.com
    Ratna Agustyasari http://ratna-punya-blog.blogspot.com
    Novi Dyah P. http://vie218.blogspot.com
    Ni’mah Faadlilah http://nikmah-faa.blogspot.com
    Agustin Muvidhatul I. http://avie-agustine.blogspot.com
    Novi Khassifa http://messifa.blogspot.com
    Ratri Cahyaning W. http://ratrihere.blogspot.com
    Venty Yulita Fajarwati http://vjline.blogspot.com
    Rokhimatul Wakhidah http://rochipunya.wordpress.com
    Ulfa Fauziah http://ulfafauziah.wordpress.com
    Aldina Ramayumanti http://dsweetsite.blogspot.com
    Zakarya Firmansyah http://arya-image.blogspot.com
    Moh. Ramzul Haq http://cumiklugu.blogspot.com
    Evy Kamilah Ratnasari http://evykaer.blogspot.com
    Akbar Wiguna http://tigakarvak.blogspot.com
    Yandria Elmasari http://yand-oye.blogspot.com
    Yoel Kana Hariyono http://yoelkana.co.cc
    Admaja Dwi H. http://doublestick.blogspot.com
    Andhika Aratida P. http://mungmampirngombe.blogspot.com
    Ananda Eka Setiawan http://ananda.co.nr
    Moh. Suryawinata http://weenata.wordpress.com
    Masagung Hariyadi http://akoe46.blogspot.com
    Etistika Yuni Wijaya http://etestika.blogspot.com

    Sumber:  http://blog.elektro.um.ac.id/didik
    Baca selengkapnya »
  • »»  read more
  • 0 komentar

    • Senin, 08 Februari 2010

    Music

    Aku Percaya Kamu

    21.15
    Bukan maksud untuk menjiplak, tapi ini hanya sebatas persembahan kepada salah seorang masivers..
    Donwload lagu di sini
    (D'masiv with Endra)..


    Lirik:
    Aku Percaya Kamu
    Melebihi Apa Yang Orang Katakan Kepadaku
    Aku Percaya Kamu
    Tak Perduli Apa Yang Orang Katakan Tentang Kamu

    Yang Kutahu Kau Selalu Sejukkan Hatiku
    Yang Kutahu Kau Selalu Ada Di Saatku
    Membutuhkanmu Kau Selalu Ada
    Disaatku Rapuh

    Aku Percaya Kamu
    Hidup Ini Takkan Berarti Tanpa Kau Disisiku
    Aku Percaya Kamu…ooo…
    Kau Takkan Pernah Berhenti Tuk Selalu Mencintaiku

    Yang Kutahu Kau Selalu Sejukkan Hatiku
    Yang Kutahu Kau Selalu Ada Di Saatku
    Membutuhkanmu Kau Selalu Ada
    Disaatku Rapuh
    Disaatku Jatuh
  • »»  read more
  • 1 komentar
    • Langganan: Postingan (Atom)

    Pengikut