Rabu, 28 Januari 2015

CARA INSTALL WERELESS DI DEBIAN

Debian / Ubuntu Linux: Setup Wireless Access Point (WAP) with Hostapd

by NIXCRAFT on AUGUST 25, 2012 · 22 COMMENTS· LAST UPDATED JULY 9, 2014

in DEBIAN / UBUNTU, NETWORKING, UBUNTU LINUX, WIRELESS NETWORKING

I've got a spare USB Wireless Adapters (WIFI adapter/dongle) and my ISP router does not support wireless option. How do I turn my home nas server into a wireless access point (WAP) that allows wireless devices to connect to a wired network using Wi-Fi under Debian or Ubuntu Linux operating systems without purchasing additional WPA box?

Tutorial details
Difficulty	Intermediate
Root privileges	Yes
Requirements	Wifi card (USB dongle) in Maste (AP) mode
Contents Sample setup Install hostapd Configure hostapd Control hostapd Setting up bridge Troubleshooting tips

You need to use hostapd server as access point and authentication servers. It implements IEEE 802.11 access point management, IEEE 802.1X/WPA/WPA2/EAP Authenticators, RADIUS client, EAP server, and RADIUS authentication server. The current version supports Linux:

Host AP
madwifi
mac80211-based

You can use USB or PCI / Mini-PCI based network card. Please note that not all network cards or drivers support AP mode.

Sample setup

wlan0 - Wireless PCI or USB device connected to Linux with a/b/g and WPA2 support in AP mode.
eth0 - Wired ethernet port connected to the upstream router / switch for the Internet access.

Sample network diagram:

Internet
  \
    \\
    |\      +------------+ RJ-11/ADSL-line
      \-----+ ISP Router |                     +--------+
            +------------+ RJ-45 (eth0) -------+ Switch |
             192.168.1.2                       +--------+
             with DNS/DHCPD                    |
             server +                          +----> Laptop wireless
             Firewall                          |
                                               +----> Home nas server with wifi card wlan0 and eth0 wired
                                               |      with 192.168.1.11 static IP
                                               +----> Desktop wired
                                               |
                                               +----> HP Printer wired
                                               |
                                               +----> Andriod tablet wireless
                                               |
                                               +----> Andriod mobile phone wireless and so on

Step #1: Install hostapd

Type the following command:
# apt-get install hostapd
Sample outputs:

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
  hostapd
0 upgraded, 1 newly installed, 0 to remove and 15 not upgraded.
Need to get 346 kB of archives.
After this operation, 877 kB of additional disk space will be used.
Get:1 http://debian.osuosl.org/debian/ squeeze/main hostapd amd64 1:0.6.10-2 [346 kB]
Fetched 346 kB in 2s (151 kB/s)
Selecting previously deselected package hostapd.
(Reading database ... 267669 files and directories currently installed.)
Unpacking hostapd (from .../hostapd_1%3a0.6.10-2_amd64.deb) ...
Processing triggers for man-db ...
Setting up hostapd (1:0.6.10-2) ...

Step #2: Configure hostapd

Edit /etc/default/hostapd, enter:
# vi /etc/default/hostapd
Uncomment and set DAEMON_CONF to the absolute path of a hostapd configuration file and hostapd will be started during system boot:

 
DAEMON_CONF="/etc/hostapd/hostapd.conf"

Save and close the file. Next create a text file called /etc/hostapd/hostapd.conf, enter:
Set interface name:

### Wireless network name ###
interface=wlan0
 
### Set your bridge name ###
bridge=br0

Set driver name:

 
driver=nl80211

Set country name code in ISO/IEC 3166-1 format. This is used to set regulatory domain. Set as needed to indicate country in which device is operating. This can limit available channels and transmit power.

 
### (IN == INDIA, UK == United Kingdom, US == United Stats and so on ) ###
country_code=IN

Set your SSID:

 
ssid=nixcraft

Set operation mode (a = IEEE 802.11a, b = IEEE 802.11b, g = IEEE 802.11g)
hw_mode=g
Set channel number (some driver will only use 0 as value)

 
channel=6

Set wpa mode to 2:

 
wpa=2

Set your passphrase (WiFi password):

 
wpa_passphrase=MyWiFiPassword

Set key and auth optionsmanagement for WPA2:

## Key management algorithms ##
wpa_key_mgmt=WPA-PSK
 
## Set cipher suites (encryption algorithms) ##
## TKIP = Temporal Key Integrity Protocol
## CCMP = AES in Counter mode with CBC-MAC
wpa_pairwise=TKIP
rsn_pairwise=CCMP
 
## Shared Key Authentication ##
auth_algs=1
 
## Accept all MAC address ###
macaddr_acl=0

Save and close the file.

How Do I start / stop / restart AP?

Use the following commands:

# /etc/init.d/hostapd start
# /etc/init.d/hostapd stop
# /etc/init.d/hostapd restart

Step #3: Configure /etc/network/interfaces

You can setup wlan0 in standalone mode or bridge it with eth0. The bridge mode will open your wireless client to access rest of the LAN and you will able to connect to the Internet. Most user bridge the wireless interface with the AP's Internet-connected interface.

Set br0 (wlan0+eth0) in bridge mode

You need to install bridge-utils package for configuring the Linux Ethernet bridge:
# apt-get install bridge-utils
Sample outputs:

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
  bridge-utils
0 upgraded, 1 newly installed, 0 to remove and 15 not upgraded.
Need to get 32.7 kB of archives.
After this operation, 176 kB of additional disk space will be used.
Get:1 http://debian.osuosl.org/debian/ squeeze/main bridge-utils amd64 1.4-5 [32.7 kB]
Fetched 32.7 kB in 1s (25.5 kB/s)
Selecting previously deselected package bridge-utils.
(Reading database ... 267692 files and directories currently installed.)
Unpacking bridge-utils (from .../bridge-utils_1.4-5_amd64.deb) ...
Processing triggers for man-db ...
Setting up bridge-utils (1.4-5) ...

Edit /etc/network/interfaces, enter:
# vi /etc/network/interfaces
Modify or set config as follows:

 
auto lo br0
iface lo inet loopback
 
# wireless wlan0
allow-hotplug wlan0
iface wlan0 inet manual
 
# eth0 connected to the ISP router
allow-hotplug eth0
iface eth1 inet manual
 
# Setup bridge
iface br0 inet static
    bridge_ports wlan0 eth0
    address 192.168.1.11
    netmask 255.255.255.0
    network 192.168.1.0
    ## isp router ip, 192.168.1.2 also runs DHCPD ##
    gateway 192.168.1.2
    dns-nameservers 192.168.1.2

Save and close the file. At this stage I recommend that you reboot the computer or restart all services as follows (may not work over remote ssh session):

# /etc/init.d/networking restart
# /etc/init.d/hostapd restart

OR
# reboot

A note about DHCPD server

Since you are running your WAP in bridge (br0) mode, DHCPD is not required on your WAP. It can use DHCPD server located anywhere on the LAN. In this example 192.168.1.2 is an ISP router with DHCPD running on it. If you are not using DHCPD server, setup as follows:

Ubuntu / Debian Linux: Setup An ISC DHCP Server For Your Network

A note about Firewall

You can install a firewall to protect from attacks. See how to install shorewall on Debian or Ubuntu Linux.

How do I troubleshoot WAP problems?

You will find WPA auth log info in /var/log/syslog file:
# tail -f /var/log/syslog
Find out if DHCPD relay working or not:
# tcpdump -n port 67 or port 68
Make sure firewall is not blocking required ports:
# /sbin/iptables -L -n -v | less
Make sure correct mac address are assigned and br0 is up and running:

# ifconfig br0
# ifconfig | grep HW
# brctl show
# brctl showmacs bro

Use these 8 Linux commands to find out wireless network speed, signal strength and other information:

Finally, make sure you use latest version of the following software

Linux kernel /debian
Wireless card drivers and firmware
hostapd

Rabu, 14 Januari 2015

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>

WELCOME TO MY WEBSITE

</body>

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

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

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

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

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

menggunakan tag font

</font>

</body>

</html>

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

Gambar 4. Format tulisan

5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title> From komentar </title>

</head>

<body>

<table>

<tr>

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

</tr>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td valign=top>Komentar</td>

</tr>

<tr>

<td colspan="3"><input type=submit name="submit"

value=submit></td>

</tr>
</table>

</body>

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

<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="#FF9900">Orange</td>

</tr>

<tr>

<td bgcolor="#663300">Cokelat</td>

<td bgcolor="#FF00FF">Merah muda</td>

</tr>

</table>

</body>

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

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

</body>

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

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

</p>

<br>

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

<br>

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

<br>

<label><font color="#FF6600">Tanggal Lahir </label>

<br>

</select>

<option value="1">Januari</option>

<option value="2">Februari</option>

<option value="3">Maret</option>

<option value="4">April</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></br>

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

<br><font color="red">Pria

<font color="#CCFF00">Wanita</br>

</td>

</table>

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

</head>

<body>

</td>

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

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

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

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

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

<b>LANGKAH 1</b><br />

<ul>

<li>MEMBUKA NOTEPAD.</li>

</ul>

<b>LANGKAH 2</b> <br />

<ul>

<li>MENGETIKKAN SINTAK/SYNTAX.</li>

</ul>

Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />

pertama, ketikkan<br /><html><br />

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

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

<html><br /><head><br /><title> Judul Halaman Web </title><br />

</head><br />

</body><br />?<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.

</textarea>

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

Enter your comments here...

</textarea><br>

</form>

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

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

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>

</head>

<body>

<tr>

</td>

</tr>

<td><tr><td colspan="2" align="center"><font face="Bauhaus 93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>

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

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

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

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

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

</div>

</div>

</body>

</html>

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>

</head>

<body>

<tr>

</td>

</tr>

<left>

</ul></left>

</td></tr>

<tr>

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

</table>

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

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

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

</body>

</html>

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>

</head>

<body>

<tr>

</td>

</tr>

<left>

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

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

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

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

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

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

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

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

</body>

</html>

Hasilnya akan seperti pada gambar 12 berikut: