Program HTML
Program HTML
<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:
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>
</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 5. From komentar
<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. Hyperlink
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:
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. 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.
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>
<td><font size="5"color="#00FFFF">:[email protected]</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.
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>