-- My Country --

Glitter Words

Pages

Tuesday, February 8, 2011

Praktikum Pemrograman Berbasis Web

Membuat Grafik Batang Statis dengan Memanfaatkan Elemen Tabel


<!DOCTYPE html>
<html lang="en"><head>
<title>Grafik Berbasis tabel</title>
</head>
<body background="Pure_Descending.jpg"/>
<blink><font color="Blue" face="arial" size="5" >Grafik Berbasis Tabel</font></blink><table width="561" height="241">
<hr>
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>
<div align="center">Perusahaan</div></td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>
<div align="center">Pendapatan</div></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="green" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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="green" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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="yellow" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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="red" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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>
<hr color="black">
</hr>
<marquee><font color="purple" face=”Times New Roman” size=”5">_Suastika Yulia Riska_ </font><font color="#fd1b04" face="times new roman" size="2"></marquee></font>

</body></html>

Membuat Design Tabel Perbandingan Item dengan Memanfaatkan Pengelompokan

<!DOCTYPE html>
<html lang="en">
<head>
<title>Grafik Berbasis Tabel_Fitur</title>
</head>

<body background="TransDoodle_by_whatl

ah.jpg"/>
<marquee>
<font color="purple" face="arial" size="5">Grafik Berbasis Tabel PERBANDINGAN FITUR </font>
</marquee>
<table width="470" height="401" border="1" align="center">
<tr>
<td width="470" colspan="8" align="center"><font color="magenta" face="Times New Roman"
size="5"><strong>PERBANDINGAN FITUR</strong></font></td>
</tr>
<tr>
<hr color="purple"/><td width="31" align="center"><strong>No</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="208" align="center"><strong>Fitur</strong></td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"></td>
<td width="92"
align="center"><strong>Enterprise</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="0" align="center"><strong>Pro</strong></td>
<td width="0" align="center"><strong>Free</strong></td>
</tr>
<tr>
<td colspan="8" style="border-top:#0
00000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td><td align="center">-</td>
<td align="center">-</td>
</tr>
<tr><td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td><td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td><td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td><td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin" ></td>
</tr>
<tr>
<td align="center">6</td><td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr><td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"> </td></tr>
</table>
<br>
<hr color='pink'/>
<BLINK><font color="purple" face="Harlow Solid Italic" size="5" >Created By : Suastika Yulia Riska </font></BLINK><BR><hr color='pink'/>
<br><font color="purple" face="Bookman Old Style" size="4" >S1 PENDIDIKAN TEKNIK INFORMATIKA UM 2009</font></br>
</body>
</html>

Membuat Design Frame dengan Melibatkan 5 halaman HTML


Sintak untuk pembuatan HTML secara keselu
ruhan adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title>~ All About Music ~</title>
</head>
<frameset rows="15%,*,15%">
<frame src="atas.html" name="atas" id="atas"/>
<frameset cols="20%,*,20%">
<frame src="kiri.html" name="kiri" id="kiri"/>
<frame src="tengah.html" name="tengah" id="tengah"/>
<frame src="kanan.html" name="kanan" id="kanan"/>
</frameset>
<frame src="bawah.html" name="bawah" id="bawah"/>
</frameset>
</html>

Sintak untuk pembuatan HTML dibagian atas frame adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title>top of dekstop</title>
</head>
<body background="Fotolia_8758757_XS1-300x240.jpg">
<h1 align="center"><marquee><font face="Jokerman" color="Purple">~ All About Music ~</font></marquee></h1>
</body>
</html>

Sintak untuk pembuatan HTML dibagian kiri frame adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
</head>
<body background="Black.jpg">
<img src="d.jpg" width="120"/>
<font size="5" align="center" color="pink" face="Times New Roman"><strong>Alat-Alat Musik :</strong></font>
<br><img src="a1.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Angklung</font>
<br><img src="alat-musik-melayu-gambus.jpg" width="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Gambus</font>
<br><img src="kendang.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Kendang</font>
<br><img src="violin.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Biola</font>
<br><img src="JAS-769GLJupiter769AltoSaxSaxophone.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Saxophone</font>
<br>
<a href="tengah.html">Klik di sini untuk masuk ke halaman utama</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian tengah frame adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title>Lirik</title>
</head>
<body background="Summer vacation.jpg"><font color="pink"><b>
<h2 id="Menu"><font face="Harlow Solid Italic" color="white" size="10">Kumpulan Lirik Lagu Indonesia</font></h2>
<ol>
<li><a href="#Rain">1. The Rain - Perjalanan Tak Tergantikan</a></li>
<li><a href="#Ungu1">2. Ungu - Percaya Padaku</a></li>
<li><a href="#Ungu2">3. Ungu - Kuingin Selamanya</a></li>
<li><a href="#Nikita">4. Nikita Willy - Kutetap Menanti</a></li>
<li><a href="#Vierra">5. Vierra - Takut</a></li>
</ol>
<br><img src='playguitar.jpg' height='200' border='8' align='right'/>
<h3 id="Rain"><font color="Magenta">Perjalanan Tak Tergantikan</font></h3>
<br>
<br>[*]
<br>Ku langkahkan kakiku jalan ini
<br>Dalam terpaan badai gelapnya hari
<br>
<br>Tak tahu bagaimana cerita ini
<br>Akan berujung nanti aku tak tahu
<br>
<br>[**]
<br>Selama darahku masih mengalir di nadi
<br>Selama itu pula aku akan bernyanyi
<br>
<br>[***]
<br>Tiap persinggahan ada ribuan kenangan
<br>Perjalanan ini tak akan pernah tergantikan...
<br>
<br><i>Back to [*][**][***]</i>
<br>Tak akan tergantikan
<br>Tak akan tergantikan
<br>Tak akan terganti

<br><a href="#Menu">Ke menu utama</a></dd>
</dl>
<br>
<h3 id="Ungu1"><font color="magenta">Percaya Padaku</font></h3>
<br>
<br>Aku tak tahu
<br>Apa yang kurasakan
<br>Dalam hatiku
<br>Saat pertama kali lihat dirimu melihatmu
<br>
<br>Seluruh tubuhq terpaku dan membisu
<br>Detak jantungku berdebar tak menentu
<br>Sepertinya aku
<br>Tak ingin berlalu
<br>
<br><i>Reff :</i>
<br>Berikan cintamu juga sayangmu
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br>Kuberikan cintaku juga sayangku
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br>Saat ku tau kau akan pergi jauh
<br>Ijinkan aku tuk selalu menantimu
<br>Untuk katakan ku ingin dirimu
<br>Agar kau tau betapa ku terlalu mencintaimu
<br>Aku akan menunggu
<br>Hingga dirimu kembali untukku
<br>
<br><i>Back to Reff...</i>
<br>Tolonglah aku bagaimana diriku
<br>Ungkapkan itu rasa yang membelenggu
<br>Dalam hatiku ku cinta padamu....
<br>
<br><i>Back to Reff...</i>
<br>Berikan cintamu juga sayangmu
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
<h3 id="Ungu2"><font color="magenta">Kuingin Selamanya</font></h3>
<p>
<br>Cinta adalah misteri dalam hidupku
<br>Yang tak pernah ku tahu akhirnya
<br>Namun tak seperti cintaku pada dirimu
<br>Yang harus tergenapi dalam kisah hidupku
<br>
<br><i>Reff:</i>
<br>Ku ingin slamanya mencintai dirimu
<br>Sampai saat ku akan menutup mata dan hidupku
<br>Ku ingin slamanya ada di sampingmu
<br>Menyayangi dirimu sampai waktu kan memanggilku
<br>
<br>Ku berharap abadi dalam hidupku
<br>Mencintamu bahagia untukku
<br>Karena kasihku hanya untuk dirimu
<br>Selamanya kan tetap milikmu
<br>
<br><i>Back to Reff</i>
<br>
<br>Di relung sukmaku
<br>Ku labuhkan seluruh cintaku
<br>Di hembus nafasku
<br>Ku abadikan seluruh kasih dan sayangku
<br>
<br><i>Back to Reff</i>
<br><a href="#Menu">Ke menu utama</a>
<br>
<br>
<h3 id="Nikita"><font color="magenta">Kutetap Menanti</font></h3>
<p>
<br>Meski dirimu bukan milikku
<br>Namun hatiku tetap untukmu
<br>Berjuta pilihan disisiku
<br>Takkan bisa mengantikanmu
<br>
<br>Walau badai menerpa
<br>Cintaku takkan ku lepas
<br>Berikan kesempatan untuk membuktikan
<br>Ku mampu menjadi yang terbaik
<br>Dan masih menjadi yang terbaik
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Walau badai menerpa
<br>Cintaku takkan ku lepas
<br>Berikan kesempatan untuk membuktikan
<br>Ku mampu jadi yang terbaik
<br>Dan masih jadi yang terbaik
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Penantian panjang
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Cintaku padamu..
<br>Ku tetap menanti
<br>
<br>Meski dirimu bukan milikku
<br>Namun hatiku tetap untukmu
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
<br>
<h3 id="Vierra"><font color="magenta">Takut</font></h3>
<p>
<br>Ku tahu kamu bosan ku tahu kamu jenuh
<br>Ku tahu kamu tak tahan lagi
<br>Ini semua salahku ini semua sebabku
<br>Ku tahu kamu tak tahan lagi
<br>
<br>Jangan sedih jangan sedih aku pasti setia
<br>
<br>Aku takut kamu pergi
<br>Kamu hilang kamu sakit
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Jangan takut jangan sedih aku pasti setia
<br>
<br>Aku takut kamu pergi
<br>Kamu hilang kamu sakit
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Aku takut jangan takut kamu pergi takkan pergi
<br>Kamu hilang wooo kamu sakit
<br>Aku ingin aku juga kau di sini bersamamu
<br>Di sampingku di sampingmu selamanya
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
</b></font>
<br><a href="kanan.html">Klik di sini untuk mengetahui lirik lagu Indonesia Raya!</a>
<br><a href="kiri.html">Klik di sini untuk mengetahui Gambar Alat-alat musik!</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian kanan frame adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title>Indonesia</title>
</head>
<body background="Fotolia_music.jpg">
<img src="d.jpg" width="120"/>
<font size="5" align="center" color="black" face="Times New Roman"><strong>Indonesia Raya</strong></font>
<p>
<br><i>Ciptaan : W.R. Supratman / Wage Rudolf Supratman</i>
<br>
<br>Indonesia tanah airku
<br>Tanah tumpah darahku
<br>Disanalah aku berdiri
<br>Jadi pandu ibuku
<br>Indonesia kebangsaanku
<br>Bangsa dan Tanah Airku
<br>Marilah kita berseru
<br>Indonesia bersatu
<br>
<br>Hiduplah tanahku
<br>Hiduplah negriku
<br>Bangsaku Rakyatku semuanya
<br>Bangunlah jiwanya
<br>Bangunlah badannya
<br>Untuk Indonesia Raya
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Tanahku negriku yang kucinta
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Hiduplah Indonesia Raya
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Tanahku negriku yang kucinta
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Hiduplah Indonesia Raya
<br>
<br>Indonesia Tanah yang mulia
<br>Tanah kita yang kaya
<br>Di sanalah aku berada Untuk slama-lamanya
<br>Indonesia Tanah pusaka Pusaka Kita semuanya
<br>Marilah kita mendoa Indonesia bahagia
<br>
<br>Suburlah Tanahnya Suburlah jiwanya
<br>Bangsanya Rakyatnya semuanya
<br>Sadarlah hatinya Sadarlah budinya
<br>Untuk Indonesia Raya
<br>
<br>Indonesia Tanah yang suci Tanah kita yang sakti
<br>Disanalah aku berdiri 'njaga ibu sejati
<br>Indonesia! Tanah berseri Tanah yang aku sayangi
<br>Marilah kita berjanji Indonesia abadi
<br>
<br>Slamatlah Rakyatnya Slamatlah putranya
<br>Pulaunya lautnya semuanya
<br>Majulah Negrinya Majulah Pandunya
<br>Untuk Indonesia Raya
<br>
<a href="tengah.html">Klik di sini untuk masuk ke halaman utama</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian bawah frame adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
</head>
<body background="Fotolia_902163_M.jpg">
<font color="white" size="5"><b>Created By : Suastika Yulia Riska [109533414510]</font>
<br><font color="Purple" size="5"><b>Welcome to My Blog : </font>
<a href="suastika16.blogspot.com" target="tengah"><font color="blue" size="5">suastika16.blogspot.com</b></font></a>
</body>
</html>


Sintak tersebut saling terkait, sehingga semua halaman HTML bagian frame atas, kiri, tengah, kanan, dan bawah dipanggil total oleh "dekstop kasus.html".
SELAMAT mencoba... Semoga bermanfaat ^o^!!

0 komentar:

Post a Comment

 
Powered by Blogger