Tampilkan postingan dengan label PTI 479 (Belajar Web). Tampilkan semua postingan
Tampilkan postingan dengan label PTI 479 (Belajar Web). Tampilkan semua postingan

Minggu, 06 Maret 2011

Tugas Praktikum Modul 5 : Membuat Aplikasi Form Pemesanan

Berikut ini adalah tags HTML untuk membuat aplikasi form pemesanan berbasis javascript :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Warung Makan "LEBAY"</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var harga = document.form2;
var hargaBakso = 12000 * eval(harga.vBakso.value);
var hargaSoto = 10000 * eval(harga.vSoto.value);
var hargaMie = 15000 * eval(harga.vMie.value);
var hargaDegan = 5000 * eval(harga.vDegan.value);
var hargaCampur = 7000 * eval(harga.vCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
harga.Total.value = jumlahTotal;
harga.Diskon.value = 10000;
harga.Bayar.value = jumlahTotal - eval(harga.Diskon.value);
} else {
harga.Total.value = jumlahTotal;
harga.Diskon.value = 0;
harga.Bayar.value = jumlahTotal - eval(harga.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script><h3>Form Pemesanan Berbasis JavaScript</h3>


<form name="form2" action="#">
<table border="1px">
<tr bgcolor="lightgreen">
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr bgcolor="aqua">
<td>1</td>
<td>Bakso Istimewa</td>
<td>@ <input id="n123" type="text" name="bakso" value="12000" size="n6" disabled="true"/></td>
<td><input type="text" name="vBakso" size="n14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="aqua">
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="vSoto" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="aqua">
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="vMie" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="aqua">
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="5000" size="6" disabled="true"/></td>
<td><input type="text" name="vDegan" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="aqua">
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="vCampur" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="#9933ff">
<td colspan="3" align="right">Jumlah Total</td>
<td>Rp.<input type="text" name="Total" size="10" disabled="true" /></td>
</tr>
<tr bgcolor="#9933ff">
<td colspan="3" align="right">Diskon</td>
<td>Rp.<input type="text" name="Diskon" size="10" disabled="true" /></td>
</tr>
<tr bgcolor="#9933ff">
<td colspan="3" align="right">Jumlah Dibayar</td>
<td>Rp.<input type="text" name="Bayar" disabled="true" size="10" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>


Dan berikut adalah screenshot-nya :

Studi Kasus Modul 5 : Membuat Aplikasi Kalkulator Sederhana

Berikut ini adalah tags HTML untuk membuat aplikasi kalkulator sederhana berbasis javascript :

<!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">


<head>
<title>Kalkulator Sederhana</title>
<h3>Kalkulator Sederhana Berbasis Javascript</h3>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var x=eval(document.form1.x.value);
var y=eval(document.form1.y.value);
var pilih= document.form1.opt.value;
if (pilih == "tambah") {
var z = x + y;
}else if (pilih == "kurang") {
var z = x - y;
} else if (pilih == "kali") {
var z = x * y;
} else if (pilih == "bagi") {
var z = x / y;
}
document.form1.hasil.value = z;
}
function resetForm(){
document.form1.reset();
}
//-->
</script>


<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="CLEAR" onClick="resetForm()" />
</form>


</body>
</html>


Dan berikut adalah screenshot-nya :

Minggu, 27 Februari 2011

Tugas Praktikum Modul 4 : Membuat Desain Web

Berikut adalah tags HTML untuk membuat desain web :


    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>Teknik Elektro</title> 
    <link rel="icon" href="garaa.ico"> 
    <style type="text/css"> 
    <!-- 
    body, header, footer, nav, section{ 
    width : 1000px; 
    float : left; 
    } 
     
    header, footer, nav, section{ 
    padding : 5px; 
    } 
     
    header{ 
    font-size : 30px; 
    font-weight : bold; 
    height : 110px; 
    background-image: url(bg.png); 
    } 
     
    header div.logo, header div.title{ 
    float : left; 
    margin-left: 60px; 
    } 
     
    header div.title{ 
    width : 400px; 
    margin-top : 20px; 
    color : blue; 
    margin-left: 30px; 
    text-align : center; 
    } 
     
    nav{ 
    background-color : rgb(3, 157, 255); 
    } 
    nav div.search{ 
    float : left; 
    color : white; 
    } 
     
    nav div.menu{ 
    float : right; 
    } 
     
    nav div.menu div#submenu, nav div.menu div#submenu-kiri{ 
    float : left; 
border-radius : 30px; 
    padding : 3px; 
    background-color : #3366CC; 
    border : 1px solid brown; 
    width: 100px; 
    text-align : center; 
    } 
     
    nav div.menu div#submenu:hover, nav div.menu div#submenu-kiri:hover{ 
    color : blue; 
    background-color : white; 
    text-align : center; 
    } 
     
    nav div.menu div#submenu-kiri{ 
    border-radius : 30px; 
    padding : 3px; 
       text-align : center; 
    } 
     
    section{ 
    background-color: grey;
    } 
     
    article, aside{ 
    float : left; 
    } 
     
    article{ 
    width : 710px; 
    } 
     
    article div.profil, article div.info{ 
    padding : 5px; 
    } 
     
    article div.profil{ 
    background-color : rgba(255, 255, 255, 0.8); 
    height : 200px; 
    } 
     
    article div.info{ 
    background-color : #3366CC; 
    height : 150px; 
    } 
     
    aside{ 
    margin-right : 10px; 
    width : 275px; 
    } 
     
    footer{ 
    text-align : center; 
    font-size : small; 
    font-weight : bold; 
    color : black; 
    height : 30px; 
    background-image : url(bg.png); 
    background-position : bottom center; 
    } 
    -->  
    </style> 
    </head> 
    <body> 
    <header> 
    <div class="logo"> 
    <img width = "100" height= "100" src="um.png"> 
    </div> 
    <div class="title">TEKNIK ELEKTRO </div> 
    </header> 
    <nav> 
    <div class="search"> 
    <label>Search</label> 
    <input type="text" maxlength="20"> 
    </div> 
    <div class="menu"> 
    <div id="submenu-kiri">Home</div> 
    <div id="submenu">About Me</div> 
    <div id="submenu">Documents</div> 
    <div id="submenu">Software</div> 
    <div id="submenu">Games</div> 
    </div> 
    </nav> 
    <section> 
    <aside> 
    <img width="280" height="370" src="hitsugaya.jpeg"> 
    </aside> 
    <article> 
    <div class="profil">
      <p align="justify">Toushirou hitsugaya (&#26085;&#30058;&#35895; &#20908;&#29509;&#37070;, Hitsugaya Toushirou) adalah karakter fiksi dalam seri anime dan manga Bleach karya Tite Kubo. Dia adalah Kapten Divisi 10 dalam Gotei 13. Wakil kaptennya adalah Rangiku Matsumoto. Hitsugaya adalah karakter utama dalam film Bleach The Movie 2: The Diamond Dust Rebellion.<br>
      Toushirou terpilih menjadi karakter BLEACH paling populer dalam jajak pendapat Shonen Jump terakhir, menggantikan Ichigo Kurosaki yang sebelumnya menempati peringkat itu. Dia menerima 8273 suara, 383 suara lebih banyak daripada Rukia Kuchiki yang sebelumnya menempati peringkat kedua.</p>
      <p align="justify"><i>Sumber : http://id.wikipedia.org/wiki/Toushirou_Hitsugaya</i><br>
      </p>
    </div> 
    <div class="info"> 
        <font size="5" color="red"><b>Daftar isi  :</b></font> 
        <ul> 
            <li>Ciri-ciri</li> 
            <li>Sifat dan perwatakan </li> 
            <li>Masa kecil </li> 
            <li>Hyorinmaru</li> 
     
    </ul> 
    </div> 
    </article> 
    </section> 
    <footer> 
    |    Home | About Me | Documents | Software | Games    | 
     
    UM &copy 2011 Umam Almuqtashid
    </footer> 
    </body> 
    </html> 


Berikut adalah screenshotnya :

Studi Kasus Modul 4 : Membuat Layout

Berikut ini adalah tags style CSS untuk membuat desain layout HTML5 :


    body {  
    margin: 10px auto;  
    width: 1200px;  
    }  
    header,nav,section,footer{ 
    display:block; 
    border:3px solid blue; 
     } 
     
    header{ 
    height:100px; 
    } 
     
    nav{ 
    padding : 5px; 
    height:20px;  
    } 
     
    section{ 
    height:500px; 
    } 
     
    article{ 
    float:left; 
    margin-top:20px; 
    margin-right: 20x; 
    margin-left: 20px; 
    width: 600px; 
    height:450px; 
    border:1px dashed black; 
    } 
     
    aside{ 
    float:left; 
    margin-top:20px; 
    margin-right:20x; 
    margin-left:40px; 
    width: 520px; 
    height:450px; 
    border: 1px dashed black; 
    } 
     
    button{ 
    margin-right:20px; 
    border: 1px solid #000; 
    border-radius: 50px; 
    -moz-border-radius: 50px; 
    background-color : aqua; 
    color : black; 
    float:right; 
    } 
     
    footer{ 
    clear:both; 
    height:30px; 
    } 

Dan untuk script HTMLnya sebagai berikut :
    <!DOCTYPE HTML> 
    <html lang="en"> 
    <head> 
    <title>Desain Layout HTML5</title> 
    <link rel="stylesheet" href="study-kasus4.css" type="text/css" /> 
    </head> 
    <body> 
    <header> 
    HEADER 
    </header> 
    <nav> 
    NAV BAR 
    <button style="submit"><b>News</b></button> 
    <button style="submit"><b>Email</b></button> 
    <button style="submit"><b>About me</b></button> 
    <button style="submit"><b>Home</b></button> 
    </nav> 
    <section> 
    <article> 
    ARTICLE 
    </article> 
    <aside> 
    ASIDE 
    </aside> 
    SECTION 
    </section> 
    <footer> 
    FOOTER 
    </footer> 
    </body> 
    </html> 


Berikut adalah screenshotnya :

Tugas Praktikum Modul 3 : FACE-MU

Berikut ini adalah tags style CSS untuk membuat desain tampilan FACE-MU :


  .box1 {  
  float: right;  
  padding: 5px;  
  height: 100px;  
  } 
  .box2 {  
  float: right;  
  padding: 5px;  
  height: 100px;  
  } 
  #header{ 
  height: 80px; 
  background: blue; 
  } 
  #logo{ 
  float: left; 
  padding-left: 100px; 
  padding-top: 20px; 
  } 
 
  .box3 { 
  } 
  .box4 { 
  width: 1300px;  
  height: 18px;  
  background: #866BF1; 
  text-align:left;  
  font-size:8px; 
  color:blue 
  } 
  #pengantar { 
   float: left; 
   } 
  #map { 
   float: left; 
   width: 780px; 
   height: 380px; 
   } 
  #mainmap{ 
   width: 300px; 
   height: 200px; 
   padding: 50px; 
   color: #866BF1; 
    
   } 
  #daftar { 
   float: left; 
   padding: 5px; 
   width: 370px; 
   height: 380px; 
   color: #866BF1; 
    } 
    #bottom { 
   clear: both; 
   height: 30px; 
   background: #866BF1; 
   font-size:6px; 
   color: #bde0e6; 
    } 
    #footer { 
    float:left; 
    clear: both; 
    width: 1350px; 
    height: 20px; 
    background:blue; 
    margin :22px 0; 
    }  

Dan untuk script HTML-nya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Selamat Datang di FACE-MU</title>
<link rel="stylesheet" href="fm.css" type=text/css />
<link rel ="shortcut icon" href="icon.png">

<style type="text/css">
<!--
.style6 {color: #866BF1}
.style9 {
    font-size: 24px;
    font-weight: bold;
}
.style12 {color: #FFFFFF}
-->
</style>
</head>
<body background="bg2.jpg">
<div id="logo">
<img width="180"src="facemu.png"></div>

<div id="header">
<div class="box2">
 <br><input type="button" value="Login">  
</div>

 <div class="box1">
   Password :
     <br> <input type="text" size="25">
    <br> Lupa kata sandi anda ? </div>

 <div class="box1">
   Email
     <br><input type="text" size="25">
      <br><input name="checkbox" type="checkbox">
     Biarkan saya tetap masuk  </div>
</div>
<form>
 <div id="pengantar">
 <div id="map">
 <div id="mainmap">
 <font size="4">Face-mu membantu Anda terhubung dan berbagi 
 dengan orang-orang dalam kehidupan Anda di Indonesia </font>
 <img src="indo.png"> </div>
 </div>
  </div>
</form>
  <div id="daftar">
    <p class="style6"><span class="style9">Mendaftar</span>  
    <br>Gratis, sampai kapanpun  </p>
    <hr style="color: blue">
<form> 
 <table>
  <tr><td>Nama Depan :</td><td><input type="text" size="35"></td></tr>
  <tr><td>Nama Belakang :</td><td><input type="text" size="35"></td></tr>
  <tr><td>Email Anda :</td><td><input type="text" size="35"></td></tr>
  <tr><td>Masukkan Ulang Email :</td><td><input type="text" size="35"></td></tr>
  <tr><td>Kata Sandi Baru :</td><td><input type="text" size="35"></td></tr>
  <tr><td>Saya Seorang :</td><td>
  <select name="kelamin">
   <option value="pria" selected>Pria
    <option value="wanita">Wanita
     </select></td></tr>
    <tr><td>Tanggal Lahir :</td><td>
  <select name="tgl">
   <option value="01" selected>01
     </select>
  <select name="bln">
   <option value="Agustus" selected>Agustus
   </select>
     <select name="thn">
   <option value="1979" selected>1979
     </select></td></tr>
  </table>
</form>
 
<center> <input type="button" value="Mendaftar" background="blue"> </center>
</div>
 
<div id="footer">
  <div align="left" class="style12">    Face-mu &copy;     2011 Umam Almuqtashid </div>
</div>
</body>
</html> 


Dan gambar di bawah ini adalah screenshotnya :

Studi Kasus Modul 3 : Kreasi Objek

Berikut ini adalah tag HTML untuk membuat style border :



 <!-- UMAM ALMUQTASHID - 109533423225 - S1 PTI'09 - B -->
  
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Studi Kasus</title>
    <link rel="shortcut icon" href="icon.png"/>
    <style type="text/css">
    <!--
    .round{
    background-color:green;
    -moz-border-radius: 180px;
    -webkit-border-radius: 2px;
    border : 5px solid blue;
    padding : 30px;
    width : 150px;
    height : 150px;

    }
    -->
    
    <!--
    .box_round{
    background-color: pink;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-radius: 10px;
    border : 4px solid green;
    padding : 10px;
    width : 300px;
    height : 100px;

    }
    -->
    
    <!--
    .box_shadow{
    background-color : grey;
    -moz-border-radius-topleft: 0px;
    -moz-box-shadow: 10px 7px 5px #666666;
    -webkit-border-radius: 10px;
    border : 3px solid aqua;
    padding : 10px;
    width : 280px;
    height :80px;
    }
    -->
    </style>
    </head>
    <body>
    <div class="round" align="center">
    “Hari ini harus lebih baik dari hari kemarin dan hari esok adalah harapan.”.
    </div>
      <br /> 
         
    <div class="box_round">
    “Kebaikan tidak bernilai selama diucapkan akan tetapi bernilai sesudah dikerjakan.”.
    </div>
      <br /> 
         
    <div class="box_shadow">
    “Tidak ada kekayaan yang melebihi akal, dan tidak ada kemelaratan yang melebihi kebodohan.”.
    </div>
      </body>
    </html>


Screenshotnya bisa dilihat pada gambar di bawah ini :

Senin, 14 Februari 2011

Desain Link

Berikut ini merupakan tags HTML untuk membuat sebuah halaman website yang terdiri dari 3 buah tab menu, dengan memanfaatkan elemen tabel dan hyperlink :
 Tab menu FILM
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Download Dataku</title>
</head>
<body>
<table border=0 align="center"
cellpadding=10 cellspacing=0 bgcolor="#FFFFFF">
  <caption>
  <b>DOWNLOAD DATAKU</b>
  </caption>
  <!-- Header -->
  <tr>
    <!-- Mengatur lebar kolom -->
    <th width="1" rowspan="7" bgcolor="#00FF33">&nbsp;</th>
    <th width="1" bordercolor="#FFFFFF">&nbsp;</th>
    <th width="205" bgcolor="#009900"><a href="kasus2.html">Film</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2-2.html">Dokumen</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2-3.html">Musik</a></th>
    <th width="1">&nbsp;</th>
    <th width="1" rowspan="7" bgcolor="#00FF33"><div align="center"></div>
        <div align="center"></div>
      <div align="center"></div>
      <div align="center"></div>
    <div align="center"></div></th>
  </tr>
  <tr>
    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
    <td colspan="5" bgcolor="#009900">1. <a href="http://localhost/Trio_Macan_1.avi" title="Download langsung">Trio Macan - Iso Dicobo </a></td>
    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">2. <a href="http://localhost/Trio_Macan_2.avi" title="Download langsung">Trio Macan - Goyang Dangdut </a> </td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">3. <a href="http://localhost/Trio_Macan_3.avi" title="Download langsung">Trio Macan - Perahu Layar </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">4. <a href="http://localhost/Trio_Macan_4.avi" title="Download langsung">Trio Macan - SMS </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">5. <a href="http://localhost/Trio_Macan_5.avi" title="Download langsung">Trio Macan - Terlena </a></td>
  </tr>
  <tr>
    <td height="39" colspan="7" bgcolor="#00FF33"><div align="center">&copy;  Umam</div></td>
  </tr>
</table>
</body>
</html>


Tab menu DOKUMEN
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Download Dataku</title>
</head>
<body>
<table border=0 align="center"
cellpadding=10 cellspacing=0 bgcolor="#FFFFFF">
  <caption>
  <b>DOWNLOAD DATAKU</b>
  </caption>
  <!-- Header -->
  <tr>
    <!-- Mengatur lebar kolom -->
    <th width="1" rowspan="7" bgcolor="#00FF33">&nbsp;</th>
    <th width="1" bordercolor="#FFFFFF">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2.html">Film</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#009900"><a href="kasus2-2.html">Dokumen</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2-3.html">Musik</a></th>
    <th width="1">&nbsp;</th>
    <th width="1" rowspan="7" bgcolor="#00FF33"><div align="center"></div>
        <div align="center"></div>
      <div align="center"></div>
      <div align="center"></div>
    <div align="center"></div></th>
  </tr>
  <tr>
    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
    <td colspan="5" bgcolor="#009900">1.<a href="http://localhost/Jeni1.pdf" title="Download langsung"> Jeni 1 </a></td>
    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">2. <a href="http://localhost/Jeni2.pdf" title="Download langsung">Jeni 2 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">3. <a href="http://localhost/Jeni3.pdf" title="Download langsung">Jeni 3 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">4. <a href="http://localhost/Jeni4.pdf" title="Download langsung">Jeni 4 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">5. <a href="http://localhost/Jeni5.pdf" title="Download langsung">Jeni 5 </a></td>
  </tr>
  <tr>
    <td height="39" colspan="7" bgcolor="#00FF33"><div align="center">&copy;  Umam</div></td>
  </tr>
</table>
</body>
</html>

Tab menu MUSIK

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Download Dataku</title>
</head>
<body>
<table border=0 align="center"
cellpadding=10 cellspacing=0 bgcolor="#FFFFFF">
  <caption>
  <b>DOWNLOAD DATAKU</b>
  </caption>
  <!-- Header -->
  <tr>
    <!-- Mengatur lebar kolom -->
    <th width="1" rowspan="7" bgcolor="#00FF33">&nbsp;</th>
    <th width="1" bordercolor="#FFFFFF">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2.html">Film</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#00FF33"><a href="kasus2-2.html">Dokumen</a></th>
    <th width="1">&nbsp;</th>
    <th width="205" bgcolor="#009900"><a href="kasus2-3.html">Musik</a></th>
    <th width="1">&nbsp;</th>
    <th width="1" rowspan="7" bgcolor="#00FF33"><div align="center"></div>
        <div align="center"></div>
      <div align="center"></div>
      <div align="center"></div>
    <div align="center"></div></th>
  </tr>
  <!-- Baris data pertama -->
  <tr>
    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
    <td colspan="5" bgcolor="#009900">1. <a href="http://localhost/Remix.mp3" title="Download langsung">Herlambang Remix - Mixtape 1</a></td>

    <td rowspan="5" bgcolor="#009900">&nbsp;</td>
  </tr>
  <!-- Baris data kedua -->
  <tr>
    <td colspan="5" bgcolor="#009900">2. <a href="http://localhost/Remix2.mp3" title="Download langsung">Herlambang Remix - Mixtape 2 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">3. <a href="http://localhost/Remix3.mp3" title="Download langsung">Herlambang Remix - Mixtape 3 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">4. <a href="http://localhost/Remix4.mp3" title="Download langsung">Herlambang Remix - Mixtape 4 </a></td>
  </tr>
  <tr>
    <td colspan="5" bgcolor="#009900">5. <a href="http://localhost/Remix5.mp3" title="Download langsung">Herlambang Remix - Mixtape 5</a></td>
  </tr>
  <tr>
    <td height="39" colspan="7" bgcolor="#00FF33"><div align="center">&copy;  Umam</div></td>
  </tr>
</table>
</body>
</html>

Dan gambar di bawah ini adalah screenshot dari ketiga tab menu tersebut :


Tabel Perbandingan Sikap

Berikut ini merupakan tags HTML untuk membuat suatu tabel dengan memanfaatkan fitur pengelompokan :

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border=1 align="center"
cellpadding=10 cellspacing=0 bgcolor="#FFFFFF">
<caption>
PERBANDINGAN SIKAP
</caption>
<tr bordercolor="1">

<th width="39">No.</th>
<th width="200">Spesifikasi Sikap</th>
<th width="50">Poin</th>
<th width="130">Herlambang</th>
<th width="130">Nidhom</th>
<th width="130">Bian</th>
<th width="130">Sonny</th>
</tr>

<tr>
<td>1</td>
<td>Kerja keras </td>
<td>8</td>
<td><div align="center">X</div></td>
<td><div align="center">X</div></td>
<td><div align="center">-</div></td>
<td><div align="center">-</div></td>
</tr>

<tr>
<td>2</td>
<td>Tekun</td>
<td>9</td>
<td><div align="center">X</div></td>
<td><div align="center">X</div></td>
<td><div align="center">X</div></td>
<td><div align="center">-</div></td>
</tr>
<tr>
  <td>3.</td>
  <td>Tidak sombong </td>
  <td>6</td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">-</div></td>
</tr>
<tr>
  <td>4.</td>
  <td>Sabar</td>
  <td>7</td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">-</div></td>
</tr>
<tr>
  <td>5.</td>
  <td>Pemaaf</td>
  <td>10</td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
</tr>
<tr>
  <td>6.</td>
  <td>Pemalas</td>
  <td>-5</td>
  <td><div align="center"></div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">X</div></td>
</tr>
<tr>
  <td>7.</td>
  <td>Ceroboh</td>
  <td>-3</td>
  <td><div align="center"></div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">X</div></td>
</tr>
<tr>
  <td>8.</td>
  <td>Tinggi hati </td>
  <td>-7</td>
  <td><div align="center"></div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">X</div></td>
</tr>
<tr>
  <td>9.</td>
  <td>Pendendam</td>
  <td>-10</td>
  <td><div align="center"></div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">X</div></td>
</tr>
<tr>
  <td>10.</td>
  <td>Kurang vitamin </td>
  <td>-11</td>
  <td><div align="center"></div></td>
  <td><div align="center">X</div></td>
  <td><div align="center">-</div></td>
  <td><div align="center">X</div></td>
</tr>
<tr>
  <td colspan="3"><b>Jumlah poin </b></td>
  <td><div align="center">40</div></td>
  <td><div align="center">-11</div></td>
  <td><div align="center">1</div></td>
  <td><div align="center">-36</div></td>
</tr>
</table>
<p><i>
Source : Forbes Magazine - February 2011
</i>
<p>
&copy; ADH
 
</body>
</html>

Sedangkan screenshot-nya dapat dilihat pada gambar di bawah ini :

Membuat Grafik Batang Statis

Berikut ini merupakan tags HTML untuk membuat grafik batang statis dengan menggunakan elemen tabel :

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>GRAFIK SDN PENDTIUM</title>
</head>

<body bgcolor="#CCCCCC">

<h3 align="center">GRAFIK HASIL TES SD NEGERI PENDTIUM</h3>
<table border=0 align="center" cellspacing=0
cellpadding=5>

<tr>
<td width="10" bordercolor="#000000" bgcolor="#CCCCCC"><strong>100</strong></td>
<td width="1" colspan="-1" rowspan="13" bordercolor="#000000" bgcolor="#000000">&nbsp;</td>
<td width="10" rowspan="12"> </td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="3">&nbsp;</td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="5">&nbsp;</td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="10">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="11">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="10">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<tr>
<td rowspan="5" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="9" bgcolor="blue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="8" bgcolor="red">&nbsp;</td>
<td rowspan="8" bgcolor="green">&nbsp;</td>
<td rowspan="8" bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="7" bgcolor="yellow">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#CCCCCC"><strong>50</strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="5" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td rowspan="5" bgcolor="red">&nbsp;</td>
<td rowspan="5" bgcolor="aqua">&nbsp;</td>
<td rowspan="5" bgcolor="blue">&nbsp;</td>
<td rowspan="5" bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="4" bgcolor="blue">&nbsp;</td>
<td rowspan="4" bgcolor="yellow">&nbsp;</td>
<td rowspan="4" bgcolor="green">&nbsp;</td>
<td rowspan="4" bgcolor="green">&nbsp;</td>
<td rowspan="4" bgcolor="yellow">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="3" bgcolor="green">&nbsp;</td>
<td rowspan="3" bgcolor="yellow">&nbsp;</td>
<td rowspan="3" bgcolor="red">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2" bgcolor="red">&nbsp;</td>
<td rowspan="2" bgcolor="blue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#CCCCCC"><strong>0</strong></td>
<td colspan="25" bordercolor="#000000" bgcolor="#000000">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Herlambang</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Nidhom</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Bian</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Sonny</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>

<tr>
<td colspan="8" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="20" bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td colspan="8" bordercolor="#000000" bgcolor="#CCCCCC"><i><b>Keterangan : </b></i></td>
<td colspan="20" bgcolor="#CCCCCC">&nbsp;</td>
</tr>

<tr>
<td colspan="3" rowspan="5" bordercolor="#000000">&nbsp;</td>
<td colspan="5" bgcolor="red">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan membaca </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="blue">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan menulis </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="green">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan mendengar </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="yellow">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan berbicara </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="aqua">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan menggambar </i></td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>



Sedangkan screenshot-nya dapat dilihat pada gambar di bawah ini :

 

time2life © 2008 . Design By: SkinCorner