-- My Country --

Glitter Words

Pages

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