Cara Membuat Design berbasis HTML

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan codesekaligus perintah dimana kitadapat mengatur tampilan yang kitainginkan. Tag pada HTML selaludiawali dengan <x> dan ditutupdengan </x> dimana x adalahperintah dari apa yang kitainginkan.

· Daftar Tag Pada HTML

ELEMEN DASARJenis Dokumen

<HTML></HTML> (terdapat pada awal dan akhir dari file

HTML)

Judul <TITLE></TITLE>

(harus selalu terdapat pada mukadimah)

Mukadimah (Header)

<HEAD></HEAD> (keteranganumum, seperti judul dsb.)

Batang Tubuh

<BODY></BODY> (isi dari halaman HTML)

FORMAT TAMPILANHurufTebal

<B></B> (Bold)

HurufMiring

<I></I> (Italic)

GarisBawah

<U></U> (Underline - jarang digunakan)

Rata Tengah

<CENTER></CENTER> (Center - berlaku untuk

teks maupun gambar)

HurufKedip

<BLINK></BLINK> (Blinking - tag terlucu sampai kini)

Ukuran Huruf

<FONT SIZE=?></FONT> (Font Size - boleh diisi dari 1 sampai 7)

WarnaHuruf

<FONT COLOR="#$$$$$$"></FONT>

PilihJenisHuruf

<FONT FACE="***"></FONT>

PEMISAHParagraf

<P></P> (tag penutup seringkali tak diperlukan)

Align Text

<P ALIGN=LEFT|CENTER|RIGHT></P>

Pndah Baris

<BR> (pindah ke

baris berikut)

Garis Datar

<HR> (Horizontal Rule)

Penataan Letak Garis

<HR ALIGN=LEFT|RIGHT|CENTER>

Tebal Garis

<HR SIZE=?> (dalamsatuanpixel)

Lebar Garis

<HR WIDTH=?> (dalamsatuanpixel)

Lebar <HR WIDTH="%"> (dalam

Garis Persentasi

persentasi terhadap lebar halaman)

LATAR BELAKANG DANWARNA

Latar Belakang Gambar

<BODY BACKGROUND="URL">

(Tiled Background)

Warna Latar

<BODY BGCOLOR="#$$$$$$"

(BackgroundColor -

Belakang

urutan: merah/hijau/biru)

Warna Huruf Teks

<BODY TEXT="#$$$$$$">

TABELRancangan Tabel

<TABLE></TABLE>

Garis Batas Tabel

<TABLE BORDER=?></TABLE>

Lebar Tabel

<TABLE WIDTH=?> (dalam

satuan pixel)

Lebar Tabel Persentasi

<TABLE WIDTH="%"> (dalam satuan persen terhadap lebarhalaman)

Baris dalam

<TR></TR>

Tabel

Penataan LetakBaris

<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

Sel dalam Tabel

<TD></TD> (harus adadalamsetiap baristabel)

Penataan LetakSel

<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

Kepala Tabel

<TH></TH> (Table

Header - seperti data dengan Bold dan Center)

Penataan LetakKepala Tabel

<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

Warna Kepala

<TH BGCOLOR="#$$$$$$">

Tabel

A. Dasar dasar HTML

1. Membuat judul tab dalam halamanweb, buka notepad++ terlebihdahulu, kemudian ketikan codedibawah ini:

<html><head> <title> My First HTML Project< /title></head> <body BGCOLOR=“Green” TEXT=“Red”> WELCOME TO MY WEBSITE</body><body bgcolor=”#00ff00”></html>

Langkah selanjutnya simpan dalamformat HTML dan buka file denganfirefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 1berikut:

Gambar 1. Judul Tab Halaman

2. Mengatur paragraf texs, bukanotepad++ kemudin ketikan codedibawah ini:

<html><head> <title> Tag P, Br dan Hr </title></head><body> <p>Ini adalah paragraf pertama, yangberisi 3 baris. Baris satu, dua dan tiga.<br><br></p> <p>Ini adalah paragraf kerdua, yang berisigaris horizontal</p><hr> Ini adalah garis horizontal.

http://1.bp.blogspot.com/-xTscPfRjoMw/USHO22PVGqI/AAAAAAAAAEE/8SYp6DeCxdw/s1600/welcome.png

</body><body bgcolor=”#00ff00”></html>

Langkah selanjutnya simpan dalamformat HTML dan buka file denganfirefox atau sejenisnya, makahasilnya akan seperti pada gambar 2berikut:

Gambar 2. Mengatur Paragraf

3. Mengatur ukuran huruf, bukanotepad++, kemudian ketikan codedibawah ini:

<html><head><title> Tag Heading< /title>

http://4.bp.blogspot.com/-IGJRk62Idqk/USHPvsQmPhI/AAAAAAAAAFM/7d9uXKmsdCg/s1600/paragraf.png

</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>


Gambar 3. Ukuran Huruf

http://4.bp.blogspot.com/-flp7qBC_K_A/USHPWrdZsQI/AAAAAAAAAEM/zHKiwJoGyp4/s1600/Header.png

4. Mengatur format texs, Bukanotepad++, kemudian ketikan codedibawah 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>


Gambar 4. Format tulisan

5. Membuat from komentar, bukanotepad++, kemudian ketikan codedibawah ini:

<html><head> <title> From komentar </title></head><body>

http://1.bp.blogspot.com/-1JaotESmsZg/USHPjeYO3KI/AAAAAAAAAEk/To21v98ue9U/s1600/format+tulisan.png

<table><tr><tdcolspan="3"> </td></tr><tr> <td colspan="3"><h3>SilahkanBerkomentar :< /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=6width=200></textarea></td></tr><tr><td colspan="3"><input type=submitname="submit"

value=submit></td></tr>< /table></body><body BGCOLOR ="#00FF00"></html>


Gambar 5. From komentar

6. Mengatur kolom, buka notepad++kemudian ketikan code dibawah ini:

http://3.bp.blogspot.com/-E0XQMoE8TP4/USHPsWU9PhI/AAAAAAAAAFE/-qJ_FGk69GQ/s1600/komentar.png

<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>


Gambar 6. Tabel

B. Hyperlink

1. Membuat hyperlink kehalaman weblain, buka notepad++, kemudianketikan atau copy saja code dibawahini:

http://4.bp.blogspot.com/-p5c5whXOJn0/USHPpZqRjeI/AAAAAAAAAE8/QmFam9Xv8zo/s1600/kolom.png

<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 7berikut:

Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagiandalam web, buka notepad++, kemudianketikan atau copy saja code dibawahini:

<html><head> <title> Judul tab </title> </head><body><ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="keRumah"><imgsrc="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg" border="0"width="80" height="30"/></a>

http://1.bp.blogspot.com/-G21F6Kfyj_I/USHPlXVQ8VI/AAAAAAAAAE0/gyiwzDBtRkI/s1600/hyperlink.png

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html"title="Profilku"><imgsrc="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 WarnaPada HTML"><imgsrc="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg" border="0"width="150" height="30"/></a><ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html" title="kumpulanKata-kata Mutiara"><imgsrc="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 dalamformat HTML dan buka file dengan

firefox atau sejenisnya, makahasilnya akan seperti pada gambar 8berikut:

Gambar 8. Link Antar Bagian Dalam

Web

C. Membuat Website Sederhana

1. Membuat halaman login padawebsite, buka notepad++, kemudinketikan atau copy saja code dibawahini:

<html><head><title>login web</title><link rel='icon'href='gambar/B.png'></head><body>

http://4.bp.blogspot.com/-AAuFOWBKzvQ/USHPkJEYz-I/AAAAAAAAAEs/OkUgKvv71dk/s1600/hyperlink+folder.png

<p align="center"> <font size="6"color="#FF6600"> Silahkan mengisi data yang ada di bawahuntuk masuk ke website saya :)</font></p><table align="center"><td><form method="post"action="home.html"><label><fontcolor="#FF6600">Nama Anda:</label><br><input type="text" name="nama"value=""></br><label><font color="#FF6600">Email Atautelepon:</label><br><input type="text" name="Email"value=""></br><label><fontcolor="#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>..... Dalampenggisiannya harus jujur yaa, janganbo'onk :) ......</body></html>


firefox atau sejenisnya, backgrounddapat anda ganti sendiri sesuaidengan kesukaan anda.

Hasilnya seperti pada gambar 9berikut:

Gambar 9. Halaman login

2. Membuat halaman awal, bukanotepad++, kemudian ketikan ataucopy saja code dibawah ini:

<html><head> <title>Home</title><link rel='icon' href='gambar/alien.ico'></head><body>

http://4.bp.blogspot.com/-cHqQHU8VnDU/USHP3cEogbI/AAAAAAAAAFc/4QADlv6mm98/s1600/login.png

<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><fontcolor="#00CCFF" size="5"><imgsrc='gambar/halo.gif' border='0' width='40'height='40'>~ Selamat datang di websitepertama 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"><imgsrc='gambar/PROFIL.jpg' BORDER='0'width='90' height='30'></a><a href="html_colors.html" title="KodeWarna Pada HTML"><img src='gambar/KODEWARNA.jpg' BORDER='0' width='120'height='30'></a><a href="http://www.gametop.com/"title="Tempat Game"><imgsrc='gambar/GAME.jpg' BORDER='0' width='80'height='30'></a><ahref="http://www.w3schools.com/html/html_intro.asp" title="TutorialHTML.w3schools.com"><imgsrc='gambar/TUTORIAL.jpg' BORDER='0'width='90' height='30'></a><a href="kumpulan%20puisi.html"title="kumpulan Kata-kata Mutiara"><imgsrc='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 tutorialtutorial HTML yang ada di ilmuwebsite.com.Tapi, masih ada 1 kekurangan, tutorial HTMLuntuk tingkat pemula???<br />Nggak ada kan??? nah, maka dari itu, saya,Rian hidayat, akan menjelaskan bagaimanawebsite di bangun menggunakan tag-tag HTML,dan ini penulis sediakan untuk pemula. Tapisebelum itu,? ada yang perludiketahui.<br /><br /><a name='more'></a><br /><span id="more-712"></span><br /><b>tag <></b><br />digunakan untuk menuliskan sintak, ada duajenis, yaitu tag container dan tagbiasa.<br />

Tag container adalah tag yang berisi textyang akan ditampilkan setelah tag ditutup. Contoh: <td>text yang ditampilkan</td>.<br />Tag biasa, yahh…tag aja, contoh<BR> (break). <br> kaga perluditutup oleh tag& lt;/br>, tapi jikasintak yang digunakan tag container,contoh:& lt;h1>, yah mesti ditutupdengan </h1>.<br />Tag yang digunakan untuk mengakhiri sintakpunya karakter /(slash) sebelum sintaknya,contohnya: <td>& lt;/td><br />Kita juga dapat mengetik attribut di dalamsebuah tag, contoh: <bodybgcolor=”red”></body>. atau <inputtype=”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 yangmembentuk suatu HTML.<br />pertama, ketikkan<br /><html><br />tekan enter, kemudian ketik<br/><head><br />Dalam container head,kita bisa mengetikan beberapa sintak, tapiyangpaling penting jangan lupa mengetikansintak& lt;title> judul halaman web</title>. Untuk sintak lain nantisaja.<br />Sekarang ketikkan sintak titletadi, jadi seperti ini:<br /><head><title> judul halaman web</title> </head><br />Kemudian ketikkan <body>. Tag bodymerupakan badan/tubuh/inti dari halamanweb, tampilan web yang kita lihat ituberasal dari <body>.<br />Body tuhtag container, jadi mesti ditutup. Hasilsampai sekarang:<br /><html><br /><head><br/><title> Judul Halaman Web</title><br /></head><br /><body><br /></body><br />?<br />

<br /><br />Selanjutnya bagaimana caramenampilkan tulisan ke dalam HTML???Ketikan sembarang text ke dalam tag body,contohnya seperti ini :<br/><body><br />Contoh text yangditampilin di halaman web, By: RianHidayat<br /></body><br />terus, jikasudah, ketikkan </html>, scriptlengkapnya seperti ini :<br/><html><br /><head><br /><title> Judul Halaman Web</title><br /></head><br /><body><br />Contohtext yang ditampilkan di halaman web, By:Rian Hidayat<br /></body><br /></html><br />kalo udah, sekarang save dengan namadasarHTML.<br />kalo udah disave, buka data yang tadi disave.<br />?<br />Pada bagian ini, kalianmungkin akan bingun,g karena html yang tadidisave dan cape cape diketikkan, ternyatagagal. Malah yang terbuka adalah file dinotepad/wordpad. tau kenapa???<br />Karena

ketika men-save, file tersebut di savedalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketikamensave, ada satu tempat di bawah tempatkita menulis nama file,? yakni Save AsType. Silahkan ubah dari textdocument(*.txt) menjadi all files, ketikamenulis nama, di akhir di berikanextensi .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"><fontcolor="#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'>Caramembuat tulisan bergerak</a></font></li><li><a href='Menbuat%20from%20komentar.html' title='membuat fromkomentar'><font color='#0000FF' face='TimesNew Roman'>Cara membuat fromkomentar</a></font></li><li><a href='Membuat%20login.html'title='membuat halaman login'><fontcolor='#0000FF' face='Times New Roman'>Caramembuat halaman login</a></font></li></ul></font></table></td></tr><tr height="50">s<tdcolspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper StdBlack" color="#00CCFF" size="7">~ Meskipunbanyak kendala dalam pembuatan desain web,tapi tetap berusaha untuk mencapai hasilyang 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="animasibergerak gif" /></a><small><center></div><div style="position: fixed; bottom: 0px;right: 0px;width:100px;height:100px;"><ahref='#top'><img border="0" src="gambar/top.png"width='50' height='50' title="Kembali keatas" alt="animasi bergerak gif"/></a><small><center></div><div style="position: fixed; TOP: 0px;right: 10px;width:130px;height:160px;"><ahref='login.html'><img border="0" src="gambar/c.png"width='40' height='40' title="Kembali kelogin" 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>


firefox atau sejenisnya, anda bisamenganti gambar-gambarnya sesuaiyang anda inginkan, dan anda jugadapat menganti background dananimasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar10 berikut:

Gambar 10. Halaman awal

3. Membuat data pribadi atauprofil, buka notepad++, kemudian

http://4.bp.blogspot.com/-sDM1S5qlaVk/USHPhFABbUI/AAAAAAAAAEU/DBEjge8Wjz8/s1600/Home.jpg

ketikan atau copy saja code dibawahini:

<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><fontcolor="#00CCFF" size="5"><imgsrc='gambar/halo.gif' border='0' width='40'

height='40'>~ Selamat datang di websitepertama 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"><imgsrc='gambar/PROFIL.jpg' BORDER='0'width='90' height='30'></a> <a href="html_colors.html"title="Kode Warna Pada HTML"><imgsrc='gambar/KODE WARNA.jpg' BORDER='0'width='120' height='30'></a> <a href="http://www.gametop.com/"title="Tempat Game"><imgsrc='gambar/GAME.jpg' BORDER='0' width='80'height='30'></a> <ahref="http://www.w3schools.com/html/html_in

tro.asp" title="TutorialHTML.w3schools.com"><imgsrc='gambar/TUTORIAL.jpg' BORDER='0'width='90' height='30'></a> <a href="kumpulan%20puisi.html"title="kumpulan Kata-kata Mutiara"><imgsrc='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><palign='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><palign='left'>ALAMAT</p></b></td><td><font size="4"color="#00FFFF">: Weru,Sukoharjo</td></tr> <td align="right"><font size="5"color="#00FFFF"><b><palign='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><palign='left'>PEKERJAAN</p></b></td> <td><font size="5"color="#00FFFF">:Mahasiswa</td></tr> <td align="right"><font size="5"color="#00FFFF"><b><palign='left'>HOBY</p></b></td> <td><font size="5"color="#00FFFF">:Tidur</td></tr> <td align="right"><font size="5"color="#00FFFF"><b><palign='left'>NO.TELPONE</p></b></td>

<td><font size="5"color="#00FFFF">:085728282066</td></tr> <td align="right"><font size="5"color="#00FFFF"><b><palign='left'>EMAIL</p></b></td> <td><font size="5"color="#00FFFF">:[email protected]</td> </tr></table><table><P align="center"><fontcolor="#00FFFF"><img src="gambar/bram.JPG"border="7" width="250" height="300"></p> <tr><td align="right"><font size="5"color="#00FFFF"><b><palign='left'>NAMA</p></b></td> <td><fontsize="5"color="#00FFFF">: Bram PutraP.</p></td></tr> <td align="right"><fontsize="5" color="#00FFFF"><b><palign='left'>ALAMAT</p></b></td> <td><fontsize="4"color="#00FFFF">: Laweyan,Surakarta</td></tr> <td align="right"><fontsize="5" color="#00FFFF"><b><palign='left'>TTL</p></b></td>

<td><fontsize="5"color="#00FFFF">: Surakarta, 13-April-1992</td></tr> <td align="right"><fontsize="5" color="#00FFFF"><b><palign='left'>PEKERJAAN</p></b></td> <td><fontsize="5"color="#00FFFF">:Mahasiswa</td></tr> <td align="right"><fontsize="5" color="#00FFFF"><b><palign='left'>NO.TELPONE</p></b></td> <td><fontsize="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><ahref="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"><fontcolor="#FFFF00" face="Cooper Std Black"> <b>TUTORIAL HTML</b> <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisanbergerak'><font color='#0000FF' face='TimesNew Roman'>Cara membuat tulisanbergerak</a></font></li> <li><a href='Menbuat%20from%20komentar.html' title='membuat fromkomentar'><font color='#0000FF' face='TimesNew Roman'>Cara membuat fromkomentar</a></font></li> <li><a href='Membuat%20login.html'title='membuat halaman login'><fontcolor='#0000FF' face='Times New Roman'>Caramembuat 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 banyakkendala dalam pembuatan desain web, tapitetap berusaha untuk mencapai hasil yangterbaik~</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="animasibergerak gif" /></a><small><center></div> <div style="position: fixed; bottom:0px; right:0px;width:100px;height:100px;"><ahref='#top'><img border="0" src="gambar/top.png"width='50' height='50' title="Kembali keatas" alt="animasi bergerak gif"/></a><small><center></div> <div style="position: fixed; TOP:0px; right:

10px;width:130px;height:160px;"><ahref='login.html'> <img border="0" src="gambar/c.png"width='40' height='40' title="Kembali kelogin" 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 dalamformat HTML dan buka file denganfirefox atau sejenisnya, anda bisamenganti gambar-gambarnya sesuaiyang anda inginkan, dan anda jugadapat menganti background dananimasi yang sesuai dengan anda.


Gambar 11. Membuat data pribadi

4. Membuat album galery, bukanotepad++, kemudian ketikan ataubisa copy saja code dibawah ini:

<html><head> <title>Profilku</title><link rel='icon' href='gambar/alien.ico'></head><body> <center>

http://4.bp.blogspot.com/-AZ97tZGXCkE/USHPhOipPmI/AAAAAAAAAEY/TUEzrm12j4o/s1600/Profil.jpg

<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><fontcolor="#00CCFF" size="5"><imgsrc='gambar/halo.gif' border='0' width='40'height='40'>~ Selamat datang di websitepertama 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="keRumah"><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"><imgsrc='gambar/PROFIL.jpg' BORDER='0'width='90' height='30'></a> <ahref="html_colors.html" title="Kode WarnaPada HTML"><img src='gambar/KODE WARNA.jpg'BORDER='0' width='120' height='30'></a> <a href="http://www.gametop.com/"title="Tempat Game"><imgsrc='gambar/GAME.jpg' BORDER='0' width='80'height='30'></a> <ahref="http://www.w3schools.com/html/html_intro.asp" title="TutorialHTML.w3schools.com"><imgsrc='gambar/TUTORIAL.jpg' BORDER='0'width='90' height='30'></a> <ahref="kumpulan%20puisi.html"title="kumpulan Kata-kata Mutiara"><imgsrc='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><ahref="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><ahref="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"><fontcolor="#FFFF00" face="Cooper Std Black"> <b>TUTORIAL HTML</b><ul> <li><a href="buat%20ayat%20bergerak.html" title='membuat tulisanbergerak'><font color='#0000FF' face='TimesNew Roman'>Cara membuat tulisanbergerak</a></font></li> <li><a href='Menbuat%20from%20komentar.html' title='membuat fromkomentar'><font color='#0000FF' face='TimesNew Roman'>Cara membuat fromkomentar</a></font></li> <li><a href='Membuat%20login.html'title='membuat halaman login'><fontcolor='#0000FF' face='Times New Roman'>Caramembuat 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 banyakkendala dalam pembuatan desain web, tapitetap berusaha untuk mencapai hasil yangterbaik~</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="animasibergerak gif" /></a><small><center></div><div style="position: fixed; bottom: 0px;right: 0px;width:100px;height:100px;"><ahref='#top'> <img border="0" src="gambar/top.png"width='50' height='50' title="Kembali keatas" alt="animasi bergerak gif"/></a><small><center></div><div style="position: fixed; TOP: 0px;right: 10px;width:130px;height:160px;"><ahref='login.html'><img border="0"src="gambar/c.png" width='40' height='40'title="Kembali ke login" alt="animasibergerak 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>



Gambar 12. Galery

5. Membuat artikel html tentangcara membuat tulisan bergerak, bukanotepad++, kemudian ketikan ataucopy saja code dibawah ini:

<html><head> <title>Cara membuat tulisanbergerak</title><link rel='icon' href='gambar/alien.ico'></head><body> <center>

http://4.bp.blogspot.com/-38SdKMJZk4c/USHPyTRheFI/AAAAAAAAAFU/BvC9Uk38UgY/s1600/album.jpg

<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><fontcolor="#00CCFF" size="5"><imgsrc='gambar/halo.gif' border='0' width='40'height='40'>~ Selamat datang di websitepertama 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>

<ahref="http://mp3skull.com/" title="MP3"><img src='gambar/MP3.jpg'BORDER='0' width='80'height='30'></font></a> <a href="profilku.html"title="Profilku"><imgsrc='gambar/PROFIL.jpg' BORDER='0'width='90' height='30'></a> <ahref="html_colors.html" title="Kode WarnaPada HTML"><img src='gambar/KODE WARNA.jpg'BORDER='0' width='120' height='30'></a> <ahref="http://www.gametop.com/"title="Tempat Game"><imgsrc='gambar/GAME.jpg' BORDER='0' width='80'height='30'></a> <ahref="http://www.w3schools.com/html/html_intro.asp" title="TutorialHTML.w3schools.com"><imgsrc='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 MenjadiBergerak</font></span></center></b><br /><br /><font color='#00FFFF'>Marquee tagdigunakan untuk menggerakkan sama adaperkataan ataupun gambar. Dalam contoh ini,saya akan tunjukkan beberapa cara untukmenggunakan Marquee tag ini untukmenggerakkan 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;"><marqueedirection="right"><b>Teks Bergerak KeKanan...</b></marquee></div><div style="color: #FFFF00;"><marqueedirection="left"><b>Teks Bergerak KeKiri...</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 /><spanstyle="font-size: large;"><fontcolor='#00FFFF'><b>1.</b></span> Sepertiyang anda lihat di atas, Teks ini bergerakke kiri dan ke kanan. Anda boleh gunakankode dibawah ini untuk melakukan trickstersebut.</font><br /><br /><div class="code"><br /><span style="color:white;"><marquee direction="</span>

<b><span style="color:#FFFF00;">right</span></b><spanstyle="color: white;">">This textscrollsright...</marquee></span></div><br /><br /><font color='#00FFFF'>Apa yang andaperlukan, gantikan teks yang bewarna<b><spanstyle="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;"><marqueescrollamount="30"><b>Teks ini MacamFerari..</b></marquee></div><br /><spanstyle="font-size: large;"><fontcolor='#00FFFF'><b>2.</b></span> Anda bolehmengubah kelajuan teks dengan menggunakankod di bawah ni.</font><br /><br /><div class="code"><br /><span style="color:white;"><marqueescrollamount="</span><b><spanstyle="color:#FF6600;">30</span></b><spanstyle="color: white;">"></span><spanstyle="color: #FF0000;">Teks ni Macam

Ferari..</span><span style="color:white;"></marquee></span></div><br /><br /><fontcolor='#00FFFF'>Ubah nomer yang bewarna<b><spanstyle="color:#FF6600;">Oren</span></b>untuk mengubah kelajuan.</font><br /><br /><div style="color: #f1c232;"><marqueescrolldelay="300"><b>Teks ini sepertiSiput..</b></marquee></div><br /><div class="code"><br/><span style="color:white;"><marqueescrolldelay="</span><b><spanstyle="color:#00FF00;">300</span></b><spanstyle="color: white;">">Teks ini sepertiSiput..</marquee></span></div><br /><br /><b><spanstyle="font-size: large;"><fontcolor='#00FFFF'>3.</span></b> Ubah nomeryang bewarna< b><spanstyle="color:#00FF00;">hijau</span></b>untuk mengubah kelajuan.</font><br /><br /><div style="color:#6600CC;"><marquee

behavior="alternate"><b>Teks iniMelantun</b></marquee></div><br /><font color='#00FFFF'>Untukmembuatkan teks anda melantun seperti diatas ini. Gunakan kode di bawah.</font><br /><br /><div class="code"><br /><span style="color:white;"><marqueebehavior="alternate"></span><bstyle="color: #6600CC;">Teks iniMelantun</b><span style="color:white;"></marquee></span></div><br /><br /><b><fontcolor='#00FFFF'>4.</b> Ok. Seterusnya carauntuk menetapkan ruangan untuk Marqueebergerak</font><br /><br /><div style="color:#0066FF;"><marquee width="200"><b>Teks ini bergerakdalam kelebaran 200width</b></marquee></div><br /><divclass="code"><br /><span style="color: white;"><marqueewidth="</span><span style="color:#00FF00;">200</span><span style="color:white;">">Teks ini bergerak dalam

kelebaran 200width</marquee></span></div><br /><font color='#00FFFF'>Anda bolehtentukan width mengikut kesukaan andadengan menukarkan nomer yang bewarna<b><span style="color:#00FF00;">hijau</span></b>.</font><br /><br /><span style="font-size:large;"><b><fontcolor='#00FFFF'>5.</b></span> Seterusnyasaya akan menggabungkan beberapa kodeMarquee ini bersama.</font><br /><br /><div style="color: #33FF33;"><marqueebehavior=”alternate” scrollamount=”30”width=”400”><b>Teks PalingAwesome</b></marquee></div><br /><font color='#00FFFF'>Ini merupakankode yang saya gunakan untuk membuat teksbergerak seperti yang di atas.</font><br /><br /><div class="code"><br /><span style="color: white;"><marqueebehavior="alternate" width="400"scrollamount="30"></span><b

style="color: #33FF33;">Teks PalingAwesome</b><span style="color:white;"></marquee></span></div><br /><br /><font color='#00FFFF'>Sekarang, andaboleh coba dalam blog anda, anda juga bolehgabungkan kode-kode marquee ini mengikutkesukaan 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><ahref="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><ahref="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"><fontcolor="#FFFF00" face="Cooper Std Black"> <b>TUTORIAL HTML</b> <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisanbergerak'><font color='#0000FF' face='TimesNew Roman'>Cara membuat tulisanbergerak</a></font></li> <li><a href='Menbuat%20from%20komentar.html' title='membuat fromkomentar'><font color='#0000FF' face='TimesNew Roman'>Cara membuat fromkomentar</a></font></li> <li><a href='Membuat%20login.html'title='membuat halaman login'><fontcolor='#0000FF' face='Times New Roman'>Caramembuat halaman login</a></font></li> </ul></font></table></td></tr><trheight="50"><td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black"color="#00CCFF" size="7">~ Meskipun banyakkendala dalam pembuatan desain web, tapi

tetap berusaha untuk mencapai hasil yangterbaik~</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="animasibergerak gif" /></a><small><center></div><div style="position: fixed; bottom: 0px;right: 0px;width:100px;height:100px;"><ahref='#top'><img border="0" src="gambar/top.png"width='50' height='50' title="Kembali keatas" alt="animasi bergerak gif"/></a><small><center></div><div style="position: fixed; TOP: 0px;right: 10px;width:130px;height:160px;"><ahref='login.html'><img border="0" src="gambar/c.png"width='40' height='40' title="Kembali kelogin" alt="animasi bergerak gif"/></a><small><center></div><bodybackground='gambar/yy.jpg'>

</body><EMBED SRC="MP3/A7x_Afterlife.swf"AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"HEIGHT="1" ALIGN="CENTER"></EMBED></html>



Gambar 13. Artikel tulisan bergerak

http://3.bp.blogspot.com/-vtlDaTVvBfU/USHP7XaEVMI/AAAAAAAAAFk/yVDnY-K0sL8/s1600/tulisan+bergerak.jpg