DENGAN NOTEPAD++
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>
Judul
<TITLE></TITLE>
Mukadimah
(Header)
Batang Tubuh
<HEAD></HEAD>
<BODY></BODY>
FORMAT TAMPILAN
Huruf Tebal
Huruf Miring
Garis Bawah
<B></B>
<I></I>
<U></U>
Rata Tengah
<CENTER></CENTER>
Huruf Kedip
<BLINK></BLINK>
Ukuran Huruf
<FONT SIZE=?></FONT>
Warna Huruf
<FONT COLOR="#$$$$$
$"></FONT>
<FONT FACE="***"></FONT>
Pilih Jenis
Huruf
(Bold)
(Italic)
(Underline - jarang
digunakan)
(Center - berlaku untuk teks
maupun gambar)
(Blinking - tag terlucu
sampai kini)
(Font Size - boleh diisi dari
1 sampai 7)
PEMISAH
Paragraf
<P></P>
Align Text
<P ALIGN=LEFT|CENTER|
RIGHT></P>
<BR>
Pndah Baris
Garis Datar
Penataan Letak
Garis
Tebal Garis
Lebar Garis
Lebar Garis
Persentasi
<HR>
<HR ALIGN=LEFT|RIGHT|CENTER>
<HR SIZE=?>
<HR WIDTH=?>
<HR WIDTH="%">
(pindah ke baris
berikut)
(Horizontal Rule)
<BODY
BACKGROUND="URL">
(Tiled Background)
<BODY BGCOLOR="#$$$$$
$"
<BODY TEXT="#$$$$$$">
TABEL
Rancangan
Tabel
Garis Batas
Tabel
Lebar Tabel
Lebar Tabel
Persentasi
Baris dalam
Tabel
Penataan Letak
Baris
Sel dalam Tabel
Penataan Letak
Sel
<TABLE></TABLE>
<TABLE BORDER=?></TABLE>
<TABLE WIDTH=?>
<TABLE WIDTH="%">
<TR></TR>
<TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TD></TD>
<TD ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel
<TH></TH>
Penataan Letak
Kepala Tabel
<TH ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TH BGCOLOR="#$$$$$$">
Warna Kepala
Tabel
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:
value=submit></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 5 berikut:
<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. Hyperlink
1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau
copy saja code dibawah ini:
<html>
<head>
<body>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:
<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>
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:
<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 />
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:
<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:
<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>
</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:
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
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: