Pages

Cerpen : karena sering begadang

Senin, 03 November 2014
Itulah sebabnya kenapa Herp banyak dikenal oleh guru guru di sekolahnya, bukan karena prestasinya melainkan karena keburukan sifat Herp yang selalu datang terlambat pergi ke sekolah, karena sering begadang nonton acara Televisi sampai pagi hari.

Jarum jam menunjukan pukul 07.00…
Herp baru saja selesai mandi, dengan tergesa gesa Herp menuju kamar untuk segera memakai seragam sekolah.

Otak Herp mulai mengeras karena jarum jam yang terus berjalan. Padahal jam 07.20 harus sudah ada di sekolah, kalau telat bakalan ditutup gerbang sekolahnya, Artinya 20 menit lagi bel masuk sekolah dibunyikan. Padahal jarak rumah Herp sampai ke sekolah 4 km dan butuh 15 menit untuk sampai ke sekolah.

Pukul 07.05 Herp sudah siap untuk berangkat. Tanpa pikir panjang Herp langsung mengambil sepeda kesayangannya sampai sampai Herp lupa berpamitan dengan Emaknya.

“Herp… tunggu dulu! ngapain kamu pakai seragam ini kan tanggal merah?!” Suara Emak menghentikan langkah Herp

Herp langsung berlari ke dalam rumah dan melihat kalender, “ooh.. Ternyata benar emang tanggal merah”

Herp pun ngomong sama Emaknya dengan sedikit rasa malu “Iya Mak, sekarang tanggal merah”
“Makannya jangan banyak begadang! sampai-sampai sekarang gak tau kalau tanggal merah”
“Ah.. gak pa pa Mak, yang penting gak terlambat sekolah lagi dan gak kena hukuman sama Guru Herp” Bantah Herp
“Tunjukan prestasimu jangan tunjukan mata lebammu itu, kapan kamu bisa mandiri?”
“Iya Mak Herp ngerti”

Dan keesokan harinya, entah apa yang dipikirkan Herp. Herp lagi lagi bangun kesiangan.
“Aduuuh, Gawat telat bangun lagi, Gara gara semalem nonton bola” sambil melihat ke arah jarum jam yang menunjukan pukul 06.50 itu. Tentu saja Herp tergesa gesa lagi dan lansung ke kamar mandi. setelah selesai mandi Herp memakai seragamnya dan tanpa sarapan, beranjak ke luar dari rumah untuk berangkat ke sekolahdan berpamitan pasa Emaknya yang sedang duduk di depan rumah.

“Mak… Herp berangkat sekolah dulu”
“Jam berapa ini kok baru bangun?”
“Maaf Mak, Herp telat bangun”
“Ya, Ampyuuun Herp kamu telat bangun lagi? mulai besok gak ada Tv Tvan, Tvnya Mau emak jual!”
“Lho tapi Mak?”
“Gak usah tapi tapian, cepet berangkat nanti kamu tambah telat, ini uang jajan buat kamu”
“Iya deh, makasih Mak! Herp berangkat dulu” Jawab Herp
“Ya sudah, Hati hati di jalan! jangan ngebut”
“Iya” Ucap Herp sambil mencium tangan Emaknya

Herp segera mengayuh sepedanya dengan lincah, 1 menit, 3 menit, 7 menit telah dilaluinya. Di tengah perjalanan Herp bingung kenapa Dia dilihat banyak orang dengan tertawaan kecil

“Ahh Biarin aja, mungkin karena kegantengan ini yang membuat mereka semua melihat Herp” Keluh Herp dalam hati.

Entah kenapa, sepeda Herp rasanya berat sekali semakin Herp kayuh semakin malah semakin berat saja. Dan Herp terkejut karena tiba tiba ban sepedanya bocor. Herp bingung bukan main keringat dingin mulai bercucuran. Tidak biasanya sepeda Herp seperti ini. Kali ini benar benar tidak bisa diajak kompromi. Sementara Herp menuntun sepedanya jarum jam terus menunjukan pukul 07.15…

Jantung Herp berdebar lebih cepat. Herp mulai lemas karena usahanya berangkat ke sekolah akan telat lagi.

Herp menengok ke kanan dan ke kiri berharap ada bengkel sepeda. pucuk dicinta ulam pun tak tiba, sepertinya hari ini Herp akan terlambat sekolah lagi dan bakalan dihukum nyapu halaman sekolah. sama sekali gak ada bengkel.

Akhirnya, Herp menitipkan sepedanya di warung pecel yang tidak jauh dari rumahnya.

Herp mulai berjalan menuju sekolah. Herp hanya bisa pasrah jika nanti harus dihukum dan ditegur oleh banyak guru.

oh. Tidak bisa!! Herp benar benar tidak bisa membayangkannya

No.. No.. No

Pikiran Herp mulai kacau tak karuan

“Aduuh, kenapa tidak ada satu pun teman yang lewat ya? kalu ada kan Herp bakalan nebeng” Desah Herp yang masih melangkahkan kakinya

Kali ini Herp lebih mempercpat langkahnya. Setidaknya, Herp tidak boleh telat lama lama. Semakin cepat, cepat, dan bertambah cepat. kira kira sudah 10 menit lamanya Herp berjalan

Akhirnya Herp sampai di gerbang sekolah, dihentikannya langkah Herp dan sekolah itu dilihatnya. Ia sedikit heran, kenapa tidak ada satu pun orang yang lalu lalang di dalam sekolah nya

“Apa Herp sedang berhalusinasi?! kenapa sekolah itu begitu sepi?” pikir Herp dengan masih berdiri di depan gerbang, Tiba tiba Herp dikejutkan oleh suara yang tidak asing lagi baginya, ternyata itu suara Pak Man si penjaga toko yang agak judes itu. “ada apa lihat lihat?” tanya si penjaga sekolah
“Pak, tolong bukain gerbangnya, Herp telat lagi”
“Telat apanya?! ini kan hari minggu?!”
“Haa, Herp kaget dan langsung melihat kalender yang ada di HandPhonenya, ternyata memang benar ini hari minggu” Keluh Herp dalam hati
“Ooh… iya Pak ini hari minggu, maaf Herp lupa, Permisi”
“iya,” jawab penjaga sekolah yang sedikit kesal itu

Huuh, Herp bisa bernafas lega karena tidak jadi dihukum oleh guru guru tapi Herp tetap merasa malu itu karena memang kesalahannya sendiri. lalu Herp mengambil lagi sepeda yang dia titipkan di warung pecel dan dituntunnya karena masih bocor. Di dalam perjalanan Herp pun sadar mungkin orang orang yang menertawakannya itu itu karena sekarang hari minggu kok pakai seragam sekolah bukan karena kegantengannya. “Tapi kenapa Emak tidak ngasih tau ya kalau ini hari minggu?” Gumam Herp dalam hati

Sesampainya di rumah dengan sedikit kesal Herp berbincang dengan emaknya

“Mak… kenapa gak bilang kalau ini hari minggu?”
“Emak emang sengaja Herp, itulah sebabnya kenapa emak gak bolehin kamu sering begadang, kasihan kan otak kamu dia juga perlu istirahat, dan efeknya kamu sering lupa” Jawab Emak
“iya Mak, Herp ngerti memang benar lagunya bang haji RHOMA IMARA, begadang jangan begadang kalau tiada artinya”
“RHOMA IRAMA! RHOMA IRAMA! tuh kan kamu lupa lagi?!”
“Enggak kok Mak, Herp cuma bercanda hehehe ”
“oh, ya udah kan tadi pagi kamu belum sarapan, MAKAN DULU SANAH!”
“Ahh, si Emak juga korban Tv yaa!!”
“Sedikit, hahaha” Herp dan emak tertawa bersama

Dan sejak saat itu Herp tidak lagi begadang nonton Tv, karena Tvnya dijual sama Emaknya. Herp nurut aja, mungkin itu memang jalan terbaik untuknya.

Keesokan harinya Herp tidak lagi bangun kesiangan, Herp sekarang menjadi anak yang rajin meskipun kadang kadang nyuri waktu buat maen Layangan.

KETIKA TUHAN MEMBERIKAN SEBUAH KEBERUNTUNGAN, DISAAT ITULAH KITA DIHARUSKAN UNTUK MEMPERBAIKI DIRI!!

karya: Aditya Pratama P.
Read more ...

Cara bermain Spec Ops Call of Duty Modern Warfare 3 LAN via Tunngle

Rabu, 03 September 2014

Bagi penggemar game Call of Duty Modern Warfare 3 mungkin tutorial ini harus segera kalian bookmark! hehe! Walaupun game ini game lama, namun menarik bila kita bermain bersama teman-teman 1 kos. Apalagi bisa LAN. Tambah seru deh! Saya akan memberi tahu cara agar kalian bisa bermain COD MW3 Spec Ops Mode. Di mode ini ada 2
Read more ...

Tutorial Multiplayer Cod Mw3 Lan/offline

Rabu, 03 September 2014
Game Call of Duty Modern Warfare3 selain single player bisa juga multiplayer. Kali ini akan saya share cara main cod mw3 multiplayer versi teknogods yang sudah saya coba 100% berhasil. Pada game codmw3 Mp ini ada 2 permainan yaitu kita bisa join maximal 2 player untuk sebuah misi melawan musuh2 dan join bisa lebih 2 player maximum 18 player tapi tidak ada missi dan musuh melainkan musuhnya antara teman kita sendiri.
A. Cara main COD MW3 MP 2 player melawan musuh.
     Disini 2 player akan menjadi teman,, apabila teman terkena tembak kita harus
     cepat2 menolongnya dengan menekan dan tahan huruf F.
     Peralatan yang di butuhkan:
  •      2 unit komputer/laptop
  •      game codmw3 yang sudah di install di masing2 komputer
  •      crack cod mw3 mp versi teknogods dan isi foldernya :admin, devraw,main,player2,zone
  •     Install/update .NET Framework 4.0
              http://www.microsoft.com/download/en/details.aspx?id=17851
    
Tahap Pertama:
Install game codmw3 pada kedua computer anda dan copy crack teknogod  di folder game.

Tahap Kedua:
Buka file teknogods.ini pada computer1 dan setting seperti ini:
[Settings]
Name=bravoo
FOV=65
[Network]
NetworkInterface=255
NetworkInterfaceList=[0 = 192.168.10.3; 255 (default) = ANY IP]
Ket: 192.168.10.3 adalah ip Lan anda 
Name: Ralat penulisan name tidak harus 6 huruf alias bebas
Buka file teknogods.ini pada computer2 dan setting seperti ini:
[Settings]
Name=vandem
FOV=65
[Network]
NetworkInterface=255
NetworkInterfaceList=[0 = 192.168.10.4; 255 (default) = ANY IP]
Ket: 192.168.10.4 adalah ip Lan anda
Name: Ralat penulisan name tidak harus 6 huruf alias bebas

Tahap Ketiga:
Pada computer1 setting:
-ip address lan = 192.168.10.3
-subnetmask=255.255.255.0
-gateway= 192.168.10.1
-Dns1 8.8.8.8
-Dns2 8.8.4.4

Pada computer2 setting:
-ip address lan = 192.168.10.4
-subnetmask=255.255.255.0
-gateway= 192.168.10.1
-Dns1 8.8.8.8
-Dns2 8.8.4.4

Pada computer1 kita anggap yang membuat server/map dan di teknogods setting seperti gambar di bawah ini:


Masih di computer1 di teknogods pilih  singgleplayer--start as host. Setelah itu jika anda belum pernah main singgleplayer nanti akan ada permintaan untuk main singgleplayer dulu. Jika sudah pernah main singgleplayer makan otomatis akan masuk menu seperti gambar ini :

 
 Selanjutnya pilih menu TeknoGods Coop

Tahap ketiga:
Pada Computer2 buka teknogods.exe dan setting seperti pada computer1 tapi di teknogods isi ip address 192.168.10.3 kemudian pilih menu singleplayer---start as client. Setelah itu akan masuk menu seperti gambar di atas dan pilih menu TeknoGods Coop. Lihat pada kedua computer harus muncul 2 name player.

Untuk memulai game pada computer1 pilih change ops pilih menu mission kemudian start ops maka computer2 akan mulai game dengan sendirinya.

Catatan: khusus windows7 matikan Windows firewall pada kedua computer jika tidak,  maka tidak akan bisa join game.


B. Cara main codmw3 mp lebih dari 2 player melawan teman sendiri
     Pada permainan ini player bisa lebih dari 2 computer. misalnya yang mau main 6 
     komputer jadi yang di  butuhkan 6 unit komputer dan 1 komputer sebagai 
     server atau yang membuat map.
     Pada komputer server buka aplikasi TeknoMW3.exe kemudian pilih menu multiplayer -dedicated server
Buka file TeknoMW3 guied.txt  yang ada di di crack teknogods dan cari tulisan seperti gambar di bawah ini. Copy tulisan itu dan  paste

maka hasilnya seperti gambar di bawah ini:



Untuk client pilih menu multiplayer ---start(lan/Online)  setelah masuk menu game pilih menu server lihat gambar di bawah ini

Coba anda pilih lan dan refresh harus muncul server yang di buat pada computer server. Jika sudah muncul tinggal connectkan aja.


Read more ...

cara mengedit template blogger hasil download

Senin, 18 Agustus 2014
hari ini saya akan memberi tutorial cara mengedit template blogger yang biasanya bisa di download memlalui browser. tapi kebanyakan template hasil internet tidak bisa di edit ini adalah salahsatu kekurangan template hasil download dari internet. jika ingin lebih lanjut silahkan lihat ke bawah :

bahan-bahan:
-template blogger
-notepad
-browser
-kesabaran
-ketelitian

langkah-langkah:
(sebelum memulai coba kalian buat blog percobaan agar gak susah nantinya lalau terapkan template tbs agar tau isinya)
1.download template blogger yang ingin di edit ( kalian bisa download disini untuk percobaan )
2. buka notepad kalian lalu klik File>open (Ctrl+O) [ jangan lupa rubah jenis file ke "all file" ]
3.cari dimana file tadi di download klo sudah ketemu klik open dan hasilnya akan seperti dibawah
4.misalkan kalian ingin mengubah foto headernya kalian klik kanan pada foto tsb lalu pilih "View Backgruond Image" kalian copas urlnya
5.lalu kalian tekan Ctrl+F lalu pastekan url tadi ( http://4.bp.blogspot.com/-8sulsUTZrvs/UU0aGg3HDkI/AAAAAAAAB-E/RvNKX7jfjdw/s000/headermiku.jpg ) lalu kalian copaskan ke browser agar kalian tau foto mana yang akan di ubah
 6.lalu cari foto pengganti contohnya ini lalu kalian ubah url foto sebelumya dan ganti dengan ini
7. lalu save dengan format .xml dan lalu terapkan di blog percobaan tadi dan lihat hasilnya

hasil sebelum di edit:
 hasil setelah di edit




CATATAN:klo kalian ingin merubah foto yang lain caranya sama aja gak ada bedanya
Read more ...

Membuat Desain Website Berbasis HTML Dengan Notepad++

Sabtu, 16 Agustus 2014
 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 <sup>2</sup><br>
Contoh subscript : H<sub>2</sub>O<br>
<strike> Ini teks tercoret </strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR ="#00FF00">
</html>
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:
Read more ...