sttindonesia.ac.id
1. Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:
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.
Hasilnya seperti pada gambar 9 berikut:
Gambar
9. Halaman login
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:
Gambar 10. Halaman awal
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:
Gambar 11. Membuat data pribadi
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:
Gambar 12. Galery
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:
Gambar
13. Artikel tulisan bergerak
SELAMAT MENCOBA...
No comments:
Post a Comment