Konfigurasi router tp-link TL-WR702N

Bagaimana cara Konfigurasi Mode Router pada TL-WR702N

Definisi : TL-WR702N terhubung ke modem DSL atau kabel dan bekerja sebagai router nirkabel biasa.  

Aplikasi: Akses Internet dari modem DSL atau kabel yang tersedia untuk satu pengguna tapi lebih banyak diperlukan untuk berbagi internet.

Koneksi Fisik

Langkah 1:

Hubungkan WR702N ke port Ethernet secara langsung ke komputer anda menggunakan kabel Ethernet;

Langkah 2:

Nyalakan WR702N

Pengaturan Awal Komputer– Untuk Windows 7, Vista & XP (Untuk Mac OS X, silahkan ke halaman 3)

Langkah 1:

Windows 7 &Windows Vista: Arahkan ke Start->Control Panel ->Network and Sharing Center

Windows XP : Arahkan ke Start->Control Panel->Network Connections

Langkah 2:

Windows 7 : Arahkan ke Network andSharing Center->Change Adapter settings

Windows Vista : Arahkan ke Network andSharing Center->Manage Network Connections

Windows XP : (Ke langkah selanjutnya)

Langkah 3:

Windows 7, Vista dan XP : Klik Kanan Local Area Connection ->Pilih Properties -> Klik 2X Internet Protocol Version 4 (TCP/IPv4) atau Internet Protocol (TCP/IP) untuk Windows XP.

Langkah 4:

Windows 7, Vista dan XP : Pilih “Use the Following IP address:”

Ketikan informasi berikut ini:

IP address: 192.168.0.10

Subnet mask: 255.255.255.0

Klik OK untuk keluar

Klik OK lagi untuk menerapkan settingan.

Windows 7, Vista & XP

Pengaturan Awal Komputer – Untuk Mac OS X

Arahkan ke Apple->System Preferences>Network-> Sorot pada Ethernet ->Konfigurasi IPv4: Using DHCP with manual address

Masukan IPv4 Address: 192.168.0.10

Klik Apply

Akses Halaman Manajemen

Buka Web Browser -> Ketik 192.168.0.254 di kolom alamat -> Tekan Enter

Isikan User Name standar: admin

Isikan Password standar: admin

Klik OK

Jalankan Quick Setup

Langkah 1:

Arahkan ke Quick Setup -> Klik Next

Langkah 2:

Pilih Router-> Klik Next

Langkah 3:

Sesuaikan nama wireless (SSID) anda dan password

Wireless Radio: Enable SSID: (Rubah Nama Wireless Anda) Region:(Pilih Lokasi   Anda Saat ini) Channel: Auto Mode: 11bgn mixed Channel Width: Auto Security Options: WPA-PSK/WPA2-PSK PSK Password: (Buat sebuah password pribadi)   Klik Next

Langkah 4:

Pilih WAN Connection ISP yang anda gunakan. Untuk kebanyakan DSL dan kabel ISP, mereka menggunakan Dynamic IP.

Jika anda tidak yakin, silahkan berkonsultasi dengan layanan pelanggan ISP.

Prosedur berbeda sesuaikan dengan Connection Type yang anda pilih.

1) Pilih Dynamic IP, dan klik Next;

2) Pilih PPPoE, masukan Username dan Password yang disediakan oleh ISP kemudian klik Next;

  3) Pilih Static IP, masukan IP parameters yang disediakan oleh ISP kemudian klik Next;

Langkah 5:

Klik: Reboot, dan tunggu sampai proses mencapai 100%

Dalam waktu bersamaan silahkan reboot modem anda.

Penempatan WR702N

Sekarang Anda dapat menghubungkan WR702N langsung ke Ethernet LAN port di bagian belakang modem Anda.

Selamat! Anda dapat berbagi internet Anda untuk perangkat nirkabel ganda .

Penyelesaian Pengembalian Komputer – Untuk Windows 7, Vista & XP (Untuk Mac OS X, silahkan ke halaman 9)

Langkah 1:

Windows 7 &Windows Vista: Arahkan ke Start->Control Panel ->Network and Sharing Center

Windows XP : Arahkan ke Start->Control Panel->Network Connections

  

Langkah 2:

Windows 7 : Arahkan ke Network andSharing Center->Change Adapter settings

Windows Vista : Arahkan ke Network andSharing Center->Manage Network Connections

Windows XP : (ke Langkah Selanjutnya)

Langkah 3:

Windows 7, Vista dan XP : Klik Kanan Local Area Connection ->Pilih Properties -> Klik 2X Internet Protocol Version 4 (TCP/IPv4) atau Internet Protocol (TCP/IP) untuk Windows XP.

Langkah 4:

Windows 7, Vista dan XP : Pilih “Obtainan IP address automatically” dan “Obtain DNS server address automatically”

Klik OK untuk keluar

Klik OK lagi untuk menerapkan setingan.

Windows 7, Vista & XP

Penyelesaian Pengembalian Komputer – Untuk   Mac OS X

Arahkan ke Apple>System Preferences->Network-> Sorot pada Ethernet ->Konfigurasi IPv4: Using DHCP

Klik Apply

Hit Time Attendance

PANDUAN CEPAT PRAKTIKAL

HIT TIME ATTENDANCE 4.0.1.08

TEAM DASENDO
2009

Buka program HIT Time Attendance Admin :

Username dan Password default adalah “Administrator” dan “Password” tanpa tanda petik.

Tampilan utama Time Attendance System adalah seperti gambar di bawah :

Untuk membuat department, Employee Information, Shift, Flexible Group Shift, Pattern Shift, Roster ada di menu Tools di sidebar kiri atau menu Tools di atas, untu memulai Silhkan Klik Tools di Sidebar sebelah kiri.

Langkah untuk membuat Department adalah seperti gambar dibawah Klik Department setting.

Klik Add New à Isi Department Code misal “MARKETING”, Department Name misal “MARKETING” tanpa tanda petik à klik Save. Ini bisa diulangi untuk penambahan Department berikutnya.

Gambar Contoh pembuatan Department seperti gambar dibawah :

Untuk Melihat hasil Input Data Department yang telah kita masukkan dapat dilihat dengan klik tombol yang diberi tanda kotak hijau seperti gambar dibawah :

Hasil Input Data Department seperti gambar dibawah :

Pembuatan Employee Information Setting

Klik Employee Information Setting di Sidebar sebelah kiri à Add News à Isi Fingerprint ID, Employee ID, dan seterusnya yang diberi kotak berwarna hijau. Nickname ( maks. 7 huruf ) perlu diisi dipergunakan untuk memberikan nama pada Mesin Absen dan sinkronisasi data antara mesin absen dan komputer.

Contoh Pengisian Employee Information seperti gambar dibawah :

Untuk melihat data yang sudah kita masukkan klik pada tombol dengan tanda kotak hijau seperti gambar dibawah :

Hasil Input Data yang sudah dimasukkan :

Pembuatan shift

Klik Shift Setting di Sidebar kiri à Add New à Isi Shift Code, Shift Number otomatis, Shift Name, Shift Begin dan Shift End. Seperti Contoh gambar dibawah ini :

Untuk melihat Input Data Shift yang sudah dilakukan dapat dengan klik tombol dengan tanda kotak hijau seperti dibawah :

Hasil Input Data Shift seperti gambar dibawah :

Pembuatan Flexible Group Shift ( jika memang terdapat Shift / Jam Kerja yang Flexible atau tidak tetap ) jika tidak ada bisa dilewati ke langkah yang berikutnya.

Klik Flexible Group Shift Setting di Sidebar à Add New à Isi Group Shift Code, Group Shift Name dengan misal “PRODUKSI”, “PRODUKSI” à Kemudian klik Choose untuk memilih shift mana saja yang masuk kedalam Flexible Group Shift Code ini.

Hasil Contoh Pembuatan Flexible Group Shift Setting seperti gambar dibawah :

Pembuatan Pattern Shift ( Fixed )

Klik Pattern Shift Setting di Sidebar kiri à Add New à Isikan Pattern Code, Pattern Name, Day, Tipe Fixed dan masukkan Shift à klik tombol dengan tanda kotak hijau. Sampai hari ke tujuh. Dimana hari Pertama adalah Hari Senin, sampai hari ke tujuh yaitu hari Minggu. Misal hari ke enam hari sabtu bisa diisi dengan “Shift Sabtu”, dan hari minggu bisa diisi dengan “Shift OFF” atau “Shift OT” à Klik Save à Klik Add employee dan pilih seperti gambar dibawah, centang yang dipilih dalam hal yang masuk dalam Pattern ( Pola ) Fixed.

Kemudian àKlik Check for select all of Employee dan à Klik Proses à OK.

Pembuatan Pattern Shift ( Flexible )

Klik Pattern Shift Setting di Sidebar sebelah kiri à Add New à Pattern Code, Pattern Name, Day, Tipe dengan misal Code : “PRODUKSI”, Name : “PRODUKSI”, Hari dimulai “Senin”, Tipe : Flexible à Masukkan List of Pattern Detail dengan Klik àTombol panah kebawah dengan tanda kotak warna hijau seperti gambar diatas, sampai hari ke Tujuh à Add Employee centang Karyawan yang masuk pada tipe Flexible ini à Choose.

Pada Tipe Flexible ini geser Scroolbar bawah ( dengan tanda kotak warna hijau ) sampai ke kanan dan klik Group Shift Code ganti dengan tipe Misal “PRODUKSI” à Proses à Ok.

Roster ( Penjadwalan )

Klik Roster Setting di Sidebar sebelah kiri à Tombol View untuk melihat jadwal yang sudah di setting di Pattern Shift Setting.

Jika Jadwal masih X ( no Generating Calendar ) berarti karyawan tsb masih belum masuk di Pattern Shift Setting, contoh seperti gambar diatas pada karyawan bernama Gun.

HTML

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	<HTML></HTML>	(terdapat pada awal dan akhir dari file HTML)
Judul	<TITLE></TITLE>	(harus selalu terdapat pada mukadimah)
Mukadimah (Header)	<HEAD></HEAD>	(keterangan umum, seperti judul dsb.)
Batang Tubuh	<BODY></BODY>	(isi dari halaman HTML)

FORMAT TAMPILAN
Huruf Tebal	<B></B>	(Bold)
Huruf Miring	<I></I>	(Italic)
Garis Bawah	<U></U>	(Underline - jarang digunakan)
Rata Tengah	<CENTER></CENTER>	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	<BLINK></BLINK>	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	<FONT SIZE=?></FONT>	(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf	<FONT COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf	<FONT FACE="***"></FONT>

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	<HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis	<HR SIZE=?>	(dalam satuan pixel)
Lebar Garis	<HR WIDTH=?>	(dalam satuan pixel)
Lebar Garis Persentasi	<HR WIDTH="%">	(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)
Warna Huruf Teks	<BODY TEXT="#$$$$$$">

TABEL
Rancangan 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 lebar halaman)
Baris dalam Tabel	<TR></TR>
Penataan Letak Baris	<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam Tabel	<TD></TD>	(harus ada dalam setiap baris tabel)
Penataan Letak Sel	<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel	<TH></TH>	(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel	<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel	<TH BGCOLOR="#$$$$$$">

A.    Dasar dasar HTML

1.      Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah 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 dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

 

Gambar 1.  Judul Tab Halaman

2.      Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>

<head>

 <title> Tag P, Br dan Hr </title>

</head>

<body>

 <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>

 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

<hr> Ini adalah garis horizontal.

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

 

Gambar 2. Mengatur Paragraf

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

Contoh subscript : H₂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">&nbsp;</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

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

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

 

Gambar 7 link halaman web lain

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:

 

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:

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

Hasilnya seperti pada gambar 9 berikut:

 

Gambar 9. Halaman login

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 &lt;&gt;</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: &lt;td&gt; text yang ditampilkan

&lt;/td&gt;.<br />

Tag biasa, yahh&#8230;tag aja, contoh &lt;BR&gt; (break). &lt;br&gt; kaga perlu ditutup oleh tag &lt;/br&gt;, tapi jika sintak yang digunakan tag container, contoh: &lt;h1&gt;, yah mesti ditutup dengan &lt;/h1&gt;.<br />

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

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: &lt;body bgcolor=&#8221;red&#8221;&gt; &lt;/body&gt;. atau &lt;input type=&#8221;text&#8221;&gt;.<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 />&lt;html&gt;<br />

tekan enter, kemudian ketik<br />&lt;head&gt;<br />Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak &lt;title&gt; judul halaman web &lt;/title&gt;. Untuk sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti ini:<br />&lt;head&gt; &lt;title&gt; judul halaman web &lt;/title&gt; &lt;/head&gt;<br />

Kemudian ketikkan &lt;body&gt;. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari &lt;body&gt;.<br />Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br />

&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />

&lt;/head&gt;<br />

&lt;body&gt;<br />

&lt;/body&gt;<br />?<br />

&nbsp; <br />

<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :<br />&lt;body&gt;<br />Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br />&lt;/body&gt;<br />terus, jika sudah, ketikkan &lt;/html&gt;, script lengkapnya seperti ini :<br />&lt;html&gt;<br />&lt;head&gt;<br />

&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />

&lt;/head&gt;<br />&lt;body&gt;<br />Contoh text yang ditampilkan di halaman web, By: Rian Hidayat<br />

&lt;/body&gt;<br />

&lt;/html&gt;<br />

kalo udah, sekarang save dengan nama dasarHTML.<br />

kalo udah disave, buka data yang tadi di save.<br />?<br />Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???<br />Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

<div style='clear: both;'></div>

</textarea>

<font="left" form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">

<input type="hidden" name="friendID" value="123456">

<textarea name="f_comments" cols="40" rows="5"">

Enter your comments here...

</textarea><br>

<input type="submit" value="coments" />

<input type="reset" value="Reset" />

</form>

</td>

<td width='200' height='700' bgcolor='' valign='top'>

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

<tr align='center'>

<td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>

<td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

</p>

</tr>

</table>

<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>                            

<center>

<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

<b>TUTORIAL HTML</b>

<ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td>

</tr>

<tr height="50">

s<td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr>

</table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div>

<div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center>

</div>

<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>

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

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

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED></html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

 

Gambar 10. Halaman awal

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">: hrian89@gmail.com</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.

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:

<html>

<head>

      <title>Profilku</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center>

<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

      <tr>

<td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

      <left>

      <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

      <a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>

      <a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>   <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

      <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>    <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>  <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>

      </ul></left>

      </td></tr>

      <tr>

<td width='796' height='700' background='gambar/zz.jpg' valign='top' >

      <p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >

      <td>

<p><b><center><font face="Bauhaus 93" size="7" color='#0000FF'>Galery</font></center></b></p><b>

<table color="blue" align="center" border="9px">

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

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

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

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

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

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

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

</table>

      </td>

<td width='200' height='700' bgcolor='' valign='top'>

      <table align="left" width='200' border='0' bgcolor='' bordercolor='green'><tr align='center'>

      <td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>

      <td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

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

<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>

            <center>

<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

      <b>TUTORIAL HTML</b><ul>

      <li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

      </ul></font></table></td></tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

      </tr></table>

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div> <div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

      <img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>

<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'><img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div>

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

</body>

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 12. Galery

5.      Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title>Cara membuat tulisan bergerak</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center>

<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

<tr>

<td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

<left>

                  <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

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

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

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

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

<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 /><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;">&lt;marquee direction="</span>

<b><span style="color: #FFFF00;">right</span></b><span style="color: white;">"&gt;This text scrolls right...&lt;/marquee&gt;</span></div><br />

<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style="color:#FFFF00;">kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.</font><br /><br />

<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style="font-size: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>

<br /><br />

<div class="code"><br /><span style="color: white;">&lt;marquee scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span style="color: white;">"&gt;</span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;">&lt;/marquee&gt;

</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;">&lt;marquee scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span style="color: white;">"&gt;Teks ini seperti Siput..&lt;/marquee&gt;

</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;">&lt;marquee behavior="alternate"&gt;</span><b style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;">&lt;/marquee&gt;

</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;">&lt;marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">"&gt;Teks ini bergerak dalam kelebaran 200 width&lt;/marquee&gt;</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;">&lt;marquee behavior="alternate" width="400" scrollamount="30"&gt;</span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;">&lt;/marquee&gt;

</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 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/A7x_Afterlife.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut..

Sumber : From Bloger Ryan Hidayat