cara membuat desain berbasis web

(1)

cara membuat desain web

Sunday, February 17, 2013

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)

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 - boleh diisi dari}

1 sampai 7)

Warna Huruf

Pilih Jenis

Huruf

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 Letak

Garis

Tebal Garis

_{(dalam satuan pixel)}

Lebar Garis

_{(dalam satuan pixel)}

Lebar Garis

Persentasi

_{(dalam persentasi}

terhadap lebar

halaman)

LATAR BELAKANG DAN WARNA

Latar Belakang

Gambar

<BODY

BACKGROUND="URL">

(Tiled Background)

Warna Latar

Belakang

<BODY BGCOLOR="#$$$$$

$"

(Background Color -

_{urutan: merah/hijau/biru)}

(3)

TABEL

Rancangan Tabel

Garis Batas

Tabel

Lebar Tabel

_{(dalam satuan pixel)}

Lebar Tabel

Persentasi

_{(dalam satuan persen}

terhadap lebar halaman)

Baris dalam

Tabel

Penataan Letak

Sel dalam Tabel

_{(harus ada dalam setiap}

baris tabel)

Kepala Tabel

_{(Table Header - seperti}

data dengan Bold dan

Center)

1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan

code dibawah ini:

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

<bodyBGCOLOR=“Green” TEXT=“Red”>

WELCOME TO MY WEBSITE </body>

(4)

Gambar 1. Judul Tab Halaman

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:

Gambar 2. Mengatur Paragraf

3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:

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

<body>

(5)

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

Gambar 3. Ukuran Huruf

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>

(6)

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>

<tr>

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

<tr>

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

<tr>

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

(7)

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

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>

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

(8)

Gambar 6. Tabel

B. Hyperlink

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code

dibawah ini:

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

Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja

(9)

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

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>

(10)

<br>

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

<input type="text" name="Email" value=""></br><label><font

color="#FF6600">Alamat:</label> <br>

(11)

<option value="12">Desember</option> </select>

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

Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

(12)

</tr>

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

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

(13)

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.

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

(14)

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

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

<div style="position: fixed; bottom: 0px; right:

0px;width:100px;height:100px;"><a href='#top'>

</div>

<div style="position: fixed; TOP: 0px; right:

10px;width:130px;height:160px;"><a href='login.html'>

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf"

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

(15)

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>

<body>

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

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

</tr>

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

(16)

<a href="html_colors.html" title="Kode Warna Pada HTML"><img

src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

src='gambar/GAME.jpg' BORDER='0' width='80' 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>

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

align='left'>TTL</p></b></td>

<td><font size="5"color="#00FFFF">: Sukoharjo,

09-November-1993</td></tr>

align='left'>PEKERJAAN</p></b></td>

<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

align='left'>HOBY</p></b></td>

<td><font size="5"color="#00FFFF">: Tidur</td></tr>

align='left'>NO.TELPONE</p></b></td>

align='left'>EMAIL</p></b></td>

<td><font size="5"color="#00FFFF">: hrian89@gmail.com</td>

</tr></table>

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

align='left'>ALAMAT</p></b></td>

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

align='left'>TTL</p></b></td>

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

(17)

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

align='left'>NO.TELPONE</p></b></td>

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

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>

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:

</div>

</div>

(18)

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:

Gambar 11. Membuat data pribadi

4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah

ini:

<title>Profilku</title>

<body>

<tr>

</tr>

(19)

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

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>

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

<tr><td><img src="file:///D:/Tugas%20HTML/Gambar/c.png" border="3"

<td><img src="file:///D:/Tugas%20HTML/Gambar/d.png" border="3"

<tr><td><img src="file:///D:/Tugas%20HTML/Gambar/e.png" border="2"

<td><img src="file:///D:/Tugas%20HTML/Gambar/f.png" border="3"

width="300" height="300" /></td></p></tr> </table>

</td>

<table align="left" width='200' border='0' bgcolor=''

bordercolor='green'><tr align='center'>

height="70"/></a><td> </p></tr></table>

<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

(20)

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

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

<img border="0" src="gambar/top.png" width='50' height='50'

title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>

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>

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.

(21)

Gambar 12. Galery

5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian

ketikan atau copy saja code dibawah ini:

<title>Cara membuat tulisan bergerak</title> <link rel='icon' href='gambar/alien.ico'>

</head> <body>

<tr>

</tr>

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

(22)

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

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

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

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

(23)

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

scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span

style="color: white;">"></span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;"></marquee>

</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang bewarna

<b><span style="color:#FF6600;">Oren</span></b> untuk mengubah

kelajuan.</font> <br /><br />

<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks ini seperti Siput..</b></marquee></div><br />

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

scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span

style="color: white;">">Teks ini seperti Siput..</marquee>

</span></div><br /><br /><b><span style="font-size: large;"><font color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.

</font><br /><br /><div style="color: #6600CC;"><marquee

behavior="alternate"><b>Teks ini Melantun</b></marquee>

</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.

</font><br /><br />

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

behavior="alternate"></span><b style="color: #6600CC;">Teks ini

Melantun</b><span style="color: white;"></marquee>

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

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

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

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

<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style="color: #00FF00;">hijau</span></b>.

</font><br /><br /><span style="font-size: large;"><b><font

color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

</font><br /><br />

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

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

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

<span style="color: white;"><marquee behavior="alternate" width="400"

scrollamount="30"></span><b style="color: #33FF33;">Teks Paling

Awesome</b><span style="color: white;"></marquee> </span></div>

<br />

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

<table align="left" width='200' border='0' bgcolor=''

(24)

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

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

</div>

</body>

</html>