Dalam HTML tag merupakan code sekaligus perintah dimana kita
dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali
dengan <x>dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.
Daftar
Tag Pada HTML
ELEMEN
DASAR
|
||
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari
file HTML)
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada
mukadimah)
|
Mukadimah (Header)
|
<HEAD></HEAD>
|
(keterangan umum, seperti judul
dsb.)
|
Batang Tubuh
|
<BODY></BODY>
|
(isi dari halaman HTML)
|
FORMAT
TAMPILAN
|
||
Huruf Tebal
|
<B></B>
|
(Bold)
|
Huruf Miring
|
<I></I>
|
(Italic)
|
Garis Bawah
|
<U></U>
|
(Underline - jarang digunakan)
|
Rata Tengah
|
<CENTER></CENTER>
|
(Center - berlaku untuk teks
maupun gambar)
|
Huruf Kedip
|
<BLINK></BLINK>
|
(Blinking - tag terlucu sampai
kini)
|
Ukuran Huruf
|
<FONT
SIZE=?></FONT>
|
(Font Size - boleh diisi dari 1
sampai 7)
|
Warna Huruf
|
<FONT
COLOR="#$$$$$$"></FONT>
|
|
Pilih Jenis Huruf
|
<FONT
FACE="***"></FONT>
|
PEMISAH
|
||
Paragraf
|
<P></P>
|
(tag penutup seringkali tak
diperlukan)
|
Align Text
|
<P
ALIGN=LEFT|CENTER|RIGHT></P>
|
|
Pndah Baris
|
<BR>
|
(pindah ke baris berikut)
|
Garis Datar
|
<HR>
|
(Horizontal Rule)
|
Penataan Letak Garis
|
<HR
ALIGN=LEFT|RIGHT|CENTER>
|
|
Tebal Garis
|
<HR
SIZE=?>
|
(dalam satuan pixel)
|
Lebar Garis
|
<HR
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Garis Persentasi
|
<HR
WIDTH="%">
|
(dalam persentasi terhadap lebar
halaman)
|
LATAR
BELAKANG DAN WARNA
|
||
Latar Belakang Gambar
|
<BODY
BACKGROUND="URL">
|
(Tiled Background)
|
Warna Latar Belakang
|
<BODY
BGCOLOR="#$$$$$$"
|
(Background Color - urutan:
merah/hijau/biru)
|
Warna Huruf Teks
|
<BODY
TEXT="#$$$$$$">
|
TABEL
|
||
Rancangan Tabel
|
<TABLE></TABLE>
|
|
Garis Batas Tabel
|
<TABLE
BORDER=?></TABLE>
|
|
Lebar Tabel
|
<TABLE
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Tabel Persentasi
|
<TABLE
WIDTH="%">
|
(dalam satuan persen terhadap
lebar halaman)
|
Baris dalam Tabel
|
<TR></TR>
|
|
Penataan Letak Baris
|
<TR
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Sel dalam Tabel
|
<TD></TD>
|
(harus ada dalam setiap baris tabel)
|
Penataan Letak Sel
|
<TD
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Kepala Tabel
|
<TH></TH>
|
(Table Header - seperti data
dengan Bold dan Center)
|
Penataan Letak Kepala Tabel
|
<TH
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Warna Kepala Tabel
|
<TH
BGCOLOR="#$$$$$$">
|
A. Dasar dasar HTML
1. 1. Membuat judul tab
dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code
dibawah ini:
<html>
<head>
<title> My
First HTML Project </title>
</head>
<body BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1
berikut:
. 2. Mengatur paragraf texs,
buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
<title> Tag
P, Br dan Hr </title>
</head>
<body>
<p>Ini adalah
paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
<br><br></p>
<p>Ini adalah
paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini
adalah garis horizontal.
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2
berikut:
Gambar
2. Mengatur Paragraf
3. Mengatur ukuran huruf,
buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> Tag Heading
</title>
</head>
<body>
<h1> Heading 1
</h1>
<h2> Heading 2
</h2>
<h3> Heading 3
</h3>
<h4> Heading 4 </h4>
<h5> Heading 5
</h5>
<h6> Heading 6
</h6>
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3
berikut:
Gambar
3. Ukuran Huruf
4.. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format
tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small
</small><br>
<big> teks
big</big><br>
<b> teks tebal
</b><br>
<i> teks miring
</i><br>
<u> teks bergaris
bawah </u><br>
Contoh superscript : x
<sup>2</sup><br>
Contoh subscript :
H<sub>2</sub>O<br>
<strike> Ini teks
tercoret </strike><br>
<font size = 5 face =
verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:
Gambar
4. Format tulisan
5. . Membuat from komentar,
buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>
From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text
name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text
name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea
name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input
type=submit name="submit"
value=submit></td>
</tr>
</table>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:
Gambar
5. From komentar
6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah
ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table
width="300" border="1">
<tr>
<td
colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td
bgcolor="#00FF00">Hijau</td>
<td
bgcolor="#FFFF00">Kuning</td>
<td
bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td
bgcolor="#999999">Abu-abu</td>
<td
bgcolor="#0000FF">Biru</td>
<td
bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td
bgcolor="#663300">Cokelat</td>
<td
bgcolor="#3399CC">Biru muda</td>
<td
bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
Gambar
6. Tabel
B. B. Hyperlink
1. 1. Membuat hyperlink
kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code
dibawah ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
Ini hyperlink ke wordpress
<a href="http://www.wordpress.com/" title="Masuwordpress">
Wordpress </a>
<br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/"
title="Masuk yahoo"> Yahoo </a>
<br>Masuk ke facebook anda
<a
href="http://http://www.facebook.com/" title="Masuk ke
facebook"> Facebook </a>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
. 2. Membuat hyperlink antar
bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah
ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html"
title="ke Rumah"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg"
border="0" width="80" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html"
title="Profilku"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg"
border="0" width="100" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html"
title="Kode Warna Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg"
border="0" width="150" height="30"/></a>
<a
href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html"
title="kumpulan Kata-kata Mutiara"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg"
border="0" width="100" height="30"/></a>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8
berikut:
C. Membuat Website Sederhana
1. 1. Membuat halaman login
pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>login
web</title><link rel='icon' href='gambar/B.png'>
</head>
<body>
<p
align="center"> <font size="6"
color="#FF6600" >
Silahkan mengisi data
yang ada di bawah untuk masuk ke website saya :)</font>
</p>
<table
align="center">
<td><form
method="post" action="home.html"><label><font
color="#FF6600">Nama Anda:</label>
<br>
<input
type="text" name="nama" value=""></br>
<label><font
color="#FF6600">Email Atau telepon:</label>
<br>
<input
type="text" name="Email"
value=""></br><label><font
color="#FF6600">Alamat:</label>
<br>
<input
type="text" name="Alamat" Value=""></br>
<label><font
color="#FF6600">Tanggal Lahir </label>
<br>
<select
name="select">
<option
value="1">1</option>
<option
value="2">2</option>
<option
value="3">3</option>
<option
value="4">4</option>
<option
value="5">5</option>
<option
value="6">6</option>
<option
value="7">7</option>
<option
value="8">8</option>
<option
value="9">9</option>
<option
value="10">10</option>
<option
value="11">11</option>
<option
value="12">12</option>
<option
value="13">13</option>
<option
value="14">14</option>
<option
value="15">15</option>
<option
value="16">16</option>
<option
value="17">17</option>
<option
value="18">18</option>
<option
value="19">19</option>
<option
value="20">20</option>
<option
value="21">21</option>
<option
value="22">22</option>
<option
value="23">23</option>
<option
value="24">24</option>
<option
value="25">25</option>
<option
value="26">26</option>
<option
value="27">27</option>
<option
value="28">28</option>
<option
value="29">29</option>
<option
value="30">30</option>
<option
value="31">31</option>
</select>
<select
name="select2">
<option
value="1">Januari</option>
<option
value="2">Februari</option>
<option
value="3">Maret</option>
<option
value="4">April</option>
<option
value="5">Mei</option>
<option
value="6">Juni</option>
<option
value="7">Juli</option>
<option
value="8">Agustus</option>
<option
value="9">September</option>
<option
value="10">Oktober</option>
<option value="11">Nopember</option>
<option
value="12">Desember</option>
</select>
<select
name="select3">
<option
value="2001">1988</option>
<option
value="2002">1989</option>
<option
value="2003">1990</option>
<option
value="2004">1991</option>
<option
value="2005">1992</option>
<option
value="2006">1993</option>
<option
value="2007">1994</option>
<option
value="2008">1995</option>
<option
value="2009">1996</option>
</select></br>
<label><font
color="#FF6600">Jenis Kelamin </label>
<br><font
color="red">Pria
<font color="#CCFF00">Wanita</br>
<input
type="submit" Value="Masuk">
</td>
</table>
<body
background="gambar/aaa.png">
<EMBED
SRC="MP3/Greenday%20-%20I%20walk%20Alone.swf"
AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"
HEIGHT="1" ALIGN="CENTER"></EMBED>
<p
align="center"> <font size="1"
color="#FF6600" ><BLINK>..... Dalam penggisiannya harus
jujur yaa, jangan bo'onk :) ......
</body>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai
dengan kesukaan anda.
2. 2, Membuat halaman awal,
buka notepad++, kemudian ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>Home</title>
<link rel='icon'
href='gambar/alien.ico'>
</head>
<body>
<center><table width='1000' height='400' border="0"
background='gambar/xx.jpg' cellpadding="0"
cellspacing="<tr>
<td
colspan="2" color="white" align='center'>
<img
src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr
height="50"><td colspan='2' background='gambar/zz.jpg'
align='left' height="20">
<p><ul><ul><left><BLINK><b><font
color="#00CCFF" size="5"><img src='gambar/halo.gif'
border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~
<img src='gambar/halo.gif' border='0' width='40'
height='40'></font></BLINK></b></ul></ul></p></left>
<left>
<ul><a href="home.html" title="ke Rumah"><img
src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
<a
href="http://mp3skull.com/" title="MP3"><img
src='gambar/MP3.jpg' BORDER='0' width='80'
height='30'></font></a>
<a
href="profilku.html" title="Profilku"><img
src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
<a
href="html_colors.html" title="Kode Warna Pada
HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120'
height='30'></a>
<a
href="http://www.gametop.com/" title="Tempat
Game"><img src='gambar/GAME.jpg' BORDER='0' width='80'
height='30'></a>
<a
href="http://www.w3schools.com/html/html_intro.asp"
title="Tutorial HTML.w3schools.com"><img
src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a
href="kumpulan%20puisi.html" title="kumpulan Kata-kata
Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100'
height='30'></a>
</ul></left>
</td>
</tr>
<tr>
<td width='796'
height='700' background='gambar/zz.jpg' valign='top' >
<p><font
color="yellow" size="5">~Dasar-dasar Membuat Website
Berbasis HTML~</font>
<p align="lift"><font
color="white">Nah, anda pasti sudah banyak melihat tutorial
tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan,
tutorial HTML untuk tingkat pemula???
<br />
Nggak ada kan??? nah,
maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun
menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum
itu,? ada yang perlu diketahui.<br />
<br />
<a
name='more'></a><br />
<span
id="more-712"></span><br />
<b>tag
<></b><br />
digunakan untuk
menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.<br
/>
Tag container adalah tag
yang berisi text yang akan ditampilkan
setelah tag ditutup.
Contoh: <td> text yang ditampilkan
</td>.<br
/>
Tag biasa,
yahh…tag aja, contoh <BR> (break). <br>
kaga perlu ditutup oleh tag </br>, tapi jika sintak yang
digunakan tag container, contoh: <h1>, yah mesti ditutup dengan
</h1>.<br />
Tag yang digunakan untuk
mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya:
<td> </td><br />
Kita juga dapat mengetik
attribut di dalam sebuah tag, contoh: <body
bgcolor=”red”> </body>. atau
<input type=”text”>.<br />
<b>LANGKAH
1</b><br />
<ul>
<li>MEMBUKA
NOTEPAD.</li>
</ul>
<b>LANGKAH
2</b> <br />
<ul>
<li>MENGETIKKAN
SINTAK/SYNTAX.</li>
</ul>
Berikut ini adalah syntax
dasar yang membentuk suatu HTML.<br />
pertama, ketikkan<br
/><html><br />
tekan enter, kemudian
ketik<br /><head><br />Dalam container head, kita
bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan
sintak <title> judul halaman web </title>. Untuk
sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi
seperti ini:<br /><head> <title> judul
halaman web </title> </head><br />
Kemudian ketikkan
<body>. Tag body merupakan badan/tubuh/inti dari halaman web,
tampilan web yang kita lihat itu berasal dari <body>.<br
/>Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br
/>
<html><br
/><head><br /><title> Judul Halaman Web
</title><br />
</head><br
/>
<body><br
/>
</body><br
/>?<br />
<br />
<br />Selanjutnya
bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke
dalam tag body, contohnya seperti ini :<br /><body><br
/>Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br
/></body><br />terus, jika sudah, ketikkan
</html>, script lengkapnya seperti ini :<br
/><html><br /><head><br />
<title>
Judul Halaman Web </title><br />
</head><br
/><body><br />Contoh text yang ditampilkan di halaman
web, By: Rian Hidayat<br />
</body><br
/>
</html><br
/>
kalo udah, sekarang save
dengan nama dasarHTML.<br />
kalo udah disave, buka
data yang tadi di save.<br />?<br />Pada bagian ini, kalian mungkin
akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata
gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???<br
/>Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan
HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu
tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan
ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir
di berikan extensi .html, contoh: dasarHTML.html.
<div style='clear:
both;'></div>
</textarea>
<font="left"
form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">
<input
type="hidden" name="friendID" value="123456">
<textarea
name="f_comments" cols="40" rows="5"">
Enter your comments
here...
</textarea><br>
<input
type="submit" value="coments" />
<input
type="reset" value="Reset" />
</form>
</td>
<td width='200'
height='700' bgcolor='' valign='top'>
<table
align="left" width='200' border='0' bgcolor=''
bordercolor='green'>
<tr align='center'>
<td><p><a
href="http://www.facebook.com/" target="_blank"
title="Masuk ke Facebook"> <img
src="gambar/facebook.ico" border="0" width="90"
height="70"/></a></td>
<td><p><a
href="http://www.youtube.com/" target="_blank"
title="Masuk ke youtube"> <img
src="gambar/youtube.ico" border="0" width="90"
height="70"/></a><td>
</p>
</tr>
</table>
<table align='left'
width='200' border='0' bgcolor=''
bordercolor='green'>
<center>
<td
width="200" valign="top"><font
color="#FFFF00" face="Cooper Std Black">
<b>TUTORIAL
HTML</b>
<ul>
<li><a
href="buat%20ayat%20bergerak.html" title='membuat tulisan
bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat
tulisan bergerak</a></font></li>
<li><a
href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font
color='#0000FF' face='Times New Roman'>Cara membuat from
komentar</a></font></li>
<li><a
href='Membuat%20login.html' title='membuat halaman login'><font
color='#0000FF' face='Times New Roman'>Cara membuat halaman
login</a></font></li>
</ul></font></table></td>
</tr>
<tr
height="50">
s<td
colspan='2'background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF"
size="7">~ Meskipun banyak kendala dalam pembuatan desain web,
tapi tetap berusaha untuk mencapai hasil yang terbaik
~</font></b></marquee></center></td></tr>
</table><div style="position:
fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img
border="0" src="gambar/twitter.ico" title="follow my
twitter" alt="animasi bergerak gif"
/></a><small><center></div>
<div
style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a
href='#top'>
<img
border="0" src="gambar/top.png" width='50' height='50'
title="Kembali ke atas" alt="animasi bergerak gif"
/></a><small><center>
</div>
<div
style="position: fixed; TOP: 0px; right:
10px;width:130px;height:160px;"><a href='login.html'>
<img
border="0" src="gambar/c.png" width='40' height='40'
title="Kembali ke login" alt="animasi bergerak gif"
/></a><small><center></div>
<body
background='gambar/yy.jpg'></body>
<EMBED
SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf"
AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"
HEIGHT="1" ALIGN="CENTER"></EMBED></html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang
anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai
dengan anda.
Hasilnya akan seperti pada gambar 10 berikut:
3. 3. Membuat data pribadi
atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>Profilku</title>
<link rel='icon'
href='gambar/alien.ico'>
</head>
<body>
<center><table width='1000' height='400' border="0"
background='gambar/xx.jpg' cellpadding="0" cellspacing="20"
>
<tr>
<td
colspan="2" color="white" align='center'>
<img
src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr
height="50">
<td colspan='2'
background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font
color="#00CCFF" size="5"><img src='gambar/halo.gif'
border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~
<img src='gambar/halo.gif' border='0' width='40'
height='40'></font></BLINK></b></ul></ul></p></left>
<left><ul><a href="home.html" title="ke
Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80'
height='30'></a>
<a
href="http://mp3skull.com/" title="MP3"><img
src='gambar/MP3.jpg' BORDER='0' width='80'
height='30'></font></a>
<a
href="profilku.html" title="Profilku"><img
src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
<a href="html_colors.html" title="Kode Warna Pada
HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120'
height='30'></a>
<a href="http://www.gametop.com/" title="Tempat
Game"><img src='gambar/GAME.jpg' BORDER='0' width='80'
height='30'></a>
<a href="http://www.w3schools.com/html/html_intro.asp"
title="Tutorial HTML.w3schools.com"><img
src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata
Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100'
height='30'></a></ul></left></td></tr>
<tr><td
width='796' height='700' background='gambar/zz.jpg' valign='top' >
<p><table align="center" border="0"
bgcolor="" cellpadding="0" cellspacing="8" >
<td><tr><td colspan="2"
align="center"><font face="Bauhaus 93"
size="8"
color="#0066FF"><b>PROFILKU</b></td></tr>
<tr><br><table>
<P
align="center"><font color="#00FFFF">
<img src="gambar/rian.JPG" border="7"
width="250" height="300">
<tr><td
align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>NAMA</p></b></td>
<td><font size="5"color="#00FFFF">: Rian
Hidayat</p></td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>ALAMAT</p></b></td>
<td><font
size="4"color="#00FFFF">: Weru,
Sukoharjo</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>TTL</p></b></td>
<td><font size="5"color="#00FFFF">: Sukoharjo,
09-November-1993</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>PEKERJAAN</p></b></td>
<td><font size="5"color="#00FFFF">:
Mahasiswa</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>HOBY</p></b></td>
<td><font size="5"color="#00FFFF">:
Tidur</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>NO.TELPONE</p></b></td>
<td><font size="5"color="#00FFFF">:
085728282066</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>EMAIL</p></b></td>
</tr></table>
<table><P
align="center"><font color="#00FFFF"><img
src="gambar/bram.JPG" border="7" width="250"
height="300"></p>
<tr><td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>NAMA</p></b></td>
<td><font size="5"color="#00FFFF">: Bram Putra
P.</p></td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>ALAMAT</p></b></td>
<td><font size="4"color="#00FFFF">: Laweyan,
Surakarta</td></tr>
<td align="right"><font size="5" color="#00FFFF"><b><p
align='left'>TTL</p></b></td>
<td><font size="5"color="#00FFFF">: Surakarta,
13-April-1992</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>PEKERJAAN</p></b></td>
<td><font size="5"color="#00FFFF">:
Mahasiswa</td></tr>
<td align="right"><font size="5"
color="#00FFFF"><b><p
align='left'>NO.TELPONE</p></b></td>
<td><font size="5"color="#00FFFF">:
XXXXXXXXXXXXXX </td>
</tr></table></td>
<td width='200' height='700' bgcolor='' valign='top'>
<table
align="left" width='200' border='0' bgcolor=''
bordercolor='green'>
<tr
align='center'><td><p><a
href="http://www.facebook.com/" target="_blank"
title="Masuk ke Facebook"> <img
src="gambar/facebook.ico" border="0" width="90"
height="70"/></a></td>
<td><p><a
href="http://www.youtube.com/" target="_blank"
title="Masuk ke youtube"> <img
src="gambar/youtube.ico" border="0" width="90"
height="70"/></a><td>
</p></tr>
</table>
<table align='left'
width='200' border='0' bgcolor='' bordercolor='green'>
<center>
<td width="200" valign="top"><font
color="#FFFF00" face="Cooper Std Black">
<b>TUTORIAL HTML</b>
<ul><li><a href="buat%20ayat%20bergerak.html"
title='membuat tulisan bergerak'><font color='#0000FF' face='Times New
Roman'>Cara membuat tulisan bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat from
komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat
from komentar</a></font></li>
<li><a href='Membuat%20login.html' title='membuat halaman
login'><font color='#0000FF' face='Times New Roman'>Cara membuat
halaman login</a></font></li>
</ul></font></table></td></tr>
<tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF"
size="7">~ Meskipun banyak kendala dalam pembuatan desain web,
tapi tetap berusaha untuk mencapai hasil yang terbaik
~</font></b></marquee></center></td>
</tr></table><div style="position: fixed; bottom: 0px;
left: 10px;width:130px;height:160px;">
<img
border="0" src="gambar/twitter.ico" title="follow my
twitter" alt="animasi bergerak gif"
/></a><small><center>
</div>
<div style="position: fixed; bottom: 0px; right:
0px;width:100px;height:100px;"><a href='#top'>
<img
border="0" src="gambar/top.png" width='50' height='50'
title="Kembali ke atas" alt="animasi bergerak gif"
/></a><small><center></div>
<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a
href='login.html'>
<img border="0" src="gambar/c.png" width='40'
height='40' title="Kembali ke login" alt="animasi bergerak
gif" /></a><small><center>
</div>
<body background='gambar/yy.jpg'>
</body>
<EMBED
SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf"
AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"
HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang
anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai
dengan anda.
Hasilnya akan seperti pada gambar 11 berikut:
4. . Membuat album galery,
buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:
<html>
<head>
<title>Profilku</title>
<link rel='icon'
href='gambar/alien.ico'>
</head>
<body>
<center>
<table width='1000'
height='400' border="0" background='gambar/xx.jpg'
cellpadding="0" cellspacing="20" >
<tr>
<td
colspan="2" color="white" align='center'>
<img
src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr
height="50">
<td colspan='2'
background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font
color="#00CCFF" size="5"><img src='gambar/halo.gif'
border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~
<img src='gambar/halo.gif' border='0' width='40'
height='40'></font></BLINK></b></ul></ul></p></left>
<left>
<ul><a href="home.html" title="ke
Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80'
height='30'></a>
<a href="http://mp3skull.com/"
title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80'
height='30'></font></a>
<a href="profilku.html" title="Profilku"><img
src='gambar/PROFIL.jpg' BORDER='0' width='90'
height='30'></a> <a href="html_colors.html"
title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg'
BORDER='0' width='120' height='30'></a>
<a href="http://www.gametop.com/" title="Tempat
Game"><img src='gambar/GAME.jpg' BORDER='0' width='80'
height='30'></a> <a
href="http://www.w3schools.com/html/html_intro.asp"
title="Tutorial HTML.w3schools.com"><img
src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata
Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>
</ul></left>
</td></tr>
<tr>
<td width='796'
height='700' background='gambar/zz.jpg' valign='top' >
<p><table align="center" border="0"
bgcolor="" cellpadding="0" cellspacing="8" >
<td>
<p><b><center><font
face="Bauhaus 93" size="7"
color='#0000FF'>Galery</font></center></b></p><b>
<table
color="blue" align="center" border="9px">
<tr><p
align="center"><font color="#00FFFF"
size='6'>Album Kegiatan Teknisi</font>
<td><img src="file:///D:/Tugas%20HTML/Gambar/a.png"
border="3" width="300" height="300"
/></td>
<td><img src="file:///D:/Tugas%20HTML/Gambar/b.png"
border="3" width="300" height="300"
/></td>
<tr><td><img
src="file:///D:/Tugas%20HTML/Gambar/c.png" border="3"
width="300" height="300" /></td>
<td><img src="file:///D:/Tugas%20HTML/Gambar/d.png"
border="3" width="300" height="300"
/></td>
<tr><td><img
src="file:///D:/Tugas%20HTML/Gambar/e.png" border="2"
width="300" height="300" /></td>
<td><img src="file:///D:/Tugas%20HTML/Gambar/f.png"
border="3" width="300" height="300"
/></td></p></tr>
</table>
</td>
<td width='200'
height='700' bgcolor='' valign='top'>
<table align="left" width='200' border='0' bgcolor=''
bordercolor='green'><tr align='center'>
<td><p><a href="http://www.facebook.com/"
target="_blank" title="Masuk ke Facebook"> <img
src="gambar/facebook.ico" border="0" width="90"
height="70"/></a></td>
<td><p><a href="http://www.youtube.com/"
target="_blank" title="Masuk ke youtube"> <img
src="gambar/youtube.ico" border="0" width="90"
height="70"/></a><td>
</p></tr></table>
<table align='left'
width='200' border='0' bgcolor='' bordercolor='green'>
<center>
<td
width="200" valign="top"><font
color="#FFFF00" face="Cooper Std Black">
<b>TUTORIAL HTML</b><ul>
<li><a href="buat%20ayat%20bergerak.html" title='membuat
tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara
membuat tulisan bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat from
komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat
from komentar</a></font></li>
<li><a href='Membuat%20login.html' title='membuat halaman
login'><font color='#0000FF' face='Times New Roman'>Cara membuat
halaman login</a></font></li>
</ul></font></table></td></tr>
<tr
height="50">
<td colspan='2'
background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF"
size="7">~ Meskipun banyak kendala dalam pembuatan desain web,
tapi tetap berusaha untuk mencapai hasil yang terbaik
~</font></b></marquee></center></td>
</tr></table>
<div
style="position: fixed; bottom: 0px; left:
10px;width:130px;height:160px;">
<img
border="0" src="gambar/twitter.ico" title="follow my
twitter" alt="animasi bergerak gif"
/></a><small><center></div> <div style="position:
fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a
href='#top'>
<img border="0" src="gambar/top.png" width='50'
height='50' title="Kembali ke atas" alt="animasi bergerak
gif" /></a><small><center></div>
<div
style="position: fixed; TOP: 0px; right:
10px;width:130px;height:160px;"><a href='login.html'><img
border="0" src="gambar/c.png" width='40' height='40'
title="Kembali ke login" alt="animasi bergerak gif"
/></a><small><center></div>
<body
background='gambar/yy.jpg'>
</body>
<EMBED
SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf"
AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"
HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang
anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai
dengan anda.
Hasilnya akan seperti pada gambar 12 berikut:
5. . Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>Cara membuat tulisan bergerak</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
<center>
<table width='1000'
height='400' border="0" background='gambar/xx.jpg'
cellpadding="0" cellspacing="20" >
<tr>
<td
colspan="2" color="white" align='center'>
<img
src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr
height="50">
<td colspan='2'
background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font
color="#00CCFF" size="5"><img src='gambar/halo.gif'
border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~
<img src='gambar/halo.gif' border='0' width='40'
height='40'></font></BLINK></b></ul></ul></p></left>
<left>
<ul><a href="home.html" title="ke
Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80'
height='30'></a>
<a href="http://mp3skull.com/"
title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80'
height='30'></font></a>
<a href="profilku.html" title="Profilku"><img
src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
<a href="html_colors.html" title="Kode Warna Pada
HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120'
height='30'></a>
<a href="http://www.gametop.com/" title="Tempat
Game"><img src='gambar/GAME.jpg' BORDER='0' width='80'
height='30'></a>
<a href="http://www.w3schools.com/html/html_intro.asp"
title="Tutorial HTML.w3schools.com"><img
src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata
Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100'
height='30'></a>
</ul></left>
</td>
</tr>
<tr>
<td width='796'
height='700' background='gambar/zz.jpg' valign='top' >
<b><center><span
style="font-size: large;" align='center'><font color='#0066FF'
size='5'>Tutorial Membuat Tulisan Menjadi
Bergerak</font></span></center></b>
<br />
<br /><font
color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan
ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk
menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br
/>
<br />
<div
style="color: #FFFF00;">
<marquee
direction="down" height="50"><center>
<b>Teks Bergerak Ke
Bawah...</b></center>
</marquee>
</div>
<div
style="color: #FFFF00;"><marquee
direction="right"><b>Teks Bergerak Ke
Kanan...</b></marquee>
</div>
<div
style="color: #FFFF00;"><marquee
direction="left"><b>Teks Bergerak Ke
Kiri...</b></marquee>
</div>
<br />
<div
style="color: #FFFF00;">
<marquee
direction="up" height="50"><center>
<b>Teks Bergerak Ke
Atas...</b></center>
</marquee>
</div>
<br />
<a
name='more'></a><br /><br /><span
style="font-size: large;"><font
color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat
di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode
dibawah ini untuk melakukan tricks tersebut.</font><br />
<br />
<div
class="code"><br /><span style="color:
white;"><marquee direction="</span>
<b><span
style="color: #FFFF00;">right</span></b><span
style="color: white;">">This text scrolls
right...</marquee></span></div><br />
<br /><font
color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna
<b><span
style="color:#FFFF00;">kuning</span></b> kepada arah
mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right,
left.</font><br /><br />
<div
style="color: #FF0000;"><marquee
scrollamount="30"><b>Teks ini Macam
Ferari..</b></marquee></div><br /><span
style="font-size: large;"><font color='#00FFFF'><b>2.</b></span>
Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah
ni.</font>
<br /><br />
<div
class="code"><br /><span style="color:
white;"><marquee
scrollamount="</span><b><span
style="color:#FF6600;">30</span></b><span
style="color: white;">"></span><span
style="color: #FF0000;">Teks ni Macam
Ferari..</span><span style="color:
white;"></marquee>
</span></div><br
/><br /><font color='#00FFFF'>Ubah nomer yang bewarna
<b><span
style="color:#FF6600;">Oren</span></b> untuk mengubah
kelajuan.</font>
<br /><br />
<div
style="color: #f1c232;"><marquee
scrolldelay="300"><b>Teks ini seperti
Siput..</b></marquee></div><br />
<div
class="code"><br/><span style="color:
white;"><marquee
scrolldelay="</span><b><span
style="color:#00FF00;">300</span></b><span
style="color: white;">">Teks ini seperti
Siput..</marquee>
</span></div><br
/><br /><b><span style="font-size:
large;"><font color='#00FFFF'>3.</span></b> Ubah
nomer yang bewarna <b><span
style="color:#00FF00;">hijau</span></b> untuk mengubah
kelajuan.
</font><br
/><br /><div style="color: #6600CC;"><marquee
behavior="alternate"><b>Teks ini
Melantun</b></marquee>
</div><br
/><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di
atas ini. Gunakan kode di bawah.
</font><br
/><br />
<div
class="code"><br /><span style="color:
white;"><marquee
behavior="alternate"></span><b style="color:
#6600CC;">Teks ini Melantun</b><span style="color:
white;"></marquee>
</span></div><br
/><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya
cara untuk menetapkan ruangan untuk Marquee bergerak
</font><br
/><br /><div style="color: #0066FF;">
<marquee
width="200"><b>Teks ini bergerak dalam kelebaran 200
width</b></marquee></div><br /><div
class="code"><br />
<span
style="color: white;"><marquee
width="</span><span style="color:
#00FF00;">200</span><span style="color:
white;">">Teks ini bergerak dalam kelebaran 200
width</marquee></span></div>
<br /><font
color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan
nomer yang bewarna <b><span style="color:
#00FF00;">hijau</span></b>.
</font><br
/><br /><span style="font-size:
large;"><b><font color='#00FFFF'>5.</b></span>
Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.
</font><br
/><br />
<div
style="color: #33FF33;"><marquee behavior=”alternate”
scrollamount=”30” width=”400”><b>Teks Paling
Awesome</b></marquee></div>
<br /><font
color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks
bergerak seperti yang di atas.
</font><br
/><br />
<div
class="code">
<br />
<span
style="color: white;"><marquee
behavior="alternate" width="400"
scrollamount="30"></span><b style="color:
#33FF33;">Teks Paling Awesome</b><span style="color:
white;"></marquee>
</span></div>
<br />
<br /><font
color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh
gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br
/></font><br /></td>
<td width='200'
height='700' bgcolor='' valign='top'>
<table align="left" width='200' border='0' bgcolor=''
bordercolor='green'>
<tr align='center'>
<td><p><a href="http://www.facebook.com/"
target="_blank" title="Masuk ke Facebook"> <img
src="gambar/facebook.ico" border="0" width="90"
height="70"/></a></td><td><p><a
href="http://www.youtube.com/" target="_blank"
title="Masuk ke youtube"> <img
src="gambar/youtube.ico" border="0" width="90"
height="70"/></a><td>
</p></tr></table>
<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>
<center>
<td
width="200" valign="top"><font
color="#FFFF00" face="Cooper Std Black">
<b>TUTORIAL HTML</b>
<ul><li><a href="buat%20ayat%20bergerak.html"
title='membuat tulisan bergerak'><font color='#0000FF' face='Times New
Roman'>Cara membuat tulisan bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat from
komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat
from komentar</a></font></li>
<li><a href='Membuat%20login.html' title='membuat halaman
login'><font color='#0000FF' face='Times New Roman'>Cara membuat
halaman login</a></font></li>
</ul></font></table></td></tr><tr
height="50"><td colspan='2'
background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF"
size="7">~ Meskipun banyak kendala dalam pembuatan desain web,
tapi tetap berusaha untuk mencapai hasil yang terbaik
~</font></b></marquee></center></td>
</tr>
</table>
<div
style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img
border="0" src="gambar/twitter.ico" title="follow my
twitter" alt="animasi bergerak gif"
/></a><small><center>
</div>
<div
style="position: fixed; bottom: 0px; right:
0px;width:100px;height:100px;"><a href='#top'>
<img
border="0" src="gambar/top.png" width='50' height='50'
title="Kembali ke atas" alt="animasi bergerak gif"
/></a><small><center></div>
<div
style="position: fixed; TOP: 0px; right:
10px;width:130px;height:160px;"><a href='login.html'>
<img
border="0" src="gambar/c.png" width='40' height='40'
title="Kembali ke login" alt="animasi bergerak gif"
/></a><small><center></div><body
background='gambar/yy.jpg'>
</body>
<EMBED
SRC="MP3/A7x_Afterlife.swf" AUTOSTART="TRUE"
LOOP="TRUE" WIDTH="1" HEIGHT="1"
ALIGN="CENTER"></EMBED>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file
dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang
anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai
dengan anda.
Hasilnya akan seperti pada gambar 12 berikut:
OKE SELAMAT MENCOBA ^_^