APLIKASI INTERNET MENGGUNAKAN

HTML, CSS & JAVA SCRIPT

Oleh:

Taryana Suryana
Koesheryatin

1
 SAMBUTAN REKTOR
UNIVERSITAS KOMPUTER INDONESIA

Assalamu’alaikum Wr.Wb.
Alhamdulillahirobbilalamin. Puja yang Sempurna dan Puji yang Hakiki kita
panjatkan ke Hadirat Allah SWT, karena atas izin dan rahmatNyalah buku
Aplikasi Internet Menggunakan HTML, CSS & JAVASCRIPT ini dapat
disusun dan diterbitkan.

Perkembangan teknologi informasi, perubahan struktur masyarakat, dan

maju pesatnya ilmu pengetahuan telah mengubah hal yang esensi dari
tugas pokok seorang dosen. Peran dosen di era serba digital ini lebih
menjadi motivator dan bukan sekedar orator di depan kelas, setiap dosen
diharapkan menjadi role model tidak hanya bagi pembentukan sistem
berpikir dan intelegensi mahasiswanya, tetapi juga bagi character building
para mahasiswanya. Karena peran itulah maka para dosen dituntut untuk
produktif, bersemangat tinggi, dan terus menerus
mengembangkan inisitiatif dan kompetensinya, salah satunya
adalah dengan berkarya menulis buku.

Orang bijak mengatakan “sebuah buku berbicara dengan seribu

bahasa”. Menulis buku dan menumpahkan kreativitas melalui sebuah
2
buku tidak hanya berbicara science (ilmu) tetapi berbicara tentang spirit
(semangat), idealism (idealisme), dan dedication (pengabdian) pada
dunia pendidikan serta tidak hanya meningkatkan nilai kumulatif dosen
yang bersangkutan, tetapi juga membawa makna yang lebih luas yakni
memberikan kontribusi yang sangar besar bagi ilmu pengetahuan
khususnya bagi para mahasiswa dan umumnya bagi pendidikan tinggi di
Indonesia serta masyarakat luas.

Saya memberikan Apresiasi yang setinggi-tingginya dan

mengucapkan Selamat kepada Saudara Taryana Suryana dan
Koesheryatin atas kesungguhan dan kerja kerasnya dalam
menulis dan menghasilkan buku Aplikasi Internet Menggunakan
HTML, CSS & JAVASCRIPT Semoga karya ini dapat memacu dan
menginspirasi para dosen lainnya di lingkungan UNIKOM khususnya dalam
menghasilkan karya-karya bermutu guna memberi sumbangsih bagi
perkembangan dan kemajuan Pendidikan Tinggi Indonesia serta
peningkatan kualitas sumber daya manusia Indonesia.

Sesuai kebijakan pimpinan UNIKOM, buku ini akan dijadikan buku

pegangan dan buku wajib bagi seluruh mahasiswa baru di
program studi terkait mulai tahun akademik 2014/2015. Buku ini
juga diharapkan dapat dijadikan sumber referensi bagi dosen dan
mahasiswa dari berbagai perguruan tinggi di tanah air serta bagi kalangan
professional dan masyarakat umum.

Akhirnya, marilah jadikan buku ini sebagai sebuah awal dari karya-karya
kita selanjutnya. ”Let’s make a history in our life, not just a story”
(Marilah kita buat sejarah dalam kehidupan kita, bukan hanya sepenggal

3
cerita) dan awal yang baik akan membawa kita pada hasil yang hebat
“Good Start will lead you to great end”.

Bandung, 20 April 2014

Rektor UNIKOM,

Dr. Ir. Eddy Soeryanto Soegoto

4
 Ucapan Terima Kasih

Alhamdulillah penulis panjatkan kehadirat Allah yang telah memberikan

hidup untuk penulis. Kiranya tidak berlebihan apabila pada kesempatan ini
penulis mengucapkan banyak terimakasih atas semua bantuan dari
Team yang telah membuat Buku ini lebih baik daripada yang dapat Saya
buat sendiri.

Ucapan terimakasih Saya sampaikan kepada Bapak Dr. Ir. Eddy

Soeryanto Soegoto. selaku Rektor UNIKOM yang telah memberikan
kesempatan dan saran kepada penulis untuk menyusun ulang Buku ini.

”Direktorat ICT & Multimedia” yang telah menyediakan fasilitas

Internet dan Jaringan komputer serta peralatan pendukung lainnya yang
diperlukan oleh penulis dalam mencari Informasi dan mengembangkan
bagian-bagian dari buku ini, sehingga akhirnya jadilah buku ini.

Untuk seluruh staff Karyawan, Dosen, Teman-teman, dan sahabat-

sahabat di UNIKOM, dan semua yang tidak dapat disebutkan namanya
satu persatu, atas pelaksanaan, koordinasi, tambahan, percetakan,
pabrikasi dan distribusi. Buku ini tidak akan Anda peroleh tanpa bantuan
mereka yang telah bekerja keras untuk menghasilkan Buku yang Lebih
Baik.

Teriring Salam,

Penulis

5
 Kata Pengantar

Internet dan World Wide Web secara cepat menjadi ajang utama
bisnis komputasi rumah. Sejumlah teknologi yang berhubungan denganya
telah menjadi bagian dari kehidupan sehari-hari kita, dan akan berlanjut
untuk mengubah cara kita hidup dan bekerja. Intranet, yang
menggunakan teknologi internet di dalam sebuah lembaga pendidikan
atau sebuah perusahan bisnis yang besar, merupakan sebuah gelombang
yang sedang menuju kesuatu sistem informasi yang sangat besar.

Pesatnya perkembangan Teknologi komputer saat ini tidak hanya

terjadi di bagian perangkat keras (Hardware) saja, tetapi juga diiringi
dengan perkembangan perangkat lunaknya (Software). Begitu banyak
perangkat lunak yang ditawarkan kepada para pengguna komputer.
Masing-masing produsen menjanjikan kelebihan dan keunggulan produk
perangkat lunaknya.

Keadaan ini sacara umum membawa keuntungan bagi pengguna

komputer, karena akan semakin tersedianya banyak pilihan. Lebih khusus
lagi maraknya perkembangan perangkat lunak ternyata juga membawa
angin segar bagi dunia komputer.

Selamat datang di Internet, Anda membaca buku ini berarti Anda

ingin mengetahui lebih dalam apakah Internet itu. Mungkin Anda selama
ini telah mendengar tentang adanya Internet namun belum jelas seperti
apakah Internet itu, manfaat apa yang diperoleh dan kemudahan apa saja
yang disediakan oleh Internet bagi Anda.

HTML merupakan standarisasi penulisan untuk pembuatan suatu

website, dan CSS merupakan pendamping HTML sebagai pengganti cara
memformat tampilan, sedangkan Java Script adalah salah satu Bahasa
Scripting yang dapat digunakan untuk melakukan proses lainnya yang
tidak dapat dilakukan oleh HTML dan CSS.

6
 Buku ini ditujukan untuk para mahasiswa dan kalangan lainnya
yang berminat dalam pengembangan Informasi Berbasis WWW (World
Wide Web).

Sistematika Pembahasan dalam buku ini lebih ditekankan pada

segi Praktikum, oleh karena itu, cara terbaik untuk memahami dan
menguasai pokok bahasan yang ada dalam buku ini adalah
mempraktekannya langsung pada Komputer.

Penulis mengucapkan terima kasih yang sebesar-besarnya kepada

pihak-pihak yang telah membantu dalam pembuatan buku ini, penulis
menyadari bahwa masih banyak kekurangan dan jauh dari
kesempurnaan, untuk itu penulis memohon maaf yang sebesar-besarnya
dan mengharapkan kritik dan saran yang sehat dan membangun agar
penulisan buku berikutnya akan lebih baik lagi. Semoga dengan
diterbitkannya buku pembelajaran Komputer Aplikasi IT dapat bermanfaat
bagi kita semua.

Bandung, April 2014

Penulis

7
 DAFTAR ISI

SAMBUTAN REKTOR
UCAPAN TERIMAKASIH
KATAPENGATAR

BAB 1 TEKNOLOGI INFORMASI

1.1 Pengertian Teknologi Informasi 1
1.2 Arsitektur Komputer 2
1.3 Jaringan Komputer 4

BAB 2 SEKILAS TENTANG INTERNET

2.1 Sejarah Internet 7
2.2 Mengetahui Proses Perjalanan Informasi 9
di
Internet
2.3 Alamat dan Domain Internet 10
2.4 Cara Kerja Koneksi Suatu Web ke 11
Internet
2.5 Jenis File yang ada di Internet 12
2.6 Cara Kerja Email 13
2.7 Cara Kerja World Wide Web 14
2.8 Cara Kerja Browser 16
2.9 Cara Kerja Markup Language /HTML 17

BAB 3 MENGENAL LOCAL AREA NETWORK

(LAN) DAN WIDE AREA NETWORK
(WAN)
3.1 Elemen-Elemen Perangkat Keras Jaringan 19
Lokal (LAN)
3.2 Perangkat Keras untuk Persyaratan 21
Jaringan Lokal (LAN)
3.3 Instalasi Perangkat Keras untuk Peer to 23
Peer
Network
3.4 Mengubah Setting Jaringan 24
3.5 Teknologi Wide Area Network (WAN) 25
8
 3.6 Perangkat Lunak Diagram WAN 26

BAB 4 HYPERTEXT MARKUP LANGUAGE

4.1 Dasar-dasar HTML L 30
4.2.Tampilan Dokumen HTML Sederhana 31
4.3 Menambahkan Isi pada bagian Body 33
4.4 Elemen Teks 34
4.4.1 Elemen Paragraph 35
4.4.2 Blockquote 37
4.4.3 Divider 38
4.5 Memberi Warna huruf di halaman Web 38
4.6 Mengganti Latar Belakang Halaman 41
4.7 Menciptakan Efek Karakter Fisik dalam 43
Tampilan
4.8 Menambahkan Efek Karakter Logika 46
4.8.1 Menggunakan Heading 46
4.8.2 Penekanan terhadap Karakter, Huruf 47
atau
Kalimat Tertentu
4.8.3 Menenpatkan kutipan 48
4.9 Tag Table, Elemen, dan Atribut 49
4.9.1 Table Border 50
4.9.2 CellSpacing 50
4.9.3 CellPading 51
4.9.4 Width 52
4.9.5 Align 53
4.9.6 Table Row 54
4.9.7 Table Header 55
4.9.8 Rowspan, Colspan, Align, Valign 56
4.10 Membuat Daftar (List) 59
4.10.1 UL 59
4.10.2 OL 60
4.10.3 DD, DL dan DT 62
4.10.4 Nested List 63
4.11 Menggunakan Perintah Marquee 68
4.12 Menambahkan Objek Multimedia 70
4.12.1 Menambahkan Video 70
4.12.2 Menambahkan Suara 71
4.12.3 Menambahkan Background Suara 71
4.13 Membuat Formulir 72
4.13.1 Perintah Form 73

9
 4.13.2 Method POST and GET 75
4.14 Membuat Link 82
4.14.1 Link Gambar 84
4.14.2 Anchor 85
4.15 Membuat Frame 89
4.15.1 Frameset ROWS 90
4.15.2 Frameset COLS 91
4.15.3 Frameset ROWS dan COLS 92
4.15.4 Membuka dua Situs dalam Frame 92
4.15.5 IFRAME 93
4.15.6 Frame Navigasi 94

BAB 5 DYNAMIC HTML DENGAN CASCADING

STYLE SHEET (CSS)
5.1 Pengertian CSS 97
5.2 Cara Menuliskan CSS 97
5.2.1 Inline 98
5.2.2 Embedded 99
5.2.3 Embedded Class 100
5.2.4 Embedded Style Sheet 101
5.3 Sintak CSS 102
3.3.1 ID dan Class Selectors 103
5.3.2 Class Selectors 105
5.4 CSS Styling 106
5.4.1 Warna Latar Belakang 106
5.4.2 Gambar Latar Belakang 108

5.5 CSS Text 115

5.5.1 Text Alignment 117
5.5.2 Text Decoration 118
5.5.3 Text Tranformation 120
5.5.4 Text Indentation 121
5.5.5 CSS Font Families 122
5.5.6 CSS Font-Family 123
5.5.7 CSS Font Style 124
5.6 CSS Style Links 125
5.7 CSS Background Color 126
5.8 CSS List 127
5.9.CSS Table 130
5.9.1 Collapse Borders 131
5.9.2 CSS Table Width & Height 132

10
5.9.3 Table Text Allignment 133
5.9.4 Table Padding 136
5.9.5 Table Color 137
5.10 CSS Box Model 138
5.10.1 CSS Border Properties 139
5.10.2 Border Width 140
5.10.3 Border Color 141
5.11 Penggunaan CSS dalam Aplikasi 142
5.11.1 Cara Dinamis Mengubah Warna Dan 142
Ukuran huruf
5.11.2 Cara Dinamis Mengubah Warna 143
dengan
Gerakan Mouse
5.11.3 CSS Link Warna-Warni 145
5.11.4 Link dengan Latar Belakang Berubah- 146
Ubah
5.11.5 Warna Huruf Berubah sesuai gerakan 149
Mouse
5.11.6 Menampilkan Gambar Secara 149
Bergantian
Sesuai Gerakan Mouse
5.11.7 Menentukan Posisi Gambar dan Text 150
5.11.8 Memberikan Efek Abu-Abu 151
5.11.9 Memberkan Efek Blur Pada Tulisan 152
5.11.10 Memberikan Efek Bayangan dengan 153
Dropshadow
5.11.11 Flip Horizontal 153
5.11.12 Filter Glow 154
5.11.13 Filter Invert 155
5.11.14 Filter Mask 156
5.11.15 Filter Shadow 157
5.11.16 Filter Wave 158
5.11.17 Filter Xray 158
5.11.18 Filter Blend 159
5.11.19 Fungsi Visible 160
5.11.20 Fungsi Reveal 161
5.11.21 Fungsi Reveal Transition 162
5.11.22 Funsi Shadow Dinamis 164
5.11.22 Funsi Shadow Dinamis 164
5.11.23 Fungsi Glow Dinamis 165
5.11.24 Fungsi Wave Dinamis 166

11
 5.12 Aplikasi CSS dalam Menu 167
5.12.1 Menu CSS 1 167
5.12.2 Menu CSS 2 168
5.13 Tabel Kode Warna dalam CSS 172

BAB 6 MENGENAL JAVASCRIPT

6.1 Java Script 179
6.2 Menjalankan Java Script 179
6.3 Program Pertama Java Script 180
6.4 Komentar 182
6.5 Event 182
6.6 Function 184
6.7 Variabel dalam Java Script 186
6.8 Tipe Data 187
6.8.1 Tipe Numerik 187
6.8.2 Tipe String 188
6.8.3 Tipe Boolean 188
6.8.4 Tipe Null 188
6.9 Operator 189
6.9.1 Operator Numerik 189
6.9.2 Operator Pemberian Nilai 189
6.9.3 Operator Pemanipulasi Bit 190
6.9.4 Operator Pembanding 191
6.9.5 Operator Logika 191
6.9.6 Operator String 192
6.10 Memasukan Data 193
6.10.1 Objek Text 193
6.10.2 Objek Radio 194
6.10.3 Objek Checkbox 196
6.10.4 Objek Textarea 198
6.10.5 Objek Select 199
6.11 Percabangan 201
6.11.1 If..Else 201
6.11.2 If..Else..If 202
6.11.3 Switch 202
6.12 Perulangan 203
6.12.1 Perulangan For 203
6.12.2 Pengulangan While 204
6.12.3 Pengulangan Do..While 204
6.13 Fungsi 205
6.13.1 Fungsi Buatan Sendiri 205

12
 6.13.2 Fungsi Bawaan 206
6.14 Kejadian 209
6.15 Mendefinisikan Objek 214
6.15.1 Pernyataan For..In 215
6.15.2 Mendefinsikan Metode 216
6.16 Array 218
6.17 Frame dalam JavaScript 221

BAB 7 ELECTRONIC MAIL

7.1 Pengertian E-Mail 225
7.1.1 Email Berbasis SMTP/POP 225
7.1.2 Email Berbasis Web 226
7.2 Cara Mendaftar E-Mail Gratis di Google 227

BAB 8 PEMILIHAN DOMAIN DAN HOSTING

8.1 Pemilihan Domain 231
8.2 Pemilihan Hosting 232

DAFTAR PUSTAKA

13
 BAB 1
TEKNOLOGI INFORMASI

Perkembangan Teknologi Informasi sangat pesat sekali jika dibandingkan

dengan teknologi lainnya, hal ini didorong oleh pesatnya perkembangan
dalam dunia elektronika terutama perangkat keras komputer dan
pendukungnya.

Teknologi Informasi sudah menjadi kebutuhan sehari-hari manusia saat

ini, oleh karena itu di bab 1 ini kita akan fokus membahas mengenai:

 Teknologi Informasi.

 Arsitektur Komputer.

 Jaringan Komputer.

1.1 Teknologi Informasi

Teknologi Informasi adalah kajian, desain, pengembangan, implementasi,

dukungan atau manajemen sistem informasi yang berbasis komputer,
khususnya aplikasi perangkat lunak dan perangkat keras. Lebih lanjut
teknologi informasi berkaitan dengan penggunaan komputer dan
perangkat lunak untuk mengubah, menyimpan, melindungi, memproses,
memindah, dan menggunakan informasi secara aman.

Saat ini istilah teknologi informasi semakin berkembang meliputi banyak

aspek yang berkaitan dengan komputasi dan teknologi. Kombinasi antara

14
komputer dan komunikasi disebut juga sebagai teknologi informasi. Oleh
karena itu teknologi informasi dalam pengertian umum menggambarkan
teknologi yang menghasilkan, memanipulasi, menyimpan,
mengkomunikasikan, dan atau menyebarkan (diseminasi) informasi.
Kesimpulannya penggunaan komputer dalam hubungannya untuk
menangani informasi saat ini disebut sebagai teknologi informasi. Dalam
perkembangannya pengertian teknologi informasi kemudian dikaitkan
dengan penggunaan Internet sebagai media pengiriman dan penerimaan
informasi.

1.2 Arsitektur Komputer

Arsitektur komputer terdiri atas perangkat keras dan perangkat lunak.

Salah satu elemen perangkat keras yang penting ialah komputer.
Komputer akan digunakan sebagai sarana untuk mengendalikan system
informasi yang berbasis komputer yang merupakan salah satu bentuk
aplikasi dari teknologi informasi. Elemen-elemen perangkat keras
komputer dapat dilihat seperti di bawah ini:

Gambar 1.1 Arsitektur Komputer Secara umum

Arsitektur komputer terdiri atas:

 Sarana input: Sarana untuk memasukkan masukan ke memori

dapat dilakukan melalui keyboard

15
  Sarana output: Sarana keluaran untuk menampilkan hasil
pemrosesan dapat melalui layar monitor untuk pengeluaran lunak
dan printer untuk pengeluaran keras

 CPU (Central Processing Unit): merupakan bagian terpenting

dalam perangkat komputer karena CPU mempunyai peranan dalam
mengendalikan bagian-bagian lain dalam komputer serta
mengubah masukan menjadi keluaran. CPU merupakan otak yang
menggerakkan, mengatur, dan mengkoordinasikan semua operasi
yang dilakukan oleh komputer. CPU terdiri atas control unit dan
ALU (arithmetic logic unit). Menurut model ini memori dianggap
bukan bagian dari CPU, sementara ada ahli lain yang memasukkan
memori ke dalam bagian CPU. Control unit berfungsi untuk
menggerakkan semua bagian dalam komputer supaya dapat
bekerja sama dalam suatu system. ALU (arithmetic logic unit)
merupakan bagain yang menjalankan fungsi operasi penghitungan
dan logika.

 Control Unit: bagian dari CPU

 ALU (arithmetic logic unit): bagian dari CPU

 Memori: Memori merupakan sarana penyimpanan primer untuk

menyimpan semua perangkat lunak yang digunakan dalam
mengoperasikan komputer dan sebagian lain untuk menyimpan
data yang dimasukkan melalui input.

 Sarana penyimpanan eksternal: berfungsi untuk menampung data

atau informasi jika sarana penyimpana primer sudah tidak dapat
menampungnya. Sarana penyimpanan eksternal dapat berupa
floppy disk, cd, flash disk atau hardisk.

16
1.3 Jaringan Komputer

Jaringan komputer yang digunakan untuk menghubung-hubungkan

beberapa komputer dalam satu lokasi kantor disebut jaringan lokal atau
Local Area Network (LAN). LAN dapat berupa sekumpulan komputer
dalam satu lokasi gedung atau berbeda lokasi gedung. Fungsi LAN ialah
untuk memungkinkan terjadi komunikasi antara satu komputer dengan
komputer lain yang sudah dihubungkan tersebut. Model LAN sederhana
dapat digambarkan sebagai berikut:

switch

Gambar 1.2 Local Area Network

Jaringan yang lebih luas dari LAN disebut Wide Area Network (WAN). WAN
bersifat lebih luas tidak hanya dalam satu lokasi geografis tetapi juga
dapat menghubungkan jaringan-jaringan lokal yang berada di area
geografis yang berbeda. Dengan kata lain WAN adalah sekumpulan dari
LAN yang dihubungan melalui sarana penghubung seperti Internet. WAN
dapat berupa seperti di bawah ini.

17
 switch
switch

WAN

switch switch

Gambar 1.3 Wide Area Network

18
 BAB 2

SEKILAS TENTANG
INTERNET

2.1 Sejarah Internet

Pada tahun 1963 ketika RAND Cooperation, suatu organisasi pengendali

perang dingin Amerika Serikat menghadapi masalah yang rumit, yaitu
bagaimana Amerika Serikat tetap dapat berkomunikasi secara lancar jika
sedang terjadi perang nuklir dan dalam kondisi saat perang sudah usai.
Solusi masalah ini ialah dengan menciptakan sebuah jaringan yang
menghubungkan semua tempat sarana strategis di seluruh Amerika
Serikat dan tetap dapat memberikan request for proposal (RFP) kepada
University of California Los Angeles (UCLA). Beberapa orang yang terlibat
diantaranya ialah: Vinton Crf, Stefen Croakerm, John Postel dan Robert
Braden.

Pada tahun 1964 dikeluarkan proposal RAND yang intinya mengatakan

bahwa jaringan yang akan dibentuk tidak terpusat pada suatu tempat dan
tetap berfungsi sekalipun dalam keadaan hancur. Ide ini diilhami oleh
teknologi yang memungkinkan dapat mengirimkan pesan dari tempat asal
ke tujuan dengan cara memecah-mecah pesan tersebut menjadi bagian-
bagian yang lebih kecil yang disebut paket pada saat dikirimkan dan
kembali disusun seperti semula saat diterima di tempat tujuan. Teknologi
ini dikenal sebagai packet switching network.

19
Pada tahu 1969 empat buah interface message processor (IMP)
dikirimkan kepada 4 perguruan tinggi yakni UCLA, Standard Research
Institute (SRI), University of Calofornia Santa Barbara (UCSB) dan
University of Utah. Jaringan keempat tempat ini disebut sebagai ARPANET
yang disponsori oleh Defense of Advanced Research Project Agency
(DARPA) milik Pentagon, Departemen Pertahanan Amerika Serikat.

Internet bukan merupakan sesuatu yang asing lagi bagi orang pada masa
sekarang. Sekalipun demikian banyak orang tidak atau belum memahami
apa dan bagaimana sebenarnya yang dimaksud dengan Internet. Internet
merupakan sekumpulan jaringan yang berskala global. Tidak ada satupun
orang, kelompok atau organisasi yang bertanggung jawab untuk
menjalankan Internet. Mekanisme kerja Internet tidak didasarkan pada
manusia tetapi merupakan mekanisme kerja elektronik. Masing-masing
jaringan yang terhubung satu dengan lainnya berkomunikasi dengan
menggunakan protokol-protokol tertentu, seperti “Transmission Control
Protocol”(TCP) dan “Internet Protocol”(TP). Dari waktu kewaktu jaringan-
jaringan yang tersebar diberbagai belahan dunia saling terhubung dengan
jaringan-jaringan yang sudah ada terlebih dahulu.

Jaringan pusat yang disebut VBNS (Very High Speed Backbone Network
Services) yang berfungsi menghantarkan lalu lintas data Internet
keseluruh Amerika dan penjuru dunia saat ini dibiayai oleh Badan Ilmu
Pengetahuan Nasional Amerika Serikat. Jaringan pusat inilah yang
memungkinkan komputer-komputer yang terhubung dengan Internet
dapat berkomunikasi dan saling mengirimkan data. Saat ini ribuan
jaringan-jaringan regional diseluruh penjuru dunia sudah terkondisi
dengan Internet sehingga antar komputer dari rumah-kerumah, dari satu
kantor-kekantor lain dapat berkomunikasi satu dengan lainnya.

20
2.2 Mengetahui Proses Perjalanan Informasi di Internet

Perjalanan suatu informasi melalui Internet merupakan proses yang

panjang dan rumit tidak semudah yang kita bayangkan pada saat kita
mengirim email kemudian sampai ditujuan dalam waktu yang singkat.
Secara garis besar perjalanan informasi melalui Internet dapat
digambarkan sebagai berikut: Informasi yang dikirimkan komputer kita
olah Transmission Control Protocol (TPC) dipecah-pecah kedalam bentuk
paket-paket yang lebih kecil ; kemudian dari Komputer dikirimkan menuju
ke jaringan lokal milik penyedia layanan Internet (ISP). Setelah melalui
jaringan lokal tersebut, paket-paket tersebut berjalan melalui berbagai
tingkatan jaringan, komputer dan jalur komunikasi yang berada
diberbagai kota dipenjuru dunia sebelum akhirnya mereka sampai
ditujuan akhir.

Agar perjalanan informasi tersebut berjalan lancar, maka diperlukan

sarana perangkat keras, seperti “hub”, ”bridge”, ”gateway”, “repeater”,
dan “router”. Hub berfungsi untuk menghubungkan antar Komputer satu
dengan lainnya sehingga memungkinkan komputer-komputer tersebut
dapat saling berkomunikasi satu dengan lainnya. Bridge berfungsi untuk
menghubungkan antar jaringan area lokal (LAN) satu dengan lainnya,
sehingga sehingga data dapat dikirim dari satu jaringan lokal tertentu ke
jaringan lokal lainnnya. Gateway berfungsi mirip seperti “bridge”
kelebihannya ialah gateway dapat menterjemahkan data dari satu
jaringan ke jaringan lainnya.

Karena jarak yang harus ditempuh oleh perjalanan informasi tersebut

kadang jauh dari sudut pandang lokasi fisik, maka sinyal yang
mengirimkan data dapat melemah. Disinilah pentingnya peranan
repeater. Repeater berperan untuk menguatkan sinyal pada interval-
interval tertentu. Banyaknya informasi yang melalui Internet memerlukan
pengaturan, dalam hal ini router berfungsi untuk mengatur lalui lintas
informasi di Internet. Router memeriksa paket-paket informasi dan

21
menentukan tujuannya serta mengirimkannya ke router berikutnya yang
terdekat dengan tujuan akhir paket-paket tersebut.

2.3 Alamat dan Domain Internet

Bagaimana email yang kita kirimkan dapat sampai ke tujuan?

Sebagaimana cara kerja pengiriman surat pos yang memerlukan alamat
jelas yang dituju dan alamat pengirim yang jelas; demikian pula agar
email dapat sampai ditujuan dengan tepat email memerlukan alamat.
Seperti apakah sebenarnya dan apa yang dimaksud dengan alamat
Internet? Agar email sampai ketujuan diperlukan adanya Internet Protocol
(IP); IP memanfaatkan alamat-alamat Internet untuk mengirimkan email
dari satu komputer ke komputer lainnya. IP biasanya berbentuk deretan
angka yang terdiri dari 4 (empat) seri dipisahkan oleh titik, misalnya
182.63.139.83

Pada tahun 1980an Sun Microsistem mengembangkan apa yang disebut

dengan Domain Name System (DNS). DNS dikembangkan didasarkan
pada sistem hirarki yang mengelompokkan komputer-komputer ke dalam
Internet masing-masing komputer oleh DNS diberi nama domain atau
alamat di Internet yang menggunakan huruf dan kata-kata yang mudah
dikenal sebagai ganti angka-angka yang sulit untuk dihafal.

DNS memungkinkan satu komputer mengirimkan email kekomputer lain

dengan tepat, yaitu dengan cara mengubah alamat Internet berbentuk
teks menjadi bentuk angka yang sesuai dengan IPnya. Alamat email pada
umumnya terdiri dari dua bagian yang dipisahkan dengan tanda “@” (at);
sebagai contoh [email protected] Alamat email tersebut mempunyai
makna sbb: bagian pertama alamat sebelah kiri tanda @ adalah nama
pengguna (username); bagian kedua alamat yang berada disebelah kanan
tanda @ adalah nama domain yang berfungsi untuk mengidentifikasi
komputer tertentu dimana pengguna mempunyai alamat email di
Internet. Pada bagian yang paling kanan setelah tanda titik “.” Merupakan

22
domain yang paling utama yang mengidentifikasi organisasi dimana email
pengguna termasuk didalamnya.

Contoh-Contoh Domain:

Beberapa domain terkenal yang didasarkan pada organisasi diantaranya

ialah:
 com untuk organisasi komersial
 edu / ac untuk organisasi pendidikan
 gov untuk organisasi pemerintah
 mil untuk organisasi militer
 net untuk organisasi yang menyediakan jaringan
 org untuk organisasi umum

Info untuk informasi pribadi atau kelompok negara diantaranya ialah:

 ca untuk Canada
 fr untuk Perancis
 jp untuk Jepang
 nl untuk Belanda
 th untuk Thailand
 uk untuk Inggris
 id untuk Indonesia

2.4 Cara Kerja Koneksi Suatu Web ke Internet

Bagaimanakah cara kerja suatu web sehingga web tersebut dapat

terkoneksi dengan Internet? Koneksi suatu web site memerlukan empat
komponen dasar, yaitu: Komputer yang berfungsi sebagai klien; Provider
penyedia layanan akses Internet; server dan jaringan komunikasi yang
menghubungkan ketiga komponen tersebut. Jika seseorang ingin
mengakses Internet dari rumah dengan menggunakan Komputer pribadi,

23
maka komputer tersebut merupakan titik awal koneksi yang kemudian
harus dihubungkan dengan modem dan telpon. Melalui browser perintah
diteruskan untuk dapat terhubung dengan komputer tertentu sehingga
kita dapat memanggil halaman atau dokumen tertentu melalui komputer
kita.

Pada saat kita sudah terhubung dengan Internet, dan kita bermaksud
untuk membuka suatu halaman web site tertentu, maka kita perlu
menuliskan alamat domain web tersebut, misalnya
http://berita.unikom.ac.id Dengan kecepatan yang tinggi, permintaan
tersebut dikirimkan ke web tersebut sehingga halaman website tersebut
kemudian dapat dibaca melalui komputer kita.

Gambar 2.1. Contoh Portal Berita Unikom

2.5 Jenis File yang ada di Internet

Jika kita melakukan “surfing” di Internet, maka kita akan menemukan

jutaan file yang berisi bermacam-macam informasi atau data yang berasal
dari server-server yang tersebar di penjuru dunia. Sekalipun demikian

24
secara garis besar hanya ada dua jenis file yang ada di Internet, yaitu:
file ASCII (American Standard Code For International Interchange) dan
file Biner. Apa yang dimaksud dengan file ASCII ialah file teks sederhana
yang berisi kode-kode ASCII, yaitu kode-kode komputer yang
memunculkan karakter-karakter dilayar monitor. Sebenarnya file-file
ASCII tidak ada apa-apa, Ia hanya berupa data-data karakter sederhana,
lain halnya dengan file-file biner, file-file tersebut berisi data yang diberi
kode secara spesial dan yang hanya dapat dilihat atau dijalankan dengan
menggunakan perangkat lunak atau komputer tertentu. Kita sering
mendengar adanya file-file HTML, pada dasarnya file HTML terdiri dari file
teks ASCII yang berfungsi memerintahkan browser untuk memunculkan
halaman-halaman website tertentu.

Jenis file lain yang sering kita dengar ialah file-file grafik yang
menggunakan format PDF. Sebagian besar file PDF berupa file biner dan
sebagian kecil lainnya berupa file ASCII file

2.6 Cara Kerja Email

Email merupakan singkatan dari electronic mail yang pada dasarnya sama
dengan data yang dikirimkan melalui media Internet. Mayoritas lalu lintas
data di Internet saat ini dipenuhi oleh email dari dari suatu komputer ke
komputer lainnya.

Bagaimana email dikirimkan melalui Internet sama dengan cara data

dikirimkan dari suatu Komputer ke Komputer lainnya. Email yang dikirim
akan dipecah-pecah oleh TPC menjadi paket-paket kecil, kemudian IP
Protocol mengirimkan ke lokasi yang dituju dan pada saat paket-paket
teresbut sampai di tujuan oleh TPC disusun kembali seperti semula.

Sesungguhnya perjalanan email dari komputer ke komputer lain sangat

rumit dan menempuh rute yang panjang. Sebagai contoh seseorang
berada di Bandung dengan menggunakan email milik yahoo, maka secara
fisik sebenarnya emailnya berada di server Yahoo terdekat dengan

25
wilayah Indonesia, misalnya Singapura atau Melbourne, Australia, jika
email tersebut dikirim ke alamat email orang lain dengan alamat,
misalnya [email protected]. Maka email tersebut berjalan dari
komputer pengirim di Bandung menuju ke Singapura atau Melbourne
kemudian kembali lagi ke Indonesia menuju lokasi server milik yahoo,
misalnya di Bandung atau Jakarta.

Dengan semakin majunya teknologi Internet dan berkembangnya bahasa

pemograman pendukungnya, maka saat ini pengiriman email dapat
disisipi dengan gambar, suara, video, ataupun file-file program aplikasi
dalam bentuk file-file biner.

Gambar 2.2 Situs penyedia email gratis http://mail.yahoo.com

2.7 Cara Kerja World Wide Web

Salah satu elemen yang paling menarik dalam Internet ialah adanya
World Wide Web (WWW) yang merupakan teknologi canggih saat ini

26
dalam dunia Internet. WWW merupakan jaringan yang menghubungkan
jaringan-jaringan lokal kedalam suatu jaringan global dimana satu
komputer di negara tertentu dapat secara langsung berkomunikasi
dengan komputer lain di negara lain.

WWW atau sering disingkat Web berisi “halaman-halaman” yang dapat

menampilkan teks, gambar, grafik, suara, animasi, serta elemen-elemen
multimedia lainnya dan elemen-elemen yang ditampilkan bersifat
interaktif.

Bagaimana kita dapat menampilkan “halaman halaman” WWW di layar

monitor komputer kita? WWW bekerja didasarkan pada model klien dan
server, pada komputer kita yang berfungsi sebagai klien, kita memerlukan
browser, misalnya Internet Explorer. Browser kemudian menghubungi
server dengan menyampaikan permintaan informasi atau data yang ada
di server tersebut. Server, setelah memahami permintaan tersebut,
kemudian mengirimkan informasi yang diminta ke browser yang akhirnya
menampilkan informasi yang kita minta ke layar monitor komputer kita.

“Halaman-halaman “ di WWW disusun dengan menggunakan bahasa yang

disebut HTML (Hypertext Markup Language). Bahasa ini mampu
memberikan perintah pada browser untuk menampilkan teks, gambar,
grafik, suara, dan elemen web lainnya. “Halaman-halaman Web” di
hubungkan satu dengan lainnya menggunakan apa yang disebut dengan
“Hypertext”. Dengan menggunakan hypertext kita dapat berpindah-
pindah dari satu halaman ke halaman lain baik secara berurutan ataupun
secara acak. Hal ini dimungkinkan karena hypertext dapat
menghubungkan bagian-bagian dalam satu alamat tertentu ataupun
kebagian-bagian halaman web di alamat lainnya. Pola yang digunakan
ialah model diagram pohon, struktur linear dan struktur acak. Model
pertama berguna bagi kita dalam melakukan navigasi ke seluruh bagian
situs tertentu; model kedua memungkinkan kita pindah dari satu halaman
ke halaman lain secara berurutan dan model ketiga kita dapat berpindah
dari satu halaman ke halaman lainnya secara acak.

27
2.8 Cara Kerja Browser

Browser adalah sebuah aplikasi yang berguna untuk menampilkan isi

website, bekerja melalui komputer klien kemudian akan menerjemahkan
setiap baris perintah yang ada di website tersebut untuk ditampilkan di
komputer pengguna. Contoh web browser diantaranya ialah:

 Internet Exprorer

 Netscape

 Firefox

 Opera dllnya.

Gambar 2.3 Tampilan Browser Internet Explorer

Cara kerja browser agar dapat memanggil halaman-halaman World Wide

Web (WWW) ialah sebagai berikut: browser di komputer klien
mengkontak server-server untuk meminta halaman-halaman WWW yang
disusun dengan HTML. Kemudian browser menginterpretasi halaman
halaman tersebut dan menampilkan di komputer klien. Browser kemudian

28
menampilkan isi halaman-halaman tersebut, misalnya teks, gambar,
grafis, animasi dan suara. Jika halaman-halaman tersebut berisi link-link
ke server-server lain, maka browser akan mengarahkan ke server-server
tersebut.

2.9 Cara Kerja Markup Language / HTML

Markup language merupakan jalan menuju ke dunia World Wide Web.

Bahasa ini merupakan seperangkat perintah yang meminta browser untuk
menampilkan dan menangani suatu dokumen Web. Instruksi, yang
disebut sebagai tag atau markup ini, menjadi satu (embedded) dengan
dokumen sumber yang menciptakan halaman Web tersebut. Untuk
gambar-gambar grafis referensi tag tersimpan dalam file yang berbeda.
Tag ini juga berperan untuk menyuruh browser berhubungan dengan file
atau URL lain di komputer lain dengan cara melakukan klik terhadap
hyperlink yang aktif. Karena browser hanya mengetahui perintah-perintah
markup language, maka browser tidak akan dapat memahami teks-teks
yang terdapat dalam paragraf yang kita buat. Markup language berbeda
dengan bahasa permograman, seperti Pascal atau C language. Bahasa ini
lebih sederhana dan hanya menggambarkan bagaimana suatu informasi
harus ditampilkan di layar monitor.

HTML adalah Markup language untuk World Wide Web. Bahasa ini
mendefinisikan format suatu dokumen WWW dan memungkinkan
hypertext link menjadi satu dengan dokumen tersebut. Dalam
perkembangannya terdapat penambahan-penambahan pada HTML yang
disebut dengan Dynamic HTML. Dengan bahasa lanjut ini memungkinkan
HTML tidak hanya menampilkan informasi yang bersifat statis tetapi juga
dinamis.

29
 BAB 3
MENGENAL LAN DAN WAN

3.1 Elemen-Elemen Perangkat Keras LAN

Elemen- elemen perangkat keras yang digunakan untuk membuat LAN

diantaranya ialah:

 Kabel: Bagi para pengguna LAN baru sebaiknya menggunakan kabel-

kabel kategori 5 yang secara resmi disebut sebagai Ethernet
10/100BaseT. Jenis ini merupakan tipe kabel untuk jaringan yang
paling umum dan juga menyediakan jalur perbaikan jika sewaktu
waktu diperlukan. Makna nama tersebut ialah: a) Angka “10” dan
“100” dalam 10/100BaseT untuk kecepatan koneksi jaringan sebesar
10 Megabits or 100 Megabits per detik; b) Huruf "T" dalam BaseT
menunjuk pada tipe kabel, yaitu twisted-pair, yang terdiri dari
sepasang kabel tipis yang dililitkan dan juga menunjuk pada konektor,
yang biasa disebut sebagai RJ-45 yang bentuknya mirip dengan
konektor telepon; c) Kata "Base" berarti bahwa kabel tersebut
digunakan sebagai pita sempit / base band atau untuk frekuensi
sederhana dan tunggal bukan untuk jaringan peta lebar / broad band.

Gambar 3.1. Kabel UTP

30
 Network Cards: Terdapat banyak network cards yang biasanya
disebut sebagai Network Interface Cards (NIC).Hal-hal lain yang
berkaitan dengan ini ialah: 1) Connection Jack atau NICs jack harus
cocok dengan tipe kabel yang sedang digunakan. Jika kita sedang
menggunakan kabel tipe 10BaseT cable, misalnya, NIC harus
mempunyai konektor yang sesuai jenis RJ-45. 2) Plug and Play
compatibility: Fitur ini memungkinkan Windows 95/98/NT/2000/Me/XP
secara otomatis melakukan konfigurasi sendiri sehingga menghemat
waktu kita. 3) Interrupt Addresses: Interrupt di setiap mesin bersifat
premium, dengan demikian kita dapat menentukan mana yang
tersedia dari NIC.

Gambar 3.2. Kartu Jaringan

 Hubs: Ethernet merupakan cara baku untuk menghubungkan

komputer-komputer secara bersama-sama dalam membuat jaringan.
Hub adalah sarana ether-net yang digunakan bersama-sama dengan
kabel 10BaseT dan 100BaseT. Kabel-kabel tersebut tersambung dari
jaringan komputer menuju ke ports pada hub. Dengan menggunakan
hub kita akan dengan mudah memindah atau menambahkan
komputer lagi, menemukan dan memperbaiki masalah-masalah dalam
kabel, dan memindah sementara komputer-komputer dari jaringan
tresebut. Yang kita perlukan diantaranya ialah: 1) Connection jack
yang cocok dengan kabel yang digunakan; 2) Cascading jack yang
31
 memungkinkan kita dapat menambahkan hub tambahan jika
diperlukan tanpa mengganti seluruh unit; 3) Cahaya lampu (Lights) di
bagian depan yang akan bermanfaat ketika kita sedang melakukan
diagnosa pada masalah-masalah koneksi jaringan.

Gambar 3.3 Hub atau Switch

3.2 Persyaratan Perangkat Keras Jaringan LAN

Jenis hardware yang akan digunakan tergantung pada jenis akses dan /
atau modem yang dipergunakan. Jika kita menggunakan akes dial-up
maka yang diperlukan ialah: 1) Satu kartu jaringan untuk masing-masing
komputer; 2) Satu hub; dan 3) Satu kabel untuk masing-masing koneksi
menuju ke hub tersebut. Jika kita menggunakan modem kabel, DSL
modem atau akses langsung maka yang diperlukan ialah: 1) Satu kartu
jaringan untuk masing-masing komputer; 2) Satu kartu jaringan
tambahan untuk menghubungkan ke modem tersebut; 3) Satu hub; 4)
Satu kabel untuk masing-masing koneksi ke hub tersebut; 5) Kabel
tambahan untuk koneksi dari komputer ke modem.

Di bawah ini tergambar topografi sederhana mengenai cara koneksi

komputer ke Internet melalui ISP tertentu (Internet Service Provider):

(Sumber: http://www.edrawsoft.com/Wide-Area-Network.php)

32
 Gambar 3.4 Topografi Koneksi Komputer ke Internet

Gambar berikutnya adalah topografi sederhana LAN yang menggunakan

kabel atau DSL modem. Jaringan di bawah ini menunjukkan jumlah
komputer klien yang lebih banyak.

Gambar 3.5 Topografi LAN Menggunakan Kabel / Model DSL

(Sumber: http://www.edrawsoft.com/Wide-Area-Network.php)

33
Pada gambar di atas hanya satu komputer WinProxy yang menggunakan
modem, sedang komputer-komputer lainnya saling dihubungkan dengan
hub. Komputer yang menggunakan modem dan menerima instalasi
WinProxy harus dijalankan di Mesin dengan sistem operasi Windows.
Komputer-komputer lain di LAN dapat berupa komputer dengan sistem
operasi lain, misalnya Macs, Unix boxes, Linux dan Windows selama
komputer-komputer tersebut mampu berbicara atas nama TCP/IP.

3.3 Instalasi Perangkat Keras untuk Peer to Peer Network

Cara terbaik untuk melakukan instalasi NIC adalah dengan mengikuti

petunjuk manual yang dikeluarkan oleh pabrik. Sistem operasi Microsoft
Windows biasanya akan menemukan kartu baru pada saat mulai instalasi
dan kemuidan melakukan konfigurasi dengan sendirinya. Jalankan satu
kabel antara masing-masing kartu dan hub; kecuali untuk kartu jaringan
eksternal jika kita menggunakan cable modem setup.

Kita juga memerlukan setidak-tidaknya satu protocol yang dipasang untuk

masing-masing kartu sesudah dipasang. Pilihlah setidak-tidak NetBEUI
(NetBios Extended User Interface) meski pilihan lain dapat juga
dilaksanakan. Pada dasarnya tidak akan ada masalah dengan memiliki
beberapa protocol di jaringan lokal.

Selama pemasangan kartu diperlukan cara setup tertentu. Jika belum

terpasang, kita memerlukan hal-hal di bawah ini:

 Client for Microsoft Networks

 File dan Printer Sharing
Setiap saat kita akan dapat melakukan setting lagi di waktu-waktu yang
akan datang. Agar perubahan-perubahan setting yang dilakukan dapat
efektif, lakukan reboot pada komputer tersebut. .

34
3.4 Mengubah Setting Jaringan

Untuk pengguna Windows,setting jaringan dapat dilakukan dengan cara,

masuk kedalam menu control panel, kemudian double click Icon Menu
Connections, selanjutnya pilih kartu jaringan yang akan diatur
konfigurasinya, misalnya LAN Card Connection ataupun Wireless Network
Connection. Berikut adalah contoh Wireless Network Connectio Properties.

Gambar 3.6. Network Properties

35
Misalnya anda ingin mengubah atau mengatur konfigurasi TCP/IP, maka
Click pada bagian Internet Protocol (TCP/IP), kemudian pilih tombol
Properties,selanjutnya akan ditampilkan gambar seperti berikut

Gambar 3.7. Mengganti IP Address

36
3.5 Teknologi Wide Area Network (WAN)

Wide Area Network ( WAN) adalah jaringan komputer yang mencakup

banyak area yang berjarak jauh, bahkan dapat menjangkau ke seluruh
dunia. WAN menghubungkan beberapa jaringan yang lebih kecil, seperti
LAN. Salah satu jaringan WAN yang paling popular ialah Internet.
Sebaliknya beberapa segment Internet sebenarnya adalah WAN itu
sendiri. Perbedaan pokok antara teknologi WAN dan LAN adalah cakupan
areanya. WAN harus dapat berkembang karena diperlukan untuk
menjangkau beberapa kota, Negara bahkan benua.

Seperangkat switch dan router saling dihubungkan untuk membentuk

Wide Area Network. Semua switch dapat dihubungkan dengan topologi-
topologi yang berbeda.. WAN mungkin dimiliki secara pribadi atau dapat
juga menyewa dari penyedia layanan WAN. WAN yang disewakan
mengandung konotasi sebagai jaringan public atau pengguna berbagi.

Baik teknologi packet switching dan circuit switching digunakan dalam

WAN. Packet switching memungkinkan para pengguna untuk berbagi
sumber daya common carrier sehingga carrier tersebut dapat
menyebabkan penggunaan infrastruktur menjadi lebih efisien. Dalam
packet switching setup, semua jaringan mempunyai koneksi dengan
jaringan carrier. Dan banyak pelanggan berbagi dalam menggunakan
jaringan carrier. Carrier tersebut dapat menciptakan sirkuit maya antara
semua situs pelanggan dimana paket-paket data dikirimkan dari satu
lokasi ke lokasi lain melalui jaringan tersebut. Switching memungkinkan
koneksi data dibangun saat-saat diperlukan dan dihentikan saat
komunikasi sudah selesai. Cara kerja ini mirip dengan cara kerja telepon
pada teknologi Integrated Services Digital Network (ISDN

37
3.6 Perangkat Lunak Diagram WAN

Teknologi WAN secara umum berfungsi sebagai tiga lapisan model

referensi OSI, yaitu sebagai pertama lapisan fisik, kedua lapisan
penghubung data, dan lapisan jaringan. semua teknologi utama
diketemukan dalam WAN termasuk diantaranya ialah SONET, Frame
Relay, X.25, ATM dan PPP.

 ATM: merupakan teknologi switching koneksi yang mengorganisasi

data digital kedalam unit-unit sel sebesar 53-byte. Secara individual
satu sel diproses secara asynchronous secara relatif terhadap semua
sel lain yang antri sebelum dihubungkan secara multiplexed melalui
jalur transimisi. Kecepatan jaringan ATM dapat mencapai 10 Gbps.

 Frame Relay: (FR). Merupakan layanan komunikasi data dengan

kecepatan perpindahan yang tinggi yang mempunyai kemiripan
dengan tipe X.25. Frame relay secara luas digunakan sebagai layanan
antar-koneksi dari LAN ke LAN, dan sesuai dengan tuntunan adanya
kebutuhan lingkungan LAN.

 SONET/SDH: adalah singkatan dari Synchronous Optical Network yang

merupakan standar internasional untuk komunikasi dengan kecepatan
tinggi melalui jaringan fiber-optik. SONET menghasilkan tingkatan
Optical Carrier (OC) dari 51.8 Mbps sampai dengan 10 Gbps untuk
jenis OC-192 atau bahkan lebih tinggi. Sedang SDH (Synchronous
Digital Hierarchy) merupakan jenis is a SONET keluaran Eropa.

 X.25: Protokol X.25 memungkinkan semua komputer dapat

dipergunakan pada jaringan umum yang berbeda untuk melakukan
komunikasi melalui komputer perantara di tingkat lapisan jaringan.

 PPP: merupakan kepanjangan dari point-to-point link yang

menyediakan satu jalur komunikasi WAN yang sudah ditetapkan
38
 sebelumnya dari tempat-tempat pelanggan melalui jaringan pembawa
lalu lintas, seperti perusahaan telepon ke jaringan remote. Jalur dari
satu titik ke titik lain (point-to-point) biasanya disewakan dari satu
penyedia jasa layanan (carrier). Itulah sebabnya sering disebut
sebagai jalur yang disewakan (leased lines).

Bagaimana suatu jaringan area luas (WAN) terhubung dengan jaringan

lain melalui media Internet dapat dilihat pada gambar di bawah ini:

Gambar 3.8 Menghubungkan WAN ke Internet

(Sumber: http://www.viadex.com)

39
 BAB 4
HYPERTEXT MARKUP LANGUAGE

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk

menulis halaman web. HTML merupakan pengembangan dari standar
pemformatan dokumen teks yaitu Standard Generalized Markup Language
(SGML). HTML pada dasarnya merupakan dokumen ASCII atau teks
biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi
tertentu.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990
HTML mengalami perkembangan yang sangat pesat. Setiap
pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas
yang lebih baik dari versi sebelumnya.
Pada bab ini akan dibahas mengenai bahasa markup atau markup
language yang sudah disinggung di bab sebelumnya ketika kita berbicara
sekilas mengenai Internet. Bahasa itu disebut HTML yang merupakan
singkatan dari Hypertext Markup Language. Kegunaan bahasa ini ialah
untuk memanipulasi browser sehingga dapat menampilkan informasi yang
dapat dibaca oleh pengguna komputer. HTML yang akan dibahas meliputi
diantaranya:
 Dasar–Dasar HTML
 Menambahkan Efek Karakter Fisik pada Halaman Web
 Menambahkan Efek Karakter Logika
 Membuat Tabel
 Membuat Daftar
 Mengatur Tampilan Dokumen
 Membuat Link
 Menempatkan Gambar ke dalam Web

40
  Menambahkan Obyek-Obyek Multimedia
 Membuat Formulir HTML
 Membuat Frame
 Membuat Web Site

4.1 Dasar–Dasar HTML

Pada Bagian ini akan dibahas mengenai dasar-dasar HTML yang
bermanfaat untuk membuat tampilan web site secara sederhana. Fungsi
utama HTML ialah memberi perintah kepada browser untuk melakukan
manipulasi tampilan melalui tag-tag yang ditulis dalam HTML. Dengan
demikian browser akan menghasilkan tampilan yang sesuai dengan
perintah-perintah yang sudah dibuat atau ditetapkan terlebih dahulu.
Untuk menuliskan suatu dokumen HTML dapat digunakan perangkat lunak
sederhana ataupun yang khusus yang dapat menghasilkan file Text ASCII,
diantaranya ialah:
 Notepad
 Dreamweaver
 Ultraedit

Semua dokumen dalam buku ini ditulis dengan menggunakan Notepad

Text Editor. Sekalipun demikian dokumen-dokumen HTML dapat ditulis
menggunakan perangkat lunak lain.
Untuk memperoleh perangkat lunak Notepad++ Editor dapat dilakukan
dengan mendownloadnya melalui website http://notepad-plus-plus.org/ ,
selanjutnya setelah anda mendapatkan software tersebut, lanjutkan
dengan meng-install-nya pada komputer anda.

41
 Gambar 4.1.Jendela Notepad++ Text Editor

Setelah selesai menuliskan dokumen tersebut di atas lakukan perintah

SAVE AS nama_file.html dan pada bagian perintah SAVE AS TYPES pilih
ALL FILES atau *.html

4.2 Tampilan Dokumen HTML Sederhana

Suatu dokumen HTML yang paling sederhana setidak-tidaknya
mempunyai elemen-elemen seperti di bawah ini..

<html>
<head>
<title> </title>
</head>
<body>
Isi
</body>
</html>

Gambar 4.2 Struktur Dokumen HTML

42
  Setiap dokumen HTML terdiri atas <HTML></HTML>,
<HEAD></HEAD>, <TITLE></TITLE> dan <BODY></BODY>
 Diantara perintah <TITLE> dengan </TITLE> terdapat bagian
judul untuk dokumen yang akan dibuat, sebagai contoh “Belajar
html”
 Antara <HTML> sampai dengan </HEAD> disebut sebagai bagian
pertama.
 Antara <BODY> sampai dengan </HTML> disebut bagian kedua /
isi
Untuk memperjelas masalah tersebut, di bawah ini kita akan
menampilkan contoh dokumen HTML sebagai berikut:

<html>
<head>
<title>
Latihan membuat html
</title>
</head>
<body>
Belajar HTML Dasar
</body>
</html>

 Setelah selesai menuliskan dokumen tersebut di atas lakukan

perintah File Save, atau Save As, Pada Jendela Save As:File
Name: diisi dengan Nama File yang di inginkan, misalnya:
latihan1.html dan pada bagian perintah Save As Types pilih
All Files
 Untuk menampilkan hasil output dari program tersebut dapat
dilakukan dengan cara memilih menu Run dari Jendela
Notepade++,

43
 Gambar 4.3 Memanggil Browser untuk Menjalankan Program

 Kemudian pilih browser yang tersedia pada komputer anda,

misalnya menggunakan chrome, IE (Internet Explorer)
ataupun browser lainya.

Gambar 4.4. Output Tampilan Latihan1.html

 Catatan:Untuk Selanjutnya Proses Penyimpanan Dokumen

atau File-file latihan dan bagaimana menampilkannya
menggunakan browser dapat dilakukan dengan cara yang sama
seperti pada latihan1.html

44
4.3 Menambahkan Isi pada Bagian Body
Isi dalam dokumen HTML ditempatkan di antara bagian <BODY> sampai
dengan </BODY>. Untuk menambahkan isi tersebut dapat dilakukan
dengan cara sebagai berikut:
Contoh Program

<html>
<head>
<title> JUDUL HALAMAN </title>
</head>
<body>
<h1> Potensi Manusia </h1>
Manusia memiliki potensi diri untuk meraih sukses yang
didambakannya.
Sukses sejati tidak hanya diukur melalui pencapaian materi,
akan tetapi
lebih kepada seberapa besar peranan kita untuk manusia dan
alam ini
</body>
</html>

Di bagian <BODY> sampai dengan </BODY> diisi dengan Header

Halaman contohnya adalah “Potensi Manusia”. Cara membuatnya ialah
dengan menggunakan perintah <H1> sampai dengan </H1>. Perintah H1
digunakan untuk membuat HEADER atau Kepala Berita.. Setelah itu
ditambahkan Caption atau penjelasan singkat mengenai isi halaman
tersebut dan selanjutnya simpan dokumen tersebut dengan Nama file:
latihan2.html.

45
 Gambar 4.5. Output Tampilan Latihan2.html

4.4 Elemen Teks

Ada beberapa Elemen yang dapat digunakan untuk menampilkan
informasi berupa Teks dalam HTML, yaitu:
 PARAGRAPH
 BLOCKQUOTE
 DIVIDER

4.4.1.Elemen Paragraph
Elemen paragraph menggunakan tag <P>......</P> yang digunakan
untuk menandai sekumpulan teks sebagai suatu paragraf. Tag <P>
menyatakan awal paragraf; sedangkan tag </P> menyatakan akhir dari
satu paragraf. Untuk menampilkan beberapa paragraf, misalnya 6
paragraf, maka penulisnnya menjadi sebagai berikut:
Program Menuliskan Tag Paragraph

<HTML>
<HEAD>
<TITLE>Tag Paragraph</TITLE>
</HEAD>
<BODY>
<P>Paragraf satu</P>
46
 <P>Paragraf dua</P>
<P>Paragraf tiga</P>
<P>Paragraf empat</P>
<P>Paragraf lima</P>
<P>Paragraf enam</P>
</BODY>
</HTML>

Simpanlah file di atas dengan nama paragraph.html.

Untuk membuat perataan paragraf digunakan atribut ALIGN. Atribut

ALIGN mempunyai tiga nilai yaitu left untuk rata kiri, right untuk rata
kanan ,dan center untuk posisi tengah. Untuk penulisannya sebagai
berikut:

 Rata kiri: <P Allign=”LEFT”> Teks paragraph akan ditampilkan rata

kiri </P>
 Rata kanan: <P Allign=”RIGHT”> Teks paragraph akan ditampilkan
rata kanan </P>
 Rata tengah: <P Allign=”CENTER”> Teks paragraph akan
ditampilkan rata ke tengah

<html>
<body>
<h2>Paragraf mempunyai beberapa pengertian</h2>
<p>Paragraf adalah karangan mini. Artinya semua unsur
karangan yang panjang ada dalam paragraf.</p>
<p>Paragraf adalah satuan bahasa yang terdiri beberapa
kalimat yang tersusun secara runtut, logis, dalam satu
kesatuan ide yang tersusun lengkap, utuh dan padu.</p>

47
 <p>Paragraf adalah bagian dari suatu karangan yang terdiri
dari sejumlah kalimat yang mengungkapkan satuan informasi
dengan pikiran utama sebagai pengendaliannya dan pikiran
penjelas sebagai pendukungnya.</p>
</body>
</html>

Simpanlah file di atas dengan nama paragraph2.html.

Gambar 4.6. Output Tampilan Paragraph2.html

4.4.2.Blockquote
Tag <BLOCKQUOTE>......</BLOCKQUOTE> Blockquote adalah tulisan
yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting.
Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang
dianggap penting yang berada di area blocquote.

Contoh Penggunaan Blockquote:

<HTML>
<HEAD>

48
<TITLE> Blockquote</TITLE>
</HEAD>
<BODY>
<H1>Kejahatan di Internet </H1>
<BLOCKQUOTE>
Jakarta - Belakangan ini banyak sekali kejahatan yang terjadi
terkait dengan pengguna internet.
Disinyalir kerugian yang dialami oleh para pengguna internet
mencapai US$ 8,5 miliar (sekitar Rp 7,7 triliun) selama dua
tahun terakhir ini.
Penyebabnya antara lain karena virus, spyware dan phishing.
Angka tersebut diungkapkan dalam laporan tahunan State of
The Net yang dibuat oleh Consumer Report, majalah pemerhati
konsumen di Amerika Serikat. Laporan itu berdasarkan
penelitian yang dilakukan oleh Consumer Report National
Research Center yang melibatkan 2.071 responden online.
</BLOCKQUOTE>

<BLOCKQUOTE>
Data lain dalam laporan itu menyebutkan, satu dari enam
pengguna kemungkinan akan menjadi korban kejahatan cyber.
Peluang ini turun dari 1:4 pada tahun 2007.
Kemudian, sekitar 19% responden mengatakan bahwa mereka
tidak mempunyai program antivirus di komputernya.
Sedangkan 75% lainnya tidak mempunyai anti-phishing.
Demikian dikutip detikINET dari techWeb, Rabu (6/8/2008).
</BLOCKQUOTE>
</BODY>
</HTML>

49
Simpanlah file di atas dengan nama blockquote.html.

Gambar 4.7 Menampilkan teks dengan Blockquote

4.4.3.Divider
Elemen divider digunakan untuk membagi-bagi dokumen HTML dalam
suatu hirarki yang terstuktur. Teks yang ditempatkan dalam tag
<DIV>.....</DIV> akan di tampilkan sesuai dengan nilai atribut ALIGN
tersebut. Nilai atribut ALIGN, yaitu left, right, dan center.

Contoh:
 Teks akan ditampilkan rata kiri: <DIV Allign=”Left”> …. </DIV>
 Teks akan ditampilkan rata kanan:: <DIV Allign=”Right”> ….
</DIV>
 Teks akan ditampilkan rata tengah: <DIV Allign=”Center”> ….
</DIV>

4.5 Memberi Warna Huruf di Halaman Web

Warna huruf standar dalam halaman HTML selalu hitam; sekalipun
demikian warna tersebut dapat diubah dengan menggunakan perintah

50
<FONT COLOR> ..... </FONT>. Untuk memberikan warna “merah”, “
biru”, “hijau”, “kuning” dan “ ungu”. Pada awalnya dalam HTML versi 3.2
hanya diperkenalkan sebanyak 16 warna. Warna tersebut adalah sebagai
berikut:

1. Aqua = aqua
2. Black = hitam
3. Blue = biru
4. Fuchsia= fuchsia
5. Gray = abu-abu
6. Green = hijau
7. Lime = lime
8. Maroon= maroon
9. Navy = biru tua
10. Olive = olive
11. Purple = ungu
12. Red = merah
13. Silver = perak
14. Teal = teal
15. White = putih
16. Yellow = kuning

Berikut ini adalah contoh penggunaan perintah untuk mengganti warna

Teks:

<HTML>
<h2>Warna</h2>
<pre>
<FONT COLOR="red">Teks warna merah.</FONT>
<FONT COLOR="blue">Teks warna biru.</FONT>
<FONT COLOR="green">Teks warna hijau.</FONT>
<FONT COLOR="yellow">Teks warna kuning.</FONT>
<FONT COLOR="violet">Teks warna ungu.</FONT>
<BODY >

51
 </HTML>

Simpanlah file di atas dengan nama warna.html.

Gambar 4.8 Memberi warna pada teks

Selain menggunakan cara seperti di atas; terdapat cara lain yang dapat
digunakan membuat warna, yaitu dengan menggunakan hex code.
Sedang cara penulisannya ialah dimulai dengan menggunakan karakter
“#” kemudian diikuti kombinasi warna RGB (Red, Green, Blue). Setiap
warna tersebut intensitasnya berupa HEX 2 Karakter, misalnya #FFEEA4
yang artinya intensitas Red (merah) = FF = 255, Green (hijau) = EE =
238, Blue (biru) = A4 = 164. Apabila kita menginginkan warna terang
maka unsur F digunakan sebaliknya jika warna gelap maka unsur 0
dipergunakan. Beberapa contoh warna menggunakan hex code seperti di
bawah ini.
No Kode Heksadesimal Warna
1 #FF0000 Merah
2 #0000FF Biru
3 #FFFF00 Kuning
4 #FFFFFF Putih
5 #00FFFF Cyan

52
 6 #888888 Abu-abu
7 #00FF00 Hijau
8 #FF00FF Ungu
9 #FF8800 Oranye
10 #000000 Hitam
11 #AA8800 Coklat
12 #004488 Biru tua

<html>
<h2>Memberi warna Teks Dengan Kode Heksadesimal</h2>
<Pre>
<Font Color="#FF0000">Teks Warna Merah.</Font>
<Font Color="#0080FF">Teks Warna Biru.</Font>
<Font Color="#00FF00">Teks Warna Hijau.</Font>
<Font Color="#FFFF00">Teks Warna Kuning.</Font>
<Font Color="#8080FF">Teks Warna Ungu.</Font>
</html>

Simpanlah file di atas dengan nama warna2.html.

Gambar 4.9. Mewarnai tulisan dengan perintah heksadesimal.

4.6 Mengganti Latar Belakang Halaman

53
Latar belakang halaman website standard defaultnya adalah berwarna
putih, Dengan menggunakan latar belakang (background) maka website
akan nampak semakin menarik.
Untuk memasukkan latar belakang bisa menggunakan pilihan warna
maupun gambar. Untuk merubah latar belakang halaman dengan warna
maka dapat digunakan perintah:
<body bgcolor=warna>
Berikut adalah contoh penulisannya dalam halaman website:

<html>
<body bgcolor="#cc9900">
<p>Berikut adalah contoh membuat latar belakang dengan
warna</p>
<p>Warna adalah spektrum tertentu yang terdapat di dalam
suatu cahaya sempurna (berwarna putih). Identitas suatu
warna ditentukan panjang gelombang cahaya tersebut.
Sebagai contoh warna biru memiliki panjang gelombang 460
nanometer.
</p>
</html>

Simpanlah file di atas dengan nama background1.html.

Gambar 4.10. Mengganti Warna Latar Belakang

54
Jika anda menghendaki agar latar belakang halaman ingin diganti dengan
menggunakan gambar atau image, maka dapat dilakukan dengan
menggunakan perintah <body background=” “>
Caranya ialah tempatkan program di bawah ini bersama dengan file
gambar yang akan ditampilkan dalam satu lokasi.

<html>
<body background="logo_uc_1.gif">
<h2> menggunakan gambar sebagai latar belakang </h2>
</html>

Simpanlah file di atas dengan nama latar.html.

Gambar 4.11. Menampilkan gambar sebagai latar belakang

halaman

4.7 Menciptakan Efek Karakter Fisik Dalam Tampilan

Beberapa bentuk efek karakter fisik diantaranya ialah huruf dengan cetak
tebal, miring dan garis bawah. Elemen-elemen HTML yang dikategorikan
sebagai karakter fisik diantaranya adalah:

55
 <B>…..</B>: Digunakan untuk menciptakan efek cetak tebal pada
karakter tertentu
 <I> …..</I>: Digunakan untuk menciptakan efek cetak miring pada
karakter tertentu
 <U>….</U>: Digunakan untuk menciptakan efek garis bawah pada
karakter tertentu
 <BIG>…</BIG>: Digunakan untuk memperbesar teks
 <SMALL>…</SMALL>: Digunakan untuk memperkecil teks
 <SUB>…</SUB>: Digunakan untuk membuat teks subscript
 <SUP>…</SUP>: Digunakan untuk membuat teks superscript

Di bawah ini akan diberikan contoh penggunaan efek karakter fisik

tersebut dalam konteks dokumen HTML:

<html>
<h2>Karakter fisik </h2>
<b>teks akan dicetak tebal</b><br>
<i>teks akan dicetak miring</i><br>
<u>teks akan dicetak dengan garis bawah </u><br>
<big>teks akan diperbesar </big><br>
<small>teks akan diperkecil </small>
AX²+BX<br>
H₂O
</html>

Simpanlah file di atas dengan nama efek.html

56
 Gambar 4.12. Memformat Teks

Efek karakter fisik lain digunakan untuk menentukan ukuran suatu teks,
yaitu <FONT>… </FONT>. Elemen FONT menyediakan atribut SIZE yang
mempunyai nilai dari 1 sampai 7. Nilai 1 digunakan untuk membuat teks
dengan ukuran yang paling kecil, sedang nilai 7 digunakan untuk
membuat teks dengan ukuran paling besar. Nilai baku ukuran font adalah
3.

Di bawah ini diberikan contoh dan penulisannnya dalam konteks dokumen

HTML.

<html>
<h2> Ukuran huruf </h2>
<font size=1> ukuran huruf 1</font><br>
<font size=2> ukuran huruf 2</font><br>
<font size=3> ukuran huruf 3</font><br>
<font size=4> ukuran huruf 4</font><br>
<font size=5> ukuran huruf 5</font><br>
<font size=6> ukuran huruf 6</font><br>
<font size=7> ukuran huruf 7</font><br>

57
 </html>

Simpanlah file di atas dengan nama font.html

Gambar 4.13. Menampilkan Ukuran Huruf

4.8 Menambahkan Efek Karakter Logika

4.8.1 Menggunakan Heading
Heading adalah sekumpulan kata atau file frase yang menjadi judul atau
subjudul dalam suatu dokumen HTML. HTML menyediakan enam buah
tingkat heading. Heading level 1 biasanya merupakan judul yang penting
atau judul utama, sedangakan heading level berikutnya merupakan
bagian atau sub judul dari judul utama. Dalam menuliskan heading,
sebaiknya kita membuatnya sesuai dengan urutan level heading, sehingga
judul dan sub judul dokumen anda terlihat seperti outline yang jelas serta
dengan urutan yang konsisten. Untuk menyatakan heading, digunakan
tag <Hx> dimana x merupakan nomor level heading dari 1 sampai 6,
sedangkan untuk mengakhirinya digunakan tag akhir </Hx>. Berikutnya
ini adalah contoh penggunaan heading level 1 sampai 6. Kegunaan
58
Heading ialah untuk membuat penekanan yang biasanya ditempatkan
sebagai judul suatu halaman agar nampak lebih menonjol jika
dibandingkan dengan bagian teks-teks yang lainnya..

Di bawah ini diberikan contoh penggunaannya dalam dokumen HTML.

<html>
<h1>Menggunakan Header</h1>
<h3>judul utama </h3>
<h4>sub judul </h4>
<p> uraian isi halaman </p>
</html>

Maksud dokumen di atas ialah sebagai berikut: Kata “Judul Utama”

merupakan heading utama; sedang kata “Sub Judul” merupakan sub
heading; dan kata “Uraian isi halaman” merupakan paragraf. Penggunaan
heading memerlukan tag yang berpasangan, yaitu <Hx>Heading</Hx>.

Simpan file tersebut dengan nama file header.html.

Gambar 4.14. Menggunakan Heading

59
4.8.2 Penekanan terhadap Karakter, Huruf, atau Kalimat Tertentu
Ada kalanya kita perlu memberikan penekanan pada karakter, huruf, atau
kalimat tertentu selain menggunakan penekanan cetak tebal atau miring.
Penekanan tersebut berupa tag <EM> … </EM> dan <STRONG> …..
</STRONG>.
Contoh penggunaan dalam konteks dokumen HTML sebagai berikut:

<html>
<h1>Penekanan Kalimat</h1>
<em>kalimat pertama yang diberi penekanan </em>
<strong> kalimat kedua yang diberi penekanan </ strong >
</html>

Tulisan di atas mempunyai maksud, yaitu “Kalimat pertama yang diberi

penekanan” akan dicetak miring atau sama dengan <I> dan “Kalimat
kedua yang diberi penekanan” akan dicetak tebal atau sama dengan
<B>.

Simpan file tersebut dengan nama file penekanan.html.

Gambar 4.15. Output penekanan pada karakter

60
4.8.3 Menempatkan Kutipan
Untuk menempatkan suatu kutipan dari sumber lain di dokumen anda
perlu menggunakan tag <CITE> …</CITE>. Contoh misalnya anda ingin
mengutip suatu pandangan dari orang lain seperti di bawah ini:

<html>
<h1>Kutipan</h1>
<p>
<cite>
Mario Teguh (2012:5)
Cobaan hidup terjadi karna tuhan punya alasan yg tepat untuk
kamu, jangan berhenti dan menyerah, kamu harus terus
melangkah
</cite >
</p>
<p>
<cite>
Tinggalkanlah kesenangan yang menghalangi pencapaian
kecemerlangan hidup yang diidamkan. Dan berhati-hatilah,
karena beberapa kesenangan adalah cara gembira menuju
kegagalan
</cite>
</p>

Simpan file tersebut dengan nama file citation.html

61
 Gambar 4.16. Menampilkan kutipan

4.9 Tag Table , Elemen dan Atribut

Ketika anda ingin menampilkan data dalam bentuk kolom dan baris maka
diperlukan table. Sebelum adanya CSS, table digunakan untuk membuat
layout website namun saat ini sudah jarang dipakai sebagai layout karena
faktor file yang cenderung lebih besar sehingga mempengaruhi waktu
akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih
rumit karena banyaknya tag-tag yang dihasilkan.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu Table,
TR dan TD. Tag <table> adalah untuk membuat tabel kemudian di ikuti
dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel
kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel,
kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu
sebagai lokasi dimana kita memasukkan data-data yang akan di
tampilkan.
Table dalam dokumen HTML digunakan pula untuk mengontrol tampilan
informasi yang ada dalam sebuah halaman web dan table juga dapat
digunakan untuk menampilkan record-record pada database.
62
Untuk menampilkan table, perintah dasar yang digunakan adalah
menggunakan tag sebagai berikut:
<TABLE></TABLE>

4.9.1 Table Border

Salah satu atribut dalam tabel ialah border yang digunakan untuk
menentukan ketebalan garis batas luar table. Nilai border dimulai dari 1,
2, 3 dan seterusnya. Semakin nilainya besar, maka garis batas luar
semakin tebal. Di bawah ini diberikan contoh untuk penulisan atribut
border.

<HTML>
<HEAD>
<TITLE> Border </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2>
<TR><TD>
Tabel 1 baris, 1 kolom dengan border 2
</TD></TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file table1.html

Gambar 4.17. Menampilkan table 1 kolom 1 baris

63
4.9.2 Cellspacing
Atribut berikutnya ialah cellspacing yang digunakan untuk menentukan
jumlah spasi antar sel dan border. Nilai cellspacing dimulai dari 1, 2, 3
dan seterusnya. Semakin nilainya besar, maka ruangan sel makin lebar.
Di bawah ini diberikan contoh untuk penulisan atribut cellspasing.

<HTML>
<HEAD>
<TITLE> Cellspacing </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2 CELLSPACING=3>
<TR><TD>
Tabel 1 baris, 1 kolom dengan border 2, dan cellspacing 3
</TD></TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file table2.html

Gambar 4.18. Menampilkan table 1 kolom 1 baris, border 2,

cellspacing 3

64
4.9.3 Cellpadding
Atribut berikutnya ialah cellpadding menentukan jumlah spasi antara
data dalam cell dan border cell.. Dalam tag table, ada tiga tag yang
mendefinisikan header, row, dan cells. Tag-tag tersebut adalah table
header <TH>, table row <TR>, dan table data <TD>. Di bawah ini
diberikan contoh untuk penulisan atribut cellpadding

<html>
<head>
<title> cellpadding </title>
</head>
<body >
<table border=1 cellspacing=5 cellpadding=3>
<tr><td> baris 1, kolom 1</td>
<td> baris 1, kolom 2</td>
</tr>
<tr><td> baris 2, kolom 1</td>
<td> baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Simpan dengan nama file cellpading.html

Gambar 4.19. Menampilkan Cellpadding

65
4.9.4 Width
Atribut selanjutnya ialah width yang digunakan untuk menentukan
kelebaran table di layar monitor. Ukuran lebar ditentukan dengan
menggunakan pixel. Di bawah ini diberikan contoh untuk penulisan atribut
width.

<html>
<head>
<title> width </title>
</head>
<body >
<table border=2 cellspacing=3 cellpadding=3 width=100%>
<tr><td>
Baris , Kolom 1, border 2, cellspacing 3, cellpadding 3 dan
width sebesar 100%
</td></tr>
</table>
</body>
</html>

Simpan dengan nama file width.html

Gambar 4.20. Menampilkan Tabel dengan Width

66
4.9.5 Align
Atribut selanjutnya ialah align yang digunakan untuk mengatur tampilan
teks di posisi kiri (left), tengah (center), atau kanan (right). Di bawah ini
diberikan contoh untuk penulisan atribut align.

<html>
<head>
<title> align </title>
</head>
<body >
<table border=2 cellspacing=3 cellpadding=3 width=100%>
<tr><td align="center">
Baris 1 Kolom 1, Border 2, cellspacing 3, cellpadding 3 dan
width sebesar 100%
Teks akan ditampilkan rata tengah
</td></tr>
</table>
</body>

Simpan dengan nama file table_align.html

Gambar 4.21. Menampilkan Teks dengan align

4.9.6 Table Row

Elemen dalam tag table berupa table row berfungsi untuk menandai awal
tiap baris pada tabel. Tabel row mempunyai atribut-atribut diantarnya
67
ialah align, valign, bgcolor, bgcolordark, dan bgcolorlight. Di bawah ini
diberikan contoh untuk penulisan elemen table row.

<html>
<head>
<title> Baris dalam tabel</title>
</head>
<body >
<table border=2 cellspacing=3 cellpadding=3 width=100%
bordercolor="navy">
<tr><th colspan=2>
MATA KULIAH </th>
</tr>
<tr><td>1<td>Algoritma Pemrograman </td></tr>
<tr><td>2<td>Kewirausahaan (Entrepreneur) </td></tr>
<tr><td>3<td>Aplikasi IT-1</td></tr>
</table>
</body>
</html>

Simpan dengan nama file table_row.html

Gambar 4.22. Menggunakan Table Row

68
4.9.7 Table Header
Elemen table header berfungsi sama seperti elemen table data <TD>,
tetapi elemen table header ditampilkan dalam suatu font cetak tebal dan
ditampilkan ditengah cell. Di bawah ini diberikan contoh untuk penulisan
elemen table header.

<html>
<head>
<title> Table Header </title>
</head>
<body >
<table border=1 cellspacing=5 cellpadding=5 width=100%
align=center
bordercolor=#3300cc>
<tr><th>NO</th>
<th>MATAKULIAH</th>
<th>NILAI</th>
</tr>
<tr><td>1</td>
<td>Aplikasi E-Commerce</td>
<td>75</td>
</tr>
<tr><td>2</td>
<td>Pemrograman Mobile</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Simpan dengan nama file table_header.html

69
 Gambar 4.23. Menggunakan Table Header

4.9.8 ROWSPAN, COLSPAN, ALIGN, VALIGN

Selain table header ada elemen table data lain yang digunakan untuk
menandai awal dan akhir dari tiap sel didalam tabel. Atribut–atribut untuk
elemen table data diantaranya adalah ROWSPAN, COLSPAN, ALIGN, dan
VALIGN.

4.9.8.1 COLSPAN
Atribut COLSPAN digunakan untuk menentukan jumlah kolom yang akan
ditarik atau di merger dalam sel. Sebagai contoh, jika diberi nilai 2, maka
akan Menghasilkan bagian header dengan dua baris yang berisi dua sel
dan dua kolom yang berisi dua sel juga.

<html>
<head>
<title> Colspan </title>
</head>
<body >

70
 <table border=2>
<tr><th colspan=2> DAFTAR NAMA KOTA</th></tr>
<tr><td>BANDUNG</td><td>JAKARTA</td></tr>
<tr><td>CIREBON</td><td>GARUT</td></tr>
</table>
</body>
</html>

Simpan dengan nama file table_colspan.html

Gambar 4.24. Menggunakan Colspan

4.9.8.2 ROWSPAN
Atribut ROWSPAN digunakan untuk menentukan jumlah baris yang akan
ditarik atau demerger dalam sel. Sebagai contoh, jika ROWSPAN diberi
nilai 2, maka sel dua baris akan dihasilkan dalam satu tabel. Contoh
penggunaannnya seperti di bawah ini:

<html>
<head>
<title> Rowspan </title>
</head>
<body>
<table border=1>
<tr><th colspan=2> DAFTAR BUAH-BUAHAN</th></tr>

71
 <tr><td rowspan=2>BUAH
TUNGGAL</td><td>JERUK</td></tr>
<tr><td>MENTIMUN</td></tr>
<tr><td rowspan=2>BUAH
GANDA</td><td>SIRSAK</td></tr>
<tr><td>MURBAI</td></tr>
<tr><td rowspan=2>BUAH
MAJEMUK</td><td>NANAS</td></tr>
<tr><td>JAGUNG</td></tr>
</table>
</body>
</html>

Simpan dengan nama file table_rowspan.html

Gambar 4.25 Menggunakan Rowspan

72
LATIHAN 4.1

Dengan menggunakan perintah table yang telah dijelaskan sebelumnya,

buat sebuah halaman untuk menampilkan table berikut

Gambar 4.26.Menampilkan Table Penjualan Barang

73
4.10 Membuat Daftar (List)
Daftar atau list diperlukan untuk menampilkan informasi yang bersifat
berurutan dan biasanya ditampilkan dalam bentuk daftar. HTML
menyediakan beberapa tipe daftar, yaitu: Daftar tanpa nomor atau
unordered list atau disebut juga bulleted list; daftar dengan nomor atau
ordered list atau disebut juga numbered list; dan daftar untuk definisi
atau disebut juga sebagai definition list

4.10.1. UL
Bagian pertama ini akan diberikan contoh penggunaan daftar tanpa
nomor yang dapat dibuat dengan cara sebagai berikut: Tag untuk
membuat daftar dalam bentuk bullet atau unorder list dimulai dengan
<UL>; kemudian untuk menampilkan daftar butir-butir yang diinginkan
digunakan perintah <LI> dan untuk mengakhiri pembuatan daftar
ditutup dengan </UL>.
Contoh penggunaannya di bawah ini:

<html>
<head>
<title>Daftar bullet</title>
<head>
<body>
Membuat list
<ul>
<li> Daftar pertama
<li> Daftar kedua
<li> Daftar ketiga
<li> Daftar keempat
</ul>
</body>
</html>

74
Unordered List yang disebut juga sebagai bulleted list, mempunyai tanda
bullet default berupa noktah. Simpanlah file di atas dengan nama
list1.html

Gambar 4.27 Menampilkan Unorder List

4.10.2. OL
Bagian kedua ini akan diberikan contoh penggunaan daftar yang
menggunakan nomor atau disebut juga sebagai ordered list. Cara
membuat daftar seperti ini ialah dengan menggunakan tag awal <OL>;
kemudian untuk menampilkan daftar butir-butir yang diinginkan
digunakan perintah <LI> dan untuk mengakhiri ditutup dengan </OL>
Contoh penggunaannya seperti di bawah ini::

<html>
<title>Daftar angka</title>
</head>
<body>
Membuat list
<ol>
<li>Satu
<li>Dua

75
 <li>Tiga
<li>Empat
</ol>
<body>
</html>

Simpanlah file di atas dengan nama list2.html

Gambar 4.28 Menampilkan OrderList

Kita dapat mengubah pembuatan daftar menggunakan nomor atau

ordered list dengan menggunakan model yang lain, yaitu dengan cara
menambahkan atribut type<OL> tersebut. Di bawah ini adalah tipe-tipe
lain yang digunakan:

Tipe Keterangan
1 Daftar berupa angka 1,2,3 dst
I Daftar berupa huruf Romawi besar
i Daftar berupa huruf Romawi kecil
A Daftar berupa abjad dengan huruf besar
a Daftar berupa abjad dengan huruf kecil

Di bawah ini diberikan contoh penggunaannya:

76
 <HTML>
<TITLE>Tipe</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>Tipe Huruf Romawi Besar
</OL>
<OL type=i>
<LI> Tipe Huruf Romawi Kecil
</OL>
<OL type=A>
<LI> Tipe Abjad Menggunakan Huruf Besar
</OL>
<OL type=a>
<LI> Tipe Abjad Menggunakan Huruf Kecil
</OL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama list3.html

Gambar 4.29 Menggabungkan List

77
4.10.3. DD, DL & DT
Bagian ketiga diberikan contoh pembuatan daftar definisi atau disebut
definition list yang menggunakan tag<DL>) yang terdiri dari definition
term dengan tag<DT>, dan definition definition dengan tag<DD>.
Contoh penggunaanya seperti di bawah ini:

<HTML>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<DL>
<DT>GATEWAY
<DD>Gateway adalah sebuah perangkat yang digunakan
untuk menghubungkan satu jaringan komputer dengan satu
atau lebih jaringan komputer yang menggunakan protokol
komunikasi yang berbeda sehingga informasi dari satu jaringan
computer dapat diberikan kepada jaringan komputer lain yang
protokolnya berbeda.
<DT>ROUTER
<DD>Router merupakan perangkat jaringan yang bekerja
pada OSI Layer 3, Network Layer. Pada layer ini sudah dikenal
pengalamatan jaringan menggunakan IP Address, dan router
ini berperan penting sebagai penghubung/penerus paket data
antara dua segmen jaringan atau lebih
</DL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama definisi_list.html

78
 Gambar 4.30. Daftar Definisi

4.10.4. Nested List

Bagian keempat diberikan contoh pembuatan nested list merupakan suatu
daftar yang terdiri dari daftar utama yang diikuti dengan sub-daftar dan
yang kemudian dapat diikuti dengan sub-sub daftar lagi. Untuk membuat
nested list kita dapat menggunakan unordered list atau ordered list
serta dapat juga menggabung unordered list dengan ordered list. Contoh
nested list dengan menggunakan unordered list

<HTML>
<HEAD>
<TITLE>Nested List Unordered List</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Bagian Pertama
<UL>
<LI> Sub bagian pertama
<UL>
<LI> Sub sub bagian pertama
<LI> Sub sub bagian pertama
<LI> Sub sub bagian pertama
</UL>
<LI> Sub bagian kedua
<LI> Sub bagian ketiga

79
 </UL>
<LI> Bagian Kedua
<UL>
<LI> Sub bagian kedua 1
<LI> Sub bagian kedua 2
</UL>
<LI> Bagian Ketiga
</UL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama list4.html

Gambar 4.31 Nested List Tidak berurutan

Bagian kelima ialah penggunaan nested list dengan ordered list

<HTML>
<HEAD>
<TITLE>Nested List Ordered List </TITLE>
</HEAD>
<BODY>
<OL>
<LI> Bagian Pertama
<OL>

80
 <LI> Sub Bagian Pertama
<OL>
<LI> Sub Sub Bagian Pertama 1
<LI> Sub Sub Bagian Pertama 2
<LI> Sub Sub Bagian Pertama 3
</OL>
<LI> Sub Bagian Kedua
<LI> Sub Bagian Ketiga
</OL>
<LI> Bagian Kedua
<OL>
<LI> Subpoint 1
<LI> Subpoint 2
</OL>
<LI> Bagian Ketiga
</OL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama list5.html

Gambar 4.32 Nested List Berurutan

81
Bagian keenam adalah nested list dengan menggunakan gabungan antara
unordered list dan ordered list

</OL>
<HTML>
<HEAD>
<TITLE>Gabungan Nested List </TITLE>
</HEAD>
<BODY>
<UL TYPE=disk>
<LI>Daftar Merk Handphone
<OL TYPE=1>
<LI>Nokia
<LI>Samsung
</OL>
<LI>Daftar Stasiun TV
<OL TYPE=A>
<LI>TVRI
<LI>RCTI
<LI>TRANS
</OL>
<LI>Daftar Merk Sepeda Motor
<OL TYPE=a>
<LI>Honda
<LI>Yamaha
</OL>
</UL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama list6.html

82
 Gambar 4.33 List Gabungan
Bagian ketujuh ialah daftar menu yang digunakan untuk menampilkan
daftar dalam bentuk menu yang akan dipilih oleh pengguna. Untuk
membuat daftar menu digunakan tag<MENU> ...</MENU>.

<HTML>
<HEAD>
<TITLE>Daftar Menu </TITLE>
</HEAD>
<H2> Daftar Jenis Perguruan Tinggi </H2>
<MENU>
<LI>Universitas
<LI> Sekolah Tinggi
<LI> Institut
<LI> Politeknik
<LI> Akademi
</MENU>
</HTML>

Simpanlah file di atas dengan nama list7.html

83
 Gambar 4.34 Daftar Menu

84
LATIHAN 4.2.

Dengan menggunakan perintah LIST yang telah dibahas sebelumnya,

buatlah halaman web, untuk menampilkan halaman berikut:

Gambar 4.35. Latihan Menggunakan List

4.11 Menggunakan Perintah MARQUEE

Untuk membuat tulisan atau gambar agar dapat bergerak dapat dilakukan
dengan menggunakan perintah MARQUEE, perintah ini mempunyai empat
nilai yaitu:
 <marquee direction=left> Untuk membuat tulisan berjalan ke arah
kiri
 <marquee direction=right>Untuk membuat tulisan berjalan ke
arah kanan
 <marquee direction=up> Untuk membuat tulisan naik ke arah atas

85
  <marquee direction=down> Untuk membuat tulisan turun ke arah
bawah.
Atribut-atribut lainnya ialah:
 <Marquee scrolldelay=’x’> untuk mengatur kecepatan gerak huruf
yang dijalankan., misalnya <MARQUEE SCROLLDELAY=’300’>
 <Marquee behavior=’x’> untuk mengatur bentuk gerakan,
misalnya <Marquee behavior=’alternate’>
Contoh perintah marquee dalam konteks halaman web, seperti di bawah
ini:

<HTML>
<HEAD>
<TITLE>marquee1</TITLE>
</HEAD>
<BODY>
<marquee direction="left">Selamat datang di Web
saya</marquee>
<br>
<marquee direction="right">Selamat Datang di Web saya
</marquee></font>
<br>
<marquee direction="left" behavior="alternate">Selamat
Datang di Web saya </marquee></font>
<br>
<marquee direction="left" scrolldelay=500>Selamat Datang di
Web saya </marquee>
</BODY>
</HTML>

Simpanlah file di atas dengan nama marquee.html

86
Untuk membuat MARQUEE dengan arah keatas / UP atau ke bawah /
Down, maka ruangan dimana teks akan dibuat usahakan berada dalam
tabel dengan panjang dan lebar tertentu.

Gambar 4.36. Menampilkan Teks dengan Marquee

4.12 Menambahkan Obyek-Obyek Multimedia

Kadang kita menginginkan dokumen HTML kita ditambah dengan berbagai
obyek multimedia, yaitu obyek-obyek yang terdiri dari citra atau gambar,
suara dan video; untuk itu pada bagian ini akan diberikan contoh
bagaimana cara menambahkan obyek-obyek tersebut di dalam html.

4.12.1.Menambahkan Video
Apabila anda ingin menampilkan video pada halaman website yang
dibuat, anda dapat melakukannya dengan menggunakan printah berikut:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Simpanlah file di atas dengan nama video.html

87
Simpan file video dan program html anda dalam satu folder yang sama.

Gambr 4.37.Menampilkan Video

4.12.2.Menambahkan Suara
Selain video anda juga dapat menambahkan suara pada halaman HTML.
Berikut adalah contoh bagaimana memasukan file suara tersebut.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Simpanlah file di atas dengan nama sound.html, File Suara dan File
program html harus disimpan pada folder yang sama

88
 Gambr 4.38.Menampilkan Video

4.12.3.Menambahkah Background suara

Dengan menggunakan html, memungkin bagi anda, apabila ingin
menambahkan suara yang tampil ketika sebuah halaman sedang dibuka.

<audio autoplay id="bgsound">

<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.mp4" type="audio/mp4">
<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.oga" type="audio/ogg; codecs=vorbis">
<p>Your user agent does not support the HTML5 Audio
element.</p>
</audio>
<button
type="button"onclick="document.getElementById('bgsound').p
ause();">
Stop background sound
</button>

89
4.13 Membuat Formulir
Untuk mendapatkan unpan balik dari pengunjung website, biasanya
dalam sebuah halaman website perlu ditambahkan fasilitas untuk
mengirimkan data yang berbentuk form masukan.
Penggunaan form yang hanya menggunakan HTML saja tidak akan terlalu
berguna. Form biasanya hanya berupa interface yang disediakan untuk
mengumpulkan data dari user, dan akan diproses dengan bahasa
pemograman web seperti JavaScript atau PHP, dan disimpan di dalam
database MySQL
Perintah atau tag yang digunakan adalah <FORM> dan diakhiri tag
</FORM>, field-field yang berada diantaranya digunakan untuk
menentukan ukuran dan jenis dari masing-masing input field.
Berikut ini dibahas beberapa elemen yang dapat disertakan dalam suatu
form.
Elemen input menentukan informasi pengguna; sedang atribut-atribut
untuk tag input diantaranya:
 Checked digunakan untuk checkboxes dan radio button, atribut ini
dapat ditentukan nilai TRUE (checked) atau unchecked / false.
 Maxlength digunakan untukmenentukan jumlah maximum
karakter yang dapat dimasukkan dalam suatu textbox.
 Name digunakan untuk menentukan nama form control. Hal ini
digunakan untuk menentukan elemen data pada form ke resource
yang memproses elemen ini.
 Size digunakan untuk menentukan ukuran form control. Ini dapat
berupa nilai tunggal yang menentukan lebar kontrol dalam
karakter, atau dalam pasangan lebar dan panjang.
 Src digunakan untuk menentukan gambar yang akan ditampilkan
dengan kontrol.
 Type digunakan untuk menentukan jenis control yang akan
digunakan.

90
  Select digunakan untuk menandai awal dan akhir dari data dalam
suatu list box atau suatu daftar pilihan drop-down.
 Option digunakan untuk membentuk masing-masing pilihan dalam
text box atau list box.

4.13.1.Perintah Form
Untuk membuat Form atau Formulir ada beberapa objek yang
sering dipakai diantaranya adalah:
 Objek Text
 Objek Radio
 Objek Checkbox
 Objek Select
 Objek Textarea

Contoh Formulir html untuk memasukan data mahasiswa

<HTML>
<HEAD>
<TITLE>form data mahasiswa
</TITLE>
</HEAD>
<BODY>
<h2>
<b>Form Data Mahasiswa<br></b></font>
<form name=form>
<hr>
<table>
<tr><td>Nama anda<td>: <input type=text name="nama"
size=20>
<tr><td>Jenis kelamin<td>:<input type="radio"
name="kelamin" value=Pria>pria <input type="radio"
name="kelamin" value=Wanita>wanita
91
 <tr><td>Hoby <td>:<input type="checkbox" name="musik"
value=Musik>musik
<tr><td><td>:<input type="checkbox" name="jalan"
value=Jalan>jalan
<tr><td><td>:<input type="checkbox" name="baca"
value=Baca>baca
<tr><td>Agama <td>: <select size="1" name="agama">
<option>Islam</option>
<option>Budha</option>
<option>Hindu</option>
<option>Kristen</option>
</select>
<tr><td>Asal sekolah<td> : <input type="text"
name="asalsma" size="35">
<tr><td>Keterangan<td>: <textarea name="keterangan"
cols=40 rows=5> </textarea>
</table>
<hr>
<input type=submit value=Kirim><input type=reset>
</form>
</BODY>
</HTML>

Simpanlah file di atas dengan nama form1.html

92
 Gambr 4.39. Membuat Form Masukan

4.13.2. Method POST and GET

Method POST dan Method GET adalah method yang digunakan dalam
halaman html untuk mengirimkan parameter/data dari halaman masukan
ke halaman keluaran.
Ada perbedaan antara methode pengiriman menggunakan method GET
dan POST, jika dengan Method GET maka parameter akan ditampilkan di
URL. Sedangkan kalau POST tidak ditampilkan di URL. Untuk data yang
banyak biasanya digunakan POST atau data yang tidak ingin dilihat
misalkan data untuk login, yang dikirimkan username dan password,
jika menggunakan GET maka username dan passwordnya bisa terlihat
sehingga untuk login autentifikasi digunakan method POST.

93
Berikut adalah contoh bagaimana menangani data yang dikirim dari
halaman html kemudian diproses dengan menggunakan bahasa lain yang
misalnya dengan javascript ataupun dengan bahasa PHP.
A.Penanganan Form dengan Java Script
Untuk menangani proses masukan Form menggunakan Java Script
dengan menggunakan method POST dan Method GET dapat dilakukan
dengan cara seperti berikut:
masuk_nama.html

<html>
<form name=form method=post>
<script>
function proses()
{
var nama=document.form.namaanda.value;
alert("Nama Anda :"+nama);
}
</script>
<h2>Contoh Masuk Data </h2>
<hr>
Nama anda : <input type="text" name="namaanda">
<input type="button" value=Proses onclick=proses()>
</form>

Simpanlah file di atas dengan nama masuk_nama.html

94
 Gambr 4.40. Menangani Form dengan JavaScript

B.Penanganan Form dengan PHP

Untuk menangani proses masukan Form menggunakan PHP sebelumnya
dikomputer Anda harus sudah terpasang Web Server dangan PHP
Scripting yang sudah terinstall. Anda dapat menggunakan software
XAMPP yang tersedia secara gratis dan dapat di download di
http://www.apachefriends.org/en/xampp-windows.html.

1.Menggunakan Method POST

Untuk menangani proses pemasukan menggunakan method POST dapat
dilakukan dengan contoh kode seperti berikut:
masuk_nama2.html

<html>
<form action="proses.php" method=post>
<h2>Contoh Masuk Data </h2>
<hr>
Nama anda : <input type="text" name="namaanda">
<input type="submit" value=Proses>
</form>

95
Simpanlah file di atas dengan nama masuk_nama2.html

Gambr 4.41. Form Masuk Data

Sedangkan untuk menangani Action pemasukan data tersebut, maka

dapat ditangani dengan menggunakan kode program berikut:
Proses.php

<?php
$namaanda = $_POST["namaanda"];
echo "Halo Nama Anda : " . $namaanda; //atau print $data
?>

Simpanlah file di atas dengan nama proses.php

Gambar 4.42 Menangani Form dengan PHP Method POST

96
2.Menggunakan Method GET
Untuk menangani proses pemasukan menggunakan method GET dapat
dilakukan dengan contoh kode seperti berikut

<html>
<form action="proses2.php" method=GET>
<h2>Contoh Masuk Data </h2>
<hr>
Nama anda : <input type="text" name="namaanda">
<input type="submit" value=Proses>
</form>

Simpanlah file di atas dengan nama masuk2.html

Gambar 4.43 Form Masukan dengan Method GET

Sedangkan untuk menangani Action pemasukan data tersebut, maka

dapat ditangani dengan menggunakan kode program berikut

<?php
$namaanda = $_GET["namaanda"];
Echo "Halo Nama Anda : " . $namaanda; //atau print $data
?>

97
Simpanlah file di atas dengan nama proses2.php

Gambar 4.44 Menangani Form dengan PHP Method GET

98
C.Menangani beberapa Objek Dalam Form
Untuk lebih memahami lagi bahasan mengenai Form dan Objek yang
digunakan dalam pembuatan Formulir, berikut akan diberikan contoh
masukan dengan beberapa objek dan cara penangananya dalam PHP

<HTML>
<h2><b>Form Registrasi Kuliah Online<br></b></font>
<form action="registrasi.php" method="post">
<hr>
<table>
<tr><td>Nama anda<td>: <input type=text name="nama"
size=30>
<tr><td>Username<td>: <input type=text name
="username" size=20>
<tr><td>Password<td>: <input type=password name
="password" size=20>
<tr><td>E-Mail<td>: <input type=text name ="email"
size=30>
<tr><td>Jenis kelamin<td>: <input type="radio"
name="kelamin" value=Pria>pria <input type="radio"
name="kelamin" value=Wanita>wanita
<tr><td>Hoby <td>: <input type="checkbox" name="musik"
value=Musik>musik
<tr><td><td>: <input type="checkbox" name="jalan"
value=Jalan>jalan
<tr><td><td>: <input type="checkbox" name="baca"
value=Baca>baca
<tr><td>Jurusan <td>: <select size="1" name="jurusan">
<option>Informatika</option>
<option>Akuntansi</option>
<option>Manajemen</option>

99
 <option>Keuangan</option>
</select>
<tr><td>Keterangan<td> : <textarea name="keterangan"
cols=40 rows=5></textarea>
</table>
<hr>
<input type=submit value=kirim><input type=reset>
</form>
</HTML>

Simpanlah file di atas dengan nama form_mahasiswa.html

Gambar 4.45 Form dengan berbagai objek

100
Untuk menangani beberapa objek yang dikirm dari halaman HTML
kedalam PHP, dapat dilakukan dengan cara seperti berikut:

<HTML>
<h3>Output Registrasi
<hr>
<table>
<?php
echo "<tr><td>Nama Anda<td>".$_POST["nama"];
echo "<tr><td>Username<td>".$_POST["username"];
echo "<tr><td>Password<td>".$_POST["password"];
echo "<tr><td>E-Mail<td>".$_POST["email"];
echo "<tr><td>Kelamin<td>".$_POST["kelamin"];
echo "<tr><td>Hoby<td>".$_POST["musik"].
$_POST["jalan"]. $_POST["baca"];
echo "<tr><td>Jurusan<td>".$_POST["jurusan"];
echo
"<tr><td>Keterangan<td>".$_POST["keterangan"];
?>
</HTML>

Simpanlah file di atas dengan nama registrasi.php

101
 Gambar 4.46.Output Registrasi

102
LATIHAN 3

Buat Form Untuk memasukan Data KTP atau Data Kartu Mahasiswa Anda,
dengan proses menggunakan Java Script atau Menggunakan PHP.

103
4.14 Membuat Link
Agar antar halaman dalam suatu web site dapat saling dihubungkan; kita
dapat menambahkan suatu penghubung/link dihalaman tertentu dengan
menggunakan perintah <A HREF=”…”>…. </A>. Untuk menambahkan
link dapat dilakukan dengan cara sebagai berikut.

<html>
<title>Link </title>
<p> Halaman pertama</p>
<center>
<a href="Halaman2.html">ke Halaman Dua</A>
</center>
</body>
</html>

Simpanlah file di atas dengan nama halaman1.html.

Kemudian buat file kedua dengan nama halaman2.html seperti berikut:

<html>
<p> Halaman Kedua</p>
<a href="Halaman1.html">ke Halaman Satu</a><br>
</html>

Gambar 4.47 Membuat Link dari halaman 1 ke Halaman 2

104
 Gambar 4. 48 Membuat Link dari halaman 2 ke Halaman 1

Berikut adalah contoh beberapa penulisan link yang lain,

<html>
<head>
<title>Contoh Membuat Hyperlink</title>
</head>
<p>Berikut ini Adalah Contoh Penulisan Hyperlink</p>
<a href="http://www.detik.com/">Link ini</a> akan
membawa anda ke Website berita detik.com
<p>Jika Anda Menghendaki agar Link dibuka pada jendela
browser yang baru:
<a href="http://www.unikom.ac.id/" target="_blank">Website
Unikom</a></p>
<p>Agar hyperlink tidak bergaris bawah:
<a href="http://kuliahonline.unikom.ac.id/"target="_blank"
style="text-decoration: none">Kuliah Online</a></p>

105
 </html>

Simpanlah file di atas dengan nama link2.html

Gambar 4.49. Contoh Penulisan Link

4.14.1 Link Gambar

Untuk membuat hyperlink dengan menggunakan gambar (image) dapat
dilakukan dengan cara sebagai berikut:
1. Pastikan gambar tersebut berada pada folder yang sama dengan
dokumen html anda
2. Nama dan ektensi file harus diketahui, misalkan jika nama
gambar tersebut adalah googlelogo.png, maka :

<html>
<a href="http://www.google.com">
<img src="googlelogo.png" border="0" width="147"
height="31"></a>

Simpanlah file di atas dengan nama link_image.html

106
 Gambar 4.50. Link dengan menggunakan gambar

img merupakan atribut untuk suatu image (gambar), border adalah garis
yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi
dari image.

Menambah Title Pada Link

Untuk menampilkan informasi pada Link gambar, dapat dilakukan dengan

menambahkan attribute title

<html>
<a href="http://www.google.com" title="Klik gambar untuk
membuka google.com">
<img src="googlelogo.png" border="0" width="147"
height="31" align="left"></a>

107
4.14.2 Anchor
Untuk membuat link dalam halaman itu sendiri dapat digunakan hyperlink
dengan anchor, Anda dapat menggunakan Tag <a name=”tujuan”></a>
untuk memulai membuat anchor.
Misalnya pada bagian bawah kita beri perintah sebagai berikut:
<a href=”#top”>Jangkar untuk kembali ke atas</a>; maka bagian
dimana kita ingin tuju dengan link tersebut harus diberi perintah
pasangannya, yaitu <a name=”top”>Anchor</a>. Pada perintah awal
jangan lupa diberi tanda pagar (#) untuk mendahului nama lokasi yang
akan dituju. Di bawah ini akan diberikan contoh penggunaan anchor
tersebut.

<HTML>
<TITLE>Anchor</TITLE>
<BODY>
<h1 align="center"><a name="atas">Anchor</a></h1>
<p>Search engine adalah suatu mesin pencari yang berguna
untuk mencari informasi berdasarkan keyword tertentu
Secara umum suatu search engine bekerja dengan cara
mengirimkan spider untuk mencari
dokumen-dokumen sebanyak mungkin. Program lain sejenis
spider disebut juga sebagai indexer. </p>
<h1 align="center"><a name="indeks">Indexer</a></h1>
<p>Indexer bekerja dengan cara membaca dokumen-
dokumen yang ditemukan kemudian membuat index
didasarkan pada kata-kata (kunci)
yang ada disetiap dokumen tersebut.
Masing-masing search engine menggunakan proprietary
algorithm untuk menciptakan indeks-indeks tersebut yang
ditampilkan dalam bentuk hasil pencarian.
</p>

108
 <h1 align="center"><a name="internet">Sejarah
Internet</a></h1>
<p>
Sejarah Internet menunjukkan pertama kali alat pencari
dibuat pada tahun 1980 yang disebut sebagai "Archie".
Fungsi alat pencari ini untuk download file-file di server-
server anonymous FTP dan menciptakan data base yang
dapat dicari.
Pada tahun 1981 Gopher dibuat dan berfungsi untuk
melakukan index dokumen-dokumen teks sederhana.
Sedang search engine dalam World Wide Web pertama kali
dikembangkan oleh Matthew Gray pada tahun 1993 yang
disebut sebagai "Wandex"
</p>
<p>
<center>
<a href="#atas">Awal</a> | <a
href="#indeks">Indeks</a> | <a
href="#internet">Internet</a>
</center>
</BODY>
</HTML>

Simpanlah file di atas dengan nama anchor2.html

109
 Gambar 4.51 Membuat Anchor

110
LATIHAN 4

Dengan Menggunakan Perintah Link yang telah dibahas sebelumnya,

buatlah halaman seperti berikut:

Gambar 4.52.Design Halaman Utama

Gambar 4.53.Design Halaman Jurusan

111
 Gambar 4.54.Design Halaman Dosen

Gambar 4.55.Design Halaman Fasilitas

4.15 Membuat Frame

HTML mempunyai elemen yang berguna untuk menampilkan beberapa
halaman sekaligus pada layar komputer. Untuk keperluan tersebut kita
dapat menggunakan frame. Fungsi frame diantaranya ialah digunakan
untuk menampilkan halaman lain tanpa menghilangkan halaman menu
utama yang masih tetap dapat ditampilkan dilayar browser. Atribut-
atributnya diantaranya ialah:

112
1. <FRAMESET></FRAMESET>Elemen FRAMESET merupakan elemen
kelompok pengisi suatu frame. Pada perintah ini terdapat dua atribut
yaitu ROWS dan COLS. Tag ROWS berfungsi untuk menentukan
jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat
ditentukan dalam pixel, persen dengan menempatkan suatu % setelah
nilai, atau nilai relatif dengan menempatkan tanda asterisk (*) di
tempat nilai tersebut. Sedang tag COLS sebaliknya berfungsi unutk
menentukan jumlah spasi pada kolom.

2. <FRAME>Elemen FRAME menentukan properti setiap frame masing-

masing dalam frameset. Karena elemen ini tidak mengandung teks,
maka elemen tersebut tidak ada pasangan end-tag.

Atribut dari FRAME adalah sebagai berikut:

 Atribut SRC menunjuk spesifik kearah sumber URL untuk frame

tersebut.
 Atribut NAME digunakan untuk menentukan nama frame,
sehingga dapat berlaku sebagai target dari URLs lain.
 Atribut marginwidth untuk memungkinkan perancang halaman
menentukan lebar border frame dalam jumlah pixel.
 Atribut marginheight digunakan untuk menentukan tinggi margin.
 Srolling berfungsi untuk membuat scrolling bar. Setting untuk
atribut ini ialah YES, NO, dan AUTO.
 Atribut noresize digunakan mencegah pengguna untuk mengubah
ukuran frame karena aturan baku (default) memungkinkan kita
dapat mengubah ukuran frame.
 Atribut NOFRAMES akan mengabaikan data yang oleh browser
akan ditampilkan melalui frame, dan data tersebut dapat
ditampilkan oleh browser yang tidak mampu menampilkan frame.

113
4.15.1. RAMESET ROWS
Program berikut adalah contoh bagaimana membuat halaman dengan
pembagian baris (Rows)

Contoh Frame.html untuk membagi layar atas dan bawah

<frameset rows=50%,*>
<frame src="satu.html">
<frame src="dua.html">
</frameset>

Simpanlah file di atas dengan nama frame.html

Gambar 4.56. Frame 2 Baris

114
4.15.2.FRAMESET COLS
Program berikut adalah contoh bagaimana membuat halaman dengan
pembagian kolom (Cols)

Contoh frame2.html

<frameset cols=50%,*>
<frame src="satu.html">
<frame src="dua.html">
</frameset>

Gambar 4.57. Frame 2 Kolom

4.15.3.FRAMESET ROWS DAN COLS

Program berikut ini adalah contoh bagaimana membuat halaman dengan
pembagian baris (Rows) dan kolom (Cols)
Contoh frame3.html

<frameset rows=30%,*>
<frame src="satu.html">
<frameset cols=30%,*>
<frame src="dua.html">
<frame src="tiga.html">
</frameset>

115
 </frameset>

Simpanlah file di atas dengan nama frame3.html

Gambar 4.58. Frame 2 Baris, 2 Kolom

4.15.4.Membuka dua situs dalam frame

Program berikut ini merupakan program yang dipergunakan untuk
membuka situs yang mempunyai URL berbeda dalam dua frame.

<frameset cols="50%,50%">
<frame src="http://detik.com">
<frame src="http://vivanews.com">
</frameset>

Simpanlah file di atas dengan nama frame4.html

116
 Gambar 4.59. Membuka 2 Buah alamat website

Frame sebelah kiri digunakan untuk menampilkan halaman website

http://detik.com, sedangkan frame sebelah kanan digunakan untuk
menampilkan halaman website http://vivanews.com

4.15.5.IFRAME
Perintah IFRAME memungkinkan untuk membuat frame window yang
mengambang, Frame ini berfungsi seperti text box, jika kita
memerintahkan browser untuk melakukan scrolling maka frame internal
tersebut ini juga akan turut scrolling.

<iframe src="http://detik.com">
</iframe>
<iframe src="http://vivanews.com">
</iframe>

Simpanlah file di atas dengan nama iframe.html

117
 Gambar 4.60. Membuka 2 Buah alamat website dalam iframe

Untuk mengatur lebar dan tinggi iframe dapat dilakukan dengan cara
seperti berikut:

<iframe src="demo_iframe.htm" width="200" height="200">

</iframe>

118
4.15.6. Frame Navigasi
Frame navigasi berfungsi untuk membuat navigasi pemilihan menu atau
isi halaman-halaman web. Berikut contoh pemakaian 2 buah frame untuk
membuat navigasi menu, dihalaman sebelah kiri diisi dengan menu,
sedangkan halaman sebelah kanan diisi halaman pembuka yang nantinya
akan dijadikan target.

Frame_utama.html

<frameset cols=20%,*>
<frame src="fkiri.html">
<frame src="fkanan.html" name=kanan>
</frameset>

fkiri.html

<html>
MENU
<hr>
<a href="fkanan.html" target="kanan">HOME</a><br>
<a href="biodata.html" target="kanan">Biodata</a><br>
<a href="hoby.html" target="kanan">Hoby</a><br>
<a href="sekolah.html" target="kanan">Sekolah</a><br>
<hr>

fkanan.html

<html>
<Center>
<h1>Menggunakan Frame
<hr>

119
 Untuk Navigasi Menu
<hr>

biodata.html

<html>
<center>
<h1>BIODATA SAYA
<hr>
<table>
<tr><td>Nama<td>: Fahra Ragita
<tr><td>Alamat<td>: Jl.Gegerkalong Hilir 78
<tr><td>Telp<td>: 2000333

hoby.html

<html>
<center>
<h1>HOBY SAYA
<hr>
<table>
<tr><td>Musik<td>: Pop, Rok, Dangdut
<tr><td>Olah Raga<td>: Sepak Bola, Badminton, Lari

sekolah.html

<html>
<center>
<h1>SEKOLAH
<hr>

120
<table>
<tr><td>SD<td>: Sekolah Dasar Negeri Ciwaruga 1
<tr><td>SMP<td>: Sekolah Menengah Pertama Negeri 29
Bandung
<tr><td>SMA<td>: Sekolah Menengah Atas Negeri 20
Bandung
<tr><td>PERGURUAN TINGGI<td>: Universitas Komputer
Indonesia

Gambar 4.61. Membuat Navigasi Menu dan Link

121
LATIHAN 5

Anda adalah mahasiswa yang memiliki tugas untuk belajar dan

berwirausaha, sesuai dengan materi yang telah dibahas sebelumnya,
pada kesempatan ini, anda diminta untuk membangun sebuah website
mengenai pengembangan usaha atau bisnis baru yang ingin anda rintis
secara online.

122
 BAB 5
CASCADING STYLE SHEET

5.1 Pengertian CSS

CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet yang
digunakan untuk mengatur tampilan suatu website, baik tata letaknya,
jenis huruf, warna, dan semua yang berhubungan dengan tampilan. Pada
umumnya CSS digunakan untuk menformat halaman web yang ditulis
dengan HTML atau XHTML.

5.2 Cara Menuliskan CSS

Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web.
Cara yang pertama adalah dengan membuat CSS langsung didalam satu
file HTML kita (internal / inline style sheet). Cara yang kedua adalah
dengan cara memanggil CSS tersebut dari file CSS tersendiri (external
style sheet).

Cara pemakaian CSS ada 2 cara. Cara yang pertama adalah dengan
menggabungkan CSS langsung ke dalam satu file markup (internal), cara
yang kedua adalah dengan cara memanggil CSS tersebut (eksternal).

Contoh eksternal css

123
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Kalau memakai internal CSS semua kode CSS dan markup dimasukkan
dalam satu file yang sama, sedangkan jika memakai eksternalCSS
diperlukan link untuk menghubungkan keduanya.

Contoh internal css

Nama File:css1.html

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

5.2.1. Inline
Penulisan dengan cara Inline artinya bahwa code css tersebut dituliskan
langsung dibagian program yang sedang anda buat.
Nama File:css2.html

<html>
<head>
<title>bentuk inline</title>
</head>
<body bgcolor="#ffffff">

124
 <p id="cth1">kalimat ini tidak menggunakan format css</p>
<p id="cth2" style="font-size:20pt">kalimat ini menggunakan
format css untuk ukuran font sebesar 20 point</p>
<p id="cth3" style="font-size:15pt" >kalimat ini menggunakan
format css untuk ukuran font sebesar 15 point</p>
</body>
</html>

Gambar 5.1. CSS dengan cara Inline

5.2.2. Embedded
Penulisan dengan Embedded artinya bahwa code css tersebut dituliskan
langsung atau dibenamkanpada bagian atas program yang sedang anda
buat dan pada bagian penggunaan cukup menuliskan selector dari css
tersebut disertai dengan parameter yang ada

125
Nama File:css3.html

<html>
<head>
<title>bentuk penulisan secara embedded</title>
</head>
<style>
body {background:##ffffff color:#ffff00; margin-left:0.5in}
h1 {font-size:18pt; color:#ff0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">judul berukuran 18 point dan warna
merah</h1>
<p id="cth2">tag p di format dengan ukuran 12, tipe font
arial, indensi 0.5 inch</p>
</body>
</html>

Gambar 5.2. CSS dengan cara Embeded

126
5.2.3. Embedded Class
Penulisan dengan EmbeddedClass hampir sama dengan penulisan
embedded, tetapi disini dalam penggunaannya menggunaka clausa class
pada bagian text yang ingin ditampilkan.
Nama File:css4.html

<html>
<head>
<title>bentuk penulisan secara embedded dengan
class</title>
</head>
<style>
p.coklat {font-size:14pt; color:brown}
p.biru {font-size:15pt; color:blue}
</style>
<body>
<p id="cth1">bentuk standar tanpa style</p>
<p id="cth2" class="coklat">bentuk class coklat</p>
<p id="cth3" class="biru">bentuk class biru</p>
</body>
</html>

Gambar 5.3. CSS dengan cara Embeded Class

127
5.2.4. Linked Style Sheet

Cara Penulisan css berikutnya adalah dengan cara menuliskan code css
tersebut disebuah file yang terpisah kemudian memanggilnya dengan
menggunakan perintah link, untuk menggabungkanya dengan program
utama yang memanggil.

Contoh file css5.html

<html>
<head>
<title>bentuk linked style sheet</title>
<link rel=stylesheet href="linked.css" type="text/css">
</head>
<body>
<h1 id="cth1">judul berukuran 20 point dengan warna
biru</h1>
<p id="cth2">tag p di format dengan ukuran 14, tipe font
arial, indensi 0.5 inch</p>
<p id="cth3">latar belakang warna putih dengan margin 0,5
inch</p>
</body>
</html>

Contoh file css yang disimpan terpisah dari halaman utama

Linked.css

<style>
body {background:#0000ff; color:#ffff00; margin-left:0.5in}
H1 {font-size:20pt; color:#00008b}
P {font-size:14pt; font-family:arial; text-indent:0.5in}
</style>

128
 Gambr 5.4. Memanggil Linked css

Sintak CSS

CSS memiliki aturan dalam penulisannya, yaitu ada bagian utama yang
dinamakan selector dan ada satu atau lebih bagian deklarasi

Bagian Selector biasanya ditulis menggunakan perintah html yang biasa

digunakan, sedangkan deklarasi biasanya terdiri dari properti dan nilai,
Propert sendiri adalah atribut style yang ingin Anda ubah.

CATATAN PENTING:
Setiap Properti selalu memiliki sebuah nilai

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok
deklarasi dikelilingi oleh kurung kurawal:

129
 p{color: red; text-align: center;}

Untuk membuat CSS agar lebih mudah dibaca, Anda dapat menempatkan
satu deklarasi pada tiap baris, seperti ini:

p
{
color:red;
text-align:center;
}

Contoh Program

<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Belajar CSS</p>
<p>Paragrap ini menggunakan CSS.</p>
</body>
</html>

130
 Gambar 5.5. Contoh Sintak Dasar CSS

5.3.1. id dan class Selectors

Selain menggunakan style html, CSS memungkinkanAnda untuk

menentukan penyeleksi Anda sendiri yang disebut"id" dan "kelas".

CATATAN PENTING:

id selektor harus elemen tunggal yang unik

di definisikan dengan menggunakan tanda “#”

Contoh Program

#paragrap1
{
text-align:center;
color:red;
}

<html>
<head>
<style type="text/css">
#paragrap1

131
 {
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="paragrap1">Belajar CSS!</p>
<p>Tulisan ini tidak menggunakan style yang telah
dibuat</p>
</body>
</html>

Gambar 5.6. Id dan Class Selector

5.2.4. class Selectors

class selectors digunakan untuk menentukan gaya untuk sekelompok

elemen. Berbeda dengan id selector,class selector paling sering digunakan
pada beberapa elemen. Hal ini memungkinkan Anda untuk menetapkan
gaya tertentu untuk banyak elemen HTML dengan kelas yang sama.

132
 CATATAN PENTING:
id class selector menggunakan atribut class html dan
didefinisikan dengan menggunakan “.”

Contoh program

.center
{
text-align:center;
}

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

133
 Gambar 5.7. Class Selector

5.4 CSS Styling

CSS dapat digunakan untuk mendefinisikan efek yang terjadi pada latar
belakang dan elemennya. CSS properti yang digunakan untuk mengatur
efek latar belakang:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

5.4.1.Warna Latar Belakang

Properti background-color dapat digunakan untuk menentukan elemen
dari warna latar belakang.

<html>
<head>
<style type="text/css">
body
{
background-color:#A9A9A9;
}
</style>

134
 </head>

<body>

<h1>My CSS web page!</h1>

<p>Hello world! This is a W3Schools.com example.</p>

</body>
</html>

Gambar 5.8. Mengatur Warna Latar Belakang

Untuk menentukan warna pada css dapat dilakukan dengan beberapa

cara, yaitu:

 Nilai HEXADESIMAL, contoh "#ff0000"

 Nilai RGB, contoh "rgb(255,0,0)"
 Nama warna, contoh “red"

<html>
<head>
<style type="text/css">
h1
{

135
 background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Mengatur Warna Background dengan CSS!</h1>
<div>
VIRUS MALWARE TROJAN HORSE
<p>Sebagai salah satu platform yang paling populer sejagat
saat ini, ternyata telah membawa Android ke sisi dimana
harus dihadapkan pada permasalahan keamanan baru berupa
munculnya
ancaman virus Trojan Horse tangguh terbaru bernama Obad
yang ditemukan oleh Kaspersky baru-baru ini dan setidaknya
harus segera ditanggulangi secepatnya.
<p>sumber:http://www.beritateknologi.com</p>
</div>
</body>
</html>

136
 Gambar 5.9.Mengatur Warna Background

5.4.2.Gambar Latar Belakang

Properti untuk latar belakang selain dengan warna dapat juga

menggunakan gambar. dan secara default, gambar diulang sehingga
meliputi seluruh elemen, Gambarlatar belakang untuksebuah halaman
dapat diatur seperti ini:

<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Kesalahan Cintaku</h1>
<p> Kisah Sebuah persahabatan yang dimulai sejak mereka
berusia 2 tahun,
akan tetapi mereka tidak pernah mengetahui nama nya
masing masing,
satu orang perempuan dan satu orang laki2 saling menyayangi
satu sama lain,

137
 karena sayang mereka pun tidak pernah menyebut nama dan
mereka hanya memanggil ade dan kaka.</p>

<p>Mona adalah seorang gadis yang selalu menyayangi

sahabatnya Evan, begitu pun Evan,
ia selalu menyayangi Mona,Bahkan ia rela berkorban demi
Mona,
Pada saat itu Evan tidak mengetahui nama Mona,
karena ia selalu memanggil Mona dengan sebutan ade,
begitu pun Mona yang selalu memanggil Evan kaka</p>
<p>Begitu dekatnya mereka sampai mereka saling berkorban
satusama lain, dan
persahabatan mereka tidak pernah terpecah hingga mereka
berusia 5 tahun,
tappi persahabatan mereka terpisah karena kehendak orang
tua.</p>
<p>Pada saat mereka berusia 6 tahun, Evan harus pergi
bersama orang tua nya karena ayahnya mendapat tugas di
luar negri,
dan Evan harus sekolah di luar negri juga, dengan berat hati
evan harus meninggalkan Mona,
Mona juga harus merelakan kepergian Evan untuk masa depan
Evan,
tapi pada saat itu Evan berjanji bila ia kembali nanti, ia pasti
menemui Mona dan berjanji akan mempersunting Mona
</p>
<cite>
https://sites.google.com/site/kumpulannovelremaja/home
</cite>
</body>
</html>

138
 Gambar 5.4. Mengatur latar belakang halaman dengan
menggunakan gambar

Berikut adalah contoh lainnya penggunaan text dan latar belakang

gambar

<html>
<head>
<style type="text/css">
body {background-image:url('bgdesert.jpg');}
</style>
</head>
<body>
<h1>Komputer Aplikasi IT</h1>
<p>Matakuliah ini diajarkan di UNIKOM pada Semua
Jurusan</p>
</body>

139
 </html>

Secara default, properti background-image mengulangi gambar baik

secara horizontal maupun vertikal, sehingga akan menampilkan latar
belakang gambar yang aneh

<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Gradiasi Latar Belakang Halaman</h1>
Berikut adalah contoh latar belakang dengan gradiasi yang
diulang seluruhnya
</body>
</html>

140
 Gambar 5.5. Menampilkan gambar background berulang pada
seluruh bagian

Untuk mengantisipasi supaya latar belakang gambar tidak diulang

semuanya, maka kita dapat mengatur property bagian mana saja yang
akan diulang

Contoh mengulang gambar background pada bagian horisonal

<html>
<head>
<style type="text/css">
<body>
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
141
 </head>
<body>
<h1>Gradiasi Latar Belakang Halaman</h1>
Berikut adalah contoh latar belakang dengan gradiasi yang
diulang pada bagian kolomnya
</body>
</html>

Gambar 5.6. Gambar background yang berulang pada bagian

kolom saja.

Berikut adalah Contoh gambar background yang tidak diulang

8<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>

142
 </head>
<body>
<h1>Latar Belakang Gambar</h1>
<p>Latar Belakang Gambar ditampilkan sekali, tetapi
mengganggu pembacaan tulisan</p>
</body>

Gambar 5.7.bakcground yang tidak diulang

Sedangkan pada Contoh berikut, gambar background yang ditampilkan

tidak menggangu objek lain, karena ditempatkan pada margin yang
diinginkan

<html>
<head>
<style type="text/css">
body

143
 {
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Latar Belakang Gambar</h1>
<p>Latar Belakang Gambar ditampilkan pada posisi tertentu,
sehinga tidak mengganggu pembacaan tulisan</p>
</body>

Gambar 5.8. background gambar ditampilkan diposisi tertentu

144
Contoh gambar background yang tidak diulang dan ditampilkan tetap
pada posisi:

<<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Latar Belakang gambar</h1>
<p>Contoh background tidak diulang, posisi di atur dikanan
atas layar.</p>
<p>Latar belakang gambar ditampilkan sekali</p>
<p>tetapi tidak mengganggu pembacaan tulisan</p>
</body>
</html>

145
 Gambar 5.9. background gambar ditampilkan tetap pada posisi

5.5. CSS TEXT

Dengan menggunakan CSS anda juga dapat melakukan perubahan warna

pada property text tersebut, untuk memberi warna pada text dapat
dilakukan dengan menggunakan cara yang sama seperti memberi warna
background yaitu dengan cara:

 Nilai HEXADESIMAL, contoh "#ff0000"

 Nilai RGB, contoh "rgb(255,0,0)"
 Nama warna, contoh “red"

CATATAN PENTING:
secara default untuk mewarnai halaman dismpan
“body selector”

146
Contoh

<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>Paragraph ini akan berwarna merah karena berada pada
body halaman</p>
<p class="ex">sedangkan paragraph ini menggunakan
class="ex". dan ditampilkan berwarna biru.</p>
</body>
</html>

Gambar 5.10.Properti Text

147
5.5.1.Text Alignment

Properti text-alignment digunakan untuk mengatur perataan text pada

posisi horizontal dari sebuah kumpulan text. Text dapat diatur
propertisnya menjadi rata tengah, rata kiri, rata kanan, atau rata kiri dan
kanan.

<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>Asus Hadirkan Tablet Hibrid Padfone E</h1>
<p class="date">Januari, 20144</p>
<p class="main">Asus baru saja mengadirkan produk seri
Padfone terbarunya di Taiwan
dengan nama Padfone E. Smartphone yang juga bisa
digunakan sebagai sebuah tablet ini
pun ditawarkan dengan harga yang lebih murah jika
dibandingkan dengan Padfone lain sebelumnya.
</p>
<p><b>Sumber:</b>http://www.beritateknologi.com/asus-
hadirkan-tablet-hibrid-padfone-e-dengan-prosesor-
snapdragon-400-dan-harga-lebih-murah/</p>
</body>
</html>

148
 Gambar 5.11. Properti Alignment

5.5.2. Text Decoration

Propertitext-decoration digunakan untuk membuat atau menghapus

dekorasi dari teks. Contoh Properti text-decoration digunakan untuk
menghapus atau memberi garis bawah pada link untuk tujuan desain:

Contoh:Menghilangkan tanda garis bawah pada sebuah link

<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.unikom.ac.id">Kampus
Unikom</a></p>

149
 <p>Link to: <a
href="http://kuliahonline.unikom.ac.id">Kuliah
Onlinea</a></p>
</body>
</html>

Gambar 5.10. Contoh output property text

Contoh: Membuat Header dengan berbagai macam jenis,

 overline=Garis Atas
 line-through=Di Coret
 underline=Garis Bawah
 blink=Berkedip

<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
150
 <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p><b>Catatan:</b> "blink" tidak dapat ditampilkan di IE,
Chrome, atau Safari.</p>
</body>
</html>

Gambar 5.11. Membuat Headers

5.5.3. Text Transformation

Propertitext-transform digunakan untuk menentukan huruf besar dan

huruf kecil dalam sebuah teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar
atau huruf kecil, atau juga dapat digunakan untuk mengubah agar huruf
pertama dari setiap kata menjadi besar atau kecil.
151
 <html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">Menjadi huruf besar semua</p>
<p class="lowercase">Menjadi huruf kecil semua.</p>
<p class="capitalize">Setiap awal kata hurufnya menjadi
kapital</p>
</body>
</html>

Gambar 5.12. Transformasi Text

152
5.5.4. Text Indentation
Propertitext-indentation digunakan untuk menentukan indentasi atau
tulisan menjorok pada baris pertama dari teks yang dibuat.

<html>

<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<h3>Pengguna Internet 2013 Sebagian Besar Bukan
Manusia.</h3>
<p>
Internet dalam peradaban modern seperti sekarang ini
penggunanya semkin meningkat dari tahun ke tahun.
Setiap tahunnya, pengguna internet meningkat sangat
siginifikan. Tapi sayang,
ternyata sebagian besar pengguna internet ini bukan manusia.
Hih.... ngeri.
Jangan-jangan selama ini kita yang menggunakan internet
tidak bersosialisasi
dengan manusia melainkan dengan makhluk luar angkasa atau
kita kenal dengan alien.</p>
<cite>
http://forum.viva.co.id/iptek/1466553-mengejutkan-data-
pengguna-internet-2013-sebagian-besar-bukan-manusia.html
</cite>
</body>
</html>

153
 Gambar 5.13. Contoh Indentansi Paragraph

5.5.5. CSS Font Families

Didalam CSS ada dua type kelompok huruf, yaitu:

 generic family - sebuah kelompok font dengan tampilan yang

sama (seperti "Serif" atau "Monospace")

 font family - kelompok font tertentu (seperti "Times New

Roman" atau "Arial")

Generic Font family Description

family
Serif Times New Roman Font Serif memiliki garis-gariskecil
Georgia di bagianakhir padabeberapa
karakter
Sans-serif Arial "Sans" means tidak memiliki garis
Verdana pada akhir karakter
Monospace Courier New Semua huruf, memiliki spasi yang
Lucida Console sama

154
5.5.6. CSS Font-Family

Properti font-family biasanya digunakan sebagai pengendali jenis huruf

jika browser tidak mendukung font pertama,maka ia mencoba font
berikutnya.

Mulailah denganfont yang Anda inginkan,dan diakhiri dengan sebuah

generic family, agar browser memilih font yang sama dalam generic-
family, jika tidak ada font lainyang tersedia.

Catatan: Jika nama font-family lebih dari satu kata, maka harus ditulis
dalam tanda kutip, seperti font-family: "Times New Roman".

Jika ada lebih dari satu font family maka, dapat ditulis dengan dipisahkan
tanda koma, seperti contoh berikut:

p{font-family:"Times New Roman", Times, serif;}

<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">Paragrap ini ditampilkan dengan huruf Times
New Roman</p>
<p class="sansserif">sedangkan paragraph ini menggunaan
huruf Arial.</p>
</body>
</html>

155
 Gambar 5.14.CSS font Family

5.5.7. CSS Font Style

Properti font-style banyak digunakan untuk menentukan style dari teks
yang akan ditampilkan.
Properti ini memiliki tiga nilai:

 normal –Teks ditampilkan seperti biasanya

 italic- teks ini ditampilkan dalam huruf miring
 oblique- teks ini"condong" (miring sangat mirip dengan miring,
tapi kurang didukung)

contoh
p.normal{font-style: normal;}
p.italic{font-style: italic;}
p.oblique{font-style: oblique;}

<html>
<head>
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>

156
</head>
<body>
<p class="normal">Paragraph dengan font style, normal.</p>
<p class="italic">Paragraph dengan font style, italic.</p>
<p class="oblique">Paragraph dengan font style,
oblique.</p>
</body>
</html>

Gambar 5.15. Font Style

157
5.6. CSS Style Links

Dengan menggunakan CSS, Link dapat diatur propertinya, misalnya

warna link, font-family, latar belakang, dll.
Berikut adalah contoh property link yang dapat diatur:

 a: link - link, normalbelum dikunjungi

 a: visited– link,telahdikunjungi
 a: hover– link,ketika mouse ada diatas link
 a: active –link, ketika diklik

<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="http://berita.unikom.ac.id"
target="_blank">Berita Unikom</a></b></p>
<p><b>Note:</b> perhatikan perubahan warna link ketika
kursor anda arahkan ke link, kemudikan ketika anda meng-
click link</p>
</body>
</html>

158
 Gambar 5.16. Style Link

5.7. CSS Background Color

Properti background-color digunakan untuk memberi warna background
pada link yang dibuat:

<html>
<head>
<style type="text/css">
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link
*/
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="http://www.unikom.ac.id"
target="_blank">Website Unikom</a></b></p>
<p><b>Note:</b>Link berwarna ungu dengan latar
belakang kuning dan ada garis bawahnya, ketika kursor
mendekat warna background akan berubah</p>
</html>

159
 Gambar 5.17. Background Color

5.8. CSS List

Untuk membuat daftar (list) dengan menggunakan css property, dapat
dilakukan diantaranya adalah untuk:

 Membuat daftar list berurutan (order list)

 Membuat daftar list tidak berurutan (unorder list)
 Membuat daftar list dengan menggunakan gambar

Didalam html terdapat dua jenis list yaitu:

 Order list, list dengan menggunakan abjab atau huruf dalam

membuat urutannya, misalnya a,b,c, A,B,C, I,ii,iii, I,II,III, dan
1,2,3
 Unorder list adalah list yang tidak memiliki nomor urut dan
biasanya ditampilkan dengan menggunakan symbol bullet

Sedangkan didalam css ditambah dengan menggunakan symbol image

untuk pengganti bullet list tersebut.

<html>
<head>
<style type="text/css">

160
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
161
 </body>
</html>

Gambar 5.18. CSS List

Berikut adalah contoh list dengan menggunakan gambar/image yang

dapat dibuat senidiri:

<html>
<head>
<style type="text/css">
ul

162
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body
<h3>List Menggunakan Image</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Gambar 5.19.List Dengan Gambar

163
5.7. CSS Table

Hampir sama dengan table yang ada pada html, dalam css ada beberapa
property yang dapat digunakan untuk mengatur penampilan table:

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kota</th>
<th>Ibu Kota</th>
</tr>
<tr>
<td>Jawa Barat</td>
<td>Bandung</td>
</tr>
<tr>
<td>Jawa Timur</td>
<td>Surabaya</td>
</tr>
</table>
</body>
</html>

164
 Gambar 5.20.CSS Table

5.7.1. Collapse Borders

Properti border-collapse dapat digunakan untuk mengatur penampilan

dari border table, agar ditampilkan dalam satu garis tunggal.

<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
165
 <td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Gambar 5.21.CSS Table Collapse Border

5.7.2.CSS Table Width and Height

Width and height property digunakan untuk mengatur lebar dan tinggi
table. Dalam contoh berikut lebar kolom diatur 100% sedangkan lebar
kolom sekitar 50px:

<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid black;

166
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>

<body>
<table>Membuat Table dengan CSS
<tr>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>JUMLAH</th>
</tr>
<tr>
<td>Printer</td>
<td>560000</td>
<td>3</td>
</tr>
<tr>
<td>Monitor</td>
<td>750000</td>
<td>10</td>
</tr>
</table>
</body>
</html>

167
 Gambar 5.22.Mengatur Lebar dan Tinggi Table

5.7.3. Table Text Alignment

Text yang ada dalam sebuah table dapat diatur perataannya baik untuk
perataan teks horizontal maupun vertical

<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>

168
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
</table>
</body>
</html>

169
 Gambar 5.23.Mengatur Alignment Table

Berikut adalah contoh css property untuk mengatur text pada posisi
vertical dari table

<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>

170
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

171
5.7.4. Table Padding

Propertis table padding digunakan untuk mengontrol jarak antara text

dengan tabel,untuk mengatur jarak properties ini ditempatkan pada
elemen th dan td

<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>

172
5.7.5. Table Color

Contoh di bawah ini adalah contoh untuk menentukan warna batas, warna
teks dan latar belakangdari elemen th:

<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>JUMLAH</th>
</tr>
<tr>
<td>Jeruk</td>
<td>10000</td>
<td>10</td>

173
 </tr>
<tr>
<td>Mangga</td>
<td>8500</td>
<td>20</td>
</tr>
</table>
</body>
</html>

174
5.8. CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah
"model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Model kotak CSS pada dasarnya adalah sebuahkotak yang membungkus

elemen HTML, dan terdiri dari: margin, garis batas, padding, dan konten
yang sebenarnya.

Gambar dibawah mengilustrasikan model kotak:

Berikut dijelaskan perbedaan dari masing-masing bagian pada elemen

gambar diatas:

 Margin-Menghapus area di sekitar border, Margin tidak memiliki

warna latar belakang(transparan)
 Border-Sebuah area batas di sekita rpadding dan konten. Batas
di pengaruhi oleh warna latar belakang kotak
 Padding-Menghapus sebuah area di sekitar konten. Padding
dipengaruhi oleh warna latar belakang kotak
 Konten–berupa kotak, di mana teks dan gambar muncul

175
 <html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>

176
5.8.1. CSS Border Properties

Dengan menggunakan CSS Border Properties memungkinkan bagi anda

untuk mengatur penampilan dari garis pembatas yang dibuat pada table

<html>
<head>
<style type="text/css">
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
177
 <p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

5.8.2.Border Width

Properties border-width digunakan untuk mengatur lebar dariborder yang

akan dibuat, lebar border diatur dengan satuan in pixels, atau bisa juga
menggunakan properties: thin, medium, atau thick.

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
178
 p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if
it is used alone. Use the "border-style" property to set the
borders first.</p>
</body>
</html>

5.8.3.Border Color

Properti border color digunakan untuk mengatur warna border (batas).

Warna dapat diatur dengan menggunakan:

 nama -nama warna, seperti "merah"

 RGB-menentukannilai RGB, seperti "rgb (255,0,0)"

 Hex-menentukannilai hex, seperti "# ff0000"

179
 Anda juga dapat mengatur warna border menjadi "transparan".

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if
it is used alone. Use the "border-style" property to set the
borders first.</p>
</body>
</html>

180
5.9. Penggunaan CSS dalam Aplikasi

5.9.1. Cara Dinamis Merubah Warna dan Ukuran Huruf

Menggunakan bantuan CSS, anda dapat membuat aplikasi sesuai dengan

yang diinginkan, berikut adalah contoh bagaimana merubah warna huruf
dengan menggunakan css yang dikendalikan dengan menggunakan
tombol dari java script.

<html>
<script>
function ubah()
{
kata1.style.color="navy"
kata2.style.color="violet"
kata2.style.fontsize="50pt"
}
</script>

<body>
<input type=button value="klik" onclick="ubah()">
<br>
<span id="kata1" style="color: lightgreen">
klik tombol lihat warna text berubah
</span>
<br>
<span id="kata2" style="color: brown; font-size:30pt">
halo apa kabarmu?
</span>

181
 </body>
</html>

Gambar 5.25. Mengganti warna teks dengan css

5.9.2. Cara Dinamis Merubah Warna dengan Gerakan Mouse

Warna teks dapat diatur dengan menggunakan gerakan mouse, misalnya

pada saat mouse berada pada objek teks tersebut, ketika tombol mouse
diclick atau ketika kursor mouse meninggalkan objek teks tersebut.

<html>
<style>
span {font-size : 20pt}
</style>

<script language="jscript">

182
function tekan()
{
kata2.style.color="green"
}
function lewat()
{
kata1.style.color="red"
}
function keluar()
{
kata1.style.color="blue"
}
</script>
<body>
<span id="kata1" style="color:blue"
onmouseover="lewat()" onmouseout="keluar()">
gerakkan mouse melalui teks ini
</span>
<br>
<span id="kata2" style="color:purple" onclick="tekan()">
klik bagian teks ini
</span>
</body>
</html>

183
 Gambar 5.26. CSS merubah warna teks menggunakan mouse

5.9.3. CSS Link Warna-Warni

Untuk mengatur agar warna link dapat ditampilkan warna-warni, dapat

dilakukan dengan cara merubah warna berbeda pada saat sebuah link
dikunjungi dan pada saat keluar dari link yang dikunjungi.

<HTML>
<HEAD>
<style>
<!--
A.type1:link {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active {color:#FFDD00; text-decoration:none;}
A.type1:hover {color:#00FF80; text-decoration:underline;}

A.type2:link {color:#FF0000; text-decoration:none;}

184
A.type2:visited {color:#FF0000; text-decoration:none;}
A.type2:active {color:#FF0000; text-decoration:none;}
A.type2:hover {color:#ABCDEF; text-decoration:underline;}

A.type3:link {color:#00CCFF; text-decoration:none;}

A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active {color:#00CCFF; text-decoration:none;}
A.type3:hover {color:#FF8000; text-decoration:overline
underline;}
//-->
</style>
</HEAD>

<TITLE> Colorful Links </TITLE>

<BODY BGCOLOR="#FFFFF0">
<DIV ALIGN=center>
<FONT COLOR="#FF0000" FACE="Georgia" SIZE="4"> Daftar
Alamat Situs Indonesia </FONT>
</DIV>
<HR WIDTH=50% NOSHADE>
<DL>
<DT><B> Situs-Situs Pemberi Layanan Informasi</B>
<DD> Berikut adalah situs pemberi informasi yang ada di
Internet, yang meberikan informasi-informasi terkini mengenai
kejadian saat ini, Info harga, dan lain-lain</DL>

<UL>
<LI><a class="type1" href="http://www.detik.com">Detik</a>
<LI><A class="type2"
HREF="http://www.fastncheap">FastnCheap </A>
<LI><A class="type3" HREF="http://www.google.co.id">
Google</A>
185
 </UL>
<P>
</BODY>
</HTML>

<!--Save file dengan nama: link_warna.html

Gambar 5.27. Membuat Link warna warni

5.9.4. Link dengan latar belakang berubah-ubah

Dengan menggunakan CSS anda dapat merubah latar belakang

Background berubah-rubah sesuai dengan pergerakan Mouse.

186
o Fungsi Onmouseover

<html>
<title>onmouseover</title>
<head></head>
<body>
Jika mouse dilewatkan dalam link tersebut, warna background
akan menjadi merah<br>
<a href="link_confirm.html"
onMouseOver="document.bgColor='red'">
Perhatikan warna background menjadi merah</a>
</body>
</html>

<!--Save file dengan nama: onmouseover.html

o Fungsi Onmouseout

<html>
<title>onmouseout</title>
<head></head>
<body>
Jika mouse dilewatkan dalam link tersebut, dan pada saat mouse
ditarik keluar dari link warna background akan menjadi hijau
<br>
<a href="link_keluar.html"
onMouseOut="document.bgColor='green'">
Perhatikan warna background menjadi hijau</a>
</body>
</html>

187
 <!--Save file dengan nama: onmouseout.html

o Fungsi Onclick

<html>
<title>onclick</title>
<head></head>
<body>
Pada saat link di klik, background akan berwarna biru<br>
<a href="keterangan.html" onClick="document.bgColor='blue'">
Link disertai keterangan </a>
</body>
</html>

<!--Save file dengan nama: onclick.html

o Fungsi onMouseOver and onMouseOut

<html>
<title> Fungsi onMouseOver and onMouseOut </title>
<head></head>
<body>
Menggabung antara fungsi onMouseOver and onMouseOut<br>
<a href="link_windowbaru.html"
onMouseOver="document.bgColor='yellow'"
onMouseOut="document.bgColor='yelowgreen'">Perhatikan
perubahan backgroundnya</a>
</body>
</html>

188
 <!--Save file dengan nama: gabungan1.html

o Fungsi onMouseOver and onMouseOut and Onclick

<html>
<title> Fungsi onMouseOver and onMouseOut and
onclick</title>
<head></head>

<body>
Menggabung fungsi onMouseOver and onMouseOut and
onClick<br>
<a href="linkbutton.html"
onMouseOver="document.bgColor='lime'"
onMouseOut="document.bgColor='tan'"
onClick="document.bgColor='lightyellow'">
Gerakkan mouse, tarik keluar dan klik, maka latar akan berubah-
ubah warnanya</a>
</body>
</html>

<!--Save file dengan nama: gabungan2.html

6.9.5. Warna Huruf Berubah-Ubah dengan Gerakan Mouse

Berikut adalah contoh program bagaimana cara merubah warna font

ketika kursor melewati sebuah objek adapun fungsi yang digunakan
adalah fungsi onmouseover, onmouseout dan onclick.

<html>
<head></head>
<title>warna text berubah karena gerakan mouse</title>

189
 <body>
<h1 onmouseover="this.style.color='brown'"
onmouseout="this.style.color='green'" align="center">coba
gerakan mouse lewat kalimat ini</h1>
<br>
<h2 align="center" span style="color:brown"
onclick="this.style.fontsize = '30'">coba klik kalimat ini</h2>
</body>
</html>

<!--Save file dengan nama: teks_mouse.html

5.9.6. Menampilkan Gambar Secara Bergantian dengan Gerakan

Mouse

Dengan menggunakan fungsi fungsi yang telah dijelaskan di atas, berikut

akan dicoba bagaimana membuat gambar bergantian

<html>
<title>Gambar bergantian karena gerakan mouse</title>
<script>
function lewat()
{
image1.src="klematis2_big.jpg";
}
function keluar()
{
image1.src="klematis3_big.jpg";
}
</script>
<body>

190
 <img id="image1" src="klematis2_big.jpg" width=200
height=200
onmouseover="lewat()" onmouseout="keluar()">
</body>
</html>

<!--Save file dengan nama: dua_gambar.html

Gambar 5.29. Menampilkan 2 gambar bergantian

5.9.7.Menentukan Posisi Gambar dan Teks

Suatu saat mungkin anda perlu menuliskan teks disamping gambar,

berikut diberikan contoh bagaimana menampilkan gambar dan tulisan
pada posisi tertentu dilayar.

<html>
<head>

191
 </head>
<title>mengatur posisi teks dan gambar</title>
<body bgcolor="turquoise" leftmargin=0 topmargin=0>
<img src="klematis2_big.jpg">
<span id="a" style='position:absolute; top:60 ; left:400 ;
width:800; color:red; font-size:60;font-family:impact ;
filter:shadow(color=#007777,direction=45);'>
belajar script css dan html
</span>
<p>
<hr noshade align="center" width=75% size=5>
</body>
</html>

<!--Save file dengan nama: posisi_gambar.html

Gambar 5.30. Menampilkan gambar dan Teks

5.9.8. Memberi Efek abu-abu

Untuk memberi efek warna abu-abu, , dengan css dapat dilakukan

dengan memberikan efek filter gray pada objek gambar tersebut.

<html>
<body>

192
 <img src="ft7800.jpg" width=250 height=180
style="filter:gray"(opacity=0 finishopacity=100 style=2>
<br>
Bandingkan dengan gambar aslinya di bawah ini<br>
<img src="ft7800.jpg" width=250 height=180>
</body>
</html>

<!--Save file dengan nama: gray.html

Gambar 5.31. Memberi efek gray pada gambar

5.9.9. Memberi Efek Blur Pada Tulisan

Untuk memberi efek blur (mengaburkan) teks dapat dilakukan dengan

menggunakan perintah filter blur

193
 <html>
<body>
Hallo apa kabarmu sekarang?
<div style="width:600;height:70;text-align:center;
filter:blur(add=1, direction=315, strength=10)">
<span style="color=red ; font-size=50">
Hallo apa kabarmu sekarang?
</span>
</div>
</body>
</html>

<!--Save file dengan nama: blur.html

Gambar 5.32 Memberi efek blur pada tulisan

5.9.10. Memberi Efek Bayangan dengan Dropshadow

Jika anda ingin menampilkan teks dengan bayangan yang mengikutinya,

dapat dilakukan dengan memberikan filter shado pada teks tersbut.
Berikut diberikan contoh bagaimana menampilkan tulisan “Belajar CSS”
dengan bayangan hitam

<html>
<body>
<div style="width:500;height:150;text-align:center;
filter:dropshadow(color=black)">
<span style="color=red ; font-size=50">

194
 Belajar CSS
</span>
</div>
</body>
</html>

<!--Save file dengan nama: ds.html

Gambar 5.34 Teks dengan bayangannya

5.9.11. Flip Horizontal

Untuk membuat tulisan terbalik, baik secara vertical ataupun horizontal,

dapat dilakukan dengan cara memberi filter flipv atau fliph pada style
yang akan dibuat:

<html>
<body>
<div style="width:400;height:80;text-align:center;
filter:fliph()">
<span style="color=blue ; font-size=30">
Alamat Palsu
<br>
<div style="width:400;height:80;text-align:center;
filter:flipv()">
<span style="color=blue ; font-size=30">
Alamat Palsu
</span>
</div>
195
 </body>
</html>

<!--Save file dengan nama: flip.html

Gambar 5.35. Filter Flip

5.9.12. Filter Glow

FilterGlow, berguna untuk menambahkan warna/cahayapada tepi luar
objek teks, sesuai dengan warna yang diinginkan.

<html>
<body>
<div id="abc" style="width:400;height:80;text-align:center;
filter:glow(color=brown, strength=5)">
<span style="color=yellow ; font-size=30">
Menggunakan Filter Glow
</span>
</div>
</body>
</html>

<!--Save file dengan nama: glow.html

196
 Gambar 5.36. Filter Glow

5.9.13. Filter Invert

Filter Invert, berfungsi untuk membalikan warna dan kecerahan dari suatu
objek atau gambar

<html>
<body>
<img src="kujang.jpg" width=100 height=200
style="filter:invert">
<br>
Bandingkan dengan gambar aslinya di bawah ini<br>
<img src="kujang.jpg" width=100 height=200>
</body>
</html>

<!--Save file dengan nama: invert.html

197
 Gambar 5.37. Menggunakan Filter Invert

5.9.14. Filter Mask

Filter Mask, berfungsiuntuk membungkus objek dengan warna dan

kecerahan tertentu.

198
 <html>
<body>
<div id="" style="width:400;height:40;text-align:center;
filter:mask(color=green, strength=5)">
<span style="color=red ; font-size=30">
Menggunakan Filter MASK
</span>
</div>
</body>
</html>

<!--Save file dengan nama mask.html

Gambar 5.38. Menggunakan Filter Mask

5.9.15. Filter Shadow

Filter Shadow, berfungsi untuk menambahkan warna bayangan pada

teks yang ditampilkan.

<html>

<body>
<div style="width:400;height:80;text-align:center;
filter:shadow(direction=300, color=brown)">
<span style="color=yellow ; font-size=30">
Penggunaan Shadow Direction
</span>
</div>

199
 </body>
</html>

<!--Save file dengan nama: shadow.html

Gambar 5.39. Menggunakan Filter Shadow

5.9.16. Filter Wave

Filter Wave, berfungsi untuk memberikan efek bergelombang pada objek

dengan mengatur warna tertentu pada objek tersebut.

<html>
<body>
<div style="width:400;height:80;text-align:center;
filter:wave(strength=8, freq=3, lightstrength=20, add=1,
phase=90)">
<span style="color=brown ; font-size=30">
Penggunaan Filter Wave
</span>
</div>
</body>
</html>

<!--Save file dengan nama: wave.html

Gambar 5.40. Filter Wave

200
5.9.17. Filter xray

Filter xray berfungsi untuk memberikan efek sinar x, pada gambar yang
ditampilkan

<html>
<body>
<img src="gsate.jpg" width=200 height=160 style="filter:xray">
<br>
Gambar yang diberi filter xray
<br>
<img src="gsate.jpg" width=200 height=160><br>
Bandingkan dengan gambar aslinya<br>
</body>
</html>

<!--Save file dengan nama: xray.html

Gambar 5.41. Filter Xray

201
5.9.18.Fungsi Blend
Fungsi Blend
<HTML>
<script language="JScript">
function processblend()
{
mdiv.filters.blendTrans.apply();
mdiv.innerHTML="Ini foto April Lavigne"
mdiv.filters.blendTrans.play();
mimg.filters.blendTrans.apply();
mimg.src="april3.jpg"
mimg.filters.blendTrans.play();
}
</script>

<Body>
<div id="mdiv" style="background-color:yellow ; font-size=14 ;
height:50;width:600;filter:blendTrans(duration=5);">
Coba lihat foto Nabila kemudian klik tombol, maka foto April akan
muncul
</div>
<img id="mimg" src="nabila1.jpg"
style="height:180;width:182;filter:blendTrans(duration=5);">
<BR>
<Input type="button" onclick="processblend()" value="Klik disini">
</Body>
</HTML>

<!--Save file dengan nama: blend.html

202
 Gambar 5.42. Penggunaan Fungsi Blend

5.9.18. Fungsi Visible

Fungsi visible berguna untuk menampilkan atau mematikan text atau

objek lainnya.

<html>
<head></head>
<title>visible letters</title>

<body Language=JScipt bgcolor="whiteghost">

<div style="cursor: hand; color:navy" onclick="toggle_with_display
(document.all.HideShow1);">Click here please !</div>
<span style="color: blue" id=HideShow1>Hi how are you?</span><br>
<br>

<div style="cursor: hand; color:maroon"

onclick="toggle_with_visible(document.all.HideShow2);">Click here
please !</div>
<span style="color: blue" id=HideShow2>I hope you are
happy</span><br>

<Script>
function toggle_with_display (e)
{
if (e.style.display == "none")
{

203
 e.style.display = "";
}
else
{
e.style.display = "none";
}
}

function toggle_with_visible (e)

{
if (e.style.visibility == "hidden")
{
e.style.visibility = "visible";
}
else
{
e.style.visibility = "hidden";
}
}
</Script>
</body>
</html>
<!--Save file dengan nama: visible.html

5.9.19. Fungsi Reveal

Fungsi Reveal berguna untuk menampilkan dan menghapus text dengan

latar belakang warna dan style transisi yang berubah-rubah.

<HTML>
<HEAD>
<TITLE>Fungsi Reveal</TITLE>
<SCRIPT>
function init()
{
setTimeout("start()", 100)
}
function start()

204
{
//obj = eval("div" + i )
if (obj.filters.item(0).Transition == 23)
obj.filters.item(0).Transition = 1
else
obj.filters.item(0).Transition++
obj.filters.item(0).Apply()
if (obj.filters.item(0).Transition % 2 == 0)
{
obj.style.backgroundColor = "lime"
}
else
{
obj.style.backgroundColor = "turquoise"
}
obj.innerText = "It's Reveal " + obj.filters.item(0).Transition
obj.filters.item(0).Play()
}

</SCRIPT>
</HEAD>
<BODY onload=init()>
<DIV id=obj style="position: absolute; top:20; left:20; width:300;
height:85;
font-size:65; text-align:center; background-color:yellow; filter:
revealTrans(Transition=1, Duration=1.5)" onfilterchange=start()>
It's Reveal </DIV>
</BODY>
</HTML>

<!--Save file dengan nama: reveal.html

205
5.9.20. Fungsi Reveal Transition

Fungsi Reveal berguna untuk menampilkan dan menghapus text dengan

style transisi yang berubah-rubah.

<html>
<script>
var state=1
function ProcessReveal()
{
obj.filters[0].Transition = parseInt (tipe.value)
obj.filters[0].Apply()
if (state==1)
{
state=0
obj.style.backgroundColor= "yellow"
obj.innerText = "B"
}
else
{
state=1
obj.style.backgroundColor = "brown"
obj.innerText = "A"
}
obj.filters[0].Play()
}
</script>

<body>
Tipe Reveal:
<select name="tipe" size="1">

206
<option value="0">Box in
<option value="1">Box out
<option value="2">Circle in
<option value="3">Circle out
<option value="4">Wipe up
<option value="5">Wipe down
<option value="6">Wipe right
<option value="7">Wipe Left
<option value="8">Vertical blind
<option value="9">Horizontal Blinds
<option value="10">Checkerboard Across
<option value="11">Checkerboard Down
<option value="12">Random Dissolve
<option value="13">Split Vertical in
<option value="14">Split Vertical out
<option value="15">Split horizontal in
<option value="16">Split horizontal out
<option value="17">Strips left down
<option value="18">Strips left up
<option value="19">Strips right down
<option value="20">Strips right up
<option value="21">Random bars horizontal
<option value="22">Random bars vertical
<option value="23">Random
</select>
<br>
<input type=button onclick="ProcessReveal()" value="Reveal
Transition">
<div id=obj style="width:100; height:100; font-size:100;
text-align:center; background-color:yellow;
filter:revealTrans(Transitional=1, Duration=1.5)">A</div>
</body>

207
</html>

<!--Save file dengan nama: reveal2.html

5.9.21. Fungsi Shadow Dinamis

Fungsi Shadow berfungsi untuk menampilkan teks dengan bayangan

warna yang ditampilkan

<HTML>

<HEAD>
<script language="JavaScript">
var i;
function init()
{
i=45;
window.setInterval("process()",40);
}
function process()
{

if (i!=360) i+=45; else i=0;

abc.filters[0].direction = i;
}
</script>

</HEAD>

<BODY onload="init()">
<div id="abc"
style="position:relative;width:400;height:100;top:25;left:30;text-
align:center;filter:shadow(direction=45,color=brwon)">
<span style="color=yellow ; font-size=40">Wonderful</span>
208
</div>
<div style="position:relative;width:350;height:60;top:25;left:30;text-
align:center;filter:shadow(direction=315,color=lime)">
<span style="color=green ; font-size=40">See the above word</span>
</div>
</div>
</BODY>
</HTML>
<!--Save file dengan nama: shadow_d.html

5.9.22. Fungsi Glow Dinamis

Fungsi Glow berfungsi untuk menampilkan text seolah-olah text tersebut

tampil dari belakang ke depan (berkedip).

<HTML>
<HEAD>
<script language="JavaScript">
var i,code;
function init()
{
i=0;code=0;
window.setInterval("process()",40);
}
function process()
{
if (code==0)
if (i<10) i++; else code=1;
if (code==1)
if (i>0) i--; else code=0;
abc.filters[0].strength = i;
}

209
</script>

</HEAD>

<BODY onload="init()">
<div id="abc"
style="position:relative;width:450;height:100;top:25;left:30;text-
align:center;filter:glow(color=brown, strength=3)">
<span style="color=yellow ; font-size=35">I love it</span>
</div>
</BODY>
</HTML>

<!--Save file dengan nama: glow_d.html

5.9.23. Fungsi Wave Dinamis

Fungsi Wave berfungsi untuk menampilkan tulisan, seolah tulisan tersebut

bergoyang goyang.

<HTML>
<HEAD>
<!--
<SCRIPT FOR=window EVENT=onload LANGUAGE="JavaScript">
var phaseme = 0;
phaseit();
</script>
-->
<script language="javascript">
var phaseme;
function init()
{
210
 phaseme=0;
window.setTimeout("phaseit()", 50, "javascript");
}

function phaseit()
{
phaseme = (phaseme + 10) % 100;
wavefilter.filters[0].phase = phaseme;
window.setTimeout("phaseit()", 50, "javascript");
}
</script>
</HEAD>

<BODY onload="init()">
<div id="wavefilter" style="position:relative;width:400
;height:100;top:25;left:30;text-align:center;filter:wave(strength=8,
freq=3, lightstrength=20, add=0, phase=90)">
<div><font color=brown size=+3>Hi, how are you?<br>I hope you are
good.
</font></div>
</div>
</BODY>
</HTML>

<!--Save file dengan nama: wave_d.html

5.10 Aplikasi CSS Dalam Menu

Setelah pembahasan mengenai css dasar, berikut untuk lebih

memperjelas lagi mengenai penggunaan css, akan diberi contoh beberapa
aplikasi contohnya adalah untuk pembuatan menu aplikasi.

211
5.10.1.Menu CSS I
Untuk membuat menu dengan tampilan bentuk vertical, dapat dilakukan
dengan cara seperti berikut:
<html>
<head>
<style>
A.menulink {
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;
}
A.menulink:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
}
</style>
<script>
var ns4class=''
</script>
</head>
<body>
<table border="0" width=198>
<tr>
<td width="100%" bgcolor="#7fffd4"><b>Menu Utama<b></td>
<tr>

212
<td width="100%"><a href="http://www.unikom.ac.id"
class="menulink" class=&{ns4class};>Unikom</a></td>
</tr>
<tr>
<td width="100%"><a href="http://kuliahonline.unikom.ac.id"
class="menulink" class=&{ns4class};>Kuliah Online</a></td>
</tr>
<tr>
<td width="100%"><a href="http://nilaionline.unikom.ac.id"
class="menulink" class==&{ns4class};>Nilai Online</a></td>
</tr>
<tr>
<td width="100%"><a href="http://www.google.com" class="menulink"
class=&{ns4class};>Google</a></td>
</tr>
</table>
</body>
</html>

<!--Save file dengan nama: menu_css.html

Gambar 5.43. Aplikasi CSS dalam pembuatan Menu

5.10.2. Menu CSS II

Berikut adalah contoh lengkap bagaimana membuat menu dengan
tampilan bentuk vertical

213
<html>
<head>
<style>
A.menulink {
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #000080;
}
A.menulink:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
}
</style>
<script>
var ns4class=''
</script>
</head>
<body>
<!--shadow-->
<center>
<div style="width:800;height:40;filter:shadow(direction=300,
color=brown)">
<span style="color=yellow ; font-size=30">Tentang Diri Saya
</span>
</div>
</center>

214
<!--akhir_shadow-->
<br><br>
<!--blur-->
<center>
<div style="width:600;height:30;filter:blur(add=1, direction=315,
strength=10)">
<span style="color=red; font-size=20">
<marquee>Selamat Datang di Web saya</marquee>
</span>
</div>
</center>
<!--akhir blur-->
<hr noshade width=75% size=3 color="blue">
<table border=1 width=80% align="center">
<tr><td width="25%" align="center" bgcolor="aqua" valign="top">
<!--Menu_css-->
<table border="0" width=198>
<tr><td width="100%" bgcolor="#20b2aa" align="center">
<b>Menu Utama<b></td>
<tr><td width="100%" bgcolor="#afeeee">
<a href="diri.html" class="menulink" class=&{ns4class};>
Diri Saya</a></td>
</tr>
<tr><td width="100%" bgcolor="#40e0d0"><a href="album.html"
class="menulink" class=&{ns4class};>Album</a></td>
</tr>
<tr>
<td width="100%" bgcolor="#00ff7f"><a href="pavorite.html"
class="menulink" class==&{ns4class};>Pavorite</a></td>
</tr>
<tr>

215
<td width="100%" bgcolor="#ffff00"><a href="Keluarga"
class="menulink" class=&{ns4class};>Keluarga Saya</a></td>
</tr>
<tr>
<td width="100%" bgcolor="#ffa500"><a href="photo.html"
class="menulink" class=&{ns4class};>Koleksi Photo</a></td>
</tr>
</table>
<!--akhir_menu_css-->
</td>
<td width="50%" align="center" bgcolor="aquamarine"
valign="top">
<!--glow-->
<center>
<div id="abc" style="width:400;height:40;
filter:glow(color=brown, strength=5)">
<span style="color=yellow ; font-size=30">
Sekapur Sirih
</span>
</div>
</center>
<!--akhir_glow-->
<p><font color="navy" size=2 face="arial">Web ini berisi tentang
diri saya, Album, hobi, keluarga, dan Koleksi Photo dll. Semoga Anda
senang mengunjungi web ini seterusnya</p>
</font>

<td width="50%" align="center" bgcolor="aquamarine"

valign="top">
<!--foto saya-->
<center>
<img src="april1.jpg">

216
 </center>
</table>
<br>
<!--mask-->
<center>
<div id="abc" style="width:400;height:40;
filter:mask(color=gray, strength=5)">
<span style="color=yellow ; font-size=30">
[email protected]
</span>
</div>
</center>
<!--akhir mask-->
</body>
</html>

<!--Save file dengan nama: menu2_css.html

217
 Gambar 5.44. Membuat Menu dan Link dengan bantuan CSS

5.11. Tabel Kode Warna dalam CSS

Untuk menulikan nama warna dalam css dapat dilakukan dengan cara
menuliskan nama warna tersebut atau dengan menuliskan nilai
Hexadimalnya.

Color Name HEX Color

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

218
Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGrey #A9A9A9

DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

219
DarkOliveGreen #556B2F

Darkorange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkSlateGrey #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DimGrey #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

220
GoldenRod #DAA520

Gray #808080

Grey #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGray #D3D3D3

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

221
LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSlateGrey #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370D8

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

222
MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #D87093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

Red #FF0000

RosyBrown #BC8F8F

223
RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

SlateGrey #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

224
WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

225
 BAB 6
MENGENAL JAVA SCRIPT

6.1. Java Script

Java Script adalah bahasa script yang berdasar pada objek yang
memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi
pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa
suatu window, frame, URL, dokumen, form, button atau item yang lain.
Yang semuanya itu mempunyai properti yang saling berhubungan
dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan
atribut lain.

6.2. Menjalankan Java Script

Untuk dapat mempelajari pemrograman Java Script, ada dua piranti yang
diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah
pengolah kata (word processor) yang menghasilkan file dalam format
ASCII murni. Bila Anda adalah pengguna Windows, Anda bisa
menggunakan Notepad,Wordpad atau menggunakan Ultraedit Text Editor.
Selain itu browser web yang akan anda gunakan harus mendukung Java
Script, Anda dapat menggunakan Internet Explorer, Opera, FireFox dan .

Kode program JavaScript dapat dituliskan langsung pada file HTML

dengan menggunakan tag kontainer <SCRIPT>. Dengan kata lain, Anda
tidak perlu menuliskan program JavaScript pada file terpisah.

226
Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawali
dengan <NAMA_TAG> dan diakhiri dengan </NAMA_TAG>.

Contoh.
<HTML></HTML>
<BODY></BODY>
<HEAD></HEAD>
Tag kontainer <SCRIPT> mempunyai dua atribut tetapi yang harus Anda
isikan hanya satu atribut yaitu Language. Isilah atribut language dengan
“JavaScript”. Hal ini digunakan untuk memberitahukan pada browser
bahwa yang akan Anda tulis adalah JavaScript.

Contoh penulisan script

<SCRIPT LANGUAGE=”JavaScript”>
//program Anda masukan disini
</SCRIPT>

6.3. Program Pertama Java Script

Pada bagian ini, Anda akan membuat program untuk menampilkan pesan
sederhana kelayar monitor.

<html>
<head>
<title>Program Pertama</title>
</head>
<body bgcolor="#FFFFFF">

227
 <script language="JavaScript">
document.writeln("<PRE>");
document.writeln("SELAMAT DATANG DI DUNIA JAVASCRIPT
");
document.writeln("Program ini merupakan contoh sederhana
menampilkan teks");
document.writeln("Dengan menggunakan JavaScript");
document.writeln("</PRE>");
</script>
</body>
</html>

Gambar berikut merupakan output yang dihasilkan dari sample program

diatas, ketika ditampilkan via browser

Gambar 6.1. Menampilkan Teks

Objek document mempunyai dua metode untuk menuliskan teks, yaitu

write dan writeln. Mungkin bagi Anda yang sudah terbiasa atau pernah

228
berkenalan dengan Pascal sudah mengerti perbedaan kedua statement
ini, yaitu Metode write digunakan untuk menulis teks tanpa ganti baris
(carriage return) sedangkan Metode writeln digunakan untuk menulis teks
dengan ganti baris.

Berikut ini adalah contoh bagaimana menuliskan sebuah teks dengan

menggunakan tag header di tengah jendela browser. Untuk Menampilkan
teks header Anda cukup menambahkan statement <H1> Header pertama
</H1>

Gambar 6.2. Teks Header Pada JavaScript

<html>
<script language="JavaScript">
document.writeln("<CENTER>");
document.writeln("<H1>UNIVERSITAS KOMPUTER INDONESIA
</H1>");
document.writeln("<H2>JL.DIPATIUKUR 112
BANDUNG</H2>");
document.writeln("</CENTER>");
</script>

229
 </html>

6.4. Komentar

Sama seperti bahasa pemrograman yang lainnya, JavaScript juga

menyediakan fasilitas untuk menuliskan komentar, komentar ini beguna
bila nantinya Anda atau orang lain membaca suatu program.

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara

yaitu dengan menuliskan komentar setelah tanda garis miring dua kali,
contoh:

// ini komentar
atau
/* ini komentar juga */

6.5. Event

Event dan event handler merupakan hal yang sangat penting dalam
pemrograman JavaScript. Event adalah sesuatu yang terjadi karena aksi
user. Contohnya jika user men-click tombol mouse maka akan terjadi
event Click. Jika MousePointer bergerak melewati sebuah link terjadilah
event MouseOver. Ada banyak event yang terdapat dalam JavaScript yang
selengkapnya bisa anda lihat JavaScript Reference.

Tentunya kita ingin program JavaScript kita bereaksi jika terjadi suatu
event tertentu. Ini bisa dilakukan dengan bantuan event-handlers.
Sebagai contoh kita memiliki sebuah tombol yang akan mengeluarkan
sebuah popup window jika di-tekan. Ini berarti bahwa sebuah window
popup harus muncul sebagai reaksi dari event Click. Event-handler yang
harus kita gunakan adalah onClick, yang memberitahukan apa yang harus
230
dikerjakan oleh komputer jika event ini terjadi. Contoh di bawah ini
menunjukkan bagaimana mudahnya menggunakan event-handler onClick:

<form>
<input type="button" value="Proses" onClick="alert('Anda telah
MengClick Tombol Proses')">
</form>

Gambar 6.3. Penggunaan Event

Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu.
Kita telah membuat form dan sebuah tombol (ini merupakan bahasa
HTML standard) . Bagian yang baru adalah onClick="alert('Anda telah
MengClick Tombol Proses')" yang berada di dalam tag <input>. Inilah

231
yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika
terjadi event Click, komputer akan mengeksekusi alert(''Anda telah
MengClick Tombol Proses''), yang merupakan kode JavaScript.alert()
berfungsi untuk menampilkan window popup. Di dalam tanda kurung
anda dapat menentukan string yang akan muncul pada window yang
dimaksud.

Satu hal yang mungkin membingungkan: pada perintah document.write()

kita menggunakan double quotes (") dan pada alert() kita menggunakan
juga single quotes ('), mengapa? Pada contoh ini kita menuliskan
onClick="alert('Ya')", kita gunakan keduanya (double dan single quote) .
Jika kita tulis onClick="alert("Ya")" maka komputer akan bingung mana
yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan
penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan
onClick='alert("Ya")'.

Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya

lihat pada referensi JavaScript.

6.6. Function

Pada dasarnya function merupakan suatu cara yang dapat anda gunakan
untuk menyatukan beberapa perintah. Mari kita tulis sebuah script yang
mengeluarkan teks tertentu sebanyak tiga kali. Perhatikan contoh berikut
ini:

<html>
<script language="JavaScript">
document.write("Belajar Java Script<br>");
document.write("Belajar Java Script<br>");
document.write("Belajar Java Script<br>");

232
document.write("Belajar Java Script<br>");
</script>
</html>

Hasil keluarannya adalah:

Belajar Java Script

Sebanyak empat kali. Perhatikan baris kode – menuliskan kode sebanyak

empat kali akan memberikan hasil yang diinginkan.

Selain dengan cara manual seperti diatas, ada cara yang lebih efisien
untuk menampilkan sesuatu yang berulang, yaitu dengan menggunakan
Function

seperti pada kode di bawah ini:

<html>
<script language="JavaScript">
function myFunction()
{
document.write("Belajar Java Script<br>");
}
myFunction();
myFunction();
myFunction();
myFunction();
</script>
</html>
Pada script di atas kita definisikan sebuah function yang dilakukan melalui
baris-baris:
233
 function myFunction()
{
document.write("Belajar Java Script<br>");
}

Perintah-perintah di dalam tanda {} merupakan milik function

myFunction(). Ini berarti ada sebuah perintah document.write() yang
dapat dieksekusi melalui pemanggilan function yang dimaksud. Pada
contoh kita memanggil function ini sebanyak empat kali dan berarti
bahwa function akan dieksekusi sebanyak empat kali.

Function dapat pula dikombinasikan dengan event-handler seperti pada

contoh berikut ini:

<html>
<head>
<script language="JavaScript">
function calculation() {
var x = 12;
var y = 5;
var result = x + y;
alert(result);
}
</script>
</head>
<body>

<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>

234
</html>

Tombol akan memanggil function calculation() jika di-click. Kita lihat

bahwa function melakukan perhitungan tertentu sehingga kita perlu
menggunakan variabel x, y dan result. Kita mendefinisikan variabel
dengan keyword var. Variables dapat digunakan untuk menyimpan harga-
harga yang berbeda- seperti angka, text, strings dan lainnya. Baris var
result= x + y; memberitahu browser untuk membuat variabel result dan
menyimpan harga x + y (5 + 12) dalam variabel result. Setelah operasi
ini isi variabel result adalah 17. Perintah alert(result) artinya sama
dengan alert(17), yaitu popup window akan muncul dengan isi angka 17.

6.7. Variabel dalam Java Script

Dalam hampir setiap bahasa pemrograman ada yang namanya variable.

Variabel berguna untuk menyimpan data. Tanpa bantuan variabel sebuah
program tidak bisa melakukan apa yang Anda inginkan.

Dalam Java Script pendeklarasian sebuah variabel sifatnya opsional,

artinya Anda boleh mendeklarasikan atau tidak, Jika Anda memberi nilai
pada suatu variabel, maka dalam JavaScript dianggap bahwa Anda telah
mendeklarasikan variabel tersebut.

Contoh:
Nama = ”Fahra Ragita Musyafa”
X = 2010
Y = 121299
Untuk mendeklarasikan secara explisit, tulislah variabel tersebut dengan
didahului kata kunci var.
Contoh
var nama;

235
 var nama=”Mirawati Randani”
var X = 2010;
var Y;
Untuk mendeklarasikan beberapa variabel dalam satu baris, dapat
dilakukan dengan menuliskan seperti berikut:
var A,B,C;

236
6.8. Tipe Data

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak mempunyai

tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh yang
telah disajikan sebelumnya. Anda mendeklarasikan variabel tapi tidak
menentukan tipenya.

Meskipun JavaScript tidak mempunyai tipe data explisit, JavaScript

mempunyai tipe data Implisit. Ada empat macam tipe data implisit yang
dimiliki JavaScript yaitu:

 Numerik, seperti 2351978, 2003948,3.14, 100 dsb

 String, seperti “Halo”. “Mei”, “Juli”, “Ah Kamu”, “JavaScript” dsb
 Boolean, hanya bernilai true atau false
 Null, yaitu variabel yang tidak diinisialisasi

6.8.1. Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik,

yaitu bilangan bulat dan bilangan real.

Untuk bilangan bulat, Anda bisa merepresentasikan dengan basis desimal,

oktal, atau heksadesimal.

Contoh:
var A = 100;
var A=0x2F;
Untuk pendeklarasian tipe bilangan real, Anda bisa menggunakan tanda
titik atau notasi ilmiah (notasi E).
Contoh:
var a = 123.567
var b = 1.234567E+3

237
6.8.2. Tipe String

Untuk mendeklarasikan tipe string dapat dilakukan dengan cara

menuliskan string diantara tanda tunggal (‘) atau tanda petik ganda (”);

Contoh:

var A = ‘Ini pendeklarasian String’;

var C = “Ini juga string “;

6.8.3. Tipe Boolean

Tipe Boolean hanya mempunyai nilai True atau false. Tipe ini biasanya
digunakan untuk mengecek suatu kondisi atau keadaan.

Contoh

var X = (Y>90);

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X
akan bernilai True.

6.8.4. Tipe Null

Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi

nilai awal (inisialisasi)

6.9. Operator

Operator pada JavaScript dibagi menjadi enam, yaitu

 Aritmetik
 Pemberian nilai (Assign)
 Pemanipulasian bit (bitwise)
 Pembanding
 Logika
 String

238
6.9.1. Operator Aritmetik

Operator ini digunakan untuk operan bertipe numerik, Ada dua macam
operator aritmetik, yaitu operator numerik tunggal dan operator
aritmetik biner. Perbedaan kedua operator ini terletak pada jumlah operan
yang harus dioperasikan.

Operato Tunggal/Bin Keterangan

r er
+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus
- Tunggal Negasi
++ Tunggal Penambahan dengan
-- Tunggal Satu
Pengurangan dengan
Satu

6.9.2. Operator Pemberian Nilai

Digunakan untuk memberi nilai ke suatu operan atau mengubaah nilai

suatu operan.

Operato Keterangan Contoh Exuivale

r n
= Sama dengan X=Y
+= Ditambah X+=Y X=X+Y
-= dengan X-=Y X=X-Y
*= Dikurangi X*=Y X=X*Y
/= dengan X/=Y X=X?Y

239
 %= Dikalikan X%=Y X=X%Y
&= dengan X&=Y X=X&Y
|= Dibagi dengan X|=Y X=X|Y
Modulus
dengan
Bit AND dengan
Bit OR dengan

240
6.9.3. Operasi Pemanipulasi Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat.

Operato Keterangan
r
& Bit AND
| Bit OR
^ Bit XOR
~ Bit NOT
<< Geser ke kiri
>> Geser ke kanan
>>> Geser kekakan dengan
diisi nol

Contoh:
var A = 12; // A = 1100b
var B = 10; // B = 1010b
var C = A & B
maka akan dihasilkan bilangan seperti berikut:
1100b
1010b AND
1000b
var A = 12;
var C = A << 2;
var D = A>>1
maka variabel C akan bernilai 48 (0011 0000b
variabel D akan bernilai 6 (0110b).

241
6.9.4. Operator Pembanding

Digunakan untuk membandingkan dua buah operan. Operan yang

dikenai operator ini dapat bertipe string, numerik, maupun ekspresi lain.

Operato Keterangan
r
== Sama dengan
!= Tidak sama dengan
> Lebih besar
< Lebih kecil
>= Lebih bersar atau sama
<= dengan
Lebih kecil atau sama
dengan

6.9.5. Operator Logika

Sesuai namanya operator ini digunakaan untuk mengoperasika operan

yang bertipe boolean,

Operato Keterangan
r
&& Operator logika
|| AND
! Operator logika OR
Operator logika
NOT
Contoh:
var A = true;
var B = false;
var C = A && B; //false
var D = A || B; //true

242
var E = !A; // false

6.9.6. Operator String

Selain operator pembanding, operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan. Operator ini
digunakan untuk menggabungkan beberapa string menjadi sebuah string
yang lebih panjang.

Contoh:
Nama = “Java” + Script”;
Akan menghasilkan “JavaScript” pada variabel Nama

243
Penggunaan Operator String
<html>
<head>
<title>Operasi Aritmetik</title>
</head>
<p>
<script language="JavaScript">
document.writeln("<PRE>");
document.writeln("<h1>Operasi Aritmetika </h1>");
var A = "100";
var B = "200";
var C = 300;
var D = 400;
var E = A + B;
document.writeln('"100" + "200" = ' + E);
E = B + C;
document.writeln('"200" + 300 = ' + E);

E = C + D;
document.writeln(' 300 + 400 = ' + E);
document.writeln("</PRE>");
</script>
</body>
</html>

244
 Gambar 6.4. Output Program

6.10. Memasukan Data

Untuk memasukan data dari keyboard dapat dilakukan dengan

menggunakan perintah input dengan type objek yang berbeda-beda

6.10.1. Objek Text

Dalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda. Contoh aplikasi
seperti ini banyak diterapkan dalam Web Interaktif, dengan menggunakan
CGI ataupun PHP

Untuk memasukan data dapat digunakan objek text yang telah

disediakan dengan contoh sintak seperti berikut:

245
Penggunaan Objek Text
<form name=form>
<script>
function proses()
{
var nama2=document.form.nama.value;
var alamat2=document.form.alamat.value;
alert("Nama : "+nama2+ " Alamat: " +alamat2);
}
</script>
<PRE>
Masukan dengan Input Type=Text
Nama : <input type="text" size="10" name="nama">
Alamat : <input type="text" size="20" name="alamat">
</PRE>
<input type=button value=Proses onclick="proses()">
<input type=reset>

246
 Gambar 6.5. Memasukan Data dengan Text Objek

6.10.2. Objek Radio

Objek radio menyimpan informasi tentang tombol radio. Karena selalu

berupa array, untuk mengakses satu tombol radio digunakan
radio[indeks]. Disamping itu objek radio juga mempunyani nilai True jika
dipilih dan False jika tidak.

Gambar 6.6. Objek Radio

Penggunaan Objek Radio

<html>
<script language="JavaScript">
function radio_box(form)
{
var ket="";
247
 if (form.pilih.checked == true)
ket="Memilih Ya ";
else
ket= "Tidak memilih ";
alert(' Anda ' +ket);
}
</script>
Menggunakan Radio object
<form>
<input type="radio" name="pilih" value="Memilih Ya"> Ya </p>
<hr>
<input type="button" value="CONFIRM"
onclick="radio_box(this.form)"><input type="reset"
value="Reset">
</form>

Dari hasil eksekusi program diatas ada dua buah output yaitu:
1. Jika anda tidak meng-click Radio Button Ya, maka akan
ditampilkan pesan Anda Tidak memilih
2. Jika anda meng-click Radio Button Ya, maka akan ditampilkan
pesan Anda Anda memilih ya.

Berikut hasil output program diatas.

Gambar 6.7. Aplikasi Objek Radio

248
6.10.3. Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupa

kotak cek. Penggunaanya hampir sama dengan objek Radio.

Gambar 6.8. Objek Checkbox

Penggunaan Objek Checkbox

<html>
<script language="JavaScript">
function check_box(form)
{
var ket1="";
var ket2="";

if (form.satu.checked == true) ket1="Satu";

if (form.dua.checked == true) ket2="Dua";
alert('Anda memilih checkbox '+ ket1+' '+ ket2);
}
</script>

249
Menggunakan Checkbox
<form>
<input type="checkbox" name="satu"> Satu
<input type="checkbox" name="dua"> Dua
<hr>
<input type="button" value="CONFIRM"
onclick="check_box(this.form)">
<input type="reset" value="Reset">
</form>

Dari hasil eksekusi program diatas, akam ditampilkan output seperti

berikut:
Jika anda meng-click Checkbox Satu, maka akan ditampilkan output

Jika anda meng-click Checkbox Dua, maka akan ditampilkan output

Jika anda meng-click Checkbox Satu dan Dua, maka akan ditampilkan
output

250
6.10.4. Objek TextArea

Objek textarea digunakan apabila anda ingin memasukan data yang

memiliki jumlah karakter yang tidak terbatas, dan menyimpan informasi
yang dimasukan tadi kedalam form yang berupa kotak teks dengan
banyak baris.

251
 Gambar 6.9. Objek Textarea

Penggunaan Objek Textarea

<html>
<script language="JavaScript">
function EvenTekan()
{
var ketstr=(document.fForm.ket.value);
document.fForm.ketstr.value=ketstr;
}
</script>
<form name="fForm">
Memasukan Data Pada TextArea
<hr>
Masukan:
<br>
<textarea name="ket" rows="3" cols="30">
</textarea>
<br>
<input type="button" value="Kirim" onclick="EvenTekan()">
<input type="reset" value="Reset">
<BR>
Keluaran:<br>
<textarea name="ketstr" rows="3" cols="30">
</textarea>
</form>

252
 Gambar 6.10. Objek Textarea
6.10.5. Objek Select

Objek Select digunakan untuk menyimpan informasi tentang elemen form

yang berupa kotak daftar pilihan, anda dapat memilih salah satu pilihan
dari daftar yang ada di kotak tersebut.

253
 Gambar 6.11. Objek Select

Penggunaan Objek Select

<html>
<script language="javascript">
function EvenTekan()
{
var jurusanstr = (document.fform.jurusan.value);
document.fform.jurusanstr.value=jurusanstr;
}
</script>
<form name="fform">
Penggunaan Select
<hr><pre>
Pilih Jurusan:<select name="jurusan" size="1">
<option value="Akuntansi Perpajakan">Akuntansi Perpajakan
<option value="Manajemen Informatika">Manajemen Informatika
<option value="Teknik Informatika">Teknik Informatika
<option value="Public Relation">Public Relation
<option value="Akuntansidan Perpajakan">Akuntansi dan Perpajakan
</select>
<input type="button" value="Kirim" onclick="EvenTekan()"><input
type="reset">
<hr>
Jurusan:<input type="text" size="30" name="jurusanstr">
254
</form>

255
LATIHAN 6.1

Dengan menggunakan JavaScript, buatlah program untum menampilkan

proses perhitungan perkalian, pembagian, pengurangan dan
penjumlahan, seperti berikut:

Gambar 6.12. Form Input Kalkulator

Gambar 6.13. Output Jika tombol + ditekan

LATIHAN 6.2

256
Buatlah Halaman seperti berikut, yang telah mencakup semua materi
yang ada di dalam bab ini:

Gambar 6.14. Membuat Form Lengkap

Jika Anda Click tombol kirim,. Maka dihalaman bawah akan ditampilkan
data sesuai dengan yang di inputkan dari form sebelah atas

257
6.11. Percabangan

Seperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan. Pada dasarnya dalam JavaScript terdapat dua macam
pernyataan percabangan, yaitu pernyataan if..else dan switch.

6.11.1. if..else

Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, dan
mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi.

Contoh:
If..(kondisi)
{
//lakukan pernyataan yang ada disini
//jika kondisi terpenuhi
}
else
{
//lakukan pernyataan yang ada disini
//jika kondisi tidak dipenuhi
}

6.11.2. if..else if

Pada kasus tertentu mungkin Anda akan meletakan pernyataan if lain

setelah else.

Contoh:

If (x>0)
{
document.writeln(’ X adalah Bilangan positif’);
258
}
else if(x<0)
{
document.writeln(’ X adalah bilangan negatif’);
}
else
{
document.writeln(’ X adalah Nol ‘);
}

6.11.3. switch

Kegunaan pernyataan ini sama dengan yang ada pada C/C++ dan Java,
yaitu untuk menangani percabangan majemuk, Dengan kata lain
pernyataan switch dapat digunakan untuk menyederhanakan pernyataan
if..else if yang terlalu banyak.

Contoh.
if (buffer==0) value ="Minggu";
else if (buffer==1) value ="Senin";
else if (buffer==2) value ="Selasa";
else if (buffer==3) value ="Rabu";
else if (buffer==4) value ="Kamis";
else if (buffer==5) value ="Jumat";
else if (buffer==6) value ="Sabtu";

Dapat disederhanakan dengan pernyataan switch menjadi sebagai

berikut:
Switch (buffer)
{
case 0: value=”Minggu”;break;
case 1: value=”Senin”; break;
case 2: value=”Selasa”; break;
case 3: value=”Rabu”; break;

259
case 4: value=”Kamis”; break;
case 5: value=”Jumat”; break;
default: value=”Sabtu”
}

260
6.12. Pengulangan

Perintah pengulangan biasanya digunakan apabila anda ingin

menampilkan satu atau beberapa baris perintah secara berulang.

6.12.1. Pengulangan For

Pengulangan dengan For paling sering digunakan jika anda sudah tahu
akhir dari perulangan tersebut.

Contoh:
for(nilaiawal;kondisi;penambahan)
{
//ulang pernyataan ini;
}
Contoh dalam program:

For(x=1;x<=10;x++)
document.writeln(“Java Script Ok”);
Dengan pernyataan ini artinya akan menampilkan tulisan “Java Script Ok”
sebanyak sepuluh kali kelayar

6.12.2. Pengulangan while

Pengulangan ini digunakan apabila anda belum tahu pasti berapa banyak
pengulangan akan dilakukan. Berakhirnya suatu perulangan dalam while
ditentukan oleh suatu kondisi. Bila kondisi sudah terpenuhi maka
pengulangan akan dihentikan.

Contoh:
while (kondisi)
{
//ulang pernyataan ini;
}
261
Contoh dalam program:

while (x>0)

{ x=x – 1;

y=y + 1;

6.12.3. Pengulangan do..while

Pengulangan ini hampir sama dengan while, digunakan apabila anda

belum tahu pasti berapa banyak pengulangan akan dilakukan. Bedanya
dengan while, pernyataan do..while pengujian kondisi dilakukan pada
akhir kalang.

Contoh:
do
{
//ulang pernyataan ini;
} while (kondisi);

Contoh dalam program:

do
{
x=x – 1;
y=y + 1;
} while (x>)

6.13. Fungsi

262
Fungsi merupakan bagian program yang dapat melakukan tugas tertentu.
Beberapa fungsi juga ada yang dapat mengembalikan nilai, contohnya
adalah fungsi parseFloat yang sudah digunakan sebelumnya.

6.13.1. Fungsi Buatan Sendiri

Dalam contoh pembahasan sebelumnya sebenarnya Anda sudah

menggunakan fungsi. Untuk mendefinisikan fungsi harus diawali dengan
kata kunci function.

Sintaknya adalah sebagai berikut:

Function namafungsi(param1,param2,…..)
{
//pernyataan
}

Gambar 6.15. Membuat Fungsi.

Program Membuat Fungsi Sendiri

<html>
<head>
<title>Membuat Fungsi Sendiri</title>
</head>
<body bgcolor="#FFFFFF">

263
<p><script language="JavaScript">
function Halo()
{
document.writeln("Halo saya adalah fungsi buatan");
}

function Tulis(Teks)
{
document.writeln(Teks);
}

function Kali(a,b)
{
return (a*b);
}

document.writeln("<PRE>");
document.writeln("<h1>Membuat Fungsi Sendiri</h1>");
Halo();
Tulis("Ini adalah fungi dengan parameter");
var A = Kali(10,5);
Tulis(A);
document.writeln("</PRE>");
</script></p>
</body>
</html>

6.13.2. Fungsi Bawaan

Dalam JavaScript telah disediakan beberapa fungsi bawaan yang akan

sangat berguna sekali bagi Anda, disini yang akan dibahas yaitu mengenai
fungsi eval, parseInt, parseFloat, isNan

 Fungsi eval
Digunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan
JavaScript.
Contoh.
eval(str)

264
 fungsi eval digunakan sebagai pengevaluasi ekspresi seperti
contoh berikut:
var A=eval(“10*2+3”);
memberikan nila 23 ke variabel A
var garis = “document.write(“<HR>”);

jika anda tuliskan seperti ini:

eval(garis);
maka dijendela browser akan ditampilkan garis

 Fungsi parseInt dan parseFloat

Kedua fungsi ini hampir sama, keduanya meminta sebuah parameter
bertipe string dan mengkonversikannya ke numerik.
Contoh
parseInt(str,[radiks])
parseFloat(str);
contoh penggunaan
var A = parseInt(“173”,8); // 123 bilangan basis 8
var B = parseFloat(“3.14”); // 3.14
var C = parseFloat(0.314E1”); //3.14

 Fungsi isNaN
Digunakan untuk menguji apakah suatu variabel adalah bilangan atau
bukan, jika bilangan maka akan mengembalikan nilai true, jika bukan
maka bernilai false
Contoh
var X=parseInt(“123”);
if (isNaN(X))
X = -10;
Artinya jika X bukan bilangan maka X adalah –10
Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi
bawaan dan fungsi buatan.

265
 Gambar 6.16. Menggunakan Fungsi

Program Menggunakan Fungsi Bawaan dan Fungsi Buatan

<html>
<head>
<title>Memasukan Data </title>
<script language="JavaScript">
function EvenTekan()
{
var NamaAnda = (document.fForm.Nama.value);
var JamKerja = parseInt (document.fForm.JamKer.value);
var UpahPerJam = parseInt (document.fForm.Upah.value);
var Total = JamKerja * UpahPerJam;
document.fForm.NamaAnda.value=NamaAnda;
document.fForm.Total.value=Total;
alert("Total " + Total);
}
</script>
</head>
<body>
<form name="fForm">
<H1>
Menggunakan Fungsi Bawaan dan Fungsi Buatan
</H1>
266
<PRE>
Masukan:
Nama : <input type="text" size="13" name="Nama">
Jam Kerja : <input type="text" size="20" name="JamKer">
Upah/Jam : <input type="text" size="20" name="Upah">
<hr>
</PRE>
<input type="button" value="Kirim" onClick="EvenTekan()">
<input type="reset" value="Reset">
<PRE>
Nama : <input type="text" size="13" name="NamaAnda">
Total Gaji : <input type="text" size="20" name="Total">
</PRE>
</form>
</body>
</html>

267
LATIHAN 6.3

Dengan menggunakan fungsi bawaan buatlah sebuah halaman untuk

mencari akar persamaan kuadrat

Gambar 6.17. Membuat Program Persamaan Kuadrat

268
6.14. Kejadian

Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini ada
beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen,
pengguna memasukan data pada kotak teks, pengguna mengklik tombol,
dan sebagainya.

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukan

kejadiannya. Biasanya penanganan kejadian adalah sebuah fungsi, tetapi
pada beberapa kasus, Anda bisa menuliskan pernyataan-pernyataan
secara langsung.

Berikut ini adalah daftar kejadian pada JavaScript

Kejadian Keterangan
Abort Dibangkitkan bila pengguna menghentikan
pemuatan citra (tag <IMG>); yaitu bila
pengguna menekan tombol stop atau mengklik
link
Blur Dibangkitkan bila sebuah elemen form
kehilangan fokus masukan; yaitu bila pengguna
menekan tombol <Tab> atau mengklik elemen
form lainnya.
Change Dibangkitkan bila informasi masukan pada
sebuah elemen form (text, textarea, choice)
diubah oleh pengguna
Click Dibangkitkan bila penggunaa mengklik sebuah
elemen form atau link
Error Dibangkitkan bila terjadi kesalahan saat
browser memuat dokumen atau citra.
Focus Dibangkitkan bila sebuah elemen form
menerima fokus masukan; yaitu bila pengguna
mengklik elemen form ini atau menekan tombol
<tab> sehingga fokus masukan berpindah ke

269
 elemen ini
Load Dibangkitkan bila browser selesai memuat
dokumen
MouseOut Dibangkitkan bila kursor mouse keluar dari
daerah link atau peta cita
MouseOve Dibangkitkan bila kursor mouse berada di atas
r sebuah link. Anda mungkin memperhatikan bila
kursor mouse berada diatas sebuah link,
browser akan menampilkan keterangan pada
status.
Reset Dibangkitkan bila pengguna menekan tombol
reset
Select Dibangkitkan bila pengguna memilih sebagian
atau seluruh teks pada elemen form yang
berupa kotak teks
Submit Dibangkitkan bila pengguna menekan tombol
Submit
Unload Dibangkitkan bila pengguna keluar dari
dokumen

Untuk menangani suatu kejadian, tambahkan atribut onKejadian pada

tag yang sesuai. Kemudian isilah atribut ini dengan pernyataan-
pernyataan JavaScript. Biasanya pernyataan yang diisikan berupa
pemanggilan ke suatu fungsi.

Sintak penanganan kejadian adalah sebagai berikut:

OnKejadian = “Pernyataan-pernyataan”
Contoh:
<BODY ONLOAD = “evLoad()”>
<FORM NAME=:fForm” onSubmit=”evSubmit()”>

270
Pada saat pertama kali halaman dimuat, program akan menampilkan
dialog seperti gambar berikut:

Gambar. 6.18. Kejadian onLoad

Kemudian masukan nama dan jurusan Anda, setelah itu baru di Click
tombol Kirim , maka akan ditampilkan hasil seperti gambar berikut:

Gambar. 6.19. Kejadian onClick

271
Kotak dialog di atas muncul karena dalam program terdapat definisi
penanganan tombol kejadian onClick:
<input type="button" value="Kirim" onClick ="evClick()">

Menangani Kejadian OnClick

<html>
<head>
<title>Menangani Kejadian :</title>
</head>
<body onload="evLoad()"
<p><script language="JavaScript">
function evLoad()
{
alert("Ini adalah contoh penanganan kejadian onLoad\n" +
"Pada JavaScript");
}
function evClick()
{
alert("Halo " + document.fmForm.nama.value + "\nSelamat datang di
Jurusan " + document.fmForm.jurusan.value);
}

</script></p>

<FORM NAME="fmForm">
<h1>Menangani Kejadian :</h1>

<PRE>
Nama :<input type="text" size="20" name="nama">
Jurusan :<input type="text" size="20" name="jurusan"></p>
</PRE>
<p><input type="button" value="Kirim" onClick ="evClick()">
<input type="reset" name="B2" value="Reset"></p>
</form>
</body>
</html>

272
Berikut akan dibuat sebuah halaman, apabila pertama kali dibuat akan
ditampilkan kotak isian seperti gambar berikut:

Gambar. 6.20. User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok, jika nama Anda tidak
diisi maka akan ditampilkan pesan seperti berikut:

Gambar. 6.21. Kotak Informasi

Tetapi jika ada nama yang dimasukan maka akan ditampilkan jendela
seperti berikut:

273
 Gambar. 6.22. Hasil keluaran

Penggunaan Alert
<html>
<head>
<title>Memasukan data pada jendela Alert</title>
<script language="JavaScript”;
var nama=" ";
while ((nama==null) || (nama==" "))
nama= prompt ("Masukan nama Anda : ", " ");
if ((nama== null)|| (nama==" "))
{
alert("Nama Anda siapa sih ... ? " );
}
}
document.writeln("<h1>Halo " + nama + " Apa kabar </h1>");
</script></p>
</head>
<h1>Memasukan data pada jendela Alert</h1>

</FORM>
</body>

274
</html>
6.15. Mendefinsikan Objek

Kata kunci yang digunakan untuk mendefinisikan objek sama dengan kata
kunci yang digunakan untuk mendefinisikan fungsi, yaitu function.
Sebagai contoh, disini akan didefinisikan objek mahasiswa yang terdiri
dari tiga properti, yaitu nama,alamat,jurusan. Untuk itu didefinisikan
fungsi seperti contoh berikut:

function Mahasiswa (Nama,Alamat,Jurusan)

{
this.Nama=Nama;
this.Alamat=Alamat;
this.Jurusan=Jurusan
}

properti this merupakan penunjuk objek ini. Anda memerlukan properti

this karena pernyataan di atas hanyalah definisi objek, Anda belum
menciptakan instan untuk objek tersebut. Untuk menciptakan instan dari
objek mahasiswa di atas digunakan kata kunci new.

Contoh:

Sintia = new Mahasiswa(“Sintia”,”Jl.Panorama No. 80”,”Sekretaris”);

Untuk mengakses suatu objek, operator yang digunakan adalah operator

titik (.).

Contoh
document.writeln(Sintia.Nama);
atau
var Nama=Sintia.Nama;

6.15.1. Pernyataan for..in

Pernyataan for..in digunakan untuk melakukan pengulangan

beerdasarkan properti-properti sebuah objek

Contoh:
275
 for (Var x in Sintia)
docoment.writeln(Sintia[x]);
Contoh halaman untuk memperjelas pendefinisian objek
Contoh Penggunaan for..in
<html>
<p><script language="JavaScript">
function Mahasiswa(Nama,Alamat,Jurusan)
{
this.Nama=Nama;
this.Alamat=Alamat;
this.Jurusan=Jurusan;
}
function Tulis(objek)
{
for (var x in objek)
document.writeln(objek[x]);
document.writeln(" ");
}

</script></p>
</body>
<p><script language="JavaScript">document.writeln("<h1>Membuat
Objek </h1> ");
document.writeln("<PRE>");

//menciptakan instan objek mahasiswa

var Sintia = new Mahasiswa ("Sintia Ratna Dewi","Jl.Panorama III No.
80","Sekretaris");
var Sisca = new Mahasiswa ("Sisca Nawangwulan","Jl.Ciwaruga No.
72","Akuntansi");
var Sarah = new Mahasiswa ("Sarah Galabagan","Jl.Bagdad No.
76","Informatika");

Tulis(Sintia);
Tulis(Sisca);
Tulis(Sarah);
document.writeln("</PRE>");
</script></p>
</body>
</html>

276
6.15.2. Mendefinisikan Metode

Objek merupkan pengkapsulan properti/variabel bersama-sama dengan

metode /fungsi. Untuk mendefinisikan metode, pertama-tama Anda
harus mendefinisikan fungsi biasa.

Contoh:
function Anu()
{

Kemudian pada definisi objek, tambahkan sebuah metode yang menunjuk

fungsi Anu.
Contoh
this.metode=Anu;

Sekarang anda sudah memiliki sebuah metode yang bernama metode.

Berikut ini adalah sebuah halaman yang telah menggunakan Metode
untuk menuliskan objek.

Gambar 6.23. Pemakaian Metode

Pemakaian Metode dalam Java Script

<html>
<head>
<p><script language="JavaScript">
function Mahasiswa(Nama,Alamat,Jurusan)

277
{
this.Nama=Nama;
this.Alamat=Alamat;
this.Jurusan=Jurusan;
//deklarasi metode
this.Tulis=TulisObjek;
this.Ubah=UbahObjek;
}

function TulisObjek()
{
document.writeln("Nama : " + this.Nama);
document.writeln("Alamat : " + this.Alamat);
document.writeln("Jurusan : " + this.Jurusan);
document.writeln(" ");
}

function UbahObjek(Nama,Alamat,Jurusan)
{
this.Nama = Nama;
this.Alamat = Alamat;
this.Jurusan = Jurusan;
}

document.writeln("<h1>Membuat Objek </h1> ");

document.writeln("<PRE>");

//menciptakan instan objek mahasiswa

Mhs = new Mahasiswa ("Sintia Ratna Dewi","Jl.Panorama III No.
80","Sekretaris");
Mhs.Tulis();

//mengubah properti objek

Mhs.Ubah("Sisca Si Jenat","Jl.Ciwaruga 74","Perbankan");
Mhs.Tulis();
document.writeln("</PRE>");
</script></p>
</body>
</html>

278
6.16. Array

Array pada JavaScript merupakan sekumpulan elemen, dimana masing-

masing elemen dapat bertipe apa saja. Jadi konsep array dapat dikatakan
sebagai penggabungan beberapa variabel menjadi satu kesatuan.

Contoh JavaScript untuk array:

Gambar 6.24. Menampilkan Array

Program Menampilkan Array

<html>
<p><script language="JavaScript">
function RataRata()
{
var Jumlah=0.0;
var Total = RataRata.arguments.length;
for (var i=0;i<Total;i++)
Jumlah += RataRata.arguments[i];
return Jumlah/Total;
}

document.writeln("<PRE>");

279
document.writeln("Rata-rata dari 10,20,30,40 adalah " +
RataRata(10,20,30,40));
document.writeln("Rata-rata dari 2,8,10 adalah " +
RataRata(2,8,10));
document.writeln("</PRE>");
</script></p>
</body>
</html>

Objek array mempunyai beberapa properti; salah satu properti yang

penting adalah length. Properti length menyatakan jumlah elemen yang
dimiliki oleh Array.

Objek Array mempunyai beberapa metode untuk memanipulasi array,

yaitu

 join (mengkonversikan semua array ke string),

 reverse (membalik elemen-elemen array).
 sort untuk mengurutkan elemen-elemen array
 split, mengkonversikan string ke dalam array
 concat, menggabungkan dua buah array

Gambar 6.25. Penggunaan Objek Array

280
Penggunaan Objek Array
<html>
<p><script language="JavaScript">
function Tulis(A,str)
{
document.writeln(str)
for (var i=0;i<A.length;i++)
document.writeln(A[i]);
document.writeln(" ");
}
</script></p>

<p><script language="JavaScript"><!--
document.write ("<PRE>");
var Mahasiswa = new Array("Anita","Ilham","Titik");
Tulis (Mahasiswa,"Objek Sebelum di urutkan ");
Mahasiswa.sort();
Tulis (Mahasiswa,"Objek Setelah di urutkan ");
Mahasiswa.reverse();
Tulis (Mahasiswa,"Objek Setelah di reverse ");
Tulis (Mahasiswa,"Objek Setelah join" + Mahasiswa.join('*'));
document.write("<PRE>");
</script></p>
<p><script language="JavaScript">
document.write("<PRE>");
var MahasiswaBaru = ["Kemala","Adinda"];
Tulis(MahasiswaBaru,"Objek Mahasiswa Baru: ");
var MahasiswaGabungan = Mahasiswa.concat(MahasiswaBaru);
Tulis(MahasiswaGabungan,"Objek setelah digabung");
MahasiswaGabungan = MahasiswaGabungan.slice(1,3);
Tulis(MahasiswaGabungan,"Setelah objeck di slice (1,3): ");
document.write("<PRE>");
></script></p>
</body>
</html>

6.17. Frame dalam Java Script

281
Untuk membuat menu dengan menggunakan frame dapat dilakukan
dengan menggunakan kombinasi perintah html dan java script, dimana
framenya di buat di html sedangkan actionnya dibuat dengan
menggunakan java script.

Contoh, misalnya Anda akan membuat sebuah halaman seperti berikut:

Gambar 6.26. Halaman Utama Frame

Jika Anda Click tombol Yahoo, kemudian Anda tekan tombol

Tampilkan, maka pada jendela sebelah kanan akan ditampilkan halaman
seperti berikut:

282
 Gambar 6.27. Menampilkan website yahoo.com

Jika Anda Click pilihan Google, maka akan ditampilkan halaman seperti
berikut pada jendela sebelah kanan:

Gambar 6.27. Menampilkan Website google.com

283
Jika Anda Click pilihan Detik, maka akan ditampilkan halaman detik.com,
seperti berikut pada jendela sebelah kanan:

Gambar 6.28. Menampilkan Website Detik.com

Program utama.html
<html>
<frameset cols = "20%,*">
<frame src = "menu.html" name = "fresatu">
<frame src = "awal.html" name = "fredua">
</frameset>
</html>

Program menu.html
<html>
<head>
<title></title>
</head>
<p><script language="javascript">

function evkananatas()
{
var str = "http://yahoo.com";

284
 if (document.fmform.rbkananatas[1].checked)
str = "http://google.com";
else if (document.fmform.rbkananatas[2].checked)
str = "http://www.detik.com";
parent.fredua.location.href=str;
}

</script></p>
<p>pilih salah satu dibawah ini:</p>
<form name = "fmform">
<p><input type="radio" checked name="rbkananatas" value= "1"
>Yahoo</p>
<p><input type="radio" name="rbkananatas" value="2">Google</p>
<p><input type="radio" name="rbkananatas" value="3">Detik</p>
<p><input type="button" value="tampilkan"
onclick="evkananatas()"></p>
</form>
</body>
</html>

Program awal.html
<html>
<head>
<title></title>
</head>
<body background="gray.jpg">
<p align="center">&nbsp;</p>
<h1 align="center">Halaman ini dibuat dengan menggunakan</h1>
<h1 align="center"><font size="7">Frame </font></h1>
<p align="center"><strong>Design By Fahra Ragita</strong></p>
</body>
</html>

285
 BAB 7
ELECTRONIC MAIL

7.1. Pengertian E-Mail

E-Mail (Electronic Mail) adalah sebuah fasilitas komunikasi dalam Internet

yang berfungsi mengirim surat secara elektronik yang dapat menjangkau
ke seluruh dunia. Dibandingkan dengan surat biasa, e-mail mempunyai
keunggulan yang lebih aman serta tidak membedakan jarak dan waktu.
Secara garis besar, E-mail dapat dibedakan menjadi dua, yaitu e-mail
berbasis SMTP/POP dan e-mail berbasis web. Berikut Penjelasan dari E-
Mail berbasis SMTP/POP dan E-Mail berbasis Web :

A. E-mail Berbasis SMTP/POP

E-mail berbasis SMTP/POP (Simple Mail Transfer Protocol/Post Office

Protocol) adalah e-mail yang menggunakan server SMTP/POP, yaitu
komputer yang dapat mengirim e-mail dari pengguna ke alamat e-mail
yang dituju dan sebaliknya. Agar dapat menggunakan fasilitas e-mail
pada server SMTP/POP, pemakai harus mempunyai account di server
SMTP/POP.

Selain itu, pemakai juga harus menggunakan software mail client untuk
membaca dan mengirim e-mail dari dan ke server SMTP/POP. Apabila
server telah menyediakan layanan Telnet, maka pengguna dapat masuk
ke mesin server, kemudian menjalankan software mail client pada server.

286
Namun jika server tidak menyediakan layanan Telnet, maka pengguna
harus memiliki software mail client seperti Ms Outlook, Eudora, Ms
Outlook Express, Pegasus, dan Netscape Communicator. Agar dapat
menggunakan software mail client, pengguna harus melakukkan setting
atau pengaturan beberapa informasi, seperti nama (alamat IP) server
SMTP/POP, nama user (user name/user ID), dan password pada server e-
mail.

Pada server SMTP/POP, semua e-mail yang dikirim ke pengguna dan telah
memiliki account di server akan disimpan dalam sebuah direktori.
Kemudian, saat pengguna menghubungi server, semua e-mail yang
ditujukan kepadanya akan dikirim ke komputer client. Sebaliknya, saat
pengguna ingin mengirim e-mail ke suatu alamat e-mail, maka e-mail
tersebut akan dikirim ke server SMTP/POP dan selanjutnya akan
diteruskan ke alamat yang dituju.

B. E-Mail Berbasis WEB

E-mail berbasis Web berbeda dengan e-mail berbasis POP. Pada E-mail
berbasis Web, pengguna tidak perlu memiliki account POP pada server
SMTP/POP karena akses e-mail dilakukkan melalui Web Mail dengan
menggunakan browser. Di internet, kita dapat menggunakan situs yang
menyediakan layanan e-mail (webmail) gratis seperti : Yahoo
(mail.yahoo.com), Google (Gmail.google.com), Hotmail
(www.hotmail.com), dll.

Selain E-mail gratis, juga terdapat e-mail langganan melalui ISP (Internet
Service Provider), seperti indonet.com, telkomspeedy.com,
wasantara.com, elganet.com, dan lain-lain. Namun, biasanya e-mail dari
ISP merupakan e-mail berbasis SMTP/POP

287
7.2 Cara Mendaftar Email Gratis di Google

Banyak perusahaan Internet yang menyediakan fasilitas E-Mail Gratis

untuk menjaring pengguna agar dapat masuk ke website perusahaan
tersebut. Berikut adalah contoh beberapa perusahaan yang menyediakan
layanan E-Mail Gratis, diantaranya adalah http://mail.yahoo.com dan
Google Mail, http://mail.google.com

Jika anda ingin membuat E-Mail di Google Mail, silahkan masuk

http://www.google.co.id

Gambar 7.1 Mendaftar E-Mail di Google Mail

Setelah tampil seperti gambar di atas, klik Gmail, sampai muncul seperti
di bawah ini:

288
 Gambar 7.2 Halaman Utama Gmail

Langkah-langkahnya sebagai berikut:

 Pada bagian kanan bawah Click tombol Buat Akun

Gambar 7.3. Tombol Buat Akun

289
 Gambar 7.4. Form pendaftaran email

Jika berhasil, maka tampilan akan menjadi seperti di bawah ini:

290
 Gambar 7.5. Konfirmasi jika anda berhasil membuat E-Mail

 Kemudian klik: Saya siap menampilkan account saya. Dengan

melakukan perintah ini Anda siap menggunakan email anda.

Jika email sudah anda periksa, lakukan Sign out / Keluar dari sistem
Google. Jadikan kebiasaan selalu menekan Sign out jika ingin mengakhiri
pengguaan email.

291
 BAB 8
PEMILIHAN DOMAIN DAN HOSTING

8.1 Pemilihan Domain

Domain dapat dipilih sendiri didasarkan pada ketentuan yang sudah ada
yang tersedia di Internet. Beberapa domain terkenal yang didasarkan
pada organisasi diantaranya ialah:

 com untuk organisasi komersial

 edu / ac untuk organisasi pendidikan
 gov untuk organisasi pemerintah
 mil untuk organisasi militer
 net untuk organisasi yang menyediakan jaringan
 org untuk organisasi umum
 info untuk informasi pribadi
 web untuk pengelola web
Sedang yang didasarkan pada kelompok negara diantaranya ialah:

 ca untuk Canada

 fr untuk Perancis

 jp untuk Jepang

 nl untuk Belanda

 th untuk Thailand

 uk untuk Inggris

 id untuk Indonesia

 au untuk Australia

292
Anda dapat memilih domain didasarkan pada jenis organisasi ataupun
didasarkan pada kelompok negara, misalnya domain yang dipilih adalah:

 web_pribadi.org (http://www.web_pribadi.org)

 web_bisnis.com (http://www.web_bisnis.com)

8.2. Pemilihan Hosting

Untuk menyimpan data-data website yang ingin anda publikasikan di

Internet, anda harus menempatkan website tersebut ditempat hosting,
adapun pemilihan hosting dapat dilakukan dengan cara:Pemilihan:

 Memilih hosting yang professional atau layanan hosting berbayar

yang diberikan oleh penyedia layanan hosting seperti
Masterweb,Qwords,Jakartahosting, HostingGokil atau yang lainnya.
Pembayaran didasarkan pada besar kapasitas sarana penyimpanan
file-file web yang akan dititipkan / hosting ke layanan-layanan
tersebut.

http://www.qwords.com

293
 http://www.masterweb.com/

http://www.jakartawebhosting.com/

294
 http://www.hostinggokil.com/

Memilih hosting gratis dapat dicari melalui Internet, bisa mengguna jasa
mesin pencari seperti Yahoo, Google atau yang lainnya. Cara-cara hosting
gratis diatur oleh masing-masing penyedia layanan hosting tersebut.

Berikut adalah contoh beberapa webhosting gratis yang dapat anda

gunakan untuk mempublikasikan halaman website yang anda buat.

295
 http://www.webs.com/

http://www.host1free.com/

296
 DAFTAR PUSTAKA

1. Efendi, Handaya.(2000). Pemrograman Dynamic HTML. Jakarta:PT

Gramedia
2. Kerven, David et. al. (1997) HTML 3.2 Plus. Corte Madera: Waite
Group Press
3. Pardosi, Mico. 2001. Bahasa Pemrograman Internet: Java Script.
Surabaya:Penerbit Indah
4. Prananta, Antony.(2001). Panduan Pemrograman Java Script.
Yogyakarta:Penerbit Andi
5. Sarwono, Jonathan. (2005) Kumpulan Program HTML. Bandung:
Unikom
6. Suryana, Taryana Amarullah, Ahmad. (2005). Pengantar Internet
dan HTML. Bandung: UnikomCenter
7. Suryana, Taryana dan Jonathan Sarwono (2007). Membuat
Website Business dan Pribadi dengan HTML. Yogyakarta: Penerbit
Gava Media

RUJUKAN WEBSITE

1. http://www.hotscripts.com
2. http://javascript-array.com/scripts/simple_drop_down_menu/
3. http://www.redline-software.com/eng/support/docs/win
http://www.edrawsoft.com/Wide-Area-Network.php
4. http://www.wally.cs.iupui.edu/n241-new/webMag/index.html
5. http://www.hotscripts.com
6. http://javascript.internet.com
7. http://www.codelifter.com
8. http://www.codebrain.com
9. http://www.dynamicdrive.com

297
 10. http://www.js-examples.com
11. http://www.w3schools.com
12. http://htmlcssguides.com/

298
 TENTANG PENULIS

TARYANA SURYANA, Lahir di Bandung, dari tahun

2001-2009 menjabat sebagai Kepala Unikom
Center (UC), dan dari 2010 sampai sekarang
Menjabat sebagai Direktur ICT & Multimedia
Universitas Komputer Indonesia, Dosen Tetap
Unikom, Pengajar matakuliah ilmu komputer
dibeberapa perguruan tinggi yang ada di Bandung,.
Menyelesaikan pendidikan Sarjana Teknik
Informatika di ITA, Magister Sistem Informasi
STMIK-LIKMI Bandung, Selain mengajar, aktif
melakukan penelitian dan pengembangan sistem informasi di UNIKOM,
telah menulis lebih dari 10 Judul buku komputer yang diterbitkan
secara luas, selain untuk di pergunakan di UNIKOM. Bekerja pula
sebagai Sistem Engineering di beberapa konsultan IT, dan juga
Developer Software Aplikasi Untuk berberapa Perguruan Tinggi di
Indonesia. Pengetahuan di bidang teknologi informasi dan
manajemen sistem informasi diperoleh dari pengalaman praktis di
industri, pemerintahan, perbankan, manufaktur, telekomunikasi,
pendidikan dan kesehatan, dapat dihubungi di: [email protected]
atau melalui 0818426975.

KOESHERYATIN,Sebagai Dosen Pengajar

matakuliah Ilmu Komputer dilingkungan
Universitas Komputer Indonesia dan beberapa
Perguruan Tinggi yang ada di Bandung.
Menyelesaikan pendidikan Sarjana di UNESA
Surabaya, Magister Kebijakan Publik di Universitas
Pasundan Bandung. Selain mengajar juga aktif
menulis beberapa buku Komputer dapat dihubungi
melalui [email protected]

299
 APLIKASI INTERNET MENGGUNAKAN

HTML, CSS & JAVA SCRIPT

Bab 1 berisi penjelasan mengenai dasar-dasar dan Pengertian Teknologi

Informasi, Arsitektur Komputer, peralatan input output, Control Unit,
Jaringan Komputer, LAN dan WAN

Bab 2 berisi penjelasan mengenai Internet, Pengertian Internet, Proses

Perjalanan Informasi, mengenal alamat domain internet, Cara Kerja
Koneksi Suatu Web ke Internet, Jenis File yang ada di Internet, Cara
Kerja Email, Cara Kerja World Wide Web, Cara Kerja Browser, Cara Kerja
Markup Language /HTML.

Bab 3, berisi penjelasan mengenai Local area Network, Wide Area

Network, Elemen-Elemen Perangkat Keras Jaringan Lokal, Perangkat
Keras untuk Persyaratan-Persyaratan Jaringan Lokal , Instalasi Perangkat
Keras untuk Peer to Peer Network, Mengubah Setting Jaringan, Teknologi
Wide Area Network (WAN), Perangkat Lunak Diagram WAN

Bab 4 berisi penjelasan mengenai Hypetext Markup Language, Dasar-

dasar HTML, Menambahkan Efek Karakter Fisik Dalam Tampilan ,
Menambahkan Efek Karakter Logika, Tabel, Elemen dan Atribut, Membuat
LIST (Daftar), Tampilan dalam Dokumen HTML, Membuat Link,
Menempatkan Gambar ke dalam Dokumen HTML, Menambahkan Obyek-
Obyek Multimedia, Membuat Formulir HTML, Membuat Frame

Bab V berisi penjelasan mengenai Pengertian CSS, Cara Menuliskan CSS,

Sintak CSS, CSS Styling, CSS Text, Style Links, List, CSS Table, CSS BOX
Model dan Penggunaan CSS dalam Aplikasi

300
Bab 6 berisi penjelasan mengenai Java Script, bagaimana menjalankan
Java Script, membuat Program Pertama dalam Java Script, menuliskan
Komentar, Event, Function, Variabel dalam Java Script, Tipe Data,
Operator, Memasukan Data, Percabangan, Perulangan, Fungsi, Kejadian,
Mendefinisikan Objek, Array, Frame dalam Java Script

Bab 7 berisi penjelasan mengenai surat elektronik atau E-Mail, cara

mendaftar E-mail, Mendaftar pada Website layanan E-Mail Gratis

Bab 8 berisi penjelasan mengenai Domain Internet, Cara Memilih

Hosting, Hosting Gratis dan Hosting Berbayar

301