Intan Nur Varida

Senin, 07 Maret 2011

Program Kantin Online

Ini file kantin.js

Ini file kantinku.js

<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Kantin Sederhana</title>
<script language="JavaScript" type="text/javascript" src="kantin.js"></script>

</head>
<body>
<hr width="650px" size="10" color="pink" align="left">
<font size="6" color="black" face="Tahoma" ><b>Kantin Sederhana</b></font>
<hr width="650px" size="10" color="pink" align="left">
<form name="kantin" action="#">
<table border="5">
<tr bgcolor="Pink">
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Tahu Telurbebek</td>
<td>@<input type="text" name="harga1" value="8000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>Nasi Cumi Semrawut</td>
<td>@<input type="text" name="harga2" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>Gado-Gado Maknyus</td>
<td>@<input type="text" name="harga3" value="5500" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>Es Petir Seger</td>
<td>@<input type="text" name="harga4" value=4500" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>Es Dawet Ayu</td>
<td>@<input type="text" name="harga5" value="3500" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>

<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Jumlah Total</b></td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Diskon</b></td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Jumlah Dibayar</b></td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Promo :</b><br>
- Pembelian di atas Rp 50.000,00 akan dapatkan diskon sebesar Rp 10.000,00.<br>
- Selamat Menikmati Hidangan -<br>
<br>
<hr width="650px" size="10" color="pink" align="left">
</body>
</html>

Program Kalkulator Sederhana

Ini File calculator.js

Ini file kalkulator.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Program Kalkulator</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
</head>

<hr color="blue" width="500px" size="15px" align="left" />
<font size="5" color="blue" face="Calibri">Program Kalkulator Sederhana</font>

<hr color="blue" width="500px" size="15px" align="left" /><br>
<form name="calculator" action="#" >
<font face="Calibri">Masukkan Bilangan Pertama
<br>
<input type="text" size="20" name="nilai1" />
<br>
Masukkan Bilangan Kedua
<br>
<input type="text" size="20" name="nilai2" /></font><br>

<input name="op" type="button" value="+" onclick="tambah() " />
<input name="op" type="button" value="-" onclick="kurang() " />
<input name="op" type="button" value="x" onclick="kali() " />
<input name="op" type="button" value="/" onclick="bagi() " />

<br>
<br><font face="Comic Sans MS">Hasil
<br><input type="text" size="25" name="result" readonly /><br>
<br><input type="button" value="Hapus" onclick="reset()" /></br>

<br><hr color="blue" width="500px" size="15px" align="left"></hr>
<font size="2" color="black"><b>© 2011, CopyRight by Intan Nur Varida</b></font>
<hr color="blue" width="500px" size="15px" align="left"></hr>
</body>
</html>

Minggu, 27 Februari 2011

Tugas Praktikum MODUL 4

Ini dia Script dari tampilan diatas :

check this out :

Ini code css nya... Namanya gambar.css
body{
margin: 10px auto;
width : 1000px;
}

header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}

header{
height: 130px;
width: auto;

}

logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}

nama{
background-color : #8EB4E6;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}

info{
float: left;
font-family : Comic Sans MS ;
font-size : 15px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 20px;
background-color : blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

nav{
width: 1000px;
height: 30px;
background-color : #44B4D5 ;
color : black;
font-family: Times New Roman;
}

search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}

box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}

home, news, tutorial, tips, download{
display: block;
float: left;
background-color: blue;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}

home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}

news{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

tutorial{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

tips{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}

download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

section{
width : 1000px;
height : 415px;
background-color : #B8E2EF;
}

gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(bareng.jpg);

}

article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : white;
font-size : 15px;
font-family : Comic Sans MS;
}

event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #44B4D5 ;
}

footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #8EB4E6;
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}

linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}

linkmenu a{
padding: 2px 0px 2px 5px; display: block;

margin: 0px 0px 1px; color: white;
}

linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}

list{
list-style-position: inside;
}

Sedangkan Ini Kode HTMLnya :

<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>

<body>

<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>WELCOME to PTI OFF B</MARQUEE></info>
</header>

<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<news><a href="#" target="_blank" title="Kabar Berita">News</a></news>
<tutorial><a href="#" target="_blank" title="Materi Kuliah">Tutorial</a></tutorial>
<tips><a href="#" target="_blank" title="Aneka Tips dan Trik">Tips & Trik</a></tips>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>

<section>
<gambar></gambar>

<article>
PTI OFF B adalah salah satu kelas atau offering yang ada di Prodi S1 Pendidikan Teknik Informatika Jurusan Teknik Elektro Fakultas Teknik<br>
Kami Warga PTI B cukup bersahabat, suka jalan-jalan bersama-sama untuk mengakrabkan dan merefreshingkan diri<br>
Sekarang kami telah memasuki semester 4, semester yang cukup menguras energi<br>
Mungkin saat ini yang dibutuhkan adalah sedikit refreshing diantaranya:
<ul>
<li>Mengadakan Makan-makan bersama satu kelas</li>
<li>Jalan-jalan ke tempat wisata</li>
<li>Kunjungan Industri yang menyenangkan</li>
</ul>
Semoga masih ada waktu untuk melakukan semua itu, aminn....
</article>

<event><a href="#" target="_blank" title="The Learning University"></a>
<b> &nbsp EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Kuliah yuk Kuliah">Kuliah</a></li>
<li><a href="#" target="_blank" title="Kunjungan Industri">Kunjungan Industri</a></li>
<li><a href="#" target="_blank" title="Praktek Industri">Praktek Industri</a></li>
<li><a href="#" target="_blank" title="Wisuda Tepat Waktu">WISUDA</a></li>
</ul>
</event>
</section>
<footer>
Home | News & Media | Tutorial | Tips & Trik | Download
<br>&copy CopyRight Intan Nur Varida
</footer>
</body>
</html>

Studi Kasus Modul4

This is it source code nya...
silahkan mencoba

ini file cssnya dengan nama desain.css

body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}

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

header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}

nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}

section{
width : 900px;
height : 450px;
border : 1px solid red;
}

article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}

aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}

button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}

Sedangkan ini file htmlnya :

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

<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="desain.css" type="text/css" />
</head>

<body>

<header>
header
</header>

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

</nav>

<section>
<article>article...
</article>
<aside>
<button >L O G I N</button>
<br>
aside...
</aside>
section

</section>

<footer>
footer
</footer>

</body>
</html>

Kamis, 24 Februari 2011

Ayo Berkreasi Membuat Desain Layout

Bikin Tampilan Kayak facebook juga Bisa kok.. kayak gini nie..

nie Scriptnya kalo mau nyoba...

<!DOCTYPE html>

<html lang="en">

<head>

<title>Face-Mu</title>

<style type="text/css">

.header, .footer{

background-color : rgb(200,20,175);

}

.header{

height : 70px;

padding-top : 10px;

padding-bottom : 10px;

padding-left : 150px;

}

#lebar{

width : 1000px; 

}

.footer{

padding-top : 5px;

padding-bottom : 5px;

padding-right : 200px;

padding-left : 30px;

color : white;

font-family : Comic;

font-size : small;

font-weight : bold;

}

.bg-color{

height : 450px;

background-color : #FE67EB;

background-repeat : repeat-x;

}

.login{

float : right;

color : white;

font-family : comic;

font-size : small;

}

#logo{

margin-top : 20px;

float : left;

height : 35px;

}

#kanan{

float: left;

padding: 5px;

width:370px;

height: 380px;

}

#tengah {  

float: left;  

}  

#kiri {  

float: left;  

width: 780px;  

height: 380px;  

}  

#gambar{

padding-top : 10px;

padding-bottom : 10px;

padding-left : 150px;  

width: 400px;  

height: 200px;  

font-family : comic;

font-size : small;

font-weight : bold;

color: purple;  

}

#huruf{

font-family : comic;

font-size : small;

font-weight : bold;

line-height : 30px;

color: purple;  

}

#button_masuk{

background-color : purple;

color : white;

}

#button_daftar{

background-color : purple;

color : white;

}

</style>

<link type="image/x-icon" rel="icon" href="icon.png">

</head>

<body>

<div class="header">

<div id="lebar">

<div id="logo">

<img src="facemu.png">

</div>

<div class="login">

<table>

<tr>

<td>Email</td>

<td>Password</td>

<td>&nbsp;</td>

</tr>

<tr>

<td><input type="text"></td>

<td><input type="password"></td>

<td><input type="submit" value="Masuk" id="button_masuk"></td>

</tr>

<tr>

<td height="25"><input type="checkbox" checked>Ingat saya</td>

<td height="25">Lupa kata sandi?</td>

<td height="25">&nbsp;</td>

</tr>

</table>

</div>

</div>

</div>

<div class="bg-color">

<form action="my_action.jsp">  

<div id="tengah">  

<div id="kiri">  

<div id="gambar">  

<font size="5">Face-mu Untuk menghubungkan Anda Yang Bingung Mencari Wajah Baru </font>  

</br>

<img src="love.jpg" width=350 height=300>  

</div>  

</div>  

</div>  

</form>

<div id="kanan">  

<div id="huruf">

<h2>Registrasi Gopek Dulu  </h2>

<hr style="color: purple">  

<form action="my_action.jsp"> 

<table>  

<tr>

<td>Nama Depan :</td>

<td><input type="text" size="30"></td>

</tr>  

<tr>

<td>Nama Belakang :</td>

<td><input type="text" size="30"></td>

</tr>  

<tr>

<td>Email Anda :</td>

<td><input type="text" size="30"></td>

</tr>  

<tr>

<td>Kata Sandi Baru:</td>

<td><input type="password" size="30"></td>

</tr>  

<tr>

<td>Ulangi Kata Sandi:</td>

<td><input type="password" size="30"></td>

</tr>  

<tr>

<td>Jenis Kelamin :</td>

<td><select name="kelamin">  

<option value="pria" selected>Laki-laki 

<option value="wanita">Perempuan  

</select></td>

</tr>  

</table>  

</form>  

<input type="submit" value="Daftarkan Sekarang" id="button_daftar">  

</div>

</div>  

</div>

<div class="footer">

Powered by Intan Nur Varida - S1 PTI 2009 / Off - B - Inspired by SNSD

</div>

</body>

</html>

Membuat Bentuk Bentuk Menggunakan CSS

Mau Buat Yang Seperti ini???

this is it...

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Studi Kasus</title>
<style type="text/css">

</style>
</head>

<body>
<div class ="round" align="center">

Yang ini border lingkaran.Pendekatan yang digunakan masih sama lho. Mari Berkreasi!!!!!!!!!
</div><br>
<div class="ketupat">
Bisa gak bikin kreasi border kayak ini...
</div><br>
<div class="bayangan" align="center">
kalau ini efek shadowwwwww atau bayangan.......
</div>
</body>
</html>

Selasa, 15 Februari 2011

STUDY KASUS - MODUL 1

Script :

<!DOCTYPE HTML>

<html lang="en">

<head>

<!-- Ini baris komentar, tidak diproses -->

<title>The Story</title>

</head>

<link rel="shortcut icon" href="images/icon.gif">

<body background="BB.jpg">

<ol>

<hr />

<h2 align="left" bgcolor="white">FT ISLAND</h2>

<hr />

<h4>

</br>

<p>

</br>

<p align="Left"><b>1.Picture</b></font>

<p>

<img src="images/12.jpg" alt="idola"/ width = "200" >

<p align="Left"><b>2.Name</b></font>

<p align="Left">Lee Hong ki</font>

<p align ="Left"> Dia merupakan salah satu personil dari Grup band yang cukup terkenal di korea yaitu FT ISLAND</font>

<hr width ="500" align ="Left">

</hr>

</h4>

</ol>

</body>

</html>