Cara Membuat Design berbasis HTML

(1)

Membuat Desain Website Berbasis HTML

Dengan Notepad++

Pengenalan Tag Pada HTML

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

_{(terdapat pada}

awal dan akhir

dari file HTML)

Judul

_{(harus selalu}

terdapat pada

mukadimah)

Mukadimah

(Header)

_(keterangan

umum, seperti

judul dsb.)

(2)

(3)

FORMAT TAMPILAN

Huruf

Tebal

<B></B>

_(Bold)

Huruf

Miring

<I></I>

_(Italic)

Garis

Bawah

<U></U>

_(Underline

-jarang

digunakan)

Rata

Tengah

_{(Center -}

berlaku

untuk teks

maupun

gambar)

Huruf

Kedip

_{(Blinking -}

tag terlucu

sampai kini)

Ukuran

Huruf

_{(Font Size -}

(4)

dari 1

<P></P>

_(tag

penutup

RIGHT></P>

Pndah

Baris

<BR>

_(pindah

(5)

berikut)

_(dalam

satuan

pixel)

Lebar

Garis

_(dalam

satuan

_(dalam

persentas

i terhadap

lebar

halaman)

(6)

WARNA

$$$$$"

(Background

_{Color - urutan:}

(7)

Lebar

Tabel

_(dalam

satuan

_(dalam

satuan

Penataan

Letak

Baris

<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

_(harus

(8)

tabel)

Penataan

Letak Sel

<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

_(Table

Header

(9)

A. Dasar dasar HTML

1. Membuat judul tab dalam halaman web, buka

notepad++ terlebih dahulu, kemudian ketikan code

dibawah ini:

<title> My First HTML Project< /title> </head>

<body BGCOLOR=“Green” TEXT=“Red”> WELCOME TO MY WEBSITE

</body>

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 1 berikut:

(10)

2. Mengatur paragraf texs, buka notepad++ kemudin

ketikan code dibawah ini:

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

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 2 berikut:

(11)

3. Mengatur ukuran huruf, buka notepad++,

kemudian ketikan code dibawah ini:

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

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 3 berikut:

(12)

4. Mengatur format texs, Buka notepad++, kemudian

ketikan code dibawah ini:

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

(13)

Gambar 4. Format tulisan

5. Membuat from komentar, buka notepad++,

kemudian ketikan code dibawah ini:

<title> From komentar </title> </head>

<tdcolspan="3"> </td></tr><tr>

<td colspan="3"><h3>Silahkan Berkomentar :< /h3></td> </tr>

<tr>

(14)

<td>Email</td> <td>:</td>

<tr>

<td valign=top>Komentar</td> <td valign=top>:</td>

<td><textarea name="komentar" rows=6

width=200></textarea></td> </tr>

<tr>

</tr> < /table> </body>

(15)

Gambar 5. From komentar

6. Mengatur kolom, buka notepad++ kemudian

ketikan code dibawah ini:

<title>warna-warna</title> </head>

<body>

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

(16)

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

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

(17)

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

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 7 berikut:

(18)

2. Membuat hyperlink antar bagian dalam web, buka

notepad++, kemudian ketikan atau copy saja code

dibawah ini:

%20web/home.html" title="ke Rumah"><img

src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Gr aphic1.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/pr ofil.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/K ode%20Warna.jpg" border="0" width="150" height="30"/></a> <a

href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpula n%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/ka ta%20kata.jpg" border="0" width="100" height="30"/></a> </body>

(19)

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, maka

hasilnya akan seperti pada gambar 8 berikut:

Gambar 8. Link Antar Bagian Dalam Web

C. Membuat Website Sederhana

1. Membuat halaman login pada website, buka

notepad++, kemudin ketikan atau copy saja code

dibawah ini:

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

<body>

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)</font>

</p>

(20)

<br>

<label><font color="#FF6600">Email Atau telepon:</label> <br>

<input type="text" name="Email" value=""></br><label><font color="#FF6600">Alamat:</label>

<br>

(21)

(22)

<label><font color="#FF6600">Jenis Kelamin </label> <br><font color="red">Pria

<font color="#CCFF00">Wanita</br> <input type="submit" Value="Masuk"> </td>

</table>

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

(23)

Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++,

kemudian ketikan atau copy saja code dibawah ini:

<body>

</tr>

<p><ul><ul><left><BLINK><b><font color="#00CCFF"

(24)

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

</ul></left> </td>

</tr> <tr>

(25)

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

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& lt;BR> (break). <br> kaga perlu ditutup oleh tag& lt;/br>, tapi jika sintak yang digunakan tag container, contoh:& lt;h1>, yah mesti ditutup dengan </h1>.<br />

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td>& lt;/td><br />

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.<br />

(26)

<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& lt;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& lt;/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& lt;/title><br />

</head><br /> <body><br />

</body><br />?<br />   <br />

(27)

/></body><br />terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :<br /><html><br /><head><br />

<title> Judul Halaman Web& lt;/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.

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

(28)

</td>

</p>

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

(29)

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

<EMBED SRC="MP3/I%20Won%27t%20See%20You

%20Tonight%28Part1%29.swf" AUTOSTART="TRUE"

LOOP="TRUE" WIDTH="1" HEIGHT="1"

(30)

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, anda

bisa menganti gambar-gambarnya sesuai yang anda

inginkan, dan anda juga dapat menganti background

dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

Gambar 10. Halaman awal

3. Membuat data pribadi atau profil, buka notepad++,

kemudian ketikan atau copy saja code dibawah ini:

<title>Profilku</title>

(31)

</head> <body>

<tr>

</tr>

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

height='30'></a>

(32)

<a href="http://www.w3schools.com/html/html_intro.asp"

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

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

(33)

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

085728282066</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>EMAIL</p></b></td>

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

(34)

<td><font size="5"color="#00FFFF">: Surakarta, </tr></table></td>

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

</p></tr> </table>

(35)

<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='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;">

</div>

(36)

</div>

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.

(37)

Gambar 11. Membuat data pribadi

4. Membuat album galery, buka notepad++,

kemudian ketikan atau bisa copy saja code dibawah

ini:

<title>Profilku</title>

<body>

<table width='1000' height='400' border="0"

background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

<tr>

(38)

</tr>

height='40'></font></BLINK></b></ul></ul></p></left> <left>

<ul><a href="home.html" title="ke Rumah"><img

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"

src='gambar/TUTORIAL.jpg' BORDER='0' width='90'

height='30'></a> <a href="kumpulan%20puisi.html"

(39)

src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>

</ul></left> </td></tr> <tr>

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

<tr><p align="center"><font color="#00FFFF" size='6'>Album Kegiatan Teknisi</font>

<tr><td><img

src="file:///D:/Tugas%20HTML/Gambar/c.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>

(40)

<td><p><a href="http://www.facebook.com/"

target="_blank" title="Masuk ke Facebook"> <img

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>

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

(41)

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

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

(42)

Langkah selanjutnya simpan dalam format HTML

dan buka file dengan firefox atau sejenisnya, anda

bisa menganti gambar-gambarnya sesuai yang anda

inginkan, dan anda juga dapat menganti background

dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 12. Galery

5. Membuat artikel html tentang cara membuat

tulisan bergerak, buka notepad++, kemudian ketikan

atau copy saja code dibawah ini:

(43)

</head> <body>

<table width='1000' height='400' border="0"

background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

<tr>

</tr>

height='40'></font></BLINK></b></ul></ul></p></left> <left>

<ul><a href="home.html" title="ke Rumah"><img

height='30'></a>

(44)

<a

href="http://www.w3schools.com/html/html_intro.asp"

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

<b><center><span style="font-size: large;" align='center'><font color='#0066FF' size='5'>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b>

<br />

<br /><font color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br />

<br />

(45)

<marquee direction="down" height="50"><center> <b>Teks Bergerak Ke Bawah...</b></center>

</marquee> </div>

<div style="color: #FFFF00;"><marquee

direction="right"><b>Teks Bergerak Ke

Kanan...</b></marquee> </div>

<div style="color: #FFFF00;"><marquee

direction="left"><b>Teks Bergerak Ke Kiri...</b></marquee> </div>

<br />

<marquee direction="up" height="50"><center> <b>Teks Bergerak Ke Atas...</b></center>

</marquee> </div>

<br />

<a name='more'></a><br /><br /><span style="font-size: large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br />

<br />

<div class="code"><br /><span style="color:

white;"><marquee direction="</span>

<b><span style="color: #FFFF00;">right</span></b><span

style="color: white;">">This text scrolls

right...</marquee></span></div><br />

(46)

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>

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>

<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

(47)

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

white;"><marquee behavior="alternate"></span><b

style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;"></marquee>

</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak

</font><br /><br /><div style="color: #0066FF;">

<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class="code"><br / >

<span style="color: white;"><marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">">Teks ini bergerak dalam kelebaran 200 width</ marquee></span></div>

<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna< b><span style="color: #00FF00;">hijau</span></b>. </font><br /><br /><span style="font-size: large;"><b><font color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

(48)

<div style="color: #33FF33;"><marquee behavior=”alternate”

scrollamount=”30” width=”400”><b>Teks Paling

Awesome</b></marquee></div>

<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.

</font><br /><br /> <div class="code"> <br />

<span style="color: white;"><marquee behavior="alternate" width="400" scrollamount="30"></span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;"></marquee>

</span></div> <br />

<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td>

<td><p><a href="http://www.facebook.com/"

target="_blank" title="Masuk ke Facebook"> <img

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>

(49)

< center>

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

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

(50)

<img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div><body

background='gambar/yy.jpg'> </body>

<EMBED SRC="MP3/A7x_Afterlife.swf"

AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>