Modulwebstatis

MODUL BELAJAR
WEB STATIS
Disusun Oleh:
NURUL HIKMAH, S.Kom
STMIK EL RAHMA YOGYAKARTA

2010
SILABUS
Pertemuan Pertama : SEKILAS TENTANG WEB

Pertemuan Kedua : MENGATUR KEINDAHAN TEXT
Pertemuan Ketiga : MENGGUNAKAN GAMBAR
Pertemuan Keempat : MENGGUNAKAN TABEL
Pertemuan Kelima : HYPERLINK
Pertemuan Keenam : MENGGUNAKAN FORMULIR
Pertemuan Ketujuh : IMAGE MAP, FRAME DAN TAG META
Pertemuan Kedelapam : MENGGUNAKAN PIRANTI BANTU ADOBE DREAMWEAVER
CS4
Pertemuan Kesembilan : MEMBUAT LAYOUT DENGAN FRAME
Pertemuan Kesepuluh : MEMBUAT LAYOUT DENGAN AP DIV
Pertemuan Kesebelas : BEKERJA DENGAN IMAGE
Pertemuan Keduabelas : MEMBANGUN FORM
Pertemuan Ketigabelas : BEKERJA DENGAN OBJEK SPRY
Pertemuan Keempatbelas : Up Load Web
Prosentase Penilaian:
Tugas : 30 %
Uts : 30 %
Uas : 40 %
Jumlah kehadiran:
Presensi :75%
PERTEMUAN I
Sekilas Tentang Web

World Wide Web atau yang lebih dikenal dengan web saja, merupakan salah
satu suber daya internet yang sangat berkembang pesat. Web didistribusikan dengan
pendekatan hypertext. Pendekatan Hypertext adalah pendekatan yang memungkinkan
suatu text pendek membuka suatu dokumen lainnya.
Pada awalnya aplikasi web hanya dibangun dengan bahasa HTML ( Hypertext
mark up language ) yang menggunakan protokol HTTP (hypertext transfer protocol).
Protokol adalah suatu kumpulan aturan-aturan atau tatacara untuk berkomunikasi.
Web terdiri dari :
Web statis : dibentuk dengan menggunakan HTML, meskipun terkadang disisipkan

javascript dan CSS untuk dapat mempercantik tampilannya. Kekurangan aplikasi ini
terletal pada keharusan memelihara program (menggantinya jika ada yang ingin
diubah). Kelemahan ini bisa diatasi dengan web dinamis.
Web dinamis : web yang diperkaya dengan kemampuan menangani perubahan data
melalui database bukan melalui programnya.
BERKENALAN DENGAN WEB STATIS

Aturan main bagi HTML:
 Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang

terdapat didalamnya adalah kode HTML sehingga browser (Internet explorer,
netscape, mozilla dsb) akan menerjemahkannya sebagai dokuman HTML.
 Bagian yang terdapat dalam tag HTML adalah tag <HEAD> .. </HEAD> serta
tag <BODY> .. </BODY>.
 Pada tag head terdapat tag <TITLE> .. </TITLE> tempat menuliskan judul
dokumen.
 Tag-tag dalam HTML tidak case sensitive artinya tidak ada perbedaan jika
jika menuliskan dengan kapital, kecil atau kombinasi keduanya.
 Beberapa tag dalam HTML memiliki dapat memiliki atribut seperti tag <P>
atau tag <FONT> . misal : <P align = “Justify”> atau <FONT face
=”verdana”>
 Hindari pasngan tag yang berseberangan, bisa jadi hasil yang diberikan tidak
benar karenanya. Biasakanlah menuliskan tag-tag dengan tertib.
 Komentar adalah bagian dari HTML yang diabaikan oleh browser. Komentar
tidak akan ditampilkan. Contoh : <!- -INI KOMENTAR- ->.
HTML
(Hypertext Markup Language)
PENGATURAN TEXT
Kali ini kita akan berkenalan dengan beberapa tag-tag dasar dalam HTML.
Seperti kita ketahui pada tag title kita akan menuliskan judul dari dokumen dan
akan ditampilkan pada bagian atas /kepala browser. Berikut adalah sejumlah tag
yang akan kita kenali untuk pertama kalinya:
o Tag <BR> untuk ganti baris atau meletakkan teks

selanjutnya dibawah teks sebelumnya.
o Tag <P> atau tag paragraf. Sama saja dengan kita

menggunakan dua tag <BR> hanya saja pada tag ini kita dapat tambahkan
atribut yang lain seperti alignment.
o Tag Header digunakan untuk mengatur ukuran teks yang

akan digunakan sebagai judul dalam sebuah dokumen. HTML dalam hal ini
menyediakan 6 ukuran, yaitu : <H1>..</H1> sampai <H6>..</H6>. Tag ini
juga dapat membawa atribut.
o Tag <HR> untuk membuat garis horizontal. Tag ini dapat

membawa atribut antara lain SIZE untuk mengatur ketebalan, WIDTH untuk
mengatur lebar, ALIGN untuk mengatur peletakan garis dan NOSHADE agar
garis tidak berbayang.
Untuk lebih jelasnya anda dapat ketikkan dokumen berikut ini dan lihat
apa yang terjadi.
Ketikan contoh program berikut ini :
<Html>
<head>
<title>Dokumen pertama</title>
</head>
<body>
<h1>All About Anime</h1>
<hr size ="10" noshade>
<h2 align ="center">The Most Popular Anime In The
World</h2>
<p align ="Justify"> One of the most popular anime in the world
right know is naruto.<br>
This japanese anime spread from asia, europe to america. <br>
This anime tell about the boy named naruto who really want to be a hokage.
He want to be person who protect the konoha village and person. His way is
not easy. The people in konoha hate him becouse he is a jinchuriki. So he has
to work hard to change the people opinion about him and make his dream
becomes true.
</p>
<hr align ="center" width ="25%">
<h3 align ="left">The Most Popular Character</h3>
<p align ="left">
In naruto anime beside naruto as the main
character, they are many popular character. they became more popular than
the other becouse they have uniq character and their fans love it. Example
Sasuke uchiha from uchiha clan, Hyuga neji from Hyuga family, Sabaku
gara from dess
</p>
<hr>
<h4 align ="right">Ability of each character</h4>
<hr>
<h5>The Main Story</h5>
<hr>
<h6>Still you can see this text?</h6>
<center>
<small>This world is going crazy. The anime maniac don't
have a brain more right now. They will love each character like they are
realy alive. Example the hysteria to kakashi the teacher of naruto. When the
manga author said that he makes kakashi die, his fans around the world cry
and they promise will not read or watch naruto if kakashi realy die.</small>
<big>It is crazy is'nt.</big>
</center>
</body>
</Html>
Simpanlah dengan nama pertama.html. Ekstensi html akan menunjukkan bahwa

dokumen tersebut adalah html yang sudah dikenali oleh browser.
Jalankan dokumen pertama.html pada browser yang ada (mis. Internet Explorer
atau mozilla). Perhatikan perubahan apa saja yang terjadi.
PERTEMUAN II
MENGATUR KEINDAHAN TEXT
 Mengatur Text Secara Fisik dan Logis
Html juga menyediakan fasilitas untuk mengatur keindahan text baik

langsung atau tak langsung. Secara fisik ataupun secara logis. Sebagai contoh
buatlah dokumen html seperti berikut :
<HTML>
<HEAD>
<TITLE> Mengatur Teks secara fisik </TITLE>
</HEAD>
<BODY>
Text ini berberukuran normal<br>
<B>Text ini berukuran normal dan tebal</B><br>
<BIG>Text ini berukuran BIG</BIG><br>
<I>Text ini berukuran normal dan miring</I><br>
<SMALL>Text ini berberukuran SMALL</SMALL><br>
Lihat <SUB>Text ini berada di bawah</SUB><br>
Lihat <SUP>Text ini berada di atas</SUP><br>
<TT>Text ini text mesin ketik</TT><br>
<U>Text ini berberukuran normal dan bergaris bawah</U><br>
</BODY>
</HTML>
Simpan file diatas. Jalankan ! Sudah sangat jelas bukan manfaat tag-tag diatas.
Selain secara fisik text HTML juga bisa diatur secara logis. Artinya
browser akan menyesuaikan tampilan teks sesuai dengan fungsinya. Untuk lebih
jelasnya ketikkan dokumen berikut ini :
<HTML>
<HEAD>
<TITLE> Mengatur text secara logis </TITLE>
</HEAD>
<BODY>
Teks ini normal <br>
<CITE>Teks ini adalah kutipan</CITE><br>
<CODE>Ini untuk programming misal Writeln ("Hello");</CODE><br>
<EM>Ini untuk penekanan kata biasanya miring</EM><br>
<KBD>Teks ini dianggap masukan dari keyboard</KBD><br>
<SAMP>Ini untuk konstanta misal phi=3,14</SAMP><br>
<STRONG>Ini untuk yang sangat penting, Tebal!</STRONG><br>
<VAR>Ini menyatakan teks adalah variabel matematika</VAR><br>
</BODY>
</HTML>
Simpan dan kemudian jalankan. Sangat jelas bukan perbedaanya.
 Mengatur Preformat dan Penggunaan Singkatan
Tag preformat <PRE></PRE> adalah tag yang mengatur tampilan yang

memerlukan kerapihan dan ketepatan. Seperti saat kita membuat daftar isi pada
sebuah buku. Contohnya kita ingin membuat tampilan seperti ini :
Big sale! Action Figure Doll :

Uzumaki Naruto in action ......25.000,-
Uchiha Sasuke .................20.000,-
Hatake Kakashi ................55.000,-
Haruno Sakura .................20.000,-
Nara Shikamaru ................25.000,-
Hyuga Neji ....................30.000,-
Sabaku Gaara ..................25.000,-
and Many more.
Tanpa menggunakan perform bisa jadi tampilan akan berantakan.

Sedangkan penggunaan singkatan ditangani oleh tag <ACRONYM>
</ACRONYM> dengan format <acronym title =”Kepanjangannya”>
singkatannya </acronym>. Efeknya akan tampak saat kita menyorotkan kursor
pada singkatan tersebut. Supaya lebih jelas silakan mengetikkan dokumen berikut
ini :
<HTML>
<HEAD>
<TITLE> Mengatur preformat </TITLE>
</HEAD>
<BODY>
<h3>Big sale! Action Figure Doll :</h3>
<PRE>
Uzumaki Naruto in action ......25.000,-<br>
Uchiha Sasuke .................20.000,-<br>
Hatake Kakashi ................55.000,-<br>
Haruno Sakura .................20.000,-<br>
Nara Shikamaru ................25.000,-<br>
Hyuga Neji ....................30.000,-<br>
Sabaku Gaara ..................25.000,-<br>
and Many more.
</PRE>
The prize can be changed everytime!<br>
You could buy all item on your chair by clicking <ACRONYM TITLE ="World
Wide Web">WWW</ACRONYM>.animeholic.com<br>
Or you can send you cash to <ACRONYM TITLE ="Bank Central
Asia">BCA</ACRONYM> number 0233000089 <br>
We also sale action figure doll with wayang character, interest?<br>
Just Call Me (0888888888)
</BODY>
</HTML>
Simpan dan kemudian jalankan di browser. Sangat jelas bukan fungsinya.

Cobalah menghilangkan tag<PRE> </PRE> dan lihat apa yang terjadi.
 Mengatur Font serta Sisipan Panjang
Untuk mendapat hasil tampilan teks yang lebih variatif serta menarik,
HTML secara khusus menyediakan tag <FONT></FONT> untuk mengaturnya.
Dalam Tag ini dapat membawa atribut antara lain FACE untuk menentukan jenis
font, SIZE untuk menentukan ukuran dengan menuliskan angka atau tanda +/-
didepan angka, COLOR untuk mengatur warna. Anda bisa langsung menyebutka
warnanya seperti aqua, white, silver tapi untuk lebih kaya warna anda dapat
menggunakan kode #RRGGBB. RR,GG dan BB masing masing diisi dengan 2
digit berupa angka 0 sampai 9 atau A sampai F. Angka 00 menyatakan bahwa
komponen bersangkutan tidak ditambahkan sehingga jika kita menuliskan
#0000AA akan menghasilkan warna biru tua karena hanya komponen BB (blue)
yang bernilai. Sedang jika kita menuliskan #000000 akan menghasilkan warna
hitam.
Selain tag <FONT> </FONT> HTML juga menyediakan tag
<BASEFONT>. Tag ini mengatur tampilan teks lain yang tidak diatur oleh
<FONT> , sehingga jika kita tidak mengatur setiap teks, maka teks satu dokumen
tersebut akan mengikuti perintah basefont.
Tag <BLOCKQUOTE></BLOCKQUOTE> adalah tag yang mengatur
tampilan teks menyesuaikan dengan tempat yang tersedia. Berbeda dengan
preform tag ini tidak memerlukan perintah pindah baris. Untuk lebih jelasnya
silakan ketikkan dokumen berikut ini.
<HTML>
<HEAD>
<TITLE> Mengatur Font </TITLE>
</HEAD>
<BODY>
<Basefont face ="courier" size ="2" color ="#0000AA">
<h2 align ="left">The Most Popular Anime In The World</h2>
<p align ="Justify">
<BLOCKQUOTE>
<font face="arial" size="+1" color ="#000000">
One of the most popular anime in the world right know is naruto.<br>
This japanese anime spread from asia, europe to america. <br> This
anime tell about the boy named naruto who really want to be a hokage.
He want to be person who protect the konoha village and person. His
way is not easy. The people in konoha hate him becouse he is a
jinchuriki. So he has to work hard to change the people opinion about
him and make his dream becomes true.</font></BLOCKQUOTE>
</p>
<p align ="left">
<font face ="verdana" size ="1" color ="Olive">
In naruto anime beside naruto as the main character, they are many
popular character. they became more popular than the other becouse
they have uniq character and teir fans love it. Example Sasuke uchiha
from uchiha clan, Hyuga neji from Hyuga family, Sabaku gara from
sand country, Hatake Kakashi the strongest and mysterius man, Nara
Shikamaru the cleverest man in Konoha and many more.</font>
</p>
<hr>
<p align ="justify">
Each character of this anime have specific ability. One and other
different. Naruto, he is a jinchuriki kyubi it means he is a half of
monster. When he was a baby the fourth Hokage Yondaime seal kyubi
in noruto's body. But as man he masters bunshin, kagebunshin and
thousand of shadows. he can use rasengan and kakashi teach him toxic
chakra. <br>
His rival sasuke mastering sharingan. he get from his blood uchiha. he
can manipulate chakra fire jutsu, thunder and kakashi teach him rairiki
chidori. <br>
Haruno Sakura the woman of the team, she is the best medical ninja.
the fifth hokage tsunade teach her directly. <br>
Their teacher Kakashi called <i>copy ninja kakashi</i>. Because he
can adaptate thousand of his anemy ability. He can also use sharingan
even he is not from uchiha clan, so thet why he also called
<i>Sharingan no kakashi</i>.
</p>
<hr>
<hr>
<center>
<font face ="times" size ="2" color ="#008000">
This world is going crazy. The anime maniac don't have a brain more
right now. They will love each character like they are realy alive.
Example the hysteria to kakashi the teacher of naruto. When the manga
author said that he makes kakashi die, his fans around the world cry
and they promise will not read or watch naruto if kakashi realy die
.</font>
<big>It is crazy is'nt.</big>
</center>
</BODY>
</HTML>
Simpan dan jalankan dokumen tersebut. Silakan coba ubah-ubah tag-tag
didalamnya untuk lebih memahami pemakaiannya.
 Menggunakan Daftar
Untuk dapat menampilkan data dalam bentuk daftar (list), HTML
menyediakan dua fasilitas yaitu tag <UL></UL> atau Unordered List (Daftar tak
bernomor urut) dan <OL></OL> atau Ordered List (Daftar bernomor urut).
Secara global tag ini berisi :
<UL>
<LI> isi daftar
<LI> isi daftar
........
</UL>
Pada Unordered list dapat disertakan atribut type. Type bullet antara lain
Disc untuk bentuk lingkaran hitam, Circle untuk bentuk lingkaran kosong dan
Square untuk bentuk kotak.
Sedangkan pada Ordered List dapat disertakan atribut type “A” untuk
huruf kapital, “a” untuk huruf kecil, “I” untuk angka romawi besar, “i” untuk
angka romawi kecil dan “1” untuk angka biasa. Untuk angka biasa, biasanya tidak
disertakan karena merupakan nilai bawaan. Pada Ordered List dapat juga diatur
mulai dari urut berapa. Misal <OL type =”A” start =”3”> maka daftar akan
dimulai dari huruf C. Namun bisa juga nilai nya diisikan secara bebas dengan
atribut value. Untuk lebih jelasnya silakan ketik dokumen berikut ini.
<HTML>
<HEAD>
<TITLE>Membuat Daftar </TITLE>
</HEAD>
<BODY>
Penggunaan Unordered List :
<UL>
<LI>Anggota Tim Kakashi:
<UL type ="circle">
<LI>Uzumaki Naruto
<LI>Uchiha Sasuke
<LI>Haruno Sakura
</UL>
<LI>Anggota Tim Asuma Soratobi:
<UL type ="Disc">
<LI>Nara Shikamaru
<LI>Akimichi Choji
<LI>Yamanaka Ino
</UL>
<LI>Anggota Tim Kurinai:
<UL type ="square">
<LI>Kiba
<LI>Hyuga Hinata
<LI>Aborame Sino
</UL>
<LI>Anggota Tim Maito Gai:
<UL> 
<LI>Hyuga Neji
<LI>Rock li
<LI>Ten ten
</UL>
</UL>
Penggunaan Ordered List :
<OL type ="A">
<LI>Anggota Tim Kakashi:
<OL type ="1">
<LI>Uzumaki Naruto
<LI>Uchiha Sasuke
<LI>Haruno Sakura
</OL>
<LI>Anggota Tim Asuma Soratobi:
<OL Type ="1" start ="4">
<LI>Nara Shikamaru
<LI>Akimichi Choji
<LI>Yamanaka Ino
</OL>
<LI>Anggota Tim Kurinai:
<OL type ="a">
<LI>Kiba
<LI>Hyuga Hinata
<LI>Aborame Sino
</OL>
<LI>Anggota Tim Maito Gai:
<OL type ="I">
<LI>Hyuga Neji
<LI>Rock li
<LI>Ten ten
</OL>
<LI>Tiga Legenda Sanin:
<OL> <!—manggunakan nilai bebas-->
<LI value ="9">Tsunade
<LI value ="19">Orochimaru
<LI value ="8">Jiraiya
</OL>
</OL>
</BODY>
</HTML>
Simpan dan jalankan dokumen tersebut. Silakan modifikasi tag-tag
tersebut untuk dapat lebih memahaminya.
@@@ See You Next With Multimedia on Web @@@
PERTEMUAN III
MENGGUNAKAN GAMBAR
Dalam sebuah halaman web terkadang kita dapati gambar dalam
berbagai bentuk ukuran dan fungsi. Terkadang gambar memang dapat
mampercantik tampilan. Tetapi hal itu tergantung dari bagaimana peletakan
dan fungsinya. Salah penempatan mungkin malah membuat halaman web kita
amburadul dan informasi yang disajikan sulit dimengerti.
A. Gambar sebagai background
Kita dapat menampilkan gambar sebagai background. Namun pilihlah

gambar dengan corak yang tidal mencolok dan berukuran kecil karena browser
akan mengulang gambar sebagai model pengubinan. Untuk menampilkan
gambar sebagai backround kita sertakan atribut background pada tag
<BODY> sbg berikut: <BODY BACKGROUND =”NamaFileGambar”>.
Namun bila gambar berada di direktori tersendiri maka dapat dituliskan
<BODY BACKGROUND =”. . / direktori / NamaFile.jpg”>. Sehingga jika
kita menuliskan “. . / citra / bunga.jpg” maka artinya kita mengambil file
bunga yang berada di direktori citra. Tanda titik dua sebelumnya mewakili
direktori diatas citra. Untuk lebih jelasnya ketikkan dokumen berikut ini:
<HTML>
<HEAD>
<TITLE> Gambar sebagai background </TITLE>
</HEAD>
<BODY background ="Gambar/corak.jpg">

<H3>Tampilan Background</H3>
</BODY>
</HTML>
Simpan dan jalankan file diatas. Amati dan pahami apa yang terjadi.
B. Menampilkan gambar
Dapat juga sebuah gambar ditampilkan menyatu dengan informasi yang kita
sajikan. Untuk itu digunakan tag <IMG SRC =”NamaFileGambar”>.
Adapun atribut-atribut lain yang dapat menyertainya antara lain :
 Align (Top, Middle, Bottom, Right, Left)
 Border untuk membingkai gambar

 Height untuk mengatur tinggi gambar
 Width untuk mengatur lebar gambar
 Vspace untuk memberi ruang vertikal antara teks dan bambar
 Hspace untuk memberi ruang horizontal antara teks dan gambar
Berikut ini adalah contoh penggunaan tag serta atribut-atribut diatas :
<HTML>
<HEAD>
<TITLE> Mengatur Gambar </TITLE>
</HEAD>
<BODY Bgcolor="silver">
<Basefont face ="courier" size ="2" color ="#0000AA">
<h2 align ="left">The Most Popular Anime In The World</h2>
<IMG SRC="../webstatis/Gambar/Image2.jpg" align="left"
height="100" width="100">
<p align ="Justify">
<BLOCKQUOTE>
<font face="arial" size="+1" color ="#000000">
One of the most popular anime in the world right know is naruto.<br>
This japanese anime spread from asia, europe to america. <br> This
anime tell about the boy named naruto who really want to be a hokage.
He want to be person who protect the konoha village and person. His
way is not easy. The people in konoha hate him becouse he is a
jinchuriki. So he has to work hard to change the people opinion about
him and make his dream becomes true.
</font>
</BLOCKQUOTE>
</p>
<IMG SRC="../webstatis/Gambar/Ar152.jpg" align="right" height="75"
width="75" Border="10">
<p align ="left">
<font face ="verdana" size ="1" color ="Olive">
In naruto anime beside naruto as the main character, they are many
popular character. they became more popular than the other becouse
they have uniq character and teir fans love it. Example Sasuke uchiha
from uchiha clan, Hyuga neji from Hyuga family, Sabaku gara from
sand country, Hatake Kakashi the strongest and mysterius man, Nara
Shikamaru the cleverest man in Konoha and many more
.</font>
</p>
<hr>
<IMG SRC="../webstatis/Gambar/Image2.jpg" align="left"
height="150" width="150" Hspace="25">
<p align ="justify">
Each character of this anime have specific ability. One and other
different. Naruto, he is a jinchuriki kyubi it means he is a half of
monster. When he was a baby the fourth Hokage Yondaime seal kyubi
in noruto's body. But as man he masters bunshin, kagebunshin and
thousand of shadows. he can use rasengan and kakashi teach him toxic
chakra. <br>
His rival sasuke mastering sharingan. he get from his blood uchiha. he
can manipulate chakra fire jutsu, thunder and kakashi teach him rairiki
chidori. <br>
Haruno Sakura the woman of the team, she is the best medical ninja.
the fifth hokage tsunade teach her directly. <br>
Their teacher Kakashi called <i>copy ninja kakashi</i>. Because he
can adaptate thousand of his anemy ability. He can also use sharingan
even he is not from uchiha clan, so thet why he also called
<i>Sharingan no kakashi</i>.
</p>
<hr>
<IMG SRC="../webstatis/Gambar/Ar136.jpg" align="left" height="100"
width="100" vspace="25" hspace="25" border="5">
<p align="justify">
<font face="verdana" color="#330033">
There is a boy named naruto who has a dream to be a hokage. he join
with team seven after pass the exam to be a ninja grade genin(basic
grade). in his team he make a friend with Sasuke and Sakura. But he
always rival sasuke. His teacher Hatake Kakashi is the strongest ninja
in konoha but he has a bad habit with time. He always late more than 3
hour, and he makes a silly reason. With this team naruto will fight all
the challange, even one day he has to face his best friend sasuku
because sasuke join with orochimaru, the antagonist man in this story.
</font>
</p>
<hr>
<center>
This world is going crazy. The anime maniac don't have a brain more
right now. They will love each character like they are realy alive.
Example the hysteria to kakashi the teacher of naruto. When the manga
author said that he makes kakashi die, his fans around the world cry
and they promise will not read or watch naruto if kakashi realy
die.</font> <big>It is crazy is'nt.</big>
</center>
<hr>
</BODY>
</HTML>
Simpan dan kemudian jalankan dokumen diatas. Amati bagaimana
bekerjanya tag-tag serta atribut-atribut diatas.
C. Gambar animasi
Untuk dapat menampilkan animasi cukup dengan memakai file yang

berekstensi .gif. File ini dapat diperoleh dari software adobe premiere. Berikut ini
adalah contoh penggunaannya :
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY background="../webstatis/Gambar/Ar136.jpg">
Lihat berkas animasi yook!nii
<IMG SRC="Gambar/kaligrafi.gif" align="middle" height="150"
="150" hspace="25">
iin!kooy isamina sakreb tahiL
</BODY>
</HTML>
BERMAIN DENGAN SUARA DAN VIDEO
Perlu diketahui bahwa tidak semua browser mendukung multimedia.

Beberapa diantaranya mambutuhkan piranti lain dan juga tidak semua file
multimedia dapat dimainkan dalam sebuah web. Berikut adalah beberapa
diantaranya : AVI, MPEG, MP3, MIDI dan WAF. Untuk lebih jelasnya
ketikkan dokumen berikut ini :
<HTML>
<HEAD>
<TITLE> Bermain dengan suara dan video </TITLE>
</HEAD>
<BODY>
<h2>This Is Your PlayList</h2>
<ul>
<li><a href="../webstatis/Matsuri.mp3">Matsuri</a>
<li><a href="../webstatis/tokyodrift.mp3">Tokyo Drift, Fast and
furious</a>
</ul>
<br>
<hr>
</BODY>
</HTML>
Dokumen diatas digunakan untuk memainkan suara. Kita

menggunakan Hyperlink untuk memanggilnya. Simpan dan jalankan dokumen
diatas. Sedangkan contoh dokumen dibawah ini adalah untuk memainkan
video :
<HTML>
<HEAD>
<TITLE> VIDEO</TITLE>
</HEAD>
<BODY>
<h2>This is your movie, play now!</h2>
<EMBED src="COBA.AVI" height="200" width="350" UNITS
="pixel" AUTOSTART="TRUE" LOOP="FALSE">
</BODY>
</HTML>
Pada dokumen diatas kita akan menemukan tag EMBED. Tag ini
dimaksudkan agar file video langsung dimainkan. Tag ini membawa beberapa
atribut yaitu:
 SRC untuk menentukan sumber berkas
 Width untuk menentukan lebar layar video
 Height untuk menentukan tiggi layar video
 Units untuk menentukan satuan video. Biasanya pixels
 Autostart bernilaikan true dan false. Untuk otomatisasi permainan.
 Loop bernilaikan true dan false untuk otomatisasi pengulangan.
Simpan dan coba mainkan dokumen diatas! Selamat mencoba
PERTEMUAN IV
MENGGUNAKAN TABEL
Dalam sebuah halaman web, tabel biasa digunakan. Awalnya hanya

agar tampilan enak dan mudah dibaca. Namun pada perkembangannya
sekarang ini keseluruhan bangunan web terdiri dari tabel-tabel. Hal ini karena
tampilannya luwes dan enak dipandang jika dibanding frame.
Berikut ini adalah tag yang digunakan untuk membangun tabel:
TAG FUNGSI
<TABLE>..</TABLE> Mengawali dan mengahiri tabel
<CAPTION>..</CAPTION> Judul tabel
<TR>..</TR> Membuat baris
<TH>..</TH> Membuat judul kolom
<TD>..</TD> Membaut sel data
Dalam sebuah tabel masing-masing tag dapat membawa atribut antara

lain yaitu :
 Tag <table> : Bgcolor untuk mewarnai seluruh tabel. Border
untuk memperlihatkan garis tabel. Height untuk mengatur tinggi tabel.
Cellpadding untuk mengatur jarak teks dengan tepi kiri. Cellspacing
untuk mengatur jarak bagian dalam sel.
 Tag <caption> : Align untuk mengatur peletakan teks
 Tag <tr> dan <td> : Bgcolor untuk mewarnai baris atau kolom.
Align untuk mengatur peletakan teks dalam saru baris atau satu kolom.
Height dan width untuk mengatur tinggi dan lebar baris atau kolom.
Khusus pada tag <th> dan <td> dapat disertakan atribut Colspan untuk
menggabungkan kolom dan Rowspan untuk menggabungkan baris.
 Pada tag <th>, <tr> dan <td> dapat digunakan atribut Valign
yang dapat mengatur teks secara vertikal atau dapat diletakkan di atas
(TOP), di tengah (MIDDLE) atau di bawah (BOTTOM).
Untuk dapat lebih mengerti silakan mengetikkan dua dokumen

dokumen berikut ini. Dokumen pertama adalah dokumen tanpa cellpadding
dan cellspacing, sedang yang kedua menggunakannnya. Perhatikan
berbedaanya.
<HTML>
<HEAD>
<TITLE> Menggunakan Tabel </TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<TABLE border="1" bgcolor="#ffffff">
<CAPTION>Big Sale! Action Figure Doll</CAPTION>
<TR>
<TH align="center" width="200" colspan="2">CHARACTER</TH>
<TH align="center" width="100">PRIZE</TH>
</TR>
<TR>
<td rowspan="8" width="100" Valign="Top">Protagonist</td>
</TR>
<TR>
<TD>Uzumaki Naruto in Action</TD>
<TD align="right">25.000</TD>
</TR>
<TR>
<TD>Uchiha Sasuke</TD>
</TR>
<TR>
<TD>Haruno Sakura</TD>
</TR>
<TR>
<TD>Hatake Kakashi</TD>
</TR>
<TR>
<TD>Nara Shikamaru</TD>
</TR>
<TR>
<TD>Hyuga Neji</TD>
</TR>
<TR>
<TD>Sabaku Gaara</TD>
</TR>
<TR>
<TR>
<td rowspan="4" width="100" valign="middle">Antagonist</td>
</TR>
<TR>
<TD>Orochimaru</TD>
</TR>
<TR>
<TD>Uchiha Itachi Akasuki</TD>
</TR>
<TR>
<TD>Deidara Akasuki</TD>
</TR>
<TR>
<td rowspan="4" width="100" Valign="Bottom">Tritagonist</td>
</TR>
<TR>
<TD>Jiraiya</TD>
</TR>
<TR>
<TD>Sunade</TD>
</TR>
<TR>
<TD>Yakushi Kabuto</TD>
</TR>
<TD colspan="3" align="center">And Many More</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Simpan dan jalankan dokumen diatas. Kemudian bandingkan dengan

dokumen dibawah ini:
<HTML>
<HEAD>
<TITLE> Menggunakan Tabel </TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<TABLE border="3" bgcolor="silver" cellpadding="5" cellspacing="5">
<CAPTION>Big Sale! Action Figure Doll</CAPTION>
<TR>
<TH align="center" width="200" colspan="2">CHARACTER</TH>
<TH align="center" width="100">PRIZE</TH>
</TR>
<TR>
<td rowspan="8" width="100" Valign="Top">Protagonist</td>
</TR>
<TR>
<TD>Uzumaki Naruto in Action</TD>
</TR>
<TR>
<TD>Uchiha Sasuke</TD>
</TR>
<TR>
<TD>Haruno Sakura</TD>
</TR>
<TR>
<TD>Hatake Kakashi</TD>
</TR>
<TR>
<TD>Nara Shikamaru</TD>
</TR>
<TR>
<TD>Hyuga Neji</TD>
</TR>
<TR>
<TD>Sabaku Gaara</TD>
</TR>
<TR>
<TR>
<td rowspan="4" width="100" valign="middle">Antagonist</td>
</TR>
<TR>
<TD>Orochimaru</TD>
</TR>
<TR>
<TD>Uchiha Itachi Akasuki</TD>
</TR>
<TR>
<TD>Deidara Akasuki</TD>
</TR>
<TR>
<td rowspan="4" width="100" Valign="Bottom">Tritagonist</td>
</TR>
<TR>
<TD>Jiraiya</TD>
</TR>
<TR>
<TD>Sunade</TD>
</TR>
<TR>
<TD>Yakushi Kabuto</TD>
</TR>
<TD colspan="3" align="center">And Many More</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Menggabungkan Tabel dan Gambar
Dalam sebuah tabel tidak harus berupa teks. Dapat juga berupa
gambar. Hal ini makin digemari sehingga tampilan web dapat lebih menarik
dan menunjang informasi yang akan disampaikan. Berikut ini adalah contoh
dokumen yang menggabungkan antara tabel dan gambar :
<HTML>
<HEAD>
<TITLE> Tabel dan Gambar </TITLE>
</HEAD>
<BODY bgcolor="silver">
<TABLE bgcolor="gray" cellpadding="5" cellspacing="5">
<TR bgcolor="#FFFFFF">
<TD colspan="4" bgcolor="#66FFCC">
<font size="+2" color="#000066">
<center><b>All About Anime!The Most Popular
Anime In The World<center><b>
</font>
</TD>
</TR>
<TD rowspan="2">
<font size="+1" face="verdana">
One of the most popular anime in the world right know
is naruto.This japanese anime spread from asia, europe
to america. This anime tell about the boy named naruto
who really want to be a hokage. He want to be person
who protect the konoha village and person. His way is
not easy. The people in konoha hate him becouse he is a
jinchuriki. So he has to work hard to change the people
opinion about him and make his dream becomes true.
</font>
</TD>
<TD>
<font size="-1" color="#000066">
In naruto anime beside naruto as the main character,
they are many popular character. they became more
popular than the other becouse they have uniq character
and teir fans love it. Example Sasuke uchiha from
uchiha clan, Hyuga neji from Hyuga family, Sabaku
gara from sand country, Hatake Kakashi the strongest
and mysterius man, Nara Shikamaru the cleverest man
in Konoha and many more.
</font>
</TD>
<TD>
character of this anime have specific ability. One and other
different. Naruto, he is a jinchuriki kyubi it means he is a half
of monster. When he was a baby the fourth Hokage Yondaime
seal kyubi in noruto's body. But as man he masters bunshin,
kagebunshin and thousand of shadows. He can use rasengan
and kakashi teach him toxic chakra. His rival sasuke mastering
sharingan. He get from his blood uchiha. he can manipulate
chakra fire jutsu, thunder and kakashi teach him rairiki chidori.
Haruno Sakura the woman of the team, she is the best medical
ninja. the fifth hokage tsunade teach her directly.
</font>
</TD>
<TD>
Their teacher Kakashi called <i>copy ninja kakashi</i>.
Because he can adaptate thousand of his anemy ability.
He can also use sharingan even he is not from uchiha
clan, so thet why he also called <i>Sharingan no
kakashi</i>.
</font>
<IMG SRC="../Gambar/kakashi1.jpg"
width="100" height="150" align="bottom">
</TD>
</TR>
<IMG SRC="../Gambar/Image2.jpg" width="200"
height="200">
<IMG SRC="../Gambar/Ar152.jpg" width="150"
height="200">
</TD>
<TD rowspan="2">
<ul>
<li> <a href=”Matsuri.mp3">Matsuri</a>
<li><a href="tokyodrift.mp3">Tokyo Drift, Fast and
furious</a>
</ul>
<br>
<hr>
</TD>
</TR>
<TD colspan="3">
There is a boy named naruto who has a dream to be a
hokage. he join with team seven after pass the exam to
be a ninja grade genin(basic grade). in his team he make
a friend with Sasuke and Sakura. But he always rival
sasuke. His teacher Hatake Kakashi is the strongest
ninja in konoha but he has a bad habit with time. He
always late more than 3 hour, and he makes a silly
reason. With this team naruto will fight all the
challange, even one day he has to face his best friend
sasuku because sasuke join with orochimaru, the
antagonist man in this story.</font>
</TD>
</TR>
<TD colspan="4">
This world is going crazy. The anime maniac don't have
a brain more right now. They will love each character
like they are realy alive. Example the hysteria to
kakashi the teacher of naruto. When the manga author
said that he makes kakashi die, his fans around the
world cry and they promise will not read or watch
naruto if kakashi realy die.</font> <big>It is crazy
is'nt.</big>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
PERTEMUAN V
HYPERLINK
Hyperlink digunakan untuk menghubungkan sebuah halaman web
dengan halaman lainnya. Pasangan tag yang digunakan untuk mambuat
hyperlink adalah tag anchor atau tag ajngkar yang disimbolkan dengan
<A>..</A>. Bentuk paling umum dari tag ini adalah :
<A HREF=”URL”>label</A>
Untuk dapat lebih memahami hyperlink mari kita coba satu-persatu
dokumen berikut ini.
a. Link ke Halaman Lain
<HTML>
<HEAD>
<TITLE> Hyperlink </TITLE>
</HEAD>
<BODY bgcolor="Black">
<TABLE>
<TR align ="center">
<TD COLSPAN ="2"><img src ="Gambar\background.jpg"></TD>
</TR>
<TR align ="center">
<TD>
<A HREF ="Hyperlink.html"> <font size ="+1" color
="White">LOGIN</font></A>
</TD>
<TD>
<A HREF ="daftar.html"><font size ="+1" color
="White">DAFTAR</font></A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Simpan dokuman diatas dengan nama index.html
b. Link Bookmark
Bookmark digunakandalam satu halaman. Yaitu jika sebuah halaman
berisikan teks yang sangat panjang. Maka untuk mampermudah pencarian
serta pembacaan perbab misalnya digunakan bookmark.
<HTML>
<HEAD>
<TITLE> Menggunakan Bookmark </TITLE>
</HEAD>
<BODY>
<h3> Jelajahi Khasanan Sastra : </h3>
<UL>
<LI> <a href="#cerpen1">CERPEN 1</a>
<LI> <a href="#cerpen2">CERPEN 2</a>
<LI> <a href="#puisi">PUISI</a>
</UL>
<hr>
<TABLE>
<TR>
<TD>
<a name="#cerpen1">
<h3>CERPEN 1:</h3>
<center>The Adventure of the Dancing Men</center>
<P Align="justify">
<font size="1" face="arial">
Holmes had been seated for some hours in silence with
his long, thin back curved over a chemical vessel in which he was brewing a
particularly malodorous product.
His head was sunk upon his breast, and he looked from
my point of view like a strange, lank bird, with dull gray plumage and a black
top-knot.
"So, Watson," said he, suddenly, "you do not propose
to invest in South African securities?"
I gave a start of astonishment. Accustomed as I was to
Holmes's curious faculties, this sudden intrusion into my most intimate
thoughts was utterly inexplicable.
"How on earth do you know that?" I asked.
He wheeled round upon his stool, with a steaming test-
tube in his hand, and a gleam of amusement in his deep-set eyes.
"Now, Watson, confess yourself utterly taken aback,"
said he.
"I am."
"I ought to make you sign a paper to that effect."
"Why?"
"Because in five minutes you will say that it is all so
absurdly simple."
"I am sure that I shall say nothing of the kind."
"You see, my dear Watson" -- he propped his test-tube
in the rack, and began to lecture with the air of a professor addressing his class
-- "it is not really difficult to construct a series of inferences, each dependent
upon its predecessor and each simple in itself. If, after doing so, one simply
knocks out all the central inferences and presents one's audience with the
starting-point and the conclusion, one may produce a startling, though possibly
a meretricious, effect. Now, it was not really difficult, by an inspection of the
groove between your left forefinger and thumb, to feel sure that you did not
propose to invest your small capital in the gold fields."
"I see no connection."
"Very likely not; but I can quickly show you a close
connection. Here are the missing links of the very simple chain: 1. you had
chalk between your left finger and thumb when you returned from the club last
night. 2. You put chalk there when you play billiards, to steady the cue. 3. You
never play billiards except with Thurston. 4. You told me, four weeks ago, that
Thurston had an option on some South African property which would expire
in a month, and which he desired you to share with him. 5. Your check book is
locked in my drawer, and you have not asked for the key. 6. You do not
propose to invest your money in this manner."
"How absurdly simple!" I cried.
</font>
</p>
<hr>
</TD>
</TR>
<TR>
<TD>
<a name="cerpen2">
<h3>CERPEN 2</h3>
<center>CYBER ROBIN</center>
<P align="justify">
Sore hari, kelelahan yang mulai menagih secangkir kopi joss di
wilayah tugu.<br> Aku lelah tapi ini bukan pertama kalinya aku menghindar
dari kopi joss.<br> Enak mmang atau tepatnya sedikit aneh, bayangkan
bongkahan arang yang membara dicampur ke dalam segelas kopi tubruk
panas.<br> Josss begitu bunyinya. Hampir semua warung angkringan di
wilayah tugu, menjalnya.<br> Sore begini pasti macet, muda mudi mulai
memadati pinggiran stasiun, sekedar refresing menghilangkan penat kuliah.
<br>Aku sendiri lebih suka segera pulang mengistirahatkan raga yang
seharian ku paksa bekerja sebagai inspektur polisi. "Mas berhenti di malioboro
ya mas, antar aku ke ATM." Pinta adikku, ia sungguh mengagetkan. "ke ATM
lagi her? Kamu banyak amat duit.<br> Sebernarnya kamu kerja apa to?"
Tanyaku pada Herawan Panji Kusuma adikku semata wayang. Dia hanya
tersenyum, tak sekali ini aku menanyakannya. <br>"Mas Satria, aku ini
assistan dosen muda berbakat dan tampan pula" jawabya setengah bercanda.
Aku tahu ia cerdas, jenius malah.<br> Sejak semester lima dia sudah menjadi
asdos. Jika dulu aku bangga dengan IPK tiga koma nol, kini harus malu karena
indeks prestasi Her selalu diatas tiga koma tujuh. <br>Tak berapa lama kami
pun tiba di sebuah Mall tempat ATM berada. <br>Ia masuk sebentar dan
keluar dengan enam lembar limapuluh ribuan. "Ayo mas. Sudah" katanya.
"Buat apa lagi to her?" tanyaku. "Buat nambah RAM mas, aku ada proyek."
Jawabnya. "Oh." Jawabku singkat.
<br>Rumah kami kecil, type 36 peninggalan orang tua. Mereka sendiri
sudah sangat tenang di sisi Tuhan. <br>Syukur sudah lunas. "Lembur lagi Her,
mbok makan dulu. Mas belikan lele penyet?" dia terkejut dan menoleh "Tak
pikir sopo mas, iya sebentar lagi. <br>Aku mau ini segera kelar. Mas tahu kan
aku sudah semester 8." Katanya. "Skripsimu itu. Lha kamu itu asyik sama
pesanan programmu kok. Hah kadang mas pikir … ah sudahlah" aku
menghela nafas. <br>Her manatapku tajam "mas masih menyesal atas
kematian bapak? Bapak tidak pantas mati kan mas?" katanya. "Yah, kau tahu.
<br>Kebanyakan harga kejujuran adalah nyawa. Dan hukum adalah milik
penguasa. Kadang mas merasa seperti pecundang. Bekerja sebagai abdi
hukum tapi tak bisa menghukum para penghianat Negara, tikus berdasi…"
keluhku padanya dan entah yang ke beraba kalinya "Mas, mas Satrio Utomo
ku ini adalah abdi Negara yang baik dan professional." Katanya tersenyum.
<br>"Mas kenapa mas belum mau menikah? Aku kira mbak lutfi itu selain
cantik, baik juga perhatian, inget mas itu sudah kepala tiga?" kata her.
<br>Aku menghela nafas "Kau tahu kan, aku ndak akan tenang jika kamu
belum mentas. <br>Minimal sarjana ilmu komputer itu kamu dapatkan." Her
tampak terdian dan kemudian berkata "Mas, seandainya suatu hari aku
mengecewakanmu bagaimana?". <br>"Tak akan, karena aku percaya pada
adikku ini. Mengerti"
Hari baru, kegiatan lama kepenatan yang sama dan beban
tanggungjawab yang tambah. <br>Hari ini koordinasi dengan seluruh
kepolisian daerah. Kami harus mengawal tersangka utama penyalahgunaan
dana perbaikan jalan wilayah barat. <br>Pengembang yang juga dekat dengan
elite pejabat nasional diduga menilep hampir setengah dana yang dikucurkan.
Gayanya membuatku muak. <br>Ia tak tampak seperti tahanan tapi tuan dan
kamilah pelayannya. <br>Beginilah negeriku tersayang. Kadang aku seperti
pecundang, yang lemah tak berdaya diatas weweanngku. Hukum buatan kami
sendiri, kami sendiri yang mencari celah mengakalinya. Sial. Jika seperti ini
aku menyesal setelah lulus sarjana kenapa aku masuk kepolisian. <br>"Lho
mas sudah pulang. Kok diam-diam?" aku terkejut "Oh, her kamu juga sudah
pulang. Nggak ngelab?" aku bertanya pada Her. "Nggak mas. <br>Hari ini
nggak ada. Kenapa, mas lagi suntuk atau capek?" her sepertinya melihat muka
lecekku. "Dua-duanya her. Aku capek dipecundangi tikus-tikus berdasi." Her
tersenyum dan berlalu sambil berkata "Makan dulu mas, ntar mag"
Enam bulan kemudian,
"Inspektur Satria, mereka melimpahkan kasus ini padamu. Mereka
akan Bantu melacak jaringan kerjanya. Kamu masih menyimpan kasus serupa
selama 5 tahun inikan?" atasanku memerintahkan padaku. "Siap. Masih pak."
Jawabku. " Bagus. Pergilah sekarang bersama Pramana, ambil berkasnya dan
pelajari." <br>Aku segera keluar dan pergi bersama Pramana. Dia rekan
kerjaku. <br>Seingatku aku menaruhnya di kamarku. Mobil kantor kuparkir di
depan rumah. <br>Aku segera masuk. "Pram ayo masujk. Tunggu sebentar ya,
kucari dulu." <br>Pramana pun duduk di teras. Aku masuk kekamar. Mencari
berkas yang kucari. <br>Maklum berkas lima tahun yang lalu. Terbayangkan.
Sayup kudengar adikku sudah pulang. Dia ngobrol dengan pram. <br>Mereka
sudah saling kenal. Wong pram juga sering kemari. "Eh mas pram, mas satria
sudah pulang ya?" Tanya her pada pram. "Her, nggak kok. <br>Kami ngambil
berkas lima tahun lalu." "wah kayaknya, ada kasus menarik nih. Boleh tahu
dong? Pasti seru nih" Tanya Her pada temanku Pram. <br>"Oh iya, baru-baru
ini ada pencurian elite.. orang itu..". "Pram ayo pergi. Sudah kutemukan. Her
mas pergi lagi. Mungkin pulangnya malam" tanpa sengaja aku memutus
pembicaraan mereka. <br>"Ya sudah. Kapan-kapan saja ceritanya ya." Kata
pram. Diperjalanan pram mengendarai mobil, aku mulai mnyortir berkas yang
mendekati kejadian. <br>"Sudah ada yang cocok Sat?" Pram mengejutkanku.
"Ya, ada beberapa. Dari segi kasus ini adalah pencurian. Pelaku membobol
bank di London dari jarak jauh. Ada kasus serupa, pembobol bank asia di
singapura, hanya dia meninggalkan jejak berupa rekening maya miliknya.
<br>Hingga pihak internasional bisa melacaknya. Sedangkan yang sekarang
ini tak ada rekening maya atau aktifitas rekening nasabah yang mencurigakan.
<br>Sehingga Bank tidak menyadari, jika tidak ada komplain dari nasabah."
Jawabku. <br>Ya terkadang kupikir semakin canggih teknologi semakin
canggih pula tindak kejahatan yang ada. Seperti ini bikin pusing. Sekarang
dimanapun kapanpun bisa ambil dana cash. <br>Transaksi senilai milyaran
hanya dengan menekan tuts-tuts di keyboard melalui internet, bahkan ponsel.
Sampai malam aku berada di kantor. <br>Atasanku pun sibuk berkoordinasi
dengan pihak internasional. Tak lama atasanku masuk ke ruangan ku, dia
meyerahkan sebuah fax. <br>"Inspektur, ini berita terakhir dari bank London.
Semua dana yang ditarik pelaku adalah milik nasabah dari Indonesia. Jadi
mereka bisa memastikan kemungkinan besar pelakunya memang orang
Indonesia. <br>Lihatlah. Ada yang menarik disana, dan ini rahasia.". Aku
menerima fax itu dan membacanya seksama. Nama-nama nasabah itu sangat
tidak asing bagiku. Pejabat, pengusaha nasional dan hampir semua pernah
terlibat isu korupsi. Wow hingga saat ini dana yang ditarik pelaku hampir
tujuh puluh juta US dolar. <br>Wah pasti dia sudah jadi konglomerat. "Oh ya
inspektur, rencananya besok siang pihak bank London akan tiba di Yogya
untuk membahas maslah ini. <br>Mereka sudah bisa memastikan pelakunya
beraksi di wilayah Yogyakarta. Dan kini pihak internasional tengah
mengawasi aktifitas internet Yogyakarta. <br>Jangan lupa" perintah atasanku.
Setibaku di rumah. Aku masih memikirkan kasus baru ini. Orang itu pasti
jenius atau terorganisir. Tidak mungkin tidak ada jejak pasti ada. <br>Tapi
apa. "Mas, kok bengong gitu?" Her mengagetkanku. "Oh ndak apa-apa. Cuma
capek kok. Ayo kita tidur saja." Jawabku sekenanya. <br>Aku masih
memikirkan besok. Apa kira-kira wacana terakhir. Beruntung media belum
mengendus ini. Jika sudah gawat. "Selamat pagi, pak" Aku menyapa atasanku.
"Selamat pagi insepektur, silakan masuk. Perkenalkan mereka ini mister Dave
analyst pada Bank London dan mister Rodney dari kepolisian internasional."
<br>Mereka memperkenalkan diri mereka. "mister satria, saya dan mister
dave sudah mengawasi sejak seminggu terakhir. Kami sudah bisa memastikan
pusat aktifitas pelaku adalah di kota ini. <br>Dave juga menemukan unsur
manipulasi data, seakan nasabah sendiri yang melakukan transfer pada banyak
rekening yang berbeda. Yang kami heran, pertama pelakunya tidak hanya satu,
tetapi bisa mencapai puluhan atau ratusan dalah satu hari bersamaan.
<br>Karena itu kami menyimpulkan ini jaringan, melalui internet. Kedua dana
yang ditransfer tidak bisa ditebak tujuan dan wujudnya. <br>Kadang langsung
pada sebuah yayasan layanan masyarakat, atau bantuan pada suatu daerah
terpencil, mengatasnamakan Program Pengembalian Dana Rakyat…."
<br>Rodney masih terus menjelaskan. Aku sendiri mulai berpikir jika
dilakukan oleh banyak orang, tak mungkin semua bertujuan sama, tak
mungkin semua berpikiran sama. <br>Kecuali, mereka tidak tahu apa yang
mereka lakukan, mereka diperalat. Ya aku yakin itu. Tapi bagaimana caranya
memperalat puluhan bahkan ratusan orang setiap harinya. Sepertinya aku
mulai mengerti si pelaku. <br>"Pak, mister dave, mister Rodney. Saya tidak
sepakat jika dikatakan pelakunya lebih dari satu, karema menurut saya
pelakunya hanya satu. Lainnya hanya diperalat tanpa sadar. Menurut kalian
apa yang memungkinkan akses bersamaan, hingga ratusan dalam sebuah
internet. Pasti sesuatu yang sangat menarik" ujarku. Aku berusaha
menyampaikan apa yang aku rasa pasti begitu yang pelaku pikirkan.
<br>Dave dan Rodney menganggguk, kemudian Dave tersenyum. "Sekarang
saya mengerti, kemungkinan pelaku melakukannya melalui sebuah game
online, begitu maksudmu bukan? Baiklah serahkan pada kami dalam beberapa
hari mungkin kami sudah bisa menemukan siapa dan bagaimana pelaku
bekerja" kata Dave. <br>Kami tersenyum, sepertinya kami mulai menemukan
titik terang. Dalam hati kecil diam-diam sebenarnya aku bangga pada pelaku,
meski itu tetap sebuah kesalahan.<br>
Beberapa hari kemudian, berita yang beredar Dave dan Rodney sudah
menemukan jawabanya. Aku sendiri bukan main penasaran. Kami berkumpul
di kantor pusat. "Saya dan Rodney sudah melacak bagaimana pelaku bekerja.
Mister satria benar Pelakunya hanya sebuah komunitas, lainnya adalah end
user yang diperalat. Belakangan ini menurut data pusat penyedia layanan
internet ada beberapa game online yang tengah meroket. Terutama di kalangan
pelajar muda. Salah satunya adalah Cyber Robin.<br> Cyber Robin adalah
game tentang Robin Hood, tugasnya mencuri harta dari target yang
diinginkan. Setiap target mewakili satu nasabah. Melewati sepasukan tentara
kerajaan dan alam liar. <br>Jika berhasil, maka dana nasabah kami pun benar-
benar berkurang. Semakin banyak Robin berhasil merampok, semakin tinggi
poin yang didapat. <br>Robin juga bisa bekerja sama dengan karakter lainnya.
Yaitu jika ada end user lain yang memainkan Cyber Robin dengan karakter
lain. <br>Mengenai tujuan pemindahan dana, sepertinya di update secara
berkala. <br>Ini game yang dirancang secara apik oleh orang-orang jenius
dibidangnya. Antara lain grafis, multimedia, web dan programming.
<br>Nampaknya mereka benar-benar ingin menjadi Robin Hood. Ini data
mengenai orang- orang tersebut yang kami dapatkan." Demikian dave
menjelaskan. Dia menyerahkannya pada atasanku. <br>Aku berpikir
bagaimana cara pelaku menyusup bank tanpa diketahui. "Dave, bukankah
firewall yang kalian gunakan sangat canggih, bagaimana bisa?" aku bertanya,
aku betul betul salut dan penasaran pada pelaku yang satu ini. <br>"Dalam
dunia programming dikenal adanya injection, atau sql injection. Struktur
perintah yang paling flexible. Pelaku menyisipkan perintah yang membuat arti
perintah menjadi ambigu dan kemudian membenarkannya. <br>Sehingga
sistem mengijinkan pelaku masuk dan melakukan aktifitas yang
dikehendakinya. Firewall memang bekerja, tapi bagaimanapun itu buatan
manusia, celah sedikit saja jika terlihat pasti dapat ditembus. <br>Baiklah
untuk selanjutnya kami serahkan pada peradilan Negara ini, karena ini
menyangkut warga Negara ini. Mungkin lusa kami sudah harus kembali.
<br>Sistem perbankan kami pun mulai dalam tahap perbaikan keamanan yang
lebih kuat lagi. Terimakasih atas kerjasama Negara Indonesia" Jawab Dave.
<br>Atasanku meyerahkan daftar pelaku padaku seraya berkata "Ini
kuserahkan padamu. Inspektur." Aku melihat dengan seksama dan kemudian
duduk lemas. Ya tuhan aku tidak akan pulang hari ini. Esok saja semua
berakhir.<br>
"Pram, semua sudah siap?" kataku pada Pramana. "Siap inspektur!
Kamu tidak apa-apa sat?" tanyanya. "Tidak pram, kamu ikut aku. Kelompok
lain menyebar pada tempat yang telah kutentukan. Sebagian denganku. Tapi
ingat hanya aku dan Pram yang masuk. Kalian mengerti! Ayo berangkat." Aku
sudah tiba di tempat pelaku. Sang programmer dari cyber robin. Aku melacak
dan mencari bukti-bukti di seluruh ruangan dan aku menemukan Master
program Cyber Robin di jajaran CD yang ada. Aku lemas. Adikku keluar dari
kamar mandi. Dia heran melihatku dikamarnya. "Lho mas, lagi cari apa? mau
pinjem CD? ambil saja mas." Katanya sambl masuk. Aku menatapnya dan
menyerahkn surat penangkapan atas namanya. "Kenapa? Kenapa ini tidak
kamu hancurkan Herawan!" teriakku pada her adikku. Dia terdiam. "Kenapa
kamu tidak hancurkan bukti ini, agar aku bisa melepaskanmu!" aku menangis.
"Karena setiap program itu adalah cintaku. Tidak mungkin aku
membunuhnya." Jawab Her datar. "Apa alasanmu, kamu mau jadi Hero!
Jawab masmu" aku berteriak sambil menggunjang badannya. "Karena aku
tidak rela bapak mati sia-sia. Bapak hakim yang jujur. Mas juga sependapat
bukan, jika mereka tidak berhak atas sesenpun dana milik rakyat. Karena itu
harus dikembalikan. Ini caraku mas. Ini yang bisa aku lakukan mas." Aku
tersungkur lemas mendengar jawaban Her. Adikku yang jenius, aku tidak
menyangka kamu sejenius itu. Tapi bukan begitu caranya adikku. Aku masih
terduduk dan menangis, Her kenapa harus aku yang menangkapmu. Adikku
kemudian duduk dan mengulurkan kedua tangannya padaku. "Mas Satria
adalah abdi Negara yang baik lagi professional bukan?" katanya. Herawan
Panji Kusuma, mahasiswa ilmu komputer sekaligus asisten dosen yang
berbakat menjadi tersangka sebagai pemrogram cyber robin dan aku Inspektur
Satria Utomo kakaknya, yang harus menangkapnya. Ini hari apa ya. Kenapa
begitu buruk.
Dua tahun kemudian,
Sebuah game Online bernama Cyber Robin II: Robin return, menjadi
headline sebuah Koran lokal karena popularitasnya di kalangan pelajar dan
mahasiswa.
</font>
</p>
<hr>
</TD>
</TR>
<TR>
<TD>
<a name="#puisi">
<h3>PUISI</h3>
<CENTER>
My lord, my guardian, my god
<br><br>
I don't remember when I was born<br>
I can't feel how I can grow up<br>
I know and only understand if I am alive<br>
I know it wasn't my plan or a hope<br>
But it's beautiful to life, wonderful to know<br>
<br>
Everything is hang on you<br>
Every time you make it perfect<br>
Everything is depend on you<br>
Every kind is on your hand<br>
Every falling leaves are depend on your wise ness<br>
<br>
My lord, my guardian<br>
The guard and the owner<br>
My beloved till I am passed away<br>
My beloved during I do my life<br>
Take me your servant, yours <br>
<br>
My lord, my guardian, my god<br>
</font>
</CENTER>
</TD>
</TR>
</TABLE>
<HR>
<center><a href="hyperlink.html"><FONT
SIZE="+2">KEMBALI</FONT></a></center>
</BODY>
</HTML>
terlihat pada link untuk bookmark, pada URL diawali dengan tanda (#)
kemudian nama bookmarknya. Lalu dipanggil dengan tag <A name=...>.
Simpan dokumen diatas dengan nama bookmark.html
c. Tab Index pada hyperlink

Untuk mengurutkan hyperlink dapat ditambahkan atribut tabindex. Atribut ini
akan terlihat efeknya saat kita manekan tombol tab. Berikut contoh
dokumennya.
<HTML>
<HEAD>
<TITLE> Penggunaan Tab Index </TITLE>
</HEAD>
<BODY>
Masuki link-link berikut :<br>
<UL>
<LI><a href="aturfont.html" tabindex="1">1.Mengatur Font</a>
<LI><a href="list.html" tabindex="3">3.Urut Daftar</a>
<LI><a href="teksgambar.html" tabindex="2">2.teks dan Gambar</a>
<LI><a href="preform.html" tabindex="5">5.Preformat</a>
<LI><a href="animasi.html" tabindex="4">4.Animasi</a>
</UL>
<hr>
<center><a href="hyperlink.html"><b>KEMBALI</b></a></center>
</BODY>
</HTML>
Simpan dokuman diatas dengan nama tabindex.html.
d. Membuka Jendela lain

Jika kita ingin menampilkan hasil hyperlink pada jendela yang lain maka
dapat kita gunakan atribut target disi dengan (_blank). Berikut contoh
dokumennya :
<HTML>
<HEAD>
<TITLE> Bermain dengan suara dan video </TITLE>
</HEAD>
<BODY>
<ul>
<li><a href="../nurulnitip/Matsuri.mp3">Matsuri</a>
<li><a href="../nurulnitip/tokyodrift.mp3">Tokyo Drift, Fast and
furious</a>
</ul>
<br>
<hr>
<h2>Buka di jendela baru</h2>
<ul>
<li><a href="nasyid.html" target="_blank">Lagu-Lagu Islami</a>
<li><a href="pop.html" target="_blank">Lagu-lagu Umum</a>
</ul>
<br>
<hr>
</BODY>
</HTML>
Simpan dokumen diatas dengan nama multimedia.html dan berikut isi dari
hyperlink nasyid.html dan pop.html.
<HTML>
<HEAD>
<TITLE> Lagu Nasyid </TITLE>
</HEAD>
<BODY>
<BODY>
<ul>
<li><a href="../nurulnitip/Sendiri.mp3">Sendiri</a>
<li><a href="../nurulnitip/PergiTakKembali.MP3">Pergi tak
Kembali</a>
</ul>
<br>
<hr>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Lagu Umum </TITLE>
</HEAD>
<BODY>
<BODY>
<ul>
<li><a href="../nurulnitip/Muse-Starlight.mp3">Starlight dari
Muse</a>
<li><a href="../nurulnitip/tokyodrift.mp3">Tokyo Drift, Fast and
furious</a>
</ul>
<br>
<hr>
</BODY>
</HTML>
e. Link dengan Gambar

Sebuah gambar dapat juga menjadi hyperlink. Berikut ini penggalan
perintahnya :

<a href="Gambar/Image2.jpg">
<IMG SRC="Gambar/Image2.jpg" width="200" height="200">
</a>
<IMG SRC="Gambar/Ar152.jpg" width="150" height="200">
Lihat Ukuran Sebenarnya
</TD>
Perintah diatas adalah penggalan dari dokumen tabelgambar.html
f. Link ke Situs Lain

Hyperlink dapat juga digunakan untuk mengaitkan ke situs lain baik dalam
ataupun luar negri. Berikut contohnya :
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#000000">
<TABLE bgcolor="darkgray">
<CAPTION><FONT color="#FFFFFF" size="+1">SILAKAN
JELAJAHI SITUS-SITUS BERIKUT INI</font></CAPTION>
<tr bgcolor="#ffffff">
<th width="350">
LUAR NEGRI
</td>
<th width="350">
INDONESIA
</td>
</tr>
<td>
<A
HREF="WWW.library.uk">www.library.uk</A>
</td>
<td>
<A
HREF="WWW.wikipedia.co.id">www.wikipedia.co.id</A>
</td>
</tr>
<td>
<a
href="www.scholarship.com">www.scholarship.com</a>
</td>
<td>
<a
href="www.astaga.com">www.astaga.com</a>
</td>
</tr>
<td>
<a
href="www.google.com">www.google.com</a>
</td>
<td>
<a
href="www.google.co.id">www.google.co.id</a>
</td>
</tr>
<td align="center" colspan="2">
<a href="www.stmikelrahma.co.id">
www.stmikelrahma.co.id </a>
</td>
</tr>
</TABLE>
<br>
<center><a href="hyperlink.html"><FONT color="white"
</BODY>
</HTML>
Membuat Tampilan Yang Menarik
Dengan
Adobe PhotoShop
Untuk mampercantik dan membuat penikmat situs tertarik menjelajahi

situs kita maka tidak ada salahnya kita membuat tampilan awal yang
menggebrak, menarik perhatian atau biasa disebut eye catching. Dalam hal ini
adobe photoshop dapat memberikankemudahan itu. Karena software ini
memang khusus untuk memanipulasi gambar menjadi istimewa. Dengan
adobe image ready kita dapat langsung mengaplikasikannya menjadi sebuah
halaman web seperti contoh berikut ini.
Apabila kita menyorot pada salah satu teks pada tulisan akan berubah
warna pertanda hiperlink tengah disorot seperti gambar berikut ini :
PERTEMUAN VI
Penggunaan Formulir
Sering kita jumpai formulir pendaftaran pada sebuah situs. Missal
untuk join member atau yang termudah saat kita membuat alamat e-mail.
Pembuatan formulir ini menggunakantag <FORM>..</FORM>. Atribut yang
paling umum terdapat pada tag form adalah ACTION dan METHOD. Action
digunakan untuk menentukan URL yang akan dijalankan dan menerima semua
masukan pada formulir. Sedangkan METHOD digunakan untuk menentukan
bagaimana cara informasi dikirimkan. Ada 2 metode yang digunakan yaitu
POST dan GET. Perbedaan diantara keduanya akan dibahas dengan contoh
berikut ini :
<HTML>
<HEAD>
<TITLE> FORMULIR </TITLE>
</HEAD>
<BODY>
<H2>WELCOME TO THIS MEMBER</H2>
<H4>Please Fill This Form Carefully</H4>
<FORM METHOD="POST" ACTION="record.html">
<TABLE>
<TR>
<TD width="100">Name :</TD>
<TD><input type="text" name="new_member" size="25"
maxlength="25">
</TD>
</TR>
<TR>
<TD>Sex :</TD>
<TD><input type="radio" name="sex" checked>Male <input
type="radio" name="sex">Female</TD>
</TR>
<TR>
<TD>Birthday :</TD>
<TD>Year <input type="text" size="4" maxlength="4"
name="year">
Date <input type="text" size="2" maxlength="2"
name="date">
Month <select name="month">
<option value="January">January
<option value="February">February
<option value="March">March
<option value="April">April
<option value="May">May
<option value="June">June
<option value="July">July
<option value="August">August
<option value="September">September
<option value="October">October
<option value="November">November
<option value="December">December
</TD>
</TR>
<TR>
<TD valign="top">Hobby :</TD>
<TD><input type="checkbox" name="Music"
checked>Music<br>
<input type="checkbox" name="Movie">Movie<br>
<input type="checkbox"
name="Travveling">Travelling<br>
<input type="checkbox" name="CandT">Computer and
Technology<br>
<input type="checkbox" name="Others">Others<br>
</TD>
</TR>
<TR>
<TD>Religion :</TD>
<TD><select name="religion">
<option value="Moslem">Moslem
<option value="Christ">Christ
<option value="Buddhism">Buddhism
<option value="Hindhuism">Hindhuism
<option value="Kong Hu Cu">Kong Hu Cu
<option value="Yehova">Yehova
<option value="Others">Others
</TD>
</TR>
<TR>
<TD>Password :</TD>
<TD><input type="password" size="9" maxlength="9"
name="pwd"></TD>
</TR>
<TR>
<TD>Re_Password :</TD>
<TD><input type="password" size="9" maxlength="9"
name="pwd1"></TD>
</TR>
<TR>
<TD colspan="2"><FONT SIZE="+1"
face="Helvetica"><i>Your Opinion :</i></FONT></TD>
</TR>
<TR>
<TD colspan="2"><TEXTAREA name="comment" rows="10"
cols="50" WRAP></TEXTAREA>
</TD>
</TR>
<TR>
<TD>
<INPUT type="Submit" value="SEND">
</TD>
<TD align="right">
<INPUT type="Reset" value="RESET">
</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<INPUT type="Button" value="Previous"
Onclick="self.history.back();">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Karena pada action dituliskan bahwa semua nilai yang dibawa akan
diarahkan ke record.html maka buatlah dokumen record.html sebagai berikut.
Namun pada tahap ini informasi yang sebenarnya tentu belum bisa
ditampilkan karena kita tidak menyertakan database. Jika kita sudah
mempelajari tentang middleware (PHP) dan database kita akan bisa
mengisikan yang sebenarnya. (Sabar yaaa ).
<HTML>
<HEAD>
<TITLE> Recording </TITLE>
</HEAD>
<BODY>
<h1>CILUUUUUK BAAAAAAA</h1>
</BODY>
</HTML>
Sekarang coba ubah methodnya menjadi GET dan perhatikan apa yang terjadi.
Perbedaanya dapat dilihat pada gambar berikut ini :
Dengan method POST pada bagian address tidak ditampilkan nilai dari formulir yang
kita isikan sedang dengan GET informasi akan ditampilkan seperti pada gambar
dibawah ini :
Pertemuan VII
IMAGE MAP, FRAME DAN TAG META
A. IMAGE MAP
HTML menyediakan fasilitas untk pencitraan. Sebagai contoh dalam
menjabarkan peta lengkap dengan kabupaten atau bahkan halaman rumah
kalian (tergantung fasilitas). Misal saja pada praktikum nanti akan kita
gunakan peta DIY jika kita klik salah satu kabupaten maka akan tampil
informasi mengenai kabupaten tersebut. Dengan menggunakan tag
<MAP>..</MAP> yang didalamnya digunakan tag <img> dan pada tag <img>
perlu dicantumkan atribut usemap. Berikut jelasnya:
<MAP NAME=”nama_peta”>
……………
</MAP>
<IMG SRC=”nama_berkas_gambar” USEMAP=”#nama_peta”>
Daerah yang dapat diklik terdefinisikan dengan tag <AREA> memiliki atribut
SHAPE yang menentukan bentuk area gambar yang dapat diklik yaitu:
- CIRCLE = untuk mendefinisikan bentuk bulat. Koordinat yang
didefinisikan adalah baris, kolom dan radius (jari-jari)
- RECT = rectangular untuk mendefinisikan bentuk kotak. Koordinat yang
harus didefinisikan adalah baris kiri, kolom atas, baris kanan, kolom
bawah.
- POLYGON = untuk mendefinisikan bentuk polygon. Koordinat yang
harus didefinisikan adalah berupa semua pasangan baris dan kolom dari
semua titik-titik pojok yang secara berurutan membentuk garis.
Berikut adalah contohnya :
<HTML>
<HEAD>
<TITLE>bentuk</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF >
<IMG SRC="images/bentuk.gif" WIDTH=”400” HEIGHT=”400”
BORDER=”0” ALT="" USEMAP="#bentuk_Map">
<MAP NAME="bentuk_Map">
<AREA SHAPE="poly" ALT="" COORDS="292,313, 316,291, 357,270,
376,279, 370,295, 363,318, 331,324, 358,334, 337,382, 321,375, 294,336,
292,352, 282,337, 268,366, 244,382, 228,363, 223,339, 244,324, 225,322,
210,300, 204,279, 220,268, 270,291" HREF="kupu.html">
<AREA SHAPE="rect" ALT="" COORDS="118,161,255,237"
HREF="kotak.html">
<AREA SHAPE="circle" ALT="" COORDS="93,77,52"
HREF="bulat.html">
</MAP>
</BODY>
</HTML>
Simpan dengan nama bentuk.html. Selanjutnya buatlah tiga dokumen dibawah
ini :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>INI BENTUK BULAT</CENTER>
</BODY>
</HTML>
simpan dengan nama bulat.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>INI BENTUK KOTAK</CENTER>
</BODY>
</HTML>
simpan dengan nama kotak.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>INI BENTUK KUPU-KUPU</CENTER>
</BODY>
</HTML>
simpan dengan nama kupu.html. sekarang jalankan dokumen bentuk.html.
Sekarang kita akan aplikasikan pada sebuah peta DIY sebagai berikut ini:
<HTML>
<HEAD>
<TITLE>peta</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<h1>DAERAH ISTIMEWA YOGYAKARTA</h1>
<H3>SILAKAN PILIH</H3>
<IMG SRC="images/peta.gif" WIDTH=”380” HEIGHT=”282”
BORDER=”0” ALT="" USEMAP="#peta_Map">
<MAP NAME="peta_Map">
<AREA SHAPE="poly" ALT="" COORDS="1,137, 25,148, 41,113, 64,92,
67,68, 59,59, 74,44, 124,48, 127,66, 138,48, 199,6, 219,95, 234,106, 246,102,
253,108, 274,105, 287,103, 330,116, 351,271, 378,273, 380,1, 1,0"
HREF="jateng.html">
150,210, 195,237, 245,252, 302,273, 380,277, 377,283, 0,281"
HREF="pantai.html">
301,270, 350,273, 342,260, 333,223, 328,122, 284,107, 251,113, 241,106,
234,126, 211,136, 209,146, 221,150, 211,182, 199,176, 191,184, 183,182,
179,189, 168,184, 155,194" HREF="gunungkidul.html">
216,152, 209,182, 199,173, 176,185, 165,183, 150,193, 154,208, 101,190,
119,164, 129,166, 130,146, 110,128, 116,116, 129,112, 134,128, 150,119,
177,132, 182,114" HREF="bantul.html">
179,124, 179,107" HREF="yogya.html">
217,100, 238,113, 234,121, 222,124, 212,119, 205,123, 201,121, 189,125,
186,108, 160,99, 146,117, 132,123, 134,107, 110,115, 106,99, 106,87,
113,76" HREF="sleman.html">
74,65, 63,62, 76,49, 121,50, 126,72, 112,77, 104,92, 111,113, 106,126,
128,147, 124,164, 116,164, 101,190, 78,173, 52,161"
HREF="kulonprogo.html">
</MAP>
</BODY>
</HTML>
Simpan dengan nama peta.html. kemudian buatlah informasi dari masing

kabupaten seperti berikut:
<HTML>
<HEAD>
<TITLE> BANTUL </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI BANTUL</CENTER></H1>
<H3><CENTER>TERIMA KASIH</CENTER></H3>
</BODY>
</HTML>
simpan dengan nama bantul.html
<HTML>
<HEAD>
<TITLE> KULONPROGO </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI KULONPROGO</CENTER></H1>
</BODY>
</HTML>
simpan dengan nama kulonprogo.html
<HTML>
<HEAD>
<TITLE> JAWA TENGAH </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI JAWA TENGAH, BUKAN
DIY</CENTER></H1>
</BODY>
</HTML>
simpan dengan nama jateng.html
<HTML>
<HEAD>
<TITLE> GUNUNG KIDUL </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI GUNUNG
KIDUL</CENTER></H1>
</BODY>
</HTML>
simpan dengan nama gunungkidul.html
<HTML>
<HEAD>
<TITLE> PANTAI SELATAN </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI PANTAI
SELATAN</CENTER></H1>
</BODY>
</HTML>
simpan dengan nama pantai.html
<HTML>
<HEAD>
<TITLE> SLEMAN </TITLE>
</HEAD>
<BODY>
<H1><CENTER>ANDA MEMASUKI SLEMAN</CENTER></H1>
</BODY>
</HTML>
simpan dengan nama sleman.html. Sekarang jalankan dokumen peta.html.
B. FRAME
Untuk membagi sumberdaya layar tampilan pada sebuah web, HTML
menyediakan tag <FRAMESET>..</FRAMESET> untuk dapat membagi
layar. Berikut ini adalah tag dasarnya :
<FRAMESET ROWS="," COLS=",">

<FRAME SRC="" NAME="">
<FRAME SRC="" NAME="">
</FRAMESET>
pada tag <frameset> dapat juga terdapat atribut scrolling untuk menampilkan
penggulung, border untuk menampilkan batas layar. Dan jika browser tidak
mendukung frame disediakan tag <noframes> untuk menginformasikan pada
user jika browser tidak mendukung frame. Untuk lebih jelasnya silakan coba
dokumen berikut ini:
<HTML>
<HEAD>
<TITLE> Penggunaan Frame </TITLE>
<FRAMESET ROWS="100,*,50">
<FRAME NAME="atas" SRC="atas.html" SCROLLING="no">
<FRAMESET COLS="70%,*">
<FRAME NAME="kiri" SRC="petaframe.htm" SCROLLING="NO">
<FRAME NAME="kanan" SRC="yogya.html" SCROLLING="no">
</FRAMESET>
<FRAME NAME="bawah" SRC="bawah.html" SCROLLING="NO">
</FRAMESET>
</HEAD>
<BODY>
</BODY>
</HTML>
simpan dengan nama frame.html. Untuk mengisinya gunakan peta.html yang

sebelumnya kita buat. Tambahkan atribut target pada hyperlink seperti berikut
ini:

179,124, 179,107" HREF="yogya.html" TARGET="kanan">
Untuk dokumen buat seperti dibawah berikut ini :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h1><CENTER>DAERAH ISTIMEWA YOGYAKARTA</CENTER></h1>
<H3><CENTER>SILAKAN PILIH</CENTER></H3>
</BODY>
</HTML>
simpan dengan nama atas.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>SEE YOU NEXT</CENTER>
</BODY>
</HTML>
simpan dengan nama bawah.html. Silakan jalankan dokumen frame.html dan
amati apa yang terjadi.
C. TAG META
Tag <META> adalah tag yang berada di dalam tag <HEAD> biasanya
dibawah tag <TITLE>. Tag ini berisikan informasi mengenai dokumen. Tetapi
informasi tidak untuk ditampilkan. Berikut contoh tag meta jika kita
menggunakan editplus:
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
Tag ini juga bisa digunakan untuk menjelaskan isi dokumen. Dengan
meletakkan Name=”description” dan mengisi atribut Content dengan tema
web. Maka saat mesin pencari sedang bertugas web anda bisa dikenali. Misal:
<META NAME="Description" CONTENT="Anime Naruto">
dengan begitu jika para surfer mencari tentang anime naruto web anda akan
menjadi salah satu yang ditampilkan. Atau bisa juga anda letakkan kata kunci
sehingga area pencarian menjadi lebih luas. Kesempatan web anda dilihat para
surfer pun lebih besar. Hal ini menggunakan keywords seperti berikut :
<META NAME="Keywords" CONTENT="Naruto, Shinobi, Konoha,

Anime, Kunai, Orochimaru">
Semakin banyak kata kunci semakin besar kesempatan web anda ditampilkan.
Bisa juga sebagai pengalih alamat. Misal anda masuk ke sebuah situs tetapi
justru memasuki situs yang bukan tujuan anda. Hal ini bisa dilakukan sebagai
berikut : (namun perlu diingat bahwa hal ini jarang. Sehingga tidak semua atau
bahkan saat ini hampir tidak dikenali)
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="3; URL="baru.html">
</HEAD>
<BODY>
<CENTER>
Halaman akan pindah ke <a href="baru.html">baru.html</a> dalam 3
detik
</CENTER>
<CENTER>
jika dalam 3 detik gak pindah juga klik link diatas
</CENTER>
</BODY>
PERTEMUAN VIII
MENGGUNAKAN PIRANTI BANTU ADOBE DREAMWEAVER CS4
A. MEMBUKA ADOBE DREAMWEAVER CS4

Sebagai langkah awal, pilih tombol start  program  adobe dreamweaver
CS4. Akan anda dapatkan welcome page seperti berikut ini:
Gambar welcome page

Pada checkbox “Don’t show again” bisa anda pilih agar selanjutnya halaman
ini tidak ditampilkan.
B. MENGENAL AREA KERJA

Selanjutnya saat kita memilih filenew, maka akan tampil area kerja seperti
berikut beserta keterangan masing-masing panel dan toolbarnya :
A B C D E
F G H
Berikut ini adalah penjelasannya:

[A] Application Bar : berisi tombol workspace, menu, dan aplikasi lainnya.
[B] Toolbar Document : berisi tombol-tombol yang digunakan untuk
mengubah tampilan jendela document.
[C] Jendela document : area kita melakukan editing script ataupun design
halaman web kita
[D]Workspace Switcher: untuk mengubah tampilan area kerja dreamweaver
[F] Tag selektor : menampilkan hirarki pekerjaan yang sedang dipilih.
[G] Properti Inspector : digunakan untuk melihat dan mengubah berbagai
properti objek atau teks pada jendela design.
[H/E]  Panel group: berupa kumpulan beberapa panel yang saling berkaitan.
Dikelompokkan dalam judul-judul tertentu berdasarkan fungsinya. Misal
insert, css style, ap elements.
C. MEMBUAT / MEMANAGE SITE LOKAL BARU
Pertama kali saat kita akan membuat web, buatlah terlebih dahulu site-nya,
maksudnya pesankan terlebih dahulu space tertentu yang nantinya akan
digunakan sebagai tempat penyimpanan semua file-file yang kita butuhkan
seperti images, html dsb. Langkah-langkahnya adalah :
1. Klik Sitenew site. Maka akan tampil dialog site definition seperti
berikut ini:
Gambar dialog site definition

Pada textbox Unnamed Site isikan nama site anda misalkan “bemyfriend” dan
pada textbox http// isikan alamat web yang kita buat misal menjadi
http://www.bemyfriend.com. Kemudian kliknext.
2. Selanjutnya akan tampil dialog pemilihan tipe document sebagai

berikut : Pilihlah No, I idon’t want to use server technology. Karena
sementara ini web yang kita buat adalah statis.
Gambar dialog pilihan tipe dokumen
3. Selanjutnya klik next maka akan tampil dialog selanjutnya untuk

memilih lokasi penyimpanan file, seperti berikut ini, dan isikan opsi pada
pilihan “Edit local copies on my machine, then upload to server when
ready’ lalu tentukan lokasi penyimpanan filenya.
Gambar dialog pemilihan lokasi penyimpanan file
4. Langkah selanjutnya adalah mengisikan jenis server yang digunakan.

Apabila masih situs local dan belum terkoneksi maka pilihlah
local/network. Seperti berikut ini :
Gambar dialog pemilihan jenis server

5. Setelah itu kliknext dan selanjutnya tampil dialog hak akses
pengeditan sebagai berikut ini ;
Gambar dialog hak pengeditan
Pilihlah No, do not enable check in and check out. Artinya user lain tidak
dapat melakukan pengeditan pada waktu yang bersamaan. Sedangkan jika
memilih Yes, enable check in and check out maka user lain dapat melakukan
edit pada web anda bersamaan ketika anda tengah melakukan pengeditan juga.
6. Selanjutnya klik next dan tampil dialog terakhir yang menerangkan

tentang ringkasan setting yang baru saja kita buat sebagai berikut :
Gambar dialog penjelasan ringkasan setting

Selanjutnya klik  Done yang sekaligus mengahiri penyettingan web yang
akan kita buat.
D. MEMBUAT FILE DOKUMEN WEB
1. Setelah penyettingan selesai dilakukan, maka semua pekerjaan anda

akan diletakkan pada folder tersebut. Selanjutnya klik file  new. Maka
akan tampil dialog pemilihan format dokumen seperti berikut ini :
Gambar dialog new document
Jika kita memilih HTML dan layout None maka yang kita dapat adalah satu
halaman putih kosong. Sedang selain itu sudah disediakan beragam
tampilannya. Untuk pertama kali pilihlah HTML dan Layout None. Kemudian
klik  create.
2. Jika sudah tampil dokumen kosong maka bersiaplah untuk mulai

mendesain web kita. Sebelumnya ubah tampilan dokumen menjadi 2 yaitu
bagian coding dan bagian desain dengan memilih ikon split
Maka akan kita dapatkan tampilan area kerja seperti dibawah ini. Kita
dapat melakukan pengeditan terhadap dokumen melaui bagian codingnya
ataupun bagian desainnya.
Gambar area kerja dengan 2 tampilan coding dan desain
3. Untuk memulai pekerjaan kita, bisa kita mulai dengan membentuk

layout sendiri menggunakan tabel. Pada bagian panel insert menu
common terdapat pilihan tabel klik dan drag ke area desain. Maka akan
tampil dialog pengisian jumlah baris dan kolom seperti berikut ini:
Gambar dialog table
4. Isikan bagian rows 4 dan bagian columns 3, akan menghasilkan sebuah

tabel dengan 4 buah baris dan 3 buah kolom. Untuk mendapatkan
tampilan seperti pada dialog 2 tampilan, pada baris pertama ketiga kolom
di blok kemudian klik kanan  pilih table  merge cell. Untuk
menggabungkan kolom, atau dalam codingnya disebutkan colspan=3.
jika ingin memecah tabel, baik baris ataupun kolom klik kanan  pilh
tabelsplit cell dan tentukan jumlah pembagiannya. Lakukan hingga
didapat tampilan layout seperti berikut ini:
Gambar tampilan layout web
5. Pada bagian kepala atau baris pertama, isikan text

WWW.BEMYFRIEND.COM.
6. Pada baris kedua kolom kedua isikan data tanggal dengan memilih
pada panel insert  common, menu date maka akan tampil dialog
berikut ini:
Gambar dialog insert date

7. Selanjutnya cobalah untuk mengatur page properties. Ini untuk
mengatur tampilan sebuah halaman sama halnya ketika kita mengatur
page setup, font dan paragraf pada Ms. Word. Klik modifypage
properties. Akan tampil dialog seperti dibawah ini:
Gambar dialog Page Properties
Berikut ini adalah keterangan masing-masing kategori:

 APPEARANCE (CSS) : kategori ini untuk mengatur properti
halaman menggunakan bahasa CSS. Menghasilkan kode style pada
jendela codingnya.
 APPEARANCE (HTML) : ketegori ini digunakan untuk mengatur
halaman dalam kode HTML, seperti warna atau gambar background,
warna link dsb.
 LINKS (CSS) :kategori ini digunakan untuk menentukan jenis fornt
pada teks link, warna pada teks link yang telah dikunjungai, warna pada
reks rollover atau perubahan warna saat kursor menyorot link. Kode ini
diterjemahkan dalam bahasa CSS.
 HEADINGS (CSS) : kategori ini digunakkan untuk menentukan
style yang akan digunakan untuk teks naskah.
 TITLE / ENCODING : kategori ini digunakan untuk mengisi judul
halaman pada bagian title.
 TRACING IMAGE ; kategori ini digunakan untuk menampilkan
gambar sementara pada background halaman web
Settinglah masing-masing dan sesuaikan dengan thema web yang anda
pilih. Kemudian klik apply dan OK.
8. Setelah setting selesai. Kita lanjutkan dengan membuat hyperlink pada

sisi kiri web. Pertama pecah cell kolom ketiga baris kedua menjadi 5
baris. Lalu pada baris pertama isikan teks bertuliskan My Menus. Pada
baris selanjutnya klik dan drag ikon hyperlink pada panel
insertcommon. Akan tampil dialog pengisian atribut hyperlink seperti
berikut ini :
Gambar dialog hyperlink
Cukup isikan text dan link saja. Namun jika anda menginginkan mengisinya
dengan lengkap tentu bisa membantu para user lainnya. Setelah semua
atribut diisikan, klik OK. Buat hyperlink seperti pada tampilan dibawah ini,
yang berisikan About Me, My Product, friendship dan Look At My Friend.
Gambar tampilan hyperlink
9. Lengkapi halaman web ini dengan gambar dan teks yang diperlukan.
Untuk menyisipkan gambar, klik menu insertimage pada cell yang
dinginkan, atau klik dan drag ikon image pada panel insertcommon,
menuju cell yang dinginkan. Akan tampil dialog sebagai berikut ini:
Gambar dialog select image
Pilihlah gambar yang anda inginkan dan klik OK. Jika gambar berada
diluar direktori penyimpanan file HTML maka akan tampil dialog untuk
mengcopy file gambar menjadi satu direktori dengan HTML.
Sebelumnya buatlah terlebih dahulu folder images.
Gambar dialog penyimpanan file gambar
Klik yes untuk mengcopy file gambar. Buat hingga tampilan menyerupai
seperti dibawah ini :
Gambar tampilan halaman index
Untuk halaman pertama web kita selesai sudah. Anda sudah mempelajari bagaimana
membuat layout web dengan HTML terutama dengan tabel. Yang selanjutnya akan
kita pelajari membuat layout halaman web dengan Frame dan frameset.
PERTEMUAN KE IX
MEMBUAT LAYOUT DENGAN FRAME
Pada dasarnya adobe dremweaver CS4 sudah memberikan banyak tampilan

yang baku, namun jika kita menginginkan tampilan yang berbeda, yang merupakan
buatan kita sendiri hal ini disediakan fasilitasnya. Berikut cara-cara dalam membuat
layout web dengan frame :
A. Cara Pertama
 Klik filenew. Pada dialog new document pilihlah page from sample.
 Pada sample folder pilihlah frameset, kemudian pilihlah salah satu
tampilan frame yang anda suka.
Gambar dialog new document
 Klik create untuk mengahirinya maka akan tampil pada dokumen baru
kita, tampilan seperti dibawah ini:
Gambar dialog penamaan frame
Kita bisa membiarkanya dalam keadaan default yaitu mainframe,

topframe dan leftframe (jika tipe itu yang dipilih) atau memberikan
nama tersendiri seperti diatas, menjadi hal_utama, hal_atas, hal_kiri.
Kemudian klik OK. Berikut tampilan yang akan kita dapatkan :
Gambar hasil pengaturan frame
Untuk pengaturan luasnya area frame masing-masing cukup dengan

Kliktahandrag ke area yang dituju. Untuk pengisian teks, gambar
ataupun hyperlink bisa anda ikuti modul pertemuan ke VIII.
B. Cara Kedua
Cara yang kedua adalah dengan klik insertHTMLFramespilih
kategori frame , atau klik pada panel insertlayoutframespilih kategori
frame. Hasil yang akan didapat serupa.
C. Cara ketiga
Cara yang ketiga kita bisa membuat layout sendiri dengan menggunakan
splitter. Caranya :
 Aktifkan jendela dokumen atau didalam frame yang akan dibagi-bagi.
 Pilih modifyframeset
 Pada submenu akan tampil pemilihan iterm pemecah halaman sebagai
berikut ini:
Gambar menu pilihan pemecah frame
Split frame left : memecah frame dibagian kiri frame yang aktif menjadi 2
bagian
Split frame right : memecah frame dibagian kanan frame yang aktif
menjadi 2 bagian
Split frame up : memecah frame dibagian atas frame yang aktif menjadi 2
bagian
Split frame down : memecah frame dibagian bawah frame yang aktif
menjadi 2 bagian.
 Untuk mengatur frame cukup kliktahandrag border frame
ke arah tengah halaman.
 Untuk menghapus frame cukup kliktahandrag kearah luar
area desain.
 Untuk mengatur atribut frame dapat dilakukan di panel
properties di bawah desain.
Dari tampilan diatas coba ubah menjadi bentuk seperti dibawah ini:
Gambar tampilan frame setelah dipecah dengan splitter
Jika penyettingan layout dengan frame selesai kita lakukan, maka
simpanlah. Namun ada tatacara tersendiri dalam menyimpan frame.
Pertama simpanlah semua frame terlebih dahulu.
 Pilih blocking terluas dari panel frames seperti berikut ini:
Gambar panel frames
 Klik file  save all  beri nama frame tersebut.

 Kemudian pilih masing – masing frame (topframe, leftframe,
mainframe dan rightframe) dan simpan seluruhnya satu persatu. Misal
masing-masing adalah : fratas.html, frkiri.html, frkanan.html dan
frutama.html.
 Cobalah untuk mengisi masing-masing pecahan frame dengan data
berupa teks, gambar, hyperlink atau apapun yang akan membuat web
ini semakin menarik hingga menyerupai tampilan seperti dibawah ini:
 Tata cara pemasukan gambar dan teks ataupun hyperlink tidak

berbeda, hanya letakkan pada frame yang terpisah-pisah. Selanjutnya
kita kan belajar membuat layout web dengan tag div.
PERTEMUAN KE-X
MEMBUAT LAYOUT WEB DENGAN AP DIV
Berbeda dengan tabel ataupun frame, AP DIV merupakan sebuah objek yang
transparan. AP DIV dapat diatur sesuai dengan keinginan kita dan tidak membuat
kesan kaku dalam mendesain web. Berikut ini cara menggunakan ap div :
A. Menggambar AP DIV
Untuk mulai menggambar AP DIV lakukan ;
 Klik panel Insert  draw AP Div. Arahkan pada halaman kosong, klik
dan drag sesuai keinginan.
Gambar Penggunaan draw AP DIV
 Atau klik menu insert  layout objectAp Div. Tampilan akan segera
muncul. Anda tinggal menyesuaikan luas dan lebarnya saja.
Lakukan hingga membentuk tampilan seperti berikut ini;
Gambar layout dengan AP DIV

 Untuk mengatur warna serta atribut lainnya pilih panel CSS Style 
pilih ALL. Maka akan anda lihat sejumlah AP DIV yang sudah kita
buat. Double klik pada salah satu maka akan tampil dialog CSS rule
definistion untuk AP DIV seperti berikut :
Untuk pengisianya anda sudah paham bukan.

B. Properti AP DIV
Untuk mengatur tampilan AP DIV dapat kita gunakan atribut dalam
property inspector seperti di bawah ini:
Gambar Property AP DIV
Berikut ini adalah penjelasannya :
 CSS-P Element  untuk memberi nama pada ap div.

 L  untuk mengatur posisi Ap DIV terhadap sisi sebelah kiri halaman
dari AP DIV induknya.
 T  untuk mengatur posisi Ap DIV terhadap sisi sebelah atas halaman
dari AP DIV induknya.
 W  mengatur lebar AP DIV
 H  mengatur tinggi AP DIV
 Z-Index  memberikan urutan AP DIV
 Vis  visible untuk mengatur visibilitas AP DIV
 OverFlow  mengatur jika nanti isi AP DIV malampaui ukuran yang
di tentukan.
 Clip  untuk memotong AP DIV. Dengan manentukan nilainya pada
L, R, B, T.
C. Mengatur Perataan AP DIV

Seringkali dengan mengira-ira, hasil tampilan jadi bergelombang alias
tidak rata. Perataan juga bisa dilakukan pada AP DIV. Berikut adalah
langkah-langkahnya:
 Pilih beberapa AP DIV
 Pilih menu Modifyarrange, lalu pilih salah satu submenu berikut
ini ;
Left  Perataan berdasarkan batas kiri AP DIV yang terpilih
Right Perataan berdasarkan batas kanan AP DIV yang terpilih
Top  Perataan berdasarkan batas atas AP DIV yang terpilih
Bottom  Perataan berdasarkan batas bawah AP DIV yang terpilih
D. Menghindari Overlapping
Overlapping terjadi jika kita bekerja dengan AP DIV yang terlalu banyak.
Bisa jadi terjadi penunpukan sebagian atau seluruhnya. Untuk
menghindarinya, perhatikan kotak pilihan Prevent Overlaps pada AP
element. Aktifkan checkbox tersebut untuk mengantisipasi adanya
overlapping.
Gambar Pilihan Prevent Overlaps
E. Sekarang cobalah buat tampilan web, kurang lebihnya seperti berikut ini :
Gambar Tampilan web dengan AP DIV

BAB XI
BEKERJA DENGAN IMAGE
Dalam membuat web, gambar hampir bisa dipastikan terdapat didalamnya.

Pada bab terdahulu kita sudah mengetahui bagaimana cara menampilkan gambar.
Sekarang mari kita bekerja dengannya lebih lanjut.
A. Property Image
Saat gambar telah berada di halaman web akan tampil property image sebagai
berikut ini :
Gambar property image
Berikut ini adalah keterangannya :

 ID  digunakan untuk memberi nama objek gambar Ini akan
berguna saat bekerja dengan programming
 W dan H  mengatur lebar dan tinggi gambar.
 Src  untuk menampilkan lokasi penyimpanan file gambar yang
akan ditambahkan ke halaman.
 Link  digunakan untuk mengisi link gambar. Klik ikon browse
dan pilih file tujuan atau klik tahan point to file ke file tujuan yang ada di
panel files.
 Align  mengatur perataan gambar dan teks dalam satu baris.
 Alt  menampilkan teks alternatif.
 Class  menentukan nama class yang akan digunakan memformat
gambar.
 Map Name  memberi nama area hotspot.
 Vspace dan Hspace  mengatur ruang kosong / jarak spasi
gambar.
 Hotspot Tools  digunakan untuk membuat area hotspot.
 Target  digunakan untuk memilih frame atau dokumen yang
harus ditampilkan.
 Border  untuk membingkai gambar
 Edit  untuk mengedit gambar sekaligus mambuka editor gambar.
 Edit Image Setting untuk mengubah aturan gambar seperti :
ukuran, jumlah warna, tipe gambar dan sebagainya.
 Crop  memotong gambar
 Resample  untuk memampilkan hasil perubahan
 Brightness and Contrast  mengatur pencahayaan dan kontras
 Reset Size untuk mengembalikan gambar ke ukuran semula.
B. Mengubah Setting Image

Kali ini kita tidak akan membahas semuanya. Karena sebagian sudah dikenali dan
dipahami. Yang akan kita bahas adalah mengubah setting gambar. Caranya klik
modify  image optimized atau klik ikon edit image setting. Maka muncul
kotak dialog image preview seperti berikut ini:
Gambar dialog Image Preview
Silakan lakukan perubahan, misal jadikan formatnya menjadi GIF, palletnya

menjadi websnap adaptive, transparan dsb, dan amati apa yang terjadi. Kita juga
bisa mengubah atau menambah warna atau menghapus warna pada gambar.
Caranya klik kanan dan pilih salah satu menu yang diinginkan. Amati apa yang
terjadi pada gambar.
Gambar Pilihan perubahan warna
C. Mengatur Ketajaman Gambar

Untuk mengatur ketajaman gambar klik modify  image  sharpen. Lalu akan
muncul dialog konfirmasi yang menyatakan bahwa perubahan bersifat permanen.
Klik OK.
Gambar dialog konfirmasi perubahan pada gambar
Kemudian akan tampil dialog untuk menyatakan besarlannya sharpen.
Aturlah besarannya kemudian klik OK. Amati apa yang terjadi pada gambar kita.
D. Mengatur Brightness dan Contrast

Pada dreamweaver cs4 dapat juga digunakan untuk mengatur gelap terang sebuah
gambar. Caranya :
 Pilih gambar yang akan diperbaiki
 Klik modifyimageBrightness/Contrast. Kemudian muncul
dialog konfirmasi perubahan gambar yang permanen seperti sebelumnya.
 Tekan OK pada ialog tersebut. Kemudian akan tampil dialog
Brightness/Contrass seperti dibawah ini:
Gambar dialog Brightness/Contrast
Klik OK. Amati apa yang terjadi pada gambar kita.
E. Mengedit Gambar dengan PhotoShop atau Fireworks

Fasilitas kemudahan lainnya adalah edit program bisa langsung menuju ke Adobe
PhotoShop. Caranya :
 Seleksi gambar yang akan diedit.
 Klik modifyimage edit withPhotoShop. Atau klik ikon
PhotoShop pada panel propeetis. Maka gambar yang dipilih otomatis akan
terbuka di photoshop.
Gambar pengeditan gambar terbuka di photoshop
 Lakukan pengeditkan yang diperlukan lalu simpan.
Gambar pengeditan dilakukan di PhotoShop

 Saat kita kembali ke dokumen di dreamweaver maka perubahan
yang anda lakukan otomatis tereload ke dreamweaver.
Gambar hasil edit otomatis tereload
F. Image Link
Selain teks, gambar juga bisa dibuat sebagai hyperlink. Ada banyak cara untuk
menjadikan gambar menjadi hyperlink. Berikut ini diantaranya :
1. Dengan mangedit bagian coding
Langkah-langkahnya :
 Klik dan drag ikon hyperlink pada panel insertcommon.
Kosongkan bagian teks. Maka otomatis teks akan terisi dengan nama file
tujuan. Split jendela dokumen seleksi pada hyperlink. Ubah bagian teks
menjadi tag img src
 Browse dan pilih gambar kemudian klik OK.
2. Menggunakan Fasilitas Make Link
Langkah-langkahnya :
 Aktifkan gambar yang akan digunakan sebagai hyperlink.
 Klik modifymake link.
 Pastikan file yang akan digunakan sebagai tujuan link ketika anda
mengklik gambar. Pastikan lokasi mereka berdua pada site yang sama.
 Klik OK setelah file tujuan link terpilih.
G. Image Map
Dalam dreamweaver juga dapat membuat mapping pada sebuah gambar.
Langkah-langkahnya adalah :
 Buat 2 frame beri nama frame kiri dan frame kanan. Letakkan
sebuah gambar di sebelah kiri.
 Pilih dan aktifkan gambar yang akan diproses mapping.
 Pada propertis pilih salah satu tools image map. Perhatikan
gambar berikut ini:
Gambar hasil seleksi dengan image map circle
 Setelah area hotspot terseleksi akan tampil property hotspot seperti

berikut ini:
Gambar property hotspot
Isikan link dengan dokumen tujuan. Dan target dengan frame kanan.
Sebelumnya beri nama terlebih dahulu masing-masing frame. Bisa kita
lakukan di coding.
 Selanjutnya lengkapi dokumen html yang dibutuhkan yaitu :
bulat.html, kotak.html dan kupu.html
 Berikut ini hasil yang kita dapatkan : saat pertama tampil
Gambar tampilan image map dengan frame
Berikut ini tampilan saat memilih area bulat :
Gambar tampilan image map saat memilih area bulat

Berikut ini tampilan saat memilih area kotak :
Gambar tampilan image map saat memilih area kotak
Berikut ini tampilam saat memilih area polygon :
Gambar tampilan image map saat memilih area polygon

H. Menggunakan Rollover
Rollover image digunakan untuk mengganti tampilan awal gambar dengan
tampilan gambar lain ketika pointer diarahkan pada gambar awal. Jadi sebenarnya
ada 2 gambar yang ditayangkan saat kursor diluar area atau di dalam area.
Untuk melakukannya siapkan 2 buah gambar dan ikuti langkah-langkah
berikut ini:
 Aktifkan area yang ingin diberi gambar rollover
 Klik drop-down tombol image pada panel insert kategori common dan
pilih rollover image, seperti gambar berikut ini:
Gambar pilihan rollover image pada panel insertimage
 Akan tampil dialog masukan gambar dan url seperti berikut ini:
Gambar dialog insert rollover image
Isikan pada bagian original image sebagai tampilan awal dan rollover
image sebagai gambar penggantinya. Lalu isikan url atau dokumen
tujuan saat gambar di klik.
 Maka seperti berikut tampilan yang kita dapatkan. Pertama tampilan

saat loading pertama kali :
Gambar rollover image pertama tampil
Kemudian saat kursor berada di dalam area rollover image,

tampilannya seperti berikut ini:
Gambar rollover image saat kursor berada di area rollover image.

BAB XII
MEMBANGUN FORM
Dalam sebuah website minimal kita akan menemukan halaman kritik saran
atau bukutamu. Bisa dikatakan inilah cara berkomunikasi antara admin dan user.
Untuk membangunnya digunakan form atau borang. Pertama yang kita bangun adalah
form itu sendiri kemudian kita masukkan objek-objek form. Jika objek-objek form
diletakkan diluar form maka objek-objek tersebut tidak dapat diproses. Berikut ini
cara membangun form dengan adobe dreamweaver CS4:
1. Buat halaman html baru dan tempatkan kursor diarea
yang akan disisipi form.
2. Pilih menu insert  form  form pada menu bar atau
klik ikon form pada panel insert  form seperti berikut ini:
Gambar pilihan menu form

3. Pada jendela design akan tampil garis merah putus-
putus. Di dalam garis itulah kita akan menyisipkan objek form. Jika belum tampil
maka pilih menu viewvisual aidsinvisible element.
4. Berikut ini tampil properti dari form :
Gambar properti form
 Form ID  untuk memberi nama form. Berguna saat

kita bekerja dengan javascript, vbscript atau akses database.
 Action  menentukan halaman yang akan memproses
data
 Method  menentukan metode pengiriman data
 Target opsional. Untuk menampilkan data oleh
program yang sedang berjalan.
Selanjutnya adalah menyisipkan objek-objek form ke dalam form. Berikut ini

caranya:
Pertama-tama buatlah tabel didalam form sebanyak 3x3. kemudian baris
pertama gabungkan ketiga kolomnya. Dan beri header.
Pada baris kedua kolom pertama ketikkan “Nama Pengunjung” dan kolom
kedua ketikkan “ : “. Kemudian pada kolom ketiga letakkan sebuah text field seperti
berikut ini :
1. Menyisipkan Text field
 Untuk menyisipkan teks field klik insert form  text field. Atau klik
pada panel insert  form, ikon text field. Maka akan keluar dialog input
tag accessibility attributes. Seperti gambar berikut ini :
Gambar dialog input tag accessibility attributes
 Cukup isikan ID nya kemudian klik OK. Perlu diperhatikan penamaan

setiap objek harus berbeda satu sama lain. Maka akan muncul sebuah text
field dengan properti seperti berikut ini:
Gambar properti text field

Isikan lebar karakter yang ditampilkan dan karakter maksimal yang dapat
ditampung. Pilih single line. Jika multi line maka jumlah row dari text
field akan bertambah.
2. Menyisipkan Checkbox/ checkbox group

Untuk menyisipkan checkbox atau checkbox group sama saja. Bedanya
checkbox group langsung sebanyak yang diinginkan dengan pengaturan
bersamaan. Checkbox biasa perlu pengaturan masing-masing. Untuk jumlah
yang banyak tentu merepotkan. Cara menyisipkannya :
 Klik insert  form  checkbox group atau klik ikon checkbox group
pada panel insert  form. Maka akan tampil dialog seperti berikut ini ;
Gambar dialog checkbox group
 Pada bagian label dan value isikan nilai yang akan ditampilkan dan
nilai yang akan dikirimkan ke database.
 Untuk menambah jumlah checkbox klik tanda + dan untuk delete pilih
item klik tanda -.
 Jika layout line break maka penempatan dipisahkan dengan <br>. Jika
memilih tabel maka akan ditempatkan dalam sebuah tabel.
3. Menyisipkan Radio button / Radio Group
Untuk menyisipkan radio button baik yang biasa maupun yang group
pengaturannya sama persis dengan checkbox. Caranya ;
 Klik insert  form  radio group atau klik ikon radio group pada
panel insert  form. Maka akan tampil dialog seperti berikut ini :
Gambar dialog radio group
 Pada bagian label dan value isikan nilai yang akan ditampilkan dan
nilai yang akan dikirimkan ke database.
 Untuk menambah jumlah checkbox klik tanda + dan untuk delete pilih
item klik tanda -.
 Jika layout line break maka penempatan dipisahkan dengan <br>. Jika
memilih tabel maka akan ditempatkan dalam sebuah tabel.
4. Menyisipkan List/menu
Jika kita mengenal tag <select> maka pada adobe dreamweaver CS4 kita akan
mengenal fasilitas untuk membuat list atau menu. Caranya :
 Klik insert  Form  list/menu atau klik ikon list/ menu pada panel
insert form. Akan tampil dialog tag accessibility attributes. Isi
seperlunya. Klik OK. Maka akan tampil sebuah dropdown. Dan berikut ini
propertinya:
Gambar properti list/menu

Pada type jika kita memilih menu maka pilihan akan ditampilkan dalam
bentuk menu dropdown. Tetapi jika kita memilih list maka kita diminta
mengisikan tingginya. Maka pilihan akan ditampilkan sebanyak tinggi
selebihnya akan digulung dengan scroll.
 Klik bagian list values. Akan tampil dialog list/menu seperti berikut
ini:
Gambar dialog list/menu
 Pada item label dan value isikan data pilihan yang akan ditampilkan
dan yang akan dikirimkan.
 Untuk menambah klik + dan untuk menghapus klik -.
 Jika sudah klik OK. Berikut ini adalah perbedaan tampilan list dan
menu:
Dengan List Dengan Menu
Gambar perbedaan tampilan list dan menu
5. Menyisipkan Textarea
Untuk menyisipkan textarea sebenarnya samasaja dengan menyisipkan
textfiels dengan multi line. Namun tetap diberikan fasilitas tersendiri.
Caranya:
 Klik insert  form textarea atau klik ikon textarea pada panel insert
 form.
 Akan tampil dialog tag accessibility attributes. Isikan seperlunya klik
OK. Maka akan tampil sebuah textarea dan berikut propertinya:
Gambar properti textarea
Dapat kita lihat bahwa pada dasarnya textarea adalah text field dengan
multi line.
6. Menyisipkan file field

Adakalanya kita akan diminta memasukkan foto pribadi atau kita akan upload
file maka disediakan fasilitas file field. File field digunakan untuk mencari
file. Caranya adalah:
 Klik insert  form  file field atau klik ikon file field pada panel
insert  form. Maka akan tampil dialog tag accessibility attributes. Isikan
seperlunya, klik OK. Maka akan tampil sebuah textfield dan sebuah button
browse.
 Pada bagian propertinya berikut ini:
Gambar tampilan file field dan propertinya
 Isikan filefield name-nya. Kemudian lebar karakter yang ditampilkan

dan karakter maksimal yang dapat ditampung.
7. Menyisipkan Button
Untuk menyisipkan tombol caranya ;
 Klik insert  form  button atau klik ikon button pada penel
insertform. Maka akan tampil dialog tag accessibility attributes. Isikan
seperlunya dan klik OK. Maka akan tampil sebuah button submit dan
propertinya.
Gambar tampilan button dan propertinya

 Pada bagian button name isikan namanya misal tblsubmit.
 Pada bagian value isikan nilai yang akan ditampilkan di button.
 Pada bagian action. Jika pilih Submit maka tombol menjadi tombol
pengirim. Jika reset maka tombol menjadi tombol pengosong form. Jika
none maka biasanya akan diisi prosedur lain. Misal validasi data atau
lainnya.
8. Buatlah dengan fasilitas form yang telah kita bahas tampilan seperti berikut
ini:
Selamat Mencoba
PERTEMUAN KE XIII
BEKERJA DENGAN OBJEK SPRY
Spry framework adalah sebuah library javascript yang akan memberikan

peningkaatan kemampuan dalam mendesain web. Dalam penggunaannya Spry dapat
digunakan untuk memudahkan validasi akses ke XML dsb. Sekarang mari kita coba
gunakan spry untuk validasi data dari form yang sebelumnya telah kita pelajari.
A. FORM VALIDASI DATA
Untuk membuat validasi data dengan spry maka pertama buatlah dokumen kosong
baru. Simpan. Kemudian lakukan langkah-langkah berikut ini:
 Klik insert  form  form atau klik ikon form pada panel insert form.
 Buatlah sebuah tabel 3x3. merge pada baris pertama ketiga kolomnya dan
ketikkan judulnya.
 Pada kolom pertama baris kedua ketikkan “Nama Mahasiswa” pada kolom
kedua ketikkan “:” .
 Berikutnya pada kolom ketiga akan kita letakkan objek form yang akan
ditambahkan validasi dengan spry. Hanya sebelum menambahkan objek spry
maka dokumen harus disimpan terlebih dahulu.
1. VALIDASI TEXTFIELD
Untuk validasi data text:
 Klik menu insert form  spry validation textfield. Maka akan
tampil dialog tag accessibility attributes. Isi seperlunya dan OK. Maka
akan tampil sebuah textfield dan spry validation seperti berikut ini:
Gambar pilihan submenu spry validation
Gambar tampilan spry validation dan propertinya

 Pada bagian type ubahlah menjadi sesuai dengan masukan datanya.
Terdapat bermacam masukan data yang dapat ditangani oleh textfield
seperti gambar berikut ini:
Gambar type spry validation textfield

Setiap pilihan type akan membawa atribut yang berbeda-beda sesuai
kebutuhan.
 Pastikan spry objek aktif isikan properti untuk pengisian nama adalah
type custom dan preview states required. Ini akan membuat sistem
meminta inputan, jika dikosongkan maka message akan muncul. Pada teks
A Value Is Required disebelah text field gantilah dengan teks “Nama harus
diisi” seperti gambar dibawah ini:
Gambar tampilan spry validation text field
 Kemudian simpan kembali. Cobalah untuk mencoba type lainnya

seperti date atau e-mail.
2. VALIDASI CHECKBOX
Untuk membuat validasi data untuk checkbox lakukan langkah-langkah
berikuti ini:
 Pastikan form aktif.
 Pada tabel yang sebelumnya kita buat, klik baris ketiga kolom ketiga.
Klik insertformspry vatidation checkbox. Atau klik ikon spry
validaton checkbox pada panel insert spry. Akan tampil dialog tag
accessibility attributes seperti berikut ini:
Gambar dialog tag accessibility attributes untuk spry checkbox
 Isikan ID-nya dengan jurusan dan label teknik informatika. Klik OK.
Maka akan tampil sebuah spry checkbox seperti berikut ini:
 Untuk membuat pilihan selanjutnya dapat digunakan checkbox biasa

caranya, letakkan kursor disebelah paling kanan text kemudian klik
insertformcheckbox atau klik ikon checkbox pada panel insertform.
Isikan ID-nya jurusan tetapi labelnya berbeda.
 Ulangi langkah diatas hingga membentuk tampilan seperti dibawah ini:
Gambar tampilan dan properti spry validation checkbox
 Aktifkan spry objeknya pada bagian properti pilih enforce

range(multiple) dan min # of selections 2. Pada preview states pilih min
no. Of selection not met. Pada pesan kesalahan ganti menjadi : pilih hanya
satu jurusan saja.
 Simpan hasil pekerjaan kita.
3. VALIDASI RADIO GROUP

Untuk membuat validasi radio group, lakukan langkah-langkah berikut ini:
 Pada baris selanjutnya ditabel kita, sisipkan sebuah spry validation
radio group. Klik insertformspry validation radio group. Atau klik
ikon spry validation radio group.
 Akan tampil dialog spry validation radio group seperti dibawah ini.
Isikan values berupa pria dan wanita kemudian klik OK.
Gambar dialog spry validation radio group
 Akan tampil sebuah objek spry dengan 2 buah radio button. Pada
bagian properti pilih required dan preview states juga required.
4. VALIDASI SELECT
Untuk membuat validasi untuk select lakukan langkah-langkah seperti berikut
ini:
 Pastikan form aktif. Pada tabel berikutnya sisipkan sebuah objek spry.
Klik insertformspry validation select atau klik ikon spry validation
select pada panel insert.
 Akan tampil sebuah tag accessibility attributes. Isikan ID-nya matkul
(mata kuliah) lalu klik OK. Seperti berikut ini;
Gambar dialog tag accessibility attributes untuk validasi select
 Akan tampil sebuah spry objek dan menu yang masih kosong. Pada
bagian values isikan data berupa mata kuliah seperti berikut ini:
Gambar pengisian value untuk validasi list/menu
 Aktifkan spry objeknya. Pada bagian properti centang pilihan do not

allow blank value dan bagian preview statesnya menjadi required. Ganti
messagenya menjadi : tolong pilih salah satu mata kuliah. Seperti gambar
berikut ini:
Gambar tampilan spry validation select dan propertinya

5. VALIDASI TEXTAREA
Untuk membuat validasi untuk textarea sama saja dengan textfield. Caranya ;
 Aktifkan form, pada tabel baris berikutnya sisipkan sebuah spry
validation textarea, dengan cara klik insertform spry validation
textarea atau klik ikon spry validation textarea pada panel insert.
 Akan tampil sebuah dialog tag accessibility attributes seperti berikut
ini:
 Ketikkan ID-nya krisan (kritik saran), klik Ok. Maka akan tampil
sebuah spry validation textarea seperti berikut ini:
Gambar tampilan spry validation textarea dan propertinya

 Pada bagian properti centang required dan isikan min chars 15. pada
preview stayes ganti menjadi min. #of Chars Not Met. Artinya kita
perlu menginputkan minmal 15 karakter agar dianggap benar.
Setelah mengikuti langkah-langkah diatas hasil yang kita dapatkan adalah seperti
berikut ini:
Gambar tampilah spry validation objek
Jika kita menginputkan data dengan tepat dan benar seperti pada nama dan mata
kuliah pilihan, maka pesan kesalahan tidak akan tampil. Jika kita tidak memilih atau
menginputkan data salah maka pesan kesalahan akan tampil. Seperti pada tanggal,
jurusan, tempat lahir dan kritik saran.
B. SPRY MENU BAR

Spry menu bar biasa juga disebut menunya web. Kita dapat membuat tampilan
web seperti program aplikasi yang telah lama kita kenal yaitu memiliki menu dan
sub menu spry menu bar bisa berbentuk vertikal atau horizontal. Untuk
membuatnya ikuti langkah-langkah berikut ini:
1. Buat dokumen HTML baru.
2. Tambahkan tabel. Pada kotak dialog tabel atur menjadi
seperti dibawah ini:
Gambar pengaturan tabel untuk menubar
3. Kemudian klik OK. Pada baris pertama tambahkan teks,

gambar sebagai judul web.
4. Simpan hasil pekerjaan kita dengan Save As. Karena
untuk menggunakan spry dokumen harus tersimpan terlebih dahulu.
5. Aktifkan baris kedua. Sisipkan spry menu bar dengan cara
klik insertspryspry menu bar. Atau klik ikon spry menu bar pada panel
insert spry.
6. Akan muncul kotak dialog spry menu bar. Ada 2 pilihan.
Misal pilih horizontal lalu klik OK.
Gambar dialog spry menu bar

7. Akan tampil spry menu bar dan propertinya seperti
berikut ini:
Gambar tampilan spry menu bar dan propertinya
8. Tampilan menu bar masih dalam bentuk item-item.

Gantilah dengan nama yang sesuai kebutuhan pada properti bagian text dan
kita juga bisa menambah dan menghapus dengan klik tanda + atau -.
9. Untuk item 1.1 dan seterusnya artinya submenu. Jika ada
silakan ditambahkan.
10. Selain item, yang perlu diisikan adalah bagian link. Yang
akan menghubungkan kemana arah dokumen saat di klik. Perhatikan gambar
berikut :
Gambar pengisian menu bar
11. Jika menu yang dibuat tidak memiliki submenu hapus

submenu dengan cara klik tanda -. Berikut hasil yang akan kita dapatkan :
12. Simpan hasil pekerjaan kita.
C. SPRY ACCORDION
Spry Accordion digunakan untuk membuat content. Pada dasarnya kita tidak
perlu menggunakan semua objek dalam membuat web. Cukup seperlunya. Namun
jika dibutuhkan mengapa tidak. Berikut langkah-langkah menggunakan spry
according.
1. Aktifkan halaman menubar yang baru saja kita buat.
2. Aktifkan baris ketiga. Sisipkan objek spry
accordion, dengan cara klik insertspry spry accordion atau klik ikon spry
accordion pada panel insertspry.
3. Akan tampil sebuah spry accordion yang berisi
sebuah label dan content beserta propertinya.
Gambar tampilan spry accordion

4. Ganti teks label 1 dengan Introduce My Self. Dan
hapus content 1, ganti dengan teks yang menjelaskan tentang labelnya. Misal
menjadi seperti berikut ini :
Gambar tampilan spry accordion yang sudah diisi
5. Jika ingin menambah hapus isi label 2 dan ganti
juga content 2 dengan teks yang sesuai. Jika tidak bisa dihapus saja.
6. Simpan hasil pekerjaan kita. Dan berikut hasil yang
kita dapatkan di browser:
Gambar tampilan spry accordion saat memilih label 1
Gambar tampilan spry accordion saat memilih label 2
D. SPRY TABBED PANEL

Spry tabbed panel mungkin sebenarnya sudah familier di kalangan pengguna
internet. Berikut ini cara membuatnya:
1. Pada dokumen menubar yang kita buat. Aktifkan baris ke
4.
2. Sisipkan sebuah spry tabbed panel dengan cara klik
insertspryspry tabbed panel atau klik ikon spry tabbed panel. Akan tampil
sebuah tabbed panel dan propertinya seperti berikut ini:
Gambar tampilan tabbed panel dan propertinya
3. Ganti teks tab 1 menjadi Intoduce My self dan tab 2

menjadi More About Me.
4. Ganti teks pada masing-masing content yang sesuai

dengan judulnya.
5. Jika ingin menambah klik tanda + dan jika ingin
menghapus klik tanda -.
6. Jika sudah simpan hasil pekerjaan kita. Berikut hasil yang
kita dapatkan.
Gambar tampilan spry tabbed panel saat di browser.

PERTEMUAN KE XIV
UPLOAD WEB
Membuat website adalah suatu hal yang sudah biasa di masa sekarang ini.
Setelah kita membuat website, supaya bisa diakses dari internet, maka kita harus
mempublishnya/meletakkan di server Hosting. Atau istilahnya kita meminjam
tempat /space pada hardisk yang berada di computer server milik penyedia layanan
Web Hosting. Sudah banyak sekali tempat yang menyediakan layanan ini.
Web hosting ada yang berbayar (istilahnya sewa tempat/ hosting) maupun
yang gratis. Hosting yang berbayar contohnya : Rumah Web, IDWebHost. Dan
contoh hosting yang gratis salah satunya adalah http://www.100webspace.com.
Tutorial kali ini kita akan membahas langkah-langkah untuk meletakkan file-
file web kita di tempat yang gratis, tempat yang dibahas kali ini adalah di
http://www.100webspace.com. 1
1. masuklah ke situs http://www.100webspace.com.
1
Materi Upload web diambil dari diktat web milik Sdri. Asih Winantu S.Kom
2. Setelah masuk, kita daftar dulu. Jika ingin yang gratis tentunya
pilih yang Free Hosting. Klik
Sign Up Now.
Selanjutnya kita harus mengisi formulir yang dah disediakan, dengan benar.
3. Kemudian klik order

4. kemudian, account kita akan dikirimkan ke email kita.
Biasanya server akan memerlukan waktu beberapa menit atau mungkin dalam
hitungan jam, untuk memproses pendaftaran kita.
5. cek email anda, jika server sudah merespon pendaftaran
kita, maka emailpun akan sudah dikirimkan ke kita, dengan tampilan seperti
berikut ini.
6. kemudian lakukan login menggunakan username dan

password yang sudah dikirim ke alamat kita.
7. Ini dia tampilan dari Control Panel milik 100 Web Space.
Dengan Control Panel ini kita bisa memanage hosting kita,misalkan kita mau upload
filenya. Atau bisa juga untuk mengatur FTP, domain, database, yang jelas macem2 lah.
8. Untuk mulai mengupload file yang udah kita buat ke hosting,

kita pilih File Manager. Setelah itu masuk ke folder www
9. Setelah itu masuk lagi ke folder dibawahnya
10. Masukkan file-file yang mau kita upload dengan cara klik tombol
browse. Setelah itu cari dimana filenya berada. Payahnya di sini kita harus memasukkan
filenya satu per satu. Untuk mulai mengupload, selanjutnya klik aja tombol Upload File.
Jika ingin file yang diupload bersamaan lebih banyak lagi, kita bisa klik pada More Files.
11. Kalau upload file udah selesai, maka kita bisa melihat
hasilnya di browser, ketikkan alamatnya di address bar. Dan sekarang website
anda siap di nikmati.

Modulwebstatis

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modulwebstatis

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL BELAJAR

STMIK EL RAHMA YOGYAKARTA

Pertemuan Pertama : SEKILAS TENTANG WEB

Sekilas Tentang Web

Web statis : dibentuk dengan menggunakan HTML, meskipun terkadang disisipkan

BERKENALAN DENGAN WEB STATIS

 Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang

o Tag <BR> untuk ganti baris atau meletakkan teks

o Tag <P> atau tag paragraf. Sama saja dengan kita

o Tag Header digunakan untuk mengatur ukuran teks yang

o Tag <HR> untuk membuat garis horizontal. Tag ini dapat

Ketikan contoh program berikut ini :

Simpanlah dengan nama pertama.html. Ekstensi html akan menunjukkan bahwa

 Mengatur Text Secara Fisik dan Logis

Html juga menyediakan fasilitas untuk mengatur keindahan text baik

 Mengatur Preformat dan Penggunaan Singkatan

Tag preformat <PRE></PRE> adalah tag yang mengatur tampilan yang

Big sale! Action Figure Doll :

Uchiha Sasuke .................20.000,-

Hatake Kakashi ................55.000,-

Haruno Sakura .................20.000,-

Nara Shikamaru ................25.000,-

Hyuga Neji ....................30.000,-

Sabaku Gaara ..................25.000,-

and Many more.

Tanpa menggunakan perform bisa jadi tampilan akan berantakan.

Simpan dan kemudian jalankan di browser. Sangat jelas bukan fungsinya.

 Mengatur Font serta Sisipan Panjang

A. Gambar sebagai background

Kita dapat menampilkan gambar sebagai background. Namun pilihlah

<BODY background ="Gambar/corak.jpg">

 Align (Top, Middle, Bottom, Right, Left)

 Border untuk membingkai gambar

 Width untuk mengatur lebar gambar

 Vspace untuk memberi ruang vertikal antara teks dan bambar

 Hspace untuk memberi ruang horizontal antara teks dan gambar

Berikut ini adalah contoh penggunaan tag serta atribut-atribut diatas :

Untuk dapat menampilkan animasi cukup dengan memakai file yang

Perlu diketahui bahwa tidak semua browser mendukung multimedia.

Dokumen diatas digunakan untuk memainkan suara. Kita

Dalam sebuah halaman web, tabel biasa digunakan. Awalnya hanya

Dalam sebuah tabel masing-masing tag dapat membawa atribut antara

Untuk dapat lebih mengerti silakan mengetikkan dua dokumen

Simpan dan jalankan dokumen diatas. Kemudian bandingkan dengan

Simpan dokuman diatas dengan nama index.html

c. Tab Index pada hyperlink

Simpan dokuman diatas dengan nama tabindex.html.

d. Membuka Jendela lain

e. Link dengan Gambar

<TD colspan="2" bgcolor="#66FFCC">

Perintah diatas adalah penggalan dari dokumen tabelgambar.html

f. Link ke Situs Lain

Untuk mampercantik dan membuat penikmat situs tertarik menjelajahi

Simpan dengan nama peta.html. kemudian buatlah informasi dari masing

<FRAMESET ROWS="," COLS=",">

simpan dengan nama frame.html. Untuk mengisinya gunakan peta.html yang

<AREA SHAPE="poly" ALT="" COORDS="161,101, 154,120, 174,128,

Untuk dokumen buat seperti dibawah berikut ini :

<META NAME="Description" CONTENT="Anime Naruto">

<META NAME="Keywords" CONTENT="Naruto, Shinobi, Konoha,

MENGGUNAKAN PIRANTI BANTU ADOBE DREAMWEAVER CS4

A. MEMBUKA ADOBE DREAMWEAVER CS4

Gambar welcome page