Cara Membuat Desain Web
Cara Membuat Desain Web
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
Judul
<HTML></HTML>
Mukadimah
(Header)
Batang Tubuh
<HEAD></HEAD>
<TITLE></TITLE>
<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
Pilih
Huruf
<FONT
COLOR="#$$$$$
$"></FONT>
Jenis <FONT
FACE="***"></FONT>
(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>
(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
<HR
ALIGN=LEFT|RIGHT|
Letak Garis
CENTER>
Tebal Garis
<HR SIZE=?>
(dalam
satuan
pixel)
Lebar Garis
<HR WIDTH=?>
(dalam
satuan
pixel)
Lebar Garis <HR WIDTH="%">
(dalam persentasi
Persentasi
terhadap
lebar
halaman)
LATAR BELAKANG DAN WARNA
Latar
Belakang
Gambar
Warna
Latar
Belakang
Warna Huruf Teks
<BODY
(Tiled Background)
BACKGROUND="URL">
<BODY BGCOLOR="#$$ (Background Color $$$$"
urutan: merah/hijau/biru)
<BODY TEXT="#$$$$$
$">
TABEL
Rancangan
Tabel
Garis
Batas
Tabel
Lebar Tabel
Lebar
Tabel
Persentasi
<TABLE></TABLE>
<TABLE BORDER=?></TABLE>
<TABLE WIDTH=?>
<TABLE WIDTH="%">
Baris
dalam <TR></TR>
Tabel
Penataan
<TR
ALIGN=LEFT|RIGHT|
Letak Baris
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|
MIDDLE>
dalam <TD></TD>
Sel
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
<TH
ALIGN=LEFT|RIGHT|
Letak Kepala CENTER|MIDDLE|BOTTOM
Tabel
VALIGN=TOP|BOTTOM|
MIDDLE>
Warna Kepala <TH BGCOLOR="#$$$$$$">
Tabel
A.
1.
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:
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:
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:
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>
</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>
</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 6. Tabel
B.
1.
Hyperlink
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:
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:
<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:
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'>
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.
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>
</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:
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:
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>
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>