Best Blogger Template

Archive for 2011


Posted by Ariend_kireii 0 komentar

Studi Kasus modul 1

- Source code

<html>
<head>
<title>Studi Kasus Modul 1</title>
</head>

<body bgcolor = "black">
<font color="white"><h1 align="justify" font style="bold">Halaman Web Sederhana</h1> <hr/>
<font color="white">
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
<br/>
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
Lorem ipsum dolor sit amer, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br/>
<hr color="red"/>
<br/>
<hr color="blue" width="17%" align="right"/>
<br/>
<img src ="naruto.jpg" height="130" width="170" align = "right" border=3 />
<br/>
<p>
</body>
</html>

- Screenshot

Read More

Posted by Ariend_kireii 0 komentar

Tugas Praktikum Modul 5

--Source code pesan.html--
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript">
function diskon(){
    var total = parseInt(document.pemesanan.total.value);
    var diskon = 0;
  
    if(total >= 100000){
        diskon = 15000;
    }
    else if(total >= 50000){
        diskon = 10000;
    }
    else if(total >= 25000){
        diskon = 5000;
    }
  
    document.pemesanan.diskon.value = diskon;
}

function totalHarga(){
    var harga;
    var pesanan;
    var total = 0;
    for(i = 0; i < 10; i += 2){
        harga = parseInt(document.pemesanan[i].value);
        pesanan = parseInt(document.pemesanan[i + 1].value);
      
        if(pesanan > 0){
            total = total + (harga * pesanan);
        }
      
        document.pemesanan.total.value = total;
    }
}

function jumlahBayar(){
    var total = parseInt(document.pemesanan.total.value);
    var diskon = parseInt(document.pemesanan.diskon.value);
    var bayar = total - diskon;
  
    document.pemesanan.bayar.value = bayar;
}

function proses(){
    totalHarga();
    diskon();
    jumlahBayar();
}
function reset(){
    var elemen = document.pemesanan;
  
    elemen.pesan1.value = "";
    elemen.pesan2.value = "";
    elemen.pesan3.value = "";
    elemen.pesan4.value = "";
    elemen.pesan5.value = "";
    elemen.total.value = "";
    elemen.diskon.value = "";
    elemen.bayar.value = "";
}
</script>

</head>
<body bgcolor="Azure">
<h2>----- Form Pemesanan Berbasis JavaScript -----</h2>
<br>
<form name="pemesanan" action="#">
<table border="1" cellspacing="0">
<tr>
<th>No.</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="harga1" value="12000" onchange="proses()"/></td>
<td><input type="text" name="pesan1" onchange="proses()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="harga2" value="10000" onchange="proses()"/></td>
<td><input type="text" name="pesan2" onchange="proses()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="harga3" value="15000" onchange="proses()"/></td>
<td><input type="text" name="pesan3" onchange="proses()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="harga4" value="5000" onchange="proses()"/></td>
<td><input type="text" name="pesan4" onchange="proses()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()"/></td>
<td><input type="text" name="pesan5" onchange="proses()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="Batal" value="Batal" onclick="reset()"/>
</form>
<br>
</html>

--Screenshoot form pemesanan--

Read More

Posted by Ariend_kireii 0 komentar

Studi Kasus Modul 5

--Source Code kalkulator.js--
function kalkulator(){
var kalkulator = document.mat;
var input1 = parseInt(kalkulator.input1.value);
var input2 = parseInt(kalkulator.input2.value);
var operasi = kalkulator.operasi.value;
var hasil;

if(operasi == "tambah"){
hasil = input1 + input2;
}
else if(operasi == "kurang"){
hasil = input1 - input2;
}
else if(operasi == "kali"){
hasil = input1 * input2;
}
else{
hasil = input1 / input2;
}

kalkulator.hasil.value = hasil;
}

--Source code kalkulator.html--
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<body bgcolor="LightBlue">
<center>
<h2>-->> Kalkulator Sederhana <<--</h2>
<form name="mat" action="#">
<input type="text" size="7" name="input1">
<select name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">*</option>
<option value="bagi">:</option>
</select>
<input type="text" size="7" name="input2">
<input type="button" value="=" onclick="kalkulator()"/>
<input type="text" size="10" name="hasil" readonly>
</form>
</center>
</body>
</html>

--Screenshoot kalkulator--

Read More

Posted by Ariend_kireii 0 komentar

TUGAS PRAKTIKUM MODUL 4

- SOURCE CODE TP.CSS
body {
margin: 10px auto;
width: 750px;
}

header,nav,section,article,aside,footer {
display:block;
}

header{
border: 1px solid pink;
height:80px;
text-align:center;
background: #DB7093;
}

#logo{
clear: both;
margin-left: 100px;
}

nav{
height:40px;
background:#FFB6C1;
}

button{
float:right;
margin-left:5px;
background: #FF69B4;
}

input{
height:20px;
width:157px;
}

section{
height:400px;
}

article{
float:left;
width:37%;
height:100%;
text-align:center;
}

aside{
height:48%;
text-align:justify;
}

event{
float:left;
height:108%;
width:62.8%;
text-align:justify;
background:    #FFC0CB;
}

footer{
clear:both;
height:20px;
background: #DB7093;
text-align:right;
}

- SOURCE CODE TP.HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="tp.css" type="text/css" />
</head>
<body>

<header>
<div id="logo">
<img src="um.jpg" height="80" width="80" align = "left">
</div>
<h1>Teknik Elektro</h1>
</header>

<nav>
Search:<input> </input>
<button> Downloads </button>
<button> Tips & Tricks </button>
<button> Tutorials </button>
<button> News & Media </button>
<button> Home </button>
</nav>

<section> 
<article>
<img src="GG.jpg" height="390" width="265" border=5>
</article>
<aside>
<aside2>
Sebuah situs berita Cina baru-baru ini mengeluarkan sebuah artikel berjudul “Hangeng telah diremehkan oleh SNSD” dan menyebabkan kegemparan di antara para penggemar.
<p>
Situs media Cina yaitu sohu.com pada tanggal 25 mengatakan bahwa “Alasan mengapa Hangeng telah meninggalkan SM Ent tidak hanya karena ketidaksetujuaan dari kontrak yang telah membatasi aktivitasnya, tetapi ia juga merasa sakit hati karena ada perasaan bahwa ada artis lain yang tidak menyukainnya”
</p>
</aside2>
<event>
<h2>Event:</h2>
<ul><li><a href> profile</a>
<br><li><a href> galeri</a>
<br><li><a href> music</a>
</ul>
</event>
</aside>
</section>

<footer>
<b>© 2011 - Ariend Production</b>
</footer>
</body>
</html>

- SCREEN SHOT

Read More

Posted by Ariend_kireii 0 komentar

Studi Kasus Modul 4

-SOURCE CODE KASUS.CSS

body {
margin: 10px auto;
width: 750px;
}

header,nav,section,article,aside,footer {
display:block;
}

header{
border: 1px solid green;
height:80px;
text-align:center;
}

nav{
padding: 5px 5px 0px 5px;
border:1px solid blue;
height:40px;
}

button{
height:35px;
width:140px;
border:1px solid green;
}

input{
height:20px;
width:157px;
border:1px solid green;
}

section{
border:1px solid red;
height:400px;
}

article{
float:left;
margin-top: 25px;
margin-left:25px;
width:70%;
height:88%;
border: 1px dashed red;
text-align:center;
}

aside{
float:right;
margin-top: 25px;
margin-right:25px;
margin-left:25px;
height:88%;
width: 19%;
border: 1px dashed red;
text-align:center;
}

footer{
clear:both;
height:20px;
border:1px solid green;
}

- SOURCE CODE KASUS.HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="kasus.css" type="text/css" />
</head>
<body>

<header>
header
</header>

<nav>
<button> Home </button>
<button> Article </button>
<button> Download </button>
<button> About Us </button>
<input> </input>
</nav>

<section> 
<article>
article
</article>
<aside>
<button> Login </button>
aside
</aside>
section
</section>

<footer>
footer
</footer>

</body>
</html>

- SCREEN SHOT

Read More

Posted by Ariend_kireii 0 komentar

Tugas Praktikum Modul 3 -- CSS

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

--> SCREENSHOT <--

Read More

Posted by Ariend_kireii 0 komentar

Studi Kasus Modul 3 -- CSS

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

--> SCREENSHOT <--


Read More

Posted by Ariend_kireii 0 komentar

Studi Kasus Praktikum Web Modul 2

- Script Utama

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

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

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

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

</html>


- Script link1.html

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

<head>
<title>Demo Link</title>
</head>

<body>
Untuk kembali ke halaman pertama <a href="link2.html">Klik di sini</a>
</body>
</html>


- Script link3.html

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

<head>
<title>Demo Link</title>
</head>

<body>
<a href="link1.html">Klik di sini</a>
</body>
</html>


- Script link internal.html

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

<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>

<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.

<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.

<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</body>
</html>


- Screenshoot

Read More