Minggu, 13 Februari 2011

Membuat Desain Tabel Menggunakan Fitur Pengelompokan

Berikut Scriptnya...



<!DOCTYPE HTML>
<html lang="en">
<head>
<title> PERBANDINGAN SIKAP </title>
</head>
<body>
<table border="5" cellspacing=1 frame="hsides" rules="groups">
<caption><b>PERBANDINGAN SIKAP</b></caption>

<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<tr><th width="35">No.<th width="250">Spesifikasi Sikap
<th width="50">Poin
<th width="200"> Vertika
<th width="200">Agung
<th width="200">Alif
<th width="200">Rastra</tr>

<tbody>
<tr><td align="center">1
<td>Kerja Keras
<td align="center">8<td align="center">X
<td align="center">X
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">2
<td>Tekun
<td align="center">9<td align="center">X
<td align="center">X
<td align="center">X
<td align="center">-
</tr>
<tr><td align="center">3
<td>Tidak Sombong
<td align="center">6<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">4
<td>Sabar
<td align="center">7<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">5
<td>Pemaaf
<td align="center">10<td align="center">X
<td align="center">-
<td align="center">X
<td align="center">-
</tr>
<tbody>
<tr><td align="center">6
<td>Pemalas
<td align="center">-5<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">7
<td>Ceroboh
<td align="center">-3<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">8
<td>Tinggi Hati
<td align="center">-7<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tr><td align="center">9
<td>Pendendam
<td align="center">-10<td align="center">-
<td align="center">X
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">10
<td>Kurang Vitamin
<td align="center">-11<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tbody>
<tr>
<td colspan=3 align="center"><b>Jumlah Poin</b></td>
<td align="center">40</td>
<td align="center">-11</td>
<td align="center">1</td>
<td align="center">-36</td>
</tr>
</table>

<i>Source: Forbes Magazine - February. 2011 </i></br>
<br>&copy; vertika </br>

</body>
</html>

Membuat Grafik Batang Statis

Beriku ini scriptnya....



<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Grafik Batang</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<caption><b>GRAFIK HASIL TES SD NEGERI PANDEAN</b></caption>
<tr>
<td align="right">100</td>
<td rowspan=11 bgcolor=black></td>
<td width="15" height="20" colspan=25>
</tr>

<tr>
<td align="right">90</td>
<td width="15" height="20" colspan=26></td>
</tr>

<tr>
<td align="right">80</td>
<td width="15" height="20" colspan=25></td>
</tr>

<tr>
<td align="right">70</td>
<td width ="15" rowspan=7></td>
<td width ="15" height="40" rowspan=2></td>
<td width ="15" height="140" bgcolor=yellow rowspan=7></td>
<td width ="15" height="20" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=7></td>
<td width ="15" rowspan=7></td>

<td width ="15" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=7></td>

<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=7></td>

<td rowspan=5></td>
<td rowspan=6></td>
<td rowspan=6></td>
<td rowspan=4></td>
<td rowspan=3></td>

<td width ="15" rowspan=7></td>
</tr>

<tr >
<td align="right">60</td>
<td width ="15" bgcolor=green rowspan=6></td>
<td width ="15" height="120" bgcolor=red rowspan=6></td>
</tr>

<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
</tr>

<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=blue rowspan=4></td>
<td width ="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=green rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>

<tr >
<td align="right">30</td>
<td width ="15" height="60" bgcolor=purple rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
</tr>

<tr >
<td align="right">20</td>
<td width ="15" height="40" bgcolor=green rowspan=2></td>
<td width ="15" bgcolor=blue rowspan=2></td>
<td width="15" bgcolor=purple rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
</tr>

<tr >
<td align="right">10</td>
<td width="15" height="20" bgcolor=yellow rowspan=1></td>
<td width="15" bgcolor=green rowspan=1></td>
</tr>

<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>

<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>Herlambang</b></td>
<td></td>
<td colspan=5 align="center"><b>Nidhom</b></td>
<td></td>
<td colspan=5 align="center"><b>Bian</b></td>
<td></td>
<td colspan=5 align="center"><b>Sonny</b></td>
<td></td>
</table>

<br>
<br>

<table border=0 align="left" cellspacing=0 cellpadding=0>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>

<tr>
<td bgcolor=red width="40"></td>
<td><i> : Kemampuan membaca</i></td>
</tr>

<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Kemampuan menulis</i></td>
</tr>

<tr>
<td bgcolor=green width="40"></td>
<td><i> : Kemampuan mendengar</i></td>
</tr>

<tr>
<td bgcolor=blue width="40"></td>
<td><i> : Kemampuan berbicara</i></td>
</tr>

<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kemampuan menggambar</i></td>
</tr>

</table>
<pre>
<font face="times new roman">
&copy; vertika.com
</font>
</pre>
</body>
</html>

Jumat, 11 Februari 2011

Memanfaatkan Elemen Tabel dan Hyperlink




ini dia scriptnya, cekidot...


<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">Foto PTI'09 OFF B</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Bali</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Blitar</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Bondowoso</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Mojokerto</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Vertika </b></p></td>
</tr>
</table>
</body>
</html>



<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Film</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#47f20b"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">The Crazies</a></li>
<li><a href="www.4shared.com" title="Download Now">Harry Potter 7</a></li>
<li><a href="www.4shared.com" title="Download Now">In the Name of God</a></li>
<li><a href="www.4shared.com" title="Download Now">You Again</a></li>
<li><a href="www.4shared.com" title="Download Now">The Social Network</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Vertika </b></p></td>
</tr>
</table>
</body>
</html>



<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">Rihanna - Only Girl (In The World)</a></li>
<li><a href="www.4shared.com" title="Download Now">Sm*sh - I heart You</a></li>
<li><a href="www.4shared.com" title="Download Now"> Kerispatih – Tetap Mengerti (Menunggu)</a></li>
<li><a href="www.4shared.com" title="Download Now">Ungu – Dirimu Satu</a></li>
<li><a href="www.4shared.com" title="Download Now"> Dmasiv – Semakin</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Vertika </b></p></td>
</tr>
</table>
</body>
</html>

Membuat WEB Sederhana dengan HTML 5


Hasil web sederhana...
berikut scriptnya...


<!DOCTYPE HTML>
<html lang="en">
<head>
<title> WELCOME </title>
</head>

<body background="images/dasar.jpg">
<link rel="shortcut icon" href="images/jempol1.gif">
<h1>
<marquee direction=left bgcolor="green" scrolldelay=100>
<font face="Sin City">
<font color="black">...SELAMAT DATANG...</h1>
<hr/ color="purple">
</marquee>

<p align="center">
<font color="green">

<b>
<font face="Flubber" size=5>Inilah wadah apresiasi diri..
<br/>
</b>
<hr/ color="purple">

<p align="center">
<font color="purple">
<b>
<font face="a bug's life" size=4>
PROFIL
<br/>
</b>

<title>List</title>
<ol>
<li> Foto:</li><br/>
<img border=5 src="images/ve.jpg">
<li> Nama: Vertika Panggayuh</li><br/>

<hr color="purple" width="300" align="left">
<hr color="purple">

</ol>
</p>

</body>
</html>