RSS
07.20 |

MODUL 5
TUGAS PRAKTIKUM

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

<head>
<title>Tugas Praktikum</title>
<script type="text/javascript" src="tuprak.js"></script>
</head>

<body>
<h2>Form Pemesanan Berbasis JavaScript</h2>
    <form name="mnda" action="#">
    <table border="1px">
        <tr>
            <th>No</th>
            <th>Makanan/Minuman</th>
            <th>Harga</th>
            <th>Pesan</th>
        </tr>
        <tr>
            <td>1.</td>
            <td>Bakso</td>
            <td>@ <input type="text" name="menu1" value="6000" disabled="true" /></td>
            <td><input type="text" name="pesan1" value="0" onchange="total(),diskon(),bayar()" onclick="nol1()" /></td>
        </tr>
        <tr>
            <td>2.</td>
            <td>Mie Goreng</td>
            <td>@ <input type="text" name="menu2" value="3500" disabled="true" /></td>
            <td><input type="text" name="pesan2" value="0" onchange="total(),diskon(),bayar()" onclick="nol2()" /></td>
        </tr>
        <tr>
            <td>3.</td>
            <td>Mie Ayam</td>
            <td>@ <input type="text" name="menu3" value="5000" disabled="true" /></td>
            <td><input type="text" name="pesan3" value="0" onchange="total(),diskon(),bayar()" onclick="nol3()" /></td>
        </tr>
        <tr>
            <td>4.</td>
            <td>Nasi Goreng</td>
            <td>@ <input type="text" name="menu4" value="6000" disabled="true" /></td>
            <td><input type="text" name="pesan4" value="0" onchange="total(),diskon(),bayar()" onclick="nol4()" /></td>
        </tr>
        <tr>
            <td>5.</td>
            <td>Telur Asin</td>
            <td>@ <input type="text" name="menu5" value="2000" disabled="true" /></td>
            <td><input type="text" name="pesan5" value="0" onchange="total(),diskon(),bayar()" onclick="nol5()" /></td>
        </tr>
        <tr>
            <td>6.</td>
            <td>Air Putih</td>
            <td>@ <input type="text" name="menu6" value="500" disabled="true" /></td>
            <td><input type="text" name="pesan6" value="0" onchange="total(),diskon(),bayar()" onclick="nol6()" /></td>
        </tr>
        <tr>
            <td>7.</td>
            <td>Es Teh Anget</td>
            <td>@ <input type="text" name="menu7" value="1500" disabled="true" /></td>
            <td><input type="text" name="pesan7" value="0" onchange="total(),diskon(),bayar()" onclick="nol7()" /></td>
        </tr>
        <tr>
            <td>8.</td>
            <td>Es Jeruk Anget</td>
            <td>@ <input type="text" name="menu8" value="2000" disabled="true" /></td>
            <td><input type="text" name="pesan8" value="0" onchange="total(),diskon(),bayar()" onclick="nol8()" /></td>
        </tr>
        <tr>
            <td>9.</td>
            <td>Teh Panas</td>
            <td>@ <input type="text" name="menu9" value="1500" disabled="true" /></td>
            <td><input type="text" name="pesan9" value="0" onchange="total(),diskon(),bayar()" onclick="nol9()" /></td>
        </tr>
        <tr>
            <td>10.</td>
            <td>SoGem</td>
            <td>@ <input type="text" name="menu10" value="5000" disabled="true" /></td>
            <td><input type="text" name="pesan10" value="0" onchange="total(),diskon(),bayar()" onclick="nol10()" /></td>
        </tr>
        <tr>
            <td colspan="3" align="right">Total Bayar</td>
            <td><input type="text" name="total_bayar" disabled="true" /></td>
        </tr>
        <tr>
            <td colspan="3" align="right">Diskon</td>
            <td><input type="text" name="pot_har" disabled="true" /></td>
        </tr>
        <tr>
            <td colspan="3" align="right">Jumlah Bayar</td>
            <td><input type="text" name="Jum_bayar" disabled="true" /></td>
        </tr>
    </table>
   
    Gak jadi :
    <input type="button" value=" Bantal " onclick="hapus()" />
   
    <p> &copy
    <a href="http://www.facebook.com/anggaconello">angga achmad c</a>

    </form>
</body>
</html>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
06.59 |

Modul 5
STUDI KASUS

<!DOCTYPE html>
<html lang="en">
<head>
    <title>kalkulator sederhana</title>

</head>

<body>
   
    <p>Kalkulator Sederhana dengan JavaScript
   
    <script language="JavaScript" type="text/javascript">
    <!--
function tambah() {
    var a = eval (document.form1.a.value)
    var b = eval (document.form1.b.value)
    c = a+b
    document.form1.hasil.value = +c
}

function kurang() {
    var a = eval (document.form1.a.value)
    var b = eval (document.form1.b.value)
    var c = a-b
    document.form1.hasil.value = +c
}

function kali() {
    var a = eval (document.form1.a.value)
    var b = eval (document.form1.b.value)
    var c = a*b
    document.form1.hasil.value = c
}

function bagi() {
    var a = eval (document.form1.a.value)
    var b = eval (document.form1.b.value)
    var c = a/b
    document.form1.hasil.value = c
}

function hapus () {
    document.form1.reset();
    }
-->
</script>

    <form name=form1 action="#">
    <p>Bilangan 1 :
    <input type="text" name="a" />
    <p>Bilangan 2 :
    <input type="text" name="b" />
   
    <p>
    <input type="button" value=" + " onclick="tambah()" />
    <input type="button" value=" - " onclick="kurang()" />
    <input type="button" value=" * " onclick="kali()" />
    <input type="button" value=" / " onclick="bagi()" />
   
    <p>Hasil :
    <input type="text" name="hasil" disabled="true" />
   
    <p>Bersihkan :
    <input type="button" value=" Clear " onclick="hapus()" />
    </form>
   
    <p> &copy
    <a href="http://www.facebook.com/angga conello">angga achmad c</a>
</body>
</html>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
06.26 |

Studi kasus Modul 4

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

<head>
    <title>studikasus</title>
    <link rel="stylesheet" href="studikasus.css" type="text/css" />
</head>

<body>
    <header>
    header
    </header>
  
    <nav>
    nav
    </nav>
  
    <section>
        <article>
        article
        </article>
      
        <aside>
        aside
        </aside>
      
    section
    </section>
  
    <footer>
    footer
    </footer>
</body>
</html>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
06.20 |

tugas prktikum.html modul 4

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

<head>
    <title>tugas rumahku</title>
    <link rel="stylesheet" href="tuprak.css" type="text/css" />
</head>

<body>
    <header>
        <kepala>
        <img src="gambar/embarrassed.png" />
      
        <span id="kata">
            <font color="purple"><h1>Oret-oretanku</h1><font>
        </span>
        </kepala>
  
    </header>
  
    <nav>
        <span id="search">
        search
        </span>
      
        <span id="kotak">
        <input type="text" />
        </span>
    <div id="kanan">
    <a href="#"><span>Home</span></a>
    <a href="#"><span>About me</span></a>  
    <a href="#"><span>Note</span></a>
    <a href="#"><span>Friend</span></a>
    </div>
    </nav>
  
    <section>
        <article>
        </article>
      
        <aside>
            <div id="satu">
            <h2>Cara Dia Memandang Cinta</h2>
            <p>
            "Katanya sih cinta, tapi sikapnya kok, tak berbicara begitu? Jangan terlalu cepat mengambil kesimpulan....
            Pertama, Anda perlu tahu dulu bahwa konsep cinta antara lelaki dan perempuan pada dasarnya memang berbeda....
            Salah satunya yang menarik adalah bagaimana kedua mahluk ini memandang cinta. Memang, membahas dan mengartikan cinta sendiri bukanlah perkara yang mudah...
            Secara gramatikal, cinta bisa dikatakan sebagai sebuah perasaan yang sangat mendalam, mengandung gejolak emosi positif dan bersifat subyektif.Namun, penelitian yang bisa menjelaskan secara gamblang tentang cinta sampai sekarang belum ada....."
            Menurut Natalie, cinta adalah sebuah perasaan yang universal sehingga akan selalu ada sampai kapan pun manusia itu ada.
            Sejak kecil kita, manusia, juga sudah diajarkan untuk mengenal cinta, walapun penerapannya berbeda setelah kita menginjak dewasa
            Itulah sebabnya, mengapa pengertian cinta antara lelaki dan perempuan, pada akhirnya juga berubah dan berbeda. Nah, seperti apakah perbedaan cinta di mata lelaki dan perempuan?.
            </div>
            <div id="dua">
                <span>Note : </span>
                <div id="note">
                <a href="#"><li>Alphabet Menuju Sukses</li></a>
                <a href="#"><li>Cara Dia Memandang Cinta</li></a>
                <a href="#"><li>Karena Cinta Tak Slalu Berwujud Bunga</li></a>
                <a href="#"><li>Mencintai adalah Keputusan</li></a>
                </div>
            </div>
        </aside>
      
    </section>
  
    <footer>
    <span id="bawah">
    &copy
    <a href="http://www.facebook.com/AnggaConello">Angga Conello</a>
    </span>
    <span id="tengah">Home | About me | Note | Friend</span>
    </footer>
</body>
</html>



tugas prktikum.css

body {
    width: 900px;
    border: 2px solid blue
    }
   
    header, nav, section, footer {
    display: block;
    }
   
    header {
    height: 100px;
    border: none;
    background-color: orange;
    }
   
        kepala {
            position: relative;
            left: 20px;
        }
       
        header #kata{
            float: left;
            margin: 10px;
        }
   
    nav {
    height: 40px;
    background-color: pink;
    }
   
        nav #search{
            float : left;
            margin: 10px;
        }
       
        nav #kotak{
            position: relative;
            top: 10px;
            width: auto;
            height: auto;
            border: 1px solid;
            float: left;
        }
       
        nav #kanan{
            position: relative;
            top: 5px;
            width: 400px;
            height: 30px;
            float: right;
        }
       
        #kanan span{
            position: relative;
            padding:3px 10px 3px 10px;
            margin:5px;
            top:5px;
        }
       
    section {
    height: 480px;
    }
   
        article {
            float: left;
            margin: 10px;
            width: 185px;
            height:460px;
            background-image: url(gambar/24795.gif);
        }
   
        aside {
            float: left;
            width: 585px;
            height: 450px;
        }
       
        aside #satu {
            border: 0px solid pink;
            height:70%;
        }
       
        aside #dua {
            border: 1px solid #f776bc;
            height:30%;
            background-color:pink;
            margin: 5px;
        }
       
        #note {
            margin: 10px;
        }
   
    footer {
    height: 40px;
    border: none;
    background-color: #f776bc;
    }
   
    footer #bawah {
        position: relatif;
        float:right;
        margin: 10px;
    }
   
    footer #tengah {
        position:relative;
        left:300px;
    }



  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream

TUGAS PRAKTIKUM 3

06.58 |

SCRIPT 

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

<head>
<title>Demo face-mu</title>
<link rel="shortcut icon" href="icon.png">
<style type="text/css">
<!--
#utama {
height: 590px;
}
#header {
height: 80px;
background: #4169E1;
}
#logo{
clear: both;
float: left;
padding-left: 150px;
padding-top: 20px;
}
.box1 {
float: right;
padding: 5px;
height: 80px;
color: #FFFFFF;
}
.box2 {
float: right;
padding: 5px;
height: 80px;
color: #FFFFFF;
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 780px;
height: 380px;
}
#subkiri{
width: 300px;
height: 200px;
padding: 50px;
color: #4169E1;
}
#kanan {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: #4169E1;
}
#footer {
clear: both;
height: 25px;
background: #4169E1;
font-size:7px;
color: #FFFFFF;
}
-->
</style>
</head>

<body background="bg.jpg">
<div id="utama">
<div id="header">
<div id="logo">
<img src="facemu.png">
</div>
<form>
<div class="box2">
<br><input type="button" value="masuk">
<br>
</div>
<div class="box1">
Password <br><input type="password" size="25">
<br>Lupa kata sandi anda?
</div>
<div class="box1">
Email <br><input type="text" size="25">
<br><input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
</form>
<div id="tengah">
<div id="kiri">
<div id="subkiri">
<font size="5">Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di

Indonesia
</div>
</div>
<div id="kanan">
<h2>Medaftar</h2>
Gratis, sampai kapanpun
<hr/>
<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="wanita" selected>Wanita
 <option value="pria">Pria
 </select></td></tr>
 </table>
</form>
<br><input type="button" value="DAFTAR">
</div>
</div>
<div id="footer">
<b>Face-mu © 2011 - Ariend Production</b>
</div>
</div>
</body>
</html>

Hasilnya




  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream

STUDI KASUS WEB MODUL 3

06.49 |

SCRIPT

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

<head>
<title>Demo Kreasi Border</title>
<style type="text/css">
<!--
#lingkaran{
width:200px;
height:200px;
border: 3px solid brown;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
background:#F08080;
text-align:center;
font-size:18px;
color:#008080
}
#text-lingkaran{
padding-left: 100px;
padding-top: 100px;
}
#round2 {
-moz-border-radius-bottomright: 25px 25px;
border-bottom-right-radius: 25px 25px;
-moz-border-radius-topleft: 25px 25px;
border-top-left-radius: 25px 25px;
border: 3px solid green;
padding: 10px;
width: 270px;
height: 30;
}
#round3 {
border: 2px solid #897048;
padding: 10px;
}
#shadow {
width: 300px;
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
-->
</style>
</head>

<body>
<p>
<div id="lingkaran">
<span id="text-lingkaran">
<br><br><br> Yang ini border Lingkaran!!
</span>
</div>
<br>
<div id="round2">
Bisa juga bikin kreasi border seperti ini.<br>
Hmmmm....... ^_^
</div>
<br>
<div id="shadow">
<p id="round3">Efek Shadow...
</div>
</body>
</html>

hasilnya

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
01.26 |

di bawah ini sintaks untuk membuat grafik dengan tabel sintaks

<!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" xml:lang="en" lang="en">
<head>
<title>TUGAS PRAKTIKUM 1</title>
</head>
<body>
<blink><font color="black" face="arial" size="5" >Grafik Berbasis Tabel  </font></blink>
<table width="561" height="241">
<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 >
<!–&nbsp;–>
<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"></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"></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"></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"></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>
<a href="TugasPrak2.html">Klik di sini</a> Untuk melihat tugas praktikum 2
<hr color="black">
</hr>
<marquee><font color="#0000FF" face="time new roman" size="4">ANGGA ACHMAD C/209533424907 PTI D </font>
</body>
</html>

printnya

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
01.19 |

tugas praktikum no 2 ini membuat grafik dengan menggunakan tabel

di bawah ini sintaksnya :

<!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">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>
<marquee>
<font color="Blue" face="arial" size="5">Grafik Berbasis Tabel 2 </font>
</marquee><table width="470" height="401" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4"><strong>PERBANDINGAN FITUR</strong></font></td>
</tr>
<tr>
<td width="31"align="center"><strong>No</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
<td width="208" align="center"><strong>Fitur</strong></td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0">&nbsp;</td>
<td width="92" align="center"><strong>Enterprise</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</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:#000000 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>
<BLINK><font color="Blue" face="arial" size="3"> ANGGA ACHMAD C (2095334244907) </font></BLINK><BR>
klik <a href="TugasPrak.html">Back</a> Untuk kembali ke tugas praktikum 1
</body>
</html>

printnya

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
01.03 |

Study kasus modul 2 ini membuat desain frame

sintaks :
<!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" xml: lang ="en">

<head>
    <title> Study Kasus Modul2</title>
</head>


<frameset>
<frameset rows="20%,*,20%">
<frame src="link.html"name="top" id="top" />
<frameset cols="20%,*,20%">
<frame src="link1.html" name="left" id="left" />
<frame src="link4.html" name="main" id="main" />

<frame src="link2.html" name="right" id="right" />
</frameset>
<frame src="link3.html" name="bottom" id="bottom" />


</frameset>

</html>



ini sintaks masih belum semuanya di upload karena di dalam ini menggunakan search link untuk menampilkan data di dalam frame dan harus satu – satu kalau mau ngasih scriptnya

print screan:

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)
Diposting oleh es cream
Langganan: Postingan (Atom)