RSS

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

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

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

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

TUGAS PRAKTIKUM 3

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

STUDI KASUS WEB MODUL 3

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

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