-- My Country --

Glitter Words

Pages

Thursday, March 10, 2011

Membuat Sign Up Form Sederhana dengan PHP (UTS)

Sebagai pemula pembuat web, tentunya kita harus mulai belajar dari dasar. Disini saya mencoba untuk sharing bagaimana cara membuat form sign up sederhana. Banyak orang menganggap belajar WEB itu ribet, pusing, sulit and semuanyaaaaa.... Tapi juga ada yang bilang "kalau mau belajar, WEB itu mudah kok!".... Nah, untuk itu bejalarnya juga harus dari dasar. Dibawah ini ada semacam script php yang bisa menjadikan reference dalam membuat suatu web. Silahkan menikmatiiiii... ^o^
Berikut ini adalah script untuk php :

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

<head>
<title>Sign Up Form</title>
</head>

<body bgcolor="feb6e5"/>
<font face = "Broadway" size= "8" align="center">::Sign Up Form::</font>
<br>
<br>
<br>
<?php
if($_GET){
$nama = $_GET['nama'];
$email = $_GET['email'];
$alamat = $_GET['alamat'];
$kota = $_GET['kota'];
$kode = $_GET['kode'];
$error = array();
if(empty($nama)){
$error['nama'] = 'Nama tidak boleh kosong';
}
if(empty($email)){
$error['email'] = 'Email tidak boleh kosong';
}
if(empty($alamat)){
$error['alamat'] = 'Alamat tidak boleh kosong';
}
if(empty($kota)){
$error['kota'] = 'Kota tidak boleh kosong';
}
if(empty($kode)){
$error['kode'] = 'Kode pos tidak boleh kosong';
}
if(empty($error)){
}
}
?>
<form action="" method="GET">
Nama :
<br><input type="text" name="nama" value ="<?php echo isset($_GET['nama']) ? $_GET['nama'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['nama']) ? $error['nama'] : '';?></div>
<br>
Email :
<br><input type="text" name="email" value = "<?php echo isset($_GET['email']) ? $_GET['email'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['email']) ? $error['email'] : '';?></div>
<br>
Alamat :
<br><input type="text" name="alamat" value = "<?php echo isset($_GET['alamat']) ? $_GET['alamat'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['alamat']) ? $error['alamat'] : '';?></div>
<br>
Kota :
<br><input type="text" name="kota" value = "<?php echo isset($_GET['kota']) ? $_GET['kota'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['kota']) ? $error['kota'] : '';?></div>
<br>
Kode pos :
<br><input type="text" name="kode" value = "<?php echo isset($_GET['kode']) ? $_GET['kode'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['kode']) ? $error['kode'] : '';?></div>
<br>
<input type="submit" value="Sign Up"/>
</form>
</body>
</html>


Setelah diklik "Sign Up", maka tampilan di bawah ini menampilkan data yang semua form diisi, sehingga tidak menimbulkan pemberitahuan error.



Setelah diklik "Sign Up", maka tampilan di bawah ini menampilkan pemberitahuan error, bahwa semua form harus diisi.

Thursday, March 3, 2011

Kata-Kata Inspirasi Menjadi Pilihan Hidup


==============================
Aku melewati apa yang telah terjadi
di belakangku dan berjalan mengarahkan
diri kepada apa yang ada di hadapanku.
==============================
===============================
Kesenangan bukan untuk dihabiskan sesaat,
namun untuk dinikmati dalam perjalanan
panjang. Inilah yang membuat hidup selalu
lebih bermakna.
===============================
===============================
Memang mudah memberikan penghakiman
kepada orang lain, semudah kita tidak mau
mempelajari orang itu.
===============================
===============================
Membangun hubungan yang kuat layaknya
menanam tanaman dengan segala upaya
dan perhatianyang nyata.
===============================
===============================
Kritik itu akan membangun jika dan hanya
jika dilakukan pada saat yang tepat.
===============================
===============================
Tuhan menciptakan manusia dengan dua
telinga dan satu mulut, mungkin agar kita
lebih banyak mendengarkan. Namun tidak
semata-mata demikian, telinga juga
dilengkapi "penyaring" agar kita mampu
memasukkan hal positif ke otak kita
===============================

Semoga kata-kata ini menjadikan pandangan hidup dan dapat membantu segala masalah yang rumit dalam kehidupan ini. Namun, sebanyak-banyaknya cobaan dalam hidup tidak mungkin jika tidak ada penyelesaian. Hanya saja penyelesaian suatu masalah tidak selalu seperti membalik telapak tangan. Jangan pernah menyerah! Hidup tak hanya sampai disini....

- GOOD LUCK -

* Tobe Continue in the next section ^o^

Tuesday, March 1, 2011

Membuat Aplikasi Form Pemesanan Berbasis JavaScript

Terkait pengembangan JavaScript, aplikasi ini dapat mempermudah dalam perhitungan harga harga suatu makanan, dikalikan dengan jumlah tiap-tiap menu yang telah dipesan.

Script html adalah sebagai berikut :


<!DOCTYPE html>
<html lang="en">
<head>
<body background="Wallpaper_01.jpg"/>
<font color = "#ea75c5"><h2>--Form Pemesanan Berbasis Java Script--</h2>
<form name="pemesanan" action="#">
<table border = "1px">
<font color = "#ee36a2">
<tr>
<th width="20px">No</th>
<th width="200px">Makanan/Minuman</th>
<th width="100px">Harga</th>
<th width="100px">Pesan</th>
</tr>

<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="bakso" value="12000" size="6" readonly></td>
<td><input type="text" name="hargaBakso" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="6" readonly></td>
<td><input type="text" name="hargaSoto" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="6" readonly></td>
<td><input type="text" name="hargaMie" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="5000" size="6" readonly></td>
<td><input type="text" name="hargaDegan" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="campur" value="7000" size="6" readonly></td>
<td><input type="text" name="hargaCampur" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" readonly="true">
</td>
</tr>

<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" readonly="true">
</td>
</tr>

<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" readonly="true" align="right">
</td>
</tr>
</table>
<br><input type="button" value="BATAL" onMouseUp="resetForm()">
</form>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.pemesanan;
var jumlahBakso = 12000 * parseInt(nota.hargaBakso.value);
var jumlahSoto = 10000 * parseInt(nota.hargaSoto.value);
var jumlahMie = 15000 * parseInt(nota.hargaMie.value);
var jumlahDegan = 5000 * parseInt(nota.hargaDegan.value);
var jumlahCampur = 7000 * parseInt(nota.hargaCampur.value);
var jumlahTotal = jumlahBakso + jumlahSoto + jumlahMie + jumlahDegan + jumlahCampur;
if (jumlahTotal > 50000)
{
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - 10000;
}
else{
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal;
}
}
function resetForm(){
document.pemesanan.reset();
}
//->
</script>
<br>
<br><font align="center" face="Broadway" size="3" >&reg Suastika Yulia Riska-109533414510 </font>
<br><font align="center" face="Brush Script MT" size = "5">-The Learning University of Malang-</font>
</body>
</html>


Sehingga menampilkan form sebagai berikut :


Jika mengklik Button CANCEL akan muncul tampilan sebagai berikut :


Semoga Bermanfaat dan dapat membantu dalam mengembangkan aplikasi web berbasis Java Script... ^o^

Monday, February 28, 2011

Aplikasi Kalkulator Sederhana Menggunakan JAVA SCRIPT

Pada aplikasi berikut ini hanya menampilkan 4 buah operasi, yaitu penjumlahan, pengurangan, perkalian dan pembagian. Dengan menggunakan Java Script, maka dibutuhkan fungsi-fungsi yang dibuat pada Java Script.

Berikut ini source code dari hitung.js :


function hitung(){
var komponen = document.mat;

var input1 = parseInt(komponen.input1.value);

var input2 = parseInt(komponen.input2.value);

var op = komponen.op.value;

var hasil;


if(op == "add"){

hasil = input1 + input2;

}

else if(op == "sub"){

hasil = input1 - input2;

}

else if(op == "mpy"){
hasil = input1 * input2;
}

else{

hasil = input1 / input2;

}


komponen.hasil.value = hasil;

}



Berikut ini source code dari hitung.html :


<!DOCTYPE html>

<html lang="en">

<head>

<title>Matematika</title>

<script language="JavaScript" type="text/javascript" src="hitung.js"></script>

</head>

<body bgcolor="pink">

<center>

<h3>-- Operasi Matematika --</h3>

<form name="mat" action="#">

<input type="text" size="5" name="input1">

<select name="op">

<option value="add">+</option>

<option value="sub">-</option>

<option value="mpy">*</option>

<option value="div">:</option>

</select>

<input type="text" size="5" name="input2">

<input type="button" value="=" onclick="hitung()"/>

<input type="text" size="10" name="hasil" readonly>

</form>

</center>

</body>

</html>


Tampilan dari aplikasi tersebut adalah :



Tuesday, February 22, 2011

Membuat Design Website memanfaatkan HTML 5

Dari pengembangan studi kasus yang telah saya posting sebelumnya, design ini adalah pengaplikasian dari pemanfaatan elemen-elemen HTML5. Sebelum membuat HTML, seperti biasa, harus membuat CSS terlebih dahulu....

Berikut ini sintak dari praktikum.css

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

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

header{
height: 90px;
width: auto;
background-image : url(images/Fotolia_6525764_XS.jpg);
}

logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/fotolia_9806713_new.jpg);
}

te{
padding: 30px;
font-family : Times New Roman, hanacaraka;
font-weight: bold;
font-size : 32px;
color : white;
}

nav{
width: 900px;
height: 40px;
background-color : #f36899;
color : #459dff;
font-family: Times New Roman;
}

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

box{
margin-top: 2px;
float: left;
width: 150px;
height: 21px;
border: 1px solid black;
}

ul {
margin:0;
padding:0;
list-style: none;
}

ul li {
position: relative;
float: right;
width:90px;
}

li ul {
position: absolute;
top: 3px;
display: none;
}

ul li a {
display: block;
text-decoration:none;
line-height:8px;
float: right;
color:black;
padding:7px;
background: #faa1cf;
margin:0.5px 0.5px;
font-weight:bold;
font-size : 15px;
width : 70px
}

menu{
margin-top: 3px;
margin-left: 255px;
float: left;
width: 200px;
height: 30px;
text-align : right ;
padding : 3px;
}

section{
width : 900px;
height : 450px;
background-color : #f36899;
}

pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/hello-kitty-533342.jpg);
}

article{
margin-left: 300px;
width: 580px;
height: 325px;
background-color : #c02c78;
padding : 5px;
}

event{
font-family : Times New Roman ;
font-size : 14px;
font-weight: bold;
color : #459dff;
margin-left: 300px;
width: 590px;
height: 125px;
background-color : #f36899;
}

footer{
clear : both;
height : 30px;
background-image : url(images/Fotolia_6525764_XS.jpg);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}


Dan berikut ini sintak dari praktikum.html

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

<HEAD>
<TITLE>Desain Layout Halaman Web</TITLE>
<link rel="stylesheet" href="praktikum.css" type="text/css" />
</HEAD>

<BODY>

<HEADER>
<LOGO></LOGO>
<TE><Font color = "#e98ebd" align = "center" face= "Snap ITC"> - SEMANGAT UNTUK HIDUP -</font></TE>
</HEADER>
<NAV>
<div align="center" size = "1">
<ul id="nav">
<li><a href="" title = "Downloads" >Downloads</a></li>
<li><a href="" title = "Tips" >Tips</a></li>
<li><a href="" title = "Tutorials" >Tutorials</a></li>
<li><a href="" title = "Media" >Media</a></li>
<li><a href="" title = "Home" >Home</a></li>
</ul>
<SEARCH><font color = "#c02c78">Search</font></SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
</NAV>

<SECTION>
<PICT></PICT>
<ARTICLE>
3 hal dalam hidup yang tak pernah kembali :
<br>1. Waktu
<br>2. Perkataan
<br>3. Kesempatan
<br>Kita tak bisa memutar kembali waktu, tapi kita bisa menciptakan kenangan dengan waktu yang masih kita punya dan memanfaatkan waktu yang ada, walau sebentar, untuk menciptakan kenangan yang berarti.
<br>Kita tak bisa menarik ucapan kasar yang keluar dari mulut kita atau statement yang telah membuat harga diri kita lebih penting dari pada menariknya kembali dan mengucapkan maaf.
<br>Kita tak bisa menghapus caci maki yang telah kita katakan hingga membuat orang lain marah, terluka atau menangis.Tapi kita bisa membuat apa yang selanjutnya keluar dari mulut kita menjadi lebih banyak pujian dibanding caci maki, lebih banyak syukur dan terima kasih dari pada keluhan atau komplain, dan lebih banyak nasihat positif dari pada sulutan amarah^^
<br>Kita tak bisa mendapatkan kembali kesempatan yang sudah kita lewatkan. Tapi kita bisa menciptakan peluang untuk membuat kesempatan-kesempatan lain datang dalam hidup kita dengan lebih memperhatikannya.
</ARTICLE>
<EVENT><BR>
<B> &nbsp <font color = "#7b1e3f">CATEGORIE yang bisa diakses :</B>
<br> <a href= "http://facebook.com/" title = "facebook"> Masuk ke Link Facebook </a>
<br> <a href= "http://blogger.com" title = "blog"> Membuat Link Blogger </a>
<br> <a href= "http://um.ac.id" title = "um"> Masuk ke Link UM </a>
<br> <a href= "http://www.filehippo.com" title = "Software"> Download FREE Software </a>

</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<br><font align = "center">&reg Suastika Yulia Riska-109533414510 </font>
</FOOTER>
</BODY>
</HTML>


Tampilan dari design tersebut adalah :


Semoga bermanfaat untuk Anda, sehingga Anda dapat mengaplikasikan konsep ini sebagai referensi dalam pembuatan WEB Anda...
Terima kasih atas kunjungannya ^.^

Membuat Layout Halaman Website memanfaatkan HTML 5

SINTAK untuk pembuatan LAYOUT yang memanfaatkan elemen pada HTML 5

Sintak studi kasus.css

#header {
height : 80px;
border : 1px solid green;
}

#nav{
height : 30px;
border : 1px solid blue;
}

#section{
height : 340px;
border : 1px solid red;
padding : 15px;
}

#sidebar{
float : left;
margin-right : 20px;
width : 800px;
height : 330px;
border : 1px dashed red;
}

#content{
float : left;
width : 329px;
height : 330px;
border : 1px dashed green;
}

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



Sintak untuk studi kasus.html adalah :

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

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

</head>

<body>

<div id="header">
Header
</div>

<div id="nav">
Nav
</div>

<div id="section">

<div id="sidebar">
Sidebar
</div>

<div id="content">
Content
</div>
Section

</div>

<div id="footer">
Footer
</div>
</div>
</div>
</body>
</html>


Tampilan Layout berdasar sintak di atas adalah :


Tuesday, February 15, 2011

Border Dengan Menggunakan CSS

Tampilan web :


Studi kasus.css

.lingkaran{
width : 200px;
height : 200px;
-moz-border-radius : 100px;
-webkit-border-radius : 100px;
border : 2px solid #000000;
background-color : #c0c0c0;
}

#dalam-lingkaran{
text-align : center;
position : relative;
border : none;
width : 100px;
heigth : 100px
}

.daun{
padding : 10px;
border : 5px solid #008000;
width : 500px;
height : 50px;
border-bottom-left-radius : 50px;
border-top-right-radius : 50px;
}

.bayangan{
padding : 10px;
border : 2px solid #000000;
-moz-box-shadow : 5px 5px 8px rgba(255,0,255,1);
-webkit-box-shadow : -5px -5px 3px rgba (255,0,0,0.5);
width : 500px;
height : 30px;
}


Studi kasus.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Studi Kasus CSS</title>
<link href="studi kasus.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="lingkaran" align="center">
<p id="dalam-lingkaran"> Paragraf ini tetap berada di dalam lingkaran </p>
</div>
<br>
<div class="daun"> Border Menyerupai Daun </div>
<br>
<div class="bayangan">Efek Bayangan pada border persegi panjang</div>
</body>
</html>

Semoga Bermanfaat ^o^!!

-- Suastika Yulia Riska_109533414510_s1 PTI09 --

Monday, February 14, 2011

Membuat Design Layout Sederhana

MEMBUAT DESIGN LAYOUT FACE-MU

Sintak Face-mu.css

#top{
height:100px;
background-color:#3366cc;}

#folkbook{
float:left;
height:100px;
width:350px;
padding-left:100px;
padding-top:20px;
}

#isikanan{
padding-top:20px;
padding-right:100px;
float:right;
}

#button{
background-color:#ffffff;
color:#3366cc;
}

#center{
height:500px;
background-image:URL(bg.jpg);
}

#bottom{
padding-left:5px;
padding-top:15px;
height:40px;
background-color:#3366cc;}



Sintak Face-mu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Design Layout Face-mu </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="icon.png" type="image/x-icon" />
<div id="top">
<div id="folkbook">
<font color="white" face="calibri" size=8><b> Face-mu </b></font>
</div>
<div id="isikanan">
<font color="white" face="calibri" size=3>
<table>
<tr>
<td><u>Email:</u></td>
<td><u>Password:</u></td>
</tr>
<tr>
<td>
<input type="text" maxlength=20>
</td>
<td>
<input type="password" maxlength=20>
</td>
<td><input id="button" type="button" maxlength=10 value="Masuk"></td>
</tr>
<tr>
<td><input type="checkbox" checked>Biarkan saya tetap masuk</td>
<td>Lupa kata sandi Anda?</td>
</tr>
</table>
</font>
</div>
</div>
</head>
<body>
<div id="center">
</div>
<div id="bottom">
<font color="white" face="calibri" size=3>
Face-mu © 2011 - Suastika Yulia Riska
<br>109533414510_S1 PTI09_Teknik Elektro
</font>
</div>
</body>
</html>

Tampilan Face-mu


Saturday, February 12, 2011

Modul Praktikum Berbasis Objek


Bagi mahasiswa S1 Pendidikan Teknik Informatika 2010, Teknik Elektro, Universitas Negeri Malang, bisa mendownload modul disini secara bertahap setiap minggunya... Waktu pengupload-an modul tidak ditentukan. Diharapkan semua mahasiswa aktif mencari tahu.

Kumpulan Modul Praktikum Pemrograman Berbasis Objek :
1. Modul 2
2. Modul 3
3. Modul 4
4. Modul 5
5. Modul 6
6. Modul 7
7. Modul 8

Semoga semua e-book yang telah kami berikan bermanfaat dan dapat dijadikan pegangan dalam mengerjakan proyek...

Disini kita sama-sama belajar, hanya kami (asisten) memiliki pengalaman lebih dulu. Kami tidak lebih pintar dari kalian.

Hargailah Orang Lain, jika ingin dihargai orang lain. Karena hidup tidak hanya sampai disini, ataupun hanya berhenti disini.


-Asisten-

Tuesday, February 8, 2011

Praktikum Pemrograman Berbasis Web

Membuat Grafik Batang Statis dengan Memanfaatkan Elemen Tabel


<!DOCTYPE html>
<html lang="en"><head>
<title>Grafik Berbasis tabel</title>
</head>
<body background="Pure_Descending.jpg"/>
<blink><font color="Blue" face="arial" size="5" >Grafik Berbasis Tabel</font></blink><table width="561" height="241">
<hr>
<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 >
<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" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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" style="border-top:#000000 solid;border-bottom:#000000 solid;border-left:#000000 solid;border-right:#000000 solid;"></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>
<hr color="black">
</hr>
<marquee><font color="purple" face=”Times New Roman” size=”5">_Suastika Yulia Riska_ </font><font color="#fd1b04" face="times new roman" size="2"></marquee></font>

</body></html>

Membuat Design Tabel Perbandingan Item dengan Memanfaatkan Pengelompokan

<!DOCTYPE html>
<html lang="en">
<head>
<title>Grafik Berbasis Tabel_Fitur</title>
</head>

<body background="TransDoodle_by_whatl

ah.jpg"/>
<marquee>
<font color="purple" face="arial" size="5">Grafik Berbasis Tabel PERBANDINGAN FITUR </font>
</marquee>
<table width="470" height="401" border="1" align="center">
<tr>
<td width="470" colspan="8" align="center"><font color="magenta" face="Times New Roman"
size="5"><strong>PERBANDINGAN FITUR</strong></font></td>
</tr>
<tr>
<hr color="purple"/><td width="31" align="center"><strong>No</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="208" align="center"><strong>Fitur</strong></td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"></td>
<td width="92"
align="center"><strong>Enterprise</strong></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"></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:#0
00000 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>
<br>
<hr color='pink'/>
<BLINK><font color="purple" face="Harlow Solid Italic" size="5" >Created By : Suastika Yulia Riska </font></BLINK><BR><hr color='pink'/>
<br><font color="purple" face="Bookman Old Style" size="4" >S1 PENDIDIKAN TEKNIK INFORMATIKA UM 2009</font></br>
</body>
</html>

Membuat Design Frame dengan Melibatkan 5 halaman HTML


Sintak untuk pembuatan HTML secara keselu
ruhan adalah sebagai berikut :

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

<head>
<title>~ All About Music ~</title>
</head>
<frameset rows="15%,*,15%">
<frame src="atas.html" name="atas" id="atas"/>
<frameset cols="20%,*,20%">
<frame src="kiri.html" name="kiri" id="kiri"/>
<frame src="tengah.html" name="tengah" id="tengah"/>
<frame src="kanan.html" name="kanan" id="kanan"/>
</frameset>
<frame src="bawah.html" name="bawah" id="bawah"/>
</frameset>
</html>

Sintak untuk pembuatan HTML dibagian atas frame adalah sebagai berikut :

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

<head>
<title>top of dekstop</title>
</head>
<body background="Fotolia_8758757_XS1-300x240.jpg">
<h1 align="center"><marquee><font face="Jokerman" color="Purple">~ All About Music ~</font></marquee></h1>
</body>
</html>

Sintak untuk pembuatan HTML dibagian kiri frame adalah sebagai berikut :

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

<head>
<title></title>
</head>
<body background="Black.jpg">
<img src="d.jpg" width="120"/>
<font size="5" align="center" color="pink" face="Times New Roman"><strong>Alat-Alat Musik :</strong></font>
<br><img src="a1.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Angklung</font>
<br><img src="alat-musik-melayu-gambus.jpg" width="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Gambus</font>
<br><img src="kendang.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Kendang</font>
<br><img src="violin.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Biola</font>
<br><img src="JAS-769GLJupiter769AltoSaxSaxophone.jpg" height="200"/>
<br><font color="pink" align="center" size="3" face="Snap ITC">Saxophone</font>
<br>
<a href="tengah.html">Klik di sini untuk masuk ke halaman utama</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian tengah frame adalah sebagai berikut :

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

<head>
<title>Lirik</title>
</head>
<body background="Summer vacation.jpg"><font color="pink"><b>
<h2 id="Menu"><font face="Harlow Solid Italic" color="white" size="10">Kumpulan Lirik Lagu Indonesia</font></h2>
<ol>
<li><a href="#Rain">1. The Rain - Perjalanan Tak Tergantikan</a></li>
<li><a href="#Ungu1">2. Ungu - Percaya Padaku</a></li>
<li><a href="#Ungu2">3. Ungu - Kuingin Selamanya</a></li>
<li><a href="#Nikita">4. Nikita Willy - Kutetap Menanti</a></li>
<li><a href="#Vierra">5. Vierra - Takut</a></li>
</ol>
<br><img src='playguitar.jpg' height='200' border='8' align='right'/>
<h3 id="Rain"><font color="Magenta">Perjalanan Tak Tergantikan</font></h3>
<br>
<br>[*]
<br>Ku langkahkan kakiku jalan ini
<br>Dalam terpaan badai gelapnya hari
<br>
<br>Tak tahu bagaimana cerita ini
<br>Akan berujung nanti aku tak tahu
<br>
<br>[**]
<br>Selama darahku masih mengalir di nadi
<br>Selama itu pula aku akan bernyanyi
<br>
<br>[***]
<br>Tiap persinggahan ada ribuan kenangan
<br>Perjalanan ini tak akan pernah tergantikan...
<br>
<br><i>Back to [*][**][***]</i>
<br>Tak akan tergantikan
<br>Tak akan tergantikan
<br>Tak akan terganti

<br><a href="#Menu">Ke menu utama</a></dd>
</dl>
<br>
<h3 id="Ungu1"><font color="magenta">Percaya Padaku</font></h3>
<br>
<br>Aku tak tahu
<br>Apa yang kurasakan
<br>Dalam hatiku
<br>Saat pertama kali lihat dirimu melihatmu
<br>
<br>Seluruh tubuhq terpaku dan membisu
<br>Detak jantungku berdebar tak menentu
<br>Sepertinya aku
<br>Tak ingin berlalu
<br>
<br><i>Reff :</i>
<br>Berikan cintamu juga sayangmu
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br>Kuberikan cintaku juga sayangku
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br>Saat ku tau kau akan pergi jauh
<br>Ijinkan aku tuk selalu menantimu
<br>Untuk katakan ku ingin dirimu
<br>Agar kau tau betapa ku terlalu mencintaimu
<br>Aku akan menunggu
<br>Hingga dirimu kembali untukku
<br>
<br><i>Back to Reff...</i>
<br>Tolonglah aku bagaimana diriku
<br>Ungkapkan itu rasa yang membelenggu
<br>Dalam hatiku ku cinta padamu....
<br>
<br><i>Back to Reff...</i>
<br>Berikan cintamu juga sayangmu
<br>Percaya padaku ku kan menjagamu
<br>Hingga akhir waktu menjemputku
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
<h3 id="Ungu2"><font color="magenta">Kuingin Selamanya</font></h3>
<p>
<br>Cinta adalah misteri dalam hidupku
<br>Yang tak pernah ku tahu akhirnya
<br>Namun tak seperti cintaku pada dirimu
<br>Yang harus tergenapi dalam kisah hidupku
<br>
<br><i>Reff:</i>
<br>Ku ingin slamanya mencintai dirimu
<br>Sampai saat ku akan menutup mata dan hidupku
<br>Ku ingin slamanya ada di sampingmu
<br>Menyayangi dirimu sampai waktu kan memanggilku
<br>
<br>Ku berharap abadi dalam hidupku
<br>Mencintamu bahagia untukku
<br>Karena kasihku hanya untuk dirimu
<br>Selamanya kan tetap milikmu
<br>
<br><i>Back to Reff</i>
<br>
<br>Di relung sukmaku
<br>Ku labuhkan seluruh cintaku
<br>Di hembus nafasku
<br>Ku abadikan seluruh kasih dan sayangku
<br>
<br><i>Back to Reff</i>
<br><a href="#Menu">Ke menu utama</a>
<br>
<br>
<h3 id="Nikita"><font color="magenta">Kutetap Menanti</font></h3>
<p>
<br>Meski dirimu bukan milikku
<br>Namun hatiku tetap untukmu
<br>Berjuta pilihan disisiku
<br>Takkan bisa mengantikanmu
<br>
<br>Walau badai menerpa
<br>Cintaku takkan ku lepas
<br>Berikan kesempatan untuk membuktikan
<br>Ku mampu menjadi yang terbaik
<br>Dan masih menjadi yang terbaik
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Walau badai menerpa
<br>Cintaku takkan ku lepas
<br>Berikan kesempatan untuk membuktikan
<br>Ku mampu jadi yang terbaik
<br>Dan masih jadi yang terbaik
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Penantian panjang
<br>
<br>Ku akan menanti
<br>Meski harus penantian panjang
<br>Ku akan tetap setia menunggumu
<br>Ku tahu kau hanya hanya untukku
<br>
<br>Biarkan waktuku
<br>Habis oleh penantian ini
<br>Hingga kau percaya betapa besar
<br>Cintaku padamu ku tetap menanti
<br>
<br>Cintaku padamu..
<br>Ku tetap menanti
<br>
<br>Meski dirimu bukan milikku
<br>Namun hatiku tetap untukmu
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
<br>
<h3 id="Vierra"><font color="magenta">Takut</font></h3>
<p>
<br>Ku tahu kamu bosan ku tahu kamu jenuh
<br>Ku tahu kamu tak tahan lagi
<br>Ini semua salahku ini semua sebabku
<br>Ku tahu kamu tak tahan lagi
<br>
<br>Jangan sedih jangan sedih aku pasti setia
<br>
<br>Aku takut kamu pergi
<br>Kamu hilang kamu sakit
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Jangan takut jangan sedih aku pasti setia
<br>
<br>Aku takut kamu pergi
<br>Kamu hilang kamu sakit
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Aku ingin kau di sini
<br>Di sampingku selamanya
<br>
<br>Aku takut jangan takut kamu pergi takkan pergi
<br>Kamu hilang wooo kamu sakit
<br>Aku ingin aku juga kau di sini bersamamu
<br>Di sampingku di sampingmu selamanya
<br>
<br><a href="#Menu">Ke menu utama</a>
<br>
</b></font>
<br><a href="kanan.html">Klik di sini untuk mengetahui lirik lagu Indonesia Raya!</a>
<br><a href="kiri.html">Klik di sini untuk mengetahui Gambar Alat-alat musik!</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian kanan frame adalah sebagai berikut :

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

<head>
<title>Indonesia</title>
</head>
<body background="Fotolia_music.jpg">
<img src="d.jpg" width="120"/>
<font size="5" align="center" color="black" face="Times New Roman"><strong>Indonesia Raya</strong></font>
<p>
<br><i>Ciptaan : W.R. Supratman / Wage Rudolf Supratman</i>
<br>
<br>Indonesia tanah airku
<br>Tanah tumpah darahku
<br>Disanalah aku berdiri
<br>Jadi pandu ibuku
<br>Indonesia kebangsaanku
<br>Bangsa dan Tanah Airku
<br>Marilah kita berseru
<br>Indonesia bersatu
<br>
<br>Hiduplah tanahku
<br>Hiduplah negriku
<br>Bangsaku Rakyatku semuanya
<br>Bangunlah jiwanya
<br>Bangunlah badannya
<br>Untuk Indonesia Raya
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Tanahku negriku yang kucinta
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Hiduplah Indonesia Raya
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Tanahku negriku yang kucinta
<br>
<br>Indonesia Raya
<br>Merdeka Merdeka
<br>Hiduplah Indonesia Raya
<br>
<br>Indonesia Tanah yang mulia
<br>Tanah kita yang kaya
<br>Di sanalah aku berada Untuk slama-lamanya
<br>Indonesia Tanah pusaka Pusaka Kita semuanya
<br>Marilah kita mendoa Indonesia bahagia
<br>
<br>Suburlah Tanahnya Suburlah jiwanya
<br>Bangsanya Rakyatnya semuanya
<br>Sadarlah hatinya Sadarlah budinya
<br>Untuk Indonesia Raya
<br>
<br>Indonesia Tanah yang suci Tanah kita yang sakti
<br>Disanalah aku berdiri 'njaga ibu sejati
<br>Indonesia! Tanah berseri Tanah yang aku sayangi
<br>Marilah kita berjanji Indonesia abadi
<br>
<br>Slamatlah Rakyatnya Slamatlah putranya
<br>Pulaunya lautnya semuanya
<br>Majulah Negrinya Majulah Pandunya
<br>Untuk Indonesia Raya
<br>
<a href="tengah.html">Klik di sini untuk masuk ke halaman utama</a>
</body>
</html>

Sintak untuk pembuatan HTML dibagian bawah frame adalah sebagai berikut :

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

<head>
<title></title>
</head>
<body background="Fotolia_902163_M.jpg">
<font color="white" size="5"><b>Created By : Suastika Yulia Riska [109533414510]</font>
<br><font color="Purple" size="5"><b>Welcome to My Blog : </font>
<a href="suastika16.blogspot.com" target="tengah"><font color="blue" size="5">suastika16.blogspot.com</b></font></a>
</body>
</html>


Sintak tersebut saling terkait, sehingga semua halaman HTML bagian frame atas, kiri, tengah, kanan, dan bawah dipanggil total oleh "dekstop kasus.html".
SELAMAT mencoba... Semoga bermanfaat ^o^!!

 
Powered by Blogger