Buku Kelas 9 Regular

1
Mengenal
Microsoft Visual Basic 6.0
Yang Mengajar (Manusia) Dengan Perantara Kalam. Dia
Mengajarkan Kepada
Manusia Apa Yang Tidak Diketahuinya. ( Al-Alaq, 4
5)
Kompetensi
Belajar
: Mengenal Elemen-elemen Dasar Program Visual Basic
Hasil Belajar
: Siswa dapat membuat program sederhana
Indikator
: Siswa mampu mengenal dan menjalankan Ms.Visual Basic
Alokasi Waktu
: 2 x Pertemuan
A. Pengertian Microsoft Visual Basic

Microsoft Visual Basic merupakan bahasa pemograman termudah dan
tercepat saat ini untuk membuat aplikasi pada system operasi Microsoft
Windows., selain itu Microsoft Visual Basic memungkinkan pembuatan aplikasi
Grafiphical User Interface ( GUI ) atau pemrograman yang menggunakan
tampilan grafis sebagai alat komunikasi dengan pemakainya (user).
B. Memulai Ms. Visual Basic 6.0
Microsoft Visual Basic 6.0 dapat dimulai dengan cara:
Langsung dari menu Start Program Microsoft Visual Basic 6.0 Visual
Basic 6.0
C. Elemen Elemen Didalam Ms. Visual Basic

Menubar
Toolbar
Form
Toolbox
Menu Project
Properties
Windows Layout
1. Baris Menu ( Menu Bar )
Baris menu terletak paling atas pada tampilan Microsoft Visual
Basic. Menu merupakan kumpulan perintah yang dikelompokkan dalam
beberapa kriteria operasi yang dihasilkan VB 6.0
2. Form
Form adalah bahan untuk pembuatan program VB-nya. Kita
meletakkan kontrol pada Form. Kontrol ini misalnya tombol CheckBox,
Radio Button, Memo, Label, Panel dan sebagainya.

2
3. Windows Code
Window Code adalah window tempat kita menuliskan program
komputernya. Pada window ini terdapat fasilitas editing (memperbaiki)
yang cukup lengkap. Jika kita melakukan klik ganda pada sebuah object
yang berupa kontrol atau form maka window ini langsung aktif dan
membawa kursor kita ke tempat penulisan program yang terkait dengan
obyek tersebut. Tempat untuk menuliskan program berada di antara
Private Sub dan EndSub.
4. Tool Box
Toolbox adalah tempat untuk menyimpan kontrol yang akan kita
gunakan pada program yang dipasangkan pada form. Dibawah ini adalah
gambar-gambar toolbox dan fungsinya masing-masing dalam bentuk table.
Cara mengaktifkannya, yaitu dengan menekan
pada tool bar
5. Window Properties
Windows Properties berfungsi untuk menyiapkan segala kelengkapan
(properties) yang diperlukan dalam perancangan program maupun obyek
yang kita buat di Form.
Cara mengaktifkannya, yaitu dengan menekan
pada toolbar
LATIHAN 1
Program Menghitung Luas Dan Keliling Lingkaran
Buatlah Program Menghitung Luas dan keliling Lingkaran dengan tampilan Interface
menggunakan toolbox : Label, Text box dan Command Button
A. Interface program
B. ToolBox
Kontrol yang bisa digunakan untuk

Label
menampilkan teks yang tidak bisa diubah

oleh pemakai program kita.
Text Box
Command
Button
Untuk membuat
area teks di
mana
teksnya bisa diubah oleh pemakai

Untuk
membuat
pelaksanaan perintah.
Tool Box yang kita gunakan terdiri dari :

1.
Label
: 3Buah
2.
Text Box
: 3Buah
3.
Command Button : 2 Buah
sebuah
tombol
C.
Properties Program
Objek
Form1
Textbox1
Textbox
Textbox3
Label1
Label2
Label3
Command Button1
Command Button2
Properties
Name
Caption
Name
Text
Name
Text
Name
Text
Name
Caption
Name
Caption
Name
Caption
Name
Caption
Name
Caption
Nilai
FrmContoh2
Luas dan Keliling Lingkaran
TxtDiameter
(kosongkan)
TxtKeliling
(kosongkan)
TxtLuas
(kosongkan)
LblDiameter
Diameter Lingkaran
LblKeliling
Keliling Lingkaran
LblLuas
Luas Lingkaran
CmdHitung
&Hitung
CmdKeluar
&Keluar
D. Program Code :
Private Sub Command1_Click()
TxtKeliling.Text = (3.14 * TxtDiameter.Text)
TxtLuas.Text = (3.14 * 0.25 * (TxtDiameter.Text) ^ 2)
End Sub
Private Sub Command2_Click()
Unload Me
End Sub
Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama
NoAbsen_Latihan1_Nama
Mengenal Visual Data

. Allah Meninggikan Orang Ya Diberi Ilmu Pengetahuan
Bebe
Kompetensi Belajar : Mengenal Elemen-elemen Dasar Program Visual Basic

Hasil Belajar
: Siswa dapat membuat program sederhana dengan
visual data type Date and time
Indikator : Siswa mampu mengenal macam macam visual data
Alokasi Waktu : 2 x Pertemuan
Jenis Jenis Visual Data.

Dalam Microsoft Visual Basic 6.0 ada 6 jenis data yang digunakan
untuk pembuatan program komputer, yaitu :
1. Numeric (angka)
2. String (gabungan huruf dan angka)
3. Boolean (nilai benar atau salah)
4. Date (tanggal) & Time (Waktu )
5. Byte
6. Variant
Didalam Bab ini hanya akan kita bahas mengenai Jenis visual data bertype Date &
Time .
1. Date
Bentuk penulisan Code program = Format ( Expession )
Contoh :
Private Sub Timer2_Timer()
LBLHARI.Caption = Format(Date, "DD:MMMM:YYYY")
End Sub
Keterangan :
DD Menyatakan Day ( Tanggal )
MMMM Menyatakan Month ( Bulan )
YYYY Menyatakan Year (Tahun )
2. Time
Contoh :
LBLJAM.Caption = Format(Time, "HH: MM: SS ")
End Sub
Keterangan :
1. HH Menyatakan Hour ( Jam )
2. MM Menyatakan Minute ( Menit )
3. SS Menyatakan Second (Detik )
LATIHAN 2
PROGRAM MENGHITUNG LUAS PERSEGI DAN LUAS SEGITIGA
DILENGKAPI DENGAN MENAMPILKAN TANGGAL DAN JAM DIGITAL
Setelah selesai membuat program diatas tambahkan dengan program menghitung
luas segi tiga dan luas persegi panjang didalam sebuah frame
A. Interface Running Program
C. Properties
Objek
Form1
Label1
Label2
Label3
Label4
Label5
Label6
Label7
Label8
Frame1
Frame2
Command1
Command2
Command3
Command4
Text1
Text2
Text3
Text4
Text5
Text6
Timer1
Timer2
Properties
Name
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Name
Caption
Name
Caption
Name
Caption
Name
Caption
Name
Text
Name
Text
Name
Text
Name
Text
Name
Text
Name
Text
Interval
Interval
Nilai
Form1
Menghitung Luas
Label1
Label2
Panjang
Lebar
Luas Persegi Panjang
Alas
Tinggi
Luas Segitiga
Menghitung Luas Persegi Panjang
Menghitung Luas Segitiga
Cmdhitungpp
&Hitung
Cmdbersihpp
&Bersih
Cmdhitungsg
H&itung
Cmdbersihsg
B&ersih
Txtpanjangpp
(dikosongkan)
Txtlebarpp
(dikosongkan)
Txtluaspp
(dikosongkan)
Txtalassg
(dikosongkan)
Txttinggisg
(dikosongkan)
Txtluassg
(dikosongkan)
1000
1000
D. Program Code
Private Sub cmdbersihpp_Click()
txtpanjangpp.Text = ""
txtlebarpp.Text = ""
txtluaspp.Text = ""
End Sub
Private Sub cmdbersihsg_Click()
txtalassg.Text = ""
txttinggisg.Text = ""
txtluassg.Text = ""
End Sub
Private Sub cmdhitungpp_Click()

txtluaspp.Text = txtpanjangpp.Text * txtlebarpp.Text
End Sub
Private Sub cmdhitungsg_Click()
txtluassg.Text = (txtalassg.Text * txttinggisg.Text) / 2
End Sub
Label1.Caption = Format(Time, "HH: MM: SS ")
End Sub
Label2.Caption = Format(Date, "DD:MMMM:YYYY")
End Sub
E. Save Program
1NoAbsen_Latihan2_Nama
10
Variabel dan Konstanta

Katakanlah : Apakah sama orangorang yang mengetahui
dengan orang yang tidak mengetahui? Sesungguhnya
orang yang berakallah yang dapat menerima pelajaran
( Qs. Az Zumar : 9 )
Kompetensi Belajar
Hasil Belajar
Indikator
Alokasi Waktu
: Mengenal Program dengan pemakian sebuah

variable
& Konstanta
: Siswa dapat membuat program sederhana yang
menggunakan variable
: Siswa mampu mengenal dan menggunakan
Variable
& Konstanta
: 2 x Pertemuan
PENGERTIAN VARIABEL
Variabel dapat diartikan sebagai kata pengganti atau pemberian nama
sebuah object yang bernilai tidak pasti ( Tidak tetap ), maka ada peraturan
(syarat) pemberian nama variable, yaitu:
1. Harus diawali dengan huruf
2. Jangan terlalu panjang, maksimal 40 karakter
3. Tidak boleh ada spasi
4. Yang diperbolehkan adalah huruf, angka atau garis bawah.
Contohnya:
DATASISWA contoh variable yang menggunakan huruf semua
DATA01 contoh variable yang menggunakan huruf dan angka
DATA_SISWA contoh variable yang menggunakan garis bawah
5. Tidak boleh menggunakan kata kunci, obyek, property dan metode Visual
Basic.
11
6. Jangan kembar (sama). Cara

Penulisan (Deklarasi) Variabel
Untuk membuat program, kita harus membuat variable terlebih dahulu.
Caranya dengan menuliskan kode seperti:
Contoh :
Private Sub CMDKELUAR_Click()
Dim msg, style
msg = "Apakah anda yakin ingin keluar ?"
style = vbYesNo + vbDefaultButton2
response = MsgBox(msg, vbYesNo + vbDefaultButton2)
If response = vbYes Then End
response = vbNo
End Sub
Penjelasan :
Tugas variable Msg adalah menampung data. sedangkan tugas variable pesan
adalah menampung kata atau kalimat, misalnya Apakah Anda Yakin Ing
PENGERTIAN KONSTANTA.
Konstanta adalah variable yang nilainya tetap. Banyaknya sifat konstanta yang
mirip dengan variable. Perbedaan utama adalah nilai tetap dan kecepatan proses.
Konstanta diproses lebih cepat, sebab tidak menunggu tahap pengisian data.
Sekali anda menetapkan nilai konstanta, selanjutnya andatidak bisa mengubahnya
lagi. Karena Konstanta nilainya harus tetap.
LATIHAN 3
PROGRAM MENGHITUNG LUAS PERSEGI PANJANG DENGAN JAM
DIGITAL DISERTAI DENGAN PENAMBAHAN PROGRAM PESAN PADA
COMMAND
BUTTON KELUAR
Buatlah sebuah Program seperti dibawah ini :
12
A. Interface Running Program
C. Properties
Objek
Form1
Properties
Caption
Caption
Caption
Name
Caption
Name
Caption
Name
Caption
Form1
Menghitung Luas
Label1
Program Menghitung
Luas Persegi Panjang
Panjang
Lebar
Luas
Cmdhitung
&Hitung
Cmdbersih
&Bersih
Cmdkeluar
&Keluar
Textbox1
Name
Text
Txtpanjang
(dikosongkan)
Textbox2
Name
Txtlebar
Label1
Label2
Label3
Label4
Label5
Command1
Command2
Command3
Name
Caption
Caption
Caption
Nilai
13
Textbox3
Timer1
Text
Name
Text
Interval
(dikosongkan)
Txtluas
(dikosongkan)
1000
D. Program Code
Label11.Caption = Format(Time, "hh: mm: ss ")
End Sub
Private Sub cmdbersih_Click()
txtpanjang.Text = ""
txtlebar.Text = ""
txtluas.Text = ""
End Sub
Private Sub cmdhitung _Click()
txtluas.Text = Val(txtpanjang.Text) * Val(txtlebar.Text)
End Sub
Private Sub CMDKELUAR_Click()
Dim msg, style
msg = "Apakah anda yakin ingin keluar ?"
style = vbYesNo + vbDefaultButton2
response = MsgBox(msg, vbYesNo + vbDefaultButton2)
If response = vbYes Then End
response = vbNo
End Sub
E. Save Program
LATIHAN 4
14
PROGRAM MENGHITUNG KELILING PERSEGI PANJANG DENGAN JAM

DIGITAL DISERTAI DENGAN PENAMBAHAN PROGRAM PESAN PADA
COMMAND
BUTTON KELUAR

4
Stuktur Kontrol Program
Barang Siapa Yang Membawa Kebaikan, Maka Ia Memperoleh
(Balasan) Yang Lebih Baik Dari
Padanya, Sedang Mereka Itu Adalah Orang-Orang Yang Aman
Tenteram Dari Kejutan Yang

Dahsyat Pada Hari Itu (QS. An-Naml:89)
15
: Mengenal Elemen-elemen Dasar Program Visual

Basic
Kompetensi Belajar
Hasil Belajar
: Siswa dapat membuat program sederhana

: Siswa mampu mengenal dan menggunakan
Variable
Indikator
& Konstanta
Alokasi Waktu
1.
: 4 x Pertemuan
IF THEN
Digunakan untuk mengeksekusi satu kali atau lebih perintah yang

menyatakan keadaan. Bisa ditulis dengan dua cara,yaitu :
If <Kondisi> Then Perintah
Atau
If < Kondisi> Then
Perintah
End If
2.
IF THEN ELSE
Sturktur jenis ini mirip dengandigunakanstruktur digunakan untuk banyak blok perintah,
contoh :
Ada dua cara penulisan If . Then . Else

Cara 1 :
Cara 2 :
If <Kondisi 1> Then
If <kondisi 1> Then
[Perintah Blok 1]
Else
If <Kondisi 2> Then
[Perintah Blok 1]
Else If <Kondisi 1> Then
[Perintah blok 2]
16
[Perintah blok 2]
Else If <kondisi ke-n> Then
Else
[Perintah blok ke-n]
[Perintah blok kondisi else]
Else
[Perintah blok kondisi else]
End If
End If
End If
LATIHAN 5
Program Untuk Mencari Hari Lahir dan Umur Dengan Kontrol Program Select Case
Buatlah Form dan Tulis Codenya.
A. Interface
17
B. Code Program :
Private Sub cmdhitung_Click()
Dim Umur As Integer, h As Integer
Dim Hari As String
h = Weekday(Text1.Text)
Select Case h
Case 1
Hari =
"Minggu" Case 2
Hari =
"Senin" Case 3
Hari = "Selasa"
Case 4
Hari =
"Rabu" Case 5
Hari =
"Kamis" Case 6
Hari = "Jum'at"
Case Else
Hari =
"Sabtu" End Select
Umur = 2007 - Year(Text1.Text)
Label4.Caption = Hari
Label5.Caption = Str(Umur) + " Tahun"
End Sub
Private Sub cmdkeluar_Click()
Unload Me
End Sub
18
Private Sub cmdlagi_Click()

Text1.Text = ""
Text1.Setfocus
End Sub
LATIHAN 6
Program Memasukan Gambar
Buatlah Program gambar dibawah ini :
A. Interface
2. Tool Box
Tool Box yang digunakan terdiri dari :
1. Picture Box
2. Command Button
3. Shape
Picture
Box
Shape
Untuk menampilkan gambar statis maupun

gambar aktif
dari sumber di luar dirinya
Untuk memasang kontrol yang mampu
menghasilkan
sarana agar pemakai bisa menggambar berbagai
bentuk
seperti oval, lingkaran dan lain-lain.
3. Properties
1. Untuk Tool box Picture Box kita dapat memasukan gambar melalui
Properties :
Picture
19
2. Untuk Tool Box Shape kita dapat melakukan perubahan bentuk dengan
menggunakan Properties :
Shape
: 2 Oval
Fill Style
: 0 Solid
:
&H00COFFCO
Fill Color
&
Border Color :
&H00008000&
3. Untuk Tool Box Command Button kita dapat memberikan warna latar
belakang dengan merubah pada properties
Style
: 1 Graphical
Back Color : &H0080FF80&
4. Program Code
5. Save Program
1. Untuk membuat gambar sedikit berbeda kita dapat membuat 2 buah picture
box
yang bertumpuk dengan tampilan picture yang berbeda (Cont: Gambar
menjadi terbalik )
dan event yang digunakan adalah ketika mouse menyentuh gambar ( Mouse
Move )
maka gambar akan berubah tampilan
D. Code Program
Private Sub Picture1_MouseMove(Button As Integer, Shift
As Integer, X As Single, Y As Single)
Picture1.Visible = False
Picture2.Visible = True
End Sub
Private Sub Picture2_MouseMove(Button As Integer, Shift
As Integer, X As Single, Y As Single)
Picture2.Visible = False
Picture1.Visible = True
End Sub
20
2. Setelah perintah diatas dilaksanakan semua , selanjutnya tugas berikutnya

adalah melanjut kan menuliskan code program untuk Command y
Gambar yang
Lain disertai dengan menambahkan gambar berikutnya.
3. Selanjutnya tuliskanlah code program untuk Command Keluar.
E. Save Program : Simpan didalam folder class dengan nama file = Latihan 13
(Nama )
5
Mengenal Dreamweaver
Bacalah dengan nama Tuhan
(QS. Al-Alaq:1)
21
Pokok Bahasan
Tujuan
Alokasi Waktu
: Pengenalan Program DreamWeaver dan icon-iconnya

: Siswa dapat mengetahui fungsi Software DreamWeaver
Dan icon-icon yang ada didalamnya
: 1 x Pertemuan
Pendahuluan
Bagaimana Halaman web bekerja?
Halaman web dapat diakses melalui internet apabila halaman tersebut sudah ditaruh pada
server web yang terhubung internet. Server yang terhubung dengan internet tersebut
dinamakan sebagai web hosting.Adabanyakpenyedia jasa hosting di internet. Untuk dapat
membuka halaman yang telah kita taruh pada web hosting tertentu, maka kita memerlukan
alamat khusus. Alamat ini kita sebut dengan nama domain. Sebagai contoh misalnya,
ketika kita mengetik http://www.google.com maka secara otomatis kita bisa melihat
halaman google pada browser kita. www.google.com inilah yang kita sebut dengan alamat
domain.
Langkah-langkah berikut diharapkan bisa memberikan gambaran lebih jelas:
1 Pertama tama saya membuat halaman web. Dalam hal ini saya membuat 3 buah
halaman berbeda
2 Kemudian halaman web tersebut saya taruh (hosting) di server web tertentu. Ada
banyak perusahaan penyedia hosting di internet, bahkan sebagian ada yang gratis
seperti geocities.com, pandela.com, dll yang tentu saja mempunyai service yang
berbeda-beda. Proses pengiriman dari komputer saya menuju ke komputer server
biasa disebut dengan istilah upload. Untuk tutorial kali ini saya upload di server web
mesin brawijaya pada folder latihan dengan nama file hal1.html, hal2.html, dan
hal3.html.
3 Setelah semuanya terkirim, berarti 3 halaman tersebut sudah bisa dilihat lewat
internet,...asal tahu alamatnya!. Web teknik mesin brawijaya mempunyai alamat

domain http://mesin.brawijaya.ac.id , sehingga karena 3 halaman yang kita buat
tadi
berada pada folder latihan, maka untuk bis http://mesin.brawijaya.ac.id/latihan/hal1.html , berikut
penjelasananya:
Informasi: jika anda hanya menulis http://mesin.brawijaya.ac.id saja, maka hal itu berarti halaman yang
dibaca adalah file yang mempunya index.php, tergantung setting dari server web itu. Biasanya yang
dibaca adalah index.html.
Jenis web berdasarkan teknologinya

Web statik
22
Adalah jenis website yang mana pengguna tidak bisa mengubah content dari web tersebut
secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server
hanyalah seputar pemrosesan link saja.
Jenis web ini menggunakan client side script, yaitu script-script yang dapat dimengerti oleh
komputer klien saja (dalam hal ini browser) seperti html, javascript, dhtml, css, dan lain-lain.
Web Dinamis
Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangat kompleks.
Seseorang bisa mengubah content dari halaman tertentu dengan menggunakan browser.
Request yang dikirimkan oleh pengguna dapat diproser oleh server untuk kemudian
ditampilkan dalam isi yang berbeda-beda menurut alur programnya.
Jenis web ini menggunakan server side script, yaitu bahasa pemrograman yang dapat
diproses oleh server untuk kemudian ditampilkan di browser pengguna dengan client side
script.
Contoh dari web dinamis misalnya adalah forum-forum yang ada di internet. Disitu kita bisa
mengisi content dari web tersebut, mengubah data diri, dan mengirimkan pesan.
Dasar HTML (tinjauan secara umum)

HTML (HyperText Markup Language) merupakan bahasa dasar yang digunakan untuk bisa
menampilkan sebuah situs web pada komputer klien (Client side script). Hal tersebut berarti
untuk bisa menampilkan halaman web seesuai yang kita inginkan di browser maka kita
harus menulisnya dalam bahasa html.
Untuk memahaminya silahkan perhatikan contoh dibawah:
<html>
<head>
<title>Tutorial dreamweaver</title>
</head>
<body>
Tinjauan html dasar
secara umum
sekali 
</body>
</html>
Dari contoh sederhana di atas dapat dilihat susunan bahasa html pada umumnya. Kita sebut setiap
sintak yang berada dalamelemen.Setiaptandaelemen selalu< dan ditutup
dengan</......>tag.perhatikan<body> dielemenatasmisalnya. Elemen
tersebut diawali<body>dengan,kemudiantanda ditutup</body>. dengan-tagTag yang ada dalam
elemen tersebut berarti menjadi bagian dari elemen body.
Mari kita bongkar contoh lainnya. Perhatikan elemen yang berada pada elemen body di
atas.
Tinjauan html dasar
secara umum sekali 
Kemudian bandingkan hasilnya jika dilihat di browser
23
Gambar 2. <Title> ditampilkan pada title bar internet explorer

Perhatikan pada kata tinjauan htmlmempunyaiterlihat property bold, sehingga dalam bahasa html
kedua suku kata tersebut masuk ke dalam
element yang berfungsi untuk merubah property text menjadi bold. Sedangkan
suku kata html mempunyai property miring, seh dalam element yang berfungsi merubahnya
menjadi text miring.
Tinjauan html
Sekarang coba pelajari bahasa di bawah ini dengan membandingkannya dengan tampilan
pada gambar 2.
 dasar secara umum sekali 
Ada dua elemen dasar dalam sebuah dokumen html (perhatikan script yang tercetak tebal
diatas), yaitu elemen head dan elemen body.
Elemen <head> berisi informasi-informasi mengenai dokumen html anda. Elemen ini seperti
halnya kepala surat dalam surat-surat resmi. Didalamnya anda dapat menemukan informasi
seperti nama pemilik, judul, deskripsi tentang isi dokumen, Judul dokumen, dan lain-lain.
Perhatikan dalam contoh di atas, dalam elemen head, yaitu antara <head> sampai
</head> terdapat elemen <title>. Elemen title berfungsi untuk memberikan judul pada
dokumen anda. elemen ini akan terlihat pada jendela browser bagian atas (bagian yang
dilingkari warna merah pada gambar 2).
Sedangkan elemen <body> merupakan penampung dari elemen-elemen yang langsung
ditampilkan dalam halaman web. Silahkan lihat kembali dalam contoh diatas, mengapa kata
tinjauan
html dasar secara umum sekali berada
Baiklah, kita sudah mempunyai bekal yang cukup untuk bisa membuat website dengan
dreamweaver, sebab anda tidak perlu menghafalkan semua element-elemen atau tag html.
Yang penting adalah kita tahu susunan umum html dan cara kerjanya, untuk selanjutnya kita
serahkan dreamweaver untuk membantu kita.
24
Berkenalan dengan Dreamweaver

Dreamweaver merupakan salah satu software pembuat website yang mempunyai banyak
sekali kemudahan dalam pengoperasiannya namun juga sangat powerful dalam pembuatan
website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan
macromedia flash, sebuah tool animasi yang sangat populer di internet.
Memulai dreamweaver
Pertama kali dreamweaver dibuka, setelah anda instal sebelumnya, maka akan tertampil
jendela yang menanyakan kepada kita untuk memilih jenis layout yang diinginkan.
Gambar 3. Jendela dialog ketika pertama kali dreamweaver di-start

Ada dua pilihan model layout kerja, yaitu model dreamweaver mx, atau model dreamweaver
4. Pada model dreamweaver 4, setiap jendela kerja berdiri sendiri-sendiri. Dalam tutorial ini
kita menggunakan layout kerja standart dreamweaver mx karena model layout kerja ini
dirasa paling optimal. Checkbox homesite/codebuilder merupakan pilihan untuk
mengoptimalkan kerja kita apabila kita lebih banyak bekerja di script. Sangat cocok untuk
tingkat lanjut.
Klik OK
Jendela tersebut hanya muncul pada saat pertama kali program dreamweaver dijalankan.
Apabila kita menginginkan layout kerja yang berbeda setelah beberapa kali menjalankan
dreamweaver, maka kita bisa memunculkan lagi jendela tersebut dengan mengklik:
edit > preferences atau menggunakan shortcut ctrl+U
jendela preferences akan tertampil:
25
Gambar 4. Tombol untuk menampilkan kembali jendela model layout kerja dreamweaver
Kemudian klik tombol Change Workspace
Fungsi dari preferences ini adalah untuk mengatur semua hal mengenai dreamweaver.
Mungkin kita akan memerlukannya nanti ketika dihadapkan pada sebuah masalah
pendesainan situs tertentu, namun untuk kali ini kita biarkan pada kondisi default saja. Hal
tersebut sudah mencukupi untuk pengerjaan website secara umum.
Setelah itu akan muncul layout kerja dreamweaver. perhatikan gambar 4
Pengenalan interface dreamweaver
Gambar di bawah merupakan gambaran layout kerja dreamweaver mx. Jendela-jendela
pembantu yang terdapat pada menu window dikelompokkan pada panel bagian kanan.
Seluruh panel bisa disembunyikan dengan mengklik tombol yang ditunjukkan oleh tanda
panah.
Document toolbar
Insert bar
menus
26
Gambar 5. Bagian-bagian utama tempat kerja dreamweaver

Design view bekerja layaknya kanvas bagi pelukis. Bagian ini merupakan tempat kita
bekerja dalam membentuk sebuah halaman situs. Disini, dengan menggunakan document
toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya.
27
Gambar 6. Document toolbar. Bisa digunakan untuk mengatur tampilan kerja. Dalam
tampilan script saja, tampilan script dan desain, ataukan hanya desain saja.
Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen pembentuk
halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemenelemen tersebut direpresentasikan dalam bentuk icon.
Document toolbar memberikan kita kemudahan untuk melakukan perintah-perintah yang
memberikan efek pada seluruh dokumen, seperti halnya judul dokumen.
Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita bisa
langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya merubah warna
text, memberikan background pada elemen tabel, menggabungkan kolom, dan lain-lain.
Anda bisa membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang
sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal mengklik
tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda panah warna biru
pada gambar 5.
Setiap dokumen yang anda buka masing-masing dapat anda minimize, maximize atau anda
tutup. Dapat anda lihat pada keterangan di gambar 5.
28
Me-minimize, me-restore, dan

dan menutup
menutup salah satu dokumen Me-minimize, me-restore,
dreamweaver
Gambar 7. Masing-masing halaman baru dreamweaver dipisah ke dalam tab-tab tertentu.

Masing-masing tab bisa ditutup, dikecilkan, atau disembunyikan tampilannya.
Sambil jalan, secara otomatis kita akan mengetahui fungsi dari toolbar-toolbar yang tidak
dijelaskan dalam subbab ini.
Setelah anda mulai terbiasa dengan layout kerja dreamweaver, kita lanjutkan dengan
bagaimana memulai kerja dengan dreamweaver.
29
Memulai mendesain web

dengan dreamweaver
Pengantar web design
Diperlukan sebuah perencanaan yang matang dalam pembuatan sebuah situs web karena
sebuah website tidak hanya terdiri dari satu file teks saja. Disitu terdapat beberapa halaman
yang saling berhubungan (hyperlink), file-file gambar, file css, javascript, belum lagi file
multimedia seperti flash dan video yang kesemuanya harus diupload ke server hosting
dengan tempat yang jelas. Dengan semakin kompleksnya komponen penyusun web, maka
struktur pemilahan file-file pun juga harus jelas. Misalnya, untuk semua gambar-gambar
yang tertampil di website saya buatkan folder send pdf saya taruh di folder- halamanpdf,tentang
profilatauperusahaanmungkin h saya sendirikan dalam folder profil. Hal memaintenance sebuah situs.
Dalam merencanakan sebuah situs, ada beberapa hal yang patut menjadi perhatian, yaitu:
1 Tentukan apa yang ingin kita sampaikan dalam website yang kita buat. Hal ini akan
berkaitan nantinya bagaimana kita membuat jenis informasi tersebut gampang
dicerna oleh audience.
2 Untuk siapa website ini nantinya? Ketika saya ingin membuat website untuk sebuah
situs anak-anak, maka saya akan membuat tampilan situs saya dengan warna2
cerah dan sedikit cartoon karena memang begitulah dunia anak-anak pada
umumnya, sebaliknya, apabila saya ingin membuat situs instansi misalnya, maka
yang ada dalam bayangan saya adalah desain yang resmi, dan navigasi yang mudah
dipahami, karena memang target audiencenya adalah bagi orang umum.
3 Resource yang meliputi ketersediaan data, waktu, tenaga, dan dana perlu juga
dijadikan pertimbangan dalam menentukan desain sepoerti apa yang bakal kita buat
nantinya. Saya rasa tidak perlu ada penjelasan untuk ini.
4 Dan NAVIGASI. Navigasi tentu saja sangat penting karena merupakan kemudi untk
bisa menjelajah sebuah situs. Buatlah navigasi sejelas-jelasnya dan semudahmudahnya bagi target audience anda. Untuk mempermudah, gambarkan secara
diagram peta situs anda.
Dalam beberapa literatur yang saya dapat, ada beberapa pilihan navigasi yang umum.
Mungkin hal ini bisa memberikan anda gambaran seperti apa model navigasi yang akan
anda buat nantinya.
1. model linear
Gambar 7. Pada model linear kita bisa mengatur urutan halaman yang dibuka pengguna.
30
Medel ini biasanya dipakai untuk situs-situs training online atau buku multimedia.
Dengan model seperti ini kita dapat mengontrol langkah-langkah yang harus dilalui
audience
2. model Hirarki
Gambar 8
Desain ini dapat mempermudah audience menemukan informasi yang dia cari.
3. model terpusat
31
Dengan model seperti ini maka akan mempercepat navigasi menuju ke topik yang
diinginkan dengan 2 klik, namun kekurangannya adalah untk berpindah harus
menuju ke halaman depan dahulu
4. Model FULL-WEB-DESIGN
Merupakan gabungan dari ketiga model di atas. Dengan penggabunagn tersebut
maka diharapkan akan meningkatkan efisiensi dari navigasi web. Setiap halaman
mempunyai navigasi ke halaman lainnya yang dirasa paling perlu untuk
dikoneksikan. Sebagai contoh website http://oke.or.id , http://macromedia.com dan
lain-lain.
Macromedia dreamweaver mempermudah berbagai tahap di atas. Agar kita tidak
dipusingkan dengan kemungkinan terpencarnya file-file yang sudah kita buat sebagaimana
yang dijelaskan pada paragraf pertama subbab sebelumnya, maka kita perlu mendefinisikan
situs yang akan kita buat. Pendefinisian ini berguna untuk menempatkan website kita yang
mungkin kompleks ke tempat khusus tertentu sehingga nantinya akan mempermudah dalam
peng-upload-an ke server hosting.
Mendefinisikan situs
OK, sekarang anda telah mempunyai peta situs dengan segala persiapannya. Hal
selanjutnya adalah menentukan ditampung dimana pekerjaan pembuatan website ini, dan
mau dikirim ke server mana pekerjaan itu nanti sekaligus menentukan parameter dasar
lainnya. Hal tersebut yang dimaksud dengan men ketika kita memulai sebuah proyek.
Sebelumnya kita harus tahu dulu jenis situs yang akan kita buat nantinya itu seperti apa.
Situs statiskah? Atau situs dinamis?. Masing-masing jenis tersebut mempunyai jalan yang
berbeda dalam pendefinisiannya. Karena tutorial ini khusus membahas tentang website
statis sampai tingkat lanjut, maka disini kita akan mempelajari pendefinisian situs statis saja.
Silahkan ikuti langkah-langkah berikut:
1. Klik menu site > New Site. Kemudian akan muncul jendela dialog site definition
32
Gambar 10. Langkah awal pendefinisian sebuah situs

Pastikan tab basic terpilih (perhatikan panah merah). Kemudian isi textbox tersebut
dengan nama situs yang anda inginkan. Nama situs anda boleh menggunakan spasi.
Buat sesimpel mungkin namun sejelas mungkin. Kemudian klik tombol next
2. Kemudian anda akan dihadapkan pada jendela dialog yang menanyakan apakah
anda ingin menggunakan server technology atau tidak. Kita akan mmbangun situs
statis, sehingga pastikan option button No, terpilih sebagaimana gambar di bawah. Klik tombol
next
Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server
33
3. Pada jendela berikutnya anda akan ditanya mengaenai bagaimana nantinya anda
bekerja dengan file-file anda ketika sedang membuat website.
Pilihan pertamaEditLocal CopiesadalahonMyComputer Then Upload to Server
When Ready, hanpilikeduaEditadalahDirectlyonServer Using Local Network, dan
pilihan yangEdit DirectlyterakhironServerUsingadalahFTPorRDS.
1 Jika anda memilih pilihan pertama, berarti situs anda nantinya akan dibuat
pada tempat tertentu pada harddisk anda, kemudian jika dirasa sudah
memenuhi syarat baru kita bisa menguploadnya ke server web. tentukan
tempat pada harddisk anda dengan mengisi textbox yang disediakan
2 Pilihan kedua berarti anda nantinya akan langsung menempatkan pekerjaan
anda pada server yang terhubung dalam sebuah jaringan, Isikan direktory
pada server anda pada textbox yang disediakan.
3 Pilihan terakhir berarti anda akan langsung bekerja pada server melalui
koneksi FTP, tentukan folder pada harddisk anda sebagai tempat untuk
salinan situs anda. Checkbox dibawahnya merupakan pilihan apakah
nantinya ketika kita save akan langsung dikirim ke server atau tidak.
Disini kita memilih pilihan pertama karena model ini yang paling direkomendasikan.
Klik next
4. Jendela berikutnya yang muncul adalah dialog sharing file. Disiini anda menentukan
bagaimana anda terkoneksi dengan server anda. Anda bisa melihat masing-masing
penjelasan di bagian help dreamweaver. Silahan mengisi textbox-textbox yang
muncul berdasarkan pilihan anda. Apabila anda tidak yakin pilih none saja
sebagaimana dalam tutorial ini. Jangan khawatir karena kita bisa mengisinya lagi
nanti.
NB : jendela dialog ini tidak akan muncul ap directly on server using local network
Klik next
5. Jendela yang muncul berikutnya adalah ringkasan dari settingan yang kita buat
sebelumnya. Check satu-satu. Apabila perlu perbaikan anda bisa kembali dengan
tombol back.
Silahkan klik done jika sudah selesai
Sekarang pendefinisian situs, untuk sementara selesai. Perhatikan pada panel file di bagian
site panel bagian kanan. Sekarang anda sudah dibuatkan tempat untuk menampung semua
situs anda menurut settingan yang anda isi pada kotak dialok pendefinisian situs.
Perhatikan tanda panah merah di bawah. Nantinya semua file yang anda buat akan terlihat
di panel tersebut. Contoh situs yang sudah terisi dapat anda lihat pada gambar bagian
kanan.
34
Gambar 12. Lihatlah perbedaan antara situs yang sudah diisi dengan dokumen dan situs
yang belum diisi dengan dokumen
Mungkin dalam situs yang kita buat nantinya kita perlu mengelompokan file-file ke dalam
folder-folder tertentu maka ada baiknya kita membuat folder itu terlebih dahulu dengan
mengklik file > New folder (lihat lingkaran biru pada gambar kanan) kemudian isikan
nama folder.
Selanjutnya setelah kita mendefinisikan proyek situs web kita, kita akan belajar bagaimana
memulai kerja dengan dreamweaver, termasuk di dalamnya adalah membuat file baru, dan
melihatnya melalui browser.
35
Membuat
browser
dokumen,
menyimpan,
dan
menampilkannya
pada
Pada umumnya untuk memulai dokumen baru di sistem operasi windows sama saja. kita
tinggal mencari kata new. Benar,.. tekan file > new maka sebuah jendela dialog akan
muncul:
Gambar 13. Disini kita menentukan jenis halaman apa yang akan kita buat.
Disitu banyak sekali terdapat pilihan halaman yang akan kita buat nantinya. Kita pilih Basic
page | HTML kemudian klik tombol create.
Nah sekarang anda bebas mau mendesain apa. Isikan sembarang kata pada design view,
kemudian isi title pada Document toolbar dengan sembarang judul disini saya isi dengan
tutorial
dreamweaver
36
Gambar 14. kita coba membuat halaman baru sembarang

Kemudian simpan pekerjaan anda file > save atau ctrl + S. Kemudian akan muncul kotak
dialog save as. Perhatikan bahwa secara otomatos dreamweaver akan memilih direktori
yang kita definisikan sebelumnya. Klik save
Gambar 15. Kita coba save Halaman Baru tersebut dengan nama index.html
Perhatikan juga bahwa seketika itu juga pada panel file akan terlihat tambahan file baru
37
Gambar 16. Secara otomatis halaman baru akan tertampil dalam panel file.
Sekarang anda juga bisa melihat hasil pekerjaan anda langsung pada browser dengan
mengklik icon preview in browser pada document toolbar atau dengan mengklik tombol
F12
Gambar 17. Pilihan untuk melihat sementara hasil pekerjaan kita di browser.
Nah, hasil kerjaan anda sekarang tertampil di browser internet explorer. Setelah ini yang kita
lakukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab akhir nanti
tentang bagaimana mengupload proyek kita yang sudah jadi ke server web.
rangkuman
Sebelum masuk ke bab berikutnya, dapat dirangkum bahwa untuk mendesain situs dengan
efisien kita bisa meggunakan urutan langkah-langkah sebagai berikut:
1. menetapkan kerangka kerja termasuk didalamnya menentukan jenis desain,
menentukan target audience, menentukan model navigasi situs, dan tak kalah
pentingnya adalah membuat diagram peta situs.
2. mendefinisikan situs sehingga file-file proyek kita akan lebih terkoordinir dan mudah
dalam peng-upload-annya nanti.
3. mulai bekerja membuat situs, termasuk didalamnya membuat folder-folder untuk
menampung gambar atau file-file lain sehingga lebih terstruktur, membuat dokumen,
menyimpan dokumen, melihatnya pada browser, membuat tampilan menarik,
membuat hubungan antar halaman (hyperlink), dll. Bab berikutnya akan membahas
tentang masalah ini.
4. setelah situs selesai, kita tinggal menguploadnya ke server web dengan tool-tool
yang disediakan oleh dreamweaver. Ini akan dibahas pada bab sendiri.
38
Membuat Website (Bagian I)

Sebelum masuk lebih detail ke masing-masing elemen, ada baiknya dulu kita mereview
ulang tentang struktur HTML situs. Kita sudah tahu bahwa ada dua bagian besar dalam
html, yaitu alemen <head> dan elemen <body>.
Elemen <head>
Elemen <head> didalamnya memuat berbagai informasi mengenai situs dan juga bisa
dijadikan informasi bagi browser bagaimana sebuah dokumen ditampilkan nantinya,
misalkan apakah menggunakan kharakter / huruf cina atau yang lain.
Salah satu tag dalam elemen <head> yang penting adalah <meta> yang berfungsi untuk
menampilkan informasi dari sebuah halaman. Tag ini penting sebagai pemberi informasi
bagi search engine untuk mengkatalog-kan situs. Dalam dreamweaver kita tidak perlu
mengetik kode ini secara manual. Kita bisa membuatnya dengan object <head>.
Gambar 18. Tool yang digunakan untuk memodifikasi element head dalam file html
Masing-masing obyek dapat dijelaskan sebagai berikut:
Meta.
Berfungsi untuk mengisikan berbagai meta tag yang kita inginkan. Ini merupakan tool untuk
membantu kita memasukkan meta tag. Ada banyak informasi melalui <meta> selain yang
sudah diediakan dreamweaver seperti keyword, description, refresh, base, dan link,
sehingga untuk mengisikan tag selain yang saya sebutkan di atas kita bisa menggunakan
tool meta tersebut. Lihat contoh di bawah:
39
Gambar 19. Jendela yang digunakan untuk mengubah-ubah tag meta.

Perhatikan bahwa creator tidak disediakan dre membuat informasi tersebut. Pembahasan mengenai meta
tag banyak tersedia di internet.
Keyword
Berfungsi untuk memberikan informasi kepada search engine mengenai kata kunci apa
yang bisa digunakan untuk menampilkan situs kita. Penulisannya harus konsisten dengan isi
dari website kita sehingga akan mempermudah pencarian melalui search engine.
Gambar 20. Jendela yang berfungsi mengubah-ubah tag keywords

Description
Berfungsi untuk memberikan informasi mengenai deskripsi dari situs kita. Sebagai tips,
untuk mempercepat dan mempertinggi ranking dalam search engine, hendaknya antara
keywords dan description ada beberapa kata yang sama. Walaupun sebenarnya
google.com tetap akan melist situs kita walaupun tidak ada tag metanya, namun belum tentu
bagi search engine yang lain.
Gambar 21. Jendela yang berfungi untuk mengubah-ubah tab description

Refresh
Digunakan apabila kita ingin me-refresh atau me-redirect halaman (dipaksa menuju ke
halaman /alamat lain) kita setelah selang waktu tertentu. Gambar di bawah berarti setelah
lima detik secara otomatis halaman yang dibuka akan berpindah menuju
http://mesin.brawijaya.ac.id.
40
Gambar 22. Dengan Jendela ini kita bisa me-refresh sebuah halaman atau me-redirect
sebuah halaman yang baru dibuka.
Base
Tag <base> berhubungan dengan link. Akan saya jelaskan secara langsung. Apabila kita
mempunyai sebuah link menuju ke images/gambar.gif, maka hal tersebut berarti gambar.gif
berada pada folder images dalam server web kita. Namun apabila saya mempunyai tag
<base> dengan content:
<base href=http://www.situs.com/contoh/>
Maka setiap script yang terdapat link images/g www.situs.com/contoh/images/gambar.gif. bukan lagi
berada pada folder images di server
kita. Namun karena basenya sudah diubah ke alamat yang lain maka alamat tersebut-lah
yang dijadikan dasar dari setiap alamat link.
Saya rasa kita tidak perlu menggunakan ini karena akan terbentur juga masalah
kompatibilitas browser.
Link
Ini berguna untuk menghubungkan dokumen kita dengan script luar. Biasanya css. Salah
satu hal yang menarik seputar penggunaan tag link adalah favicon. Favicon adalah icon
yang tampil pada menu favorit apabila adnda mem-bookmark sebuah halaman. Icon ini juga
tampil pada address bar di browser anda. Untuk contohnya anda bisa buka halaman
yahoo.com. perhatikan gambar y di address bar tersebut
Anda bisa membuatnya di alamat http://www.favicon.com.
Elemen <body>
Setelah anda menentukan isi dari elemen head ada, sekarang kita belajar pada daerah
<body> yang berhubungan dengan masalah tampilan. Yang akan kita pelajari
nantinya adalah tentang:
1 Text
2 Gambar
3 List
4 Tabel
5 Hyperlink
6 Image maps
41
Namun sebelum itu, mungkin muncul pertanyaan bagaimana saya bisa mengatur property dari
tag <body> itu sendiri?... caranya gampang. Sekarang coba anda rubah tampilan kerja
menjadi code and design view dengan mengklik

Pada jendela code, klik kanan pada tag <body> dan pilih edit tag <body> maka akan
muncul kotak dialog baru yang bisa anda gunakan untuk menambah property baru pada tag
body anda, misalnya background image, warna background, dll.
Gambar 23. Jendela yang digunakan untuk meng-edit tag-tag html secara
grafis Cara tersebut berlaku juga untuk tag-tag yang lain.
TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan
design view bersamaan dengan mengklik icon
bandingkan dengan tampilannya.
. Pelajarilah setiap kode dan
TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan
design view bersamaan. Pelajarilah setiap kode dan bandingkan dengan tampilannya.
TENTANG TEXT
Apabila kita bekerja dengan dreamweaver, maka perintah-perintah standart windows seperti
cut, copy, paste, undo, redo masih bisa dijalankan. Demikian juga apabila kita menulis text.
Disini kita akan mempelajari tentang bagaimana merubah property-property text seperti
warna, ketebalan, alignment, ukuran, kemudian kita juga belajar bagaimana membuat
paragraf dan baris baru, dan yang tak kalah pentingnya adalah bagaimana mengisikan
karakter-karakter unik ke dalam dokumen kita.
Untuk menjelaskannya, kita buat tampilan seperti di bawah ini:
NB: kita akan bekerja pada situs yang telah kita definisikan. Perhatikan juga bahwa
sebelumnya kita sudah membuat folder images pada tempat situs kita.
42
Gambar 24. Tampilan yang akan kita buat dalam bab ini
Sebelum kita masuk ke langkah pembuatannya, perhatikan bahwa ada beberapa hal yang
perlu diperhatikan agar kita bisa secara efisien membuat tampilan seperti itu.
1. dokumen tersebut berjudul latihan seputar t atas

2. nama file dokumen tersebut adalah text.htm
3. tampilan tersebut dapat kita bagai menjadi 3 paragraf
4. paragraf pertama memiliki 4 baris text dengan baris pertama berhuruf tebal dengan
ukuran besar, baris ke tiga text tebal berwarna merah, dan baris ke empat text miring
5. paragraf kedua adalah paragraf biasa

6. paragraf ke tiga baris pertama lebih menjoro
OK, mungkin anda sudah mempunyai gambaran bagaimana membuat tampilan seperti
contoh di atas. Berikut ini adalah langkah-langkahnya:
1. pada document toolbar kita isi kotakenter title d
Gambar 25. Memasukkan title dokumen
43
2. ketik tulisan pada paragraf pertama baris pertama kemudian shift + enter. Lanjutkan
sampai pada baris terakhir. Ketika baris terakhir sudah selesai, langsung tekan
enter.
Ketika anda menekan shift+enter, berarti anda membuat baris baru, sedangkan jika
anda hanya menekan enter berarti anda membuat paragraf baru.
Contoh html di bawah ini akan menjelaskan pernyataan di atas:

Ini baris pertama paragraf pertama 
Ini baris ke dua paragraf pertama 


Sedangkan ini adalah paragraf ke dua

Secara otomatis dreamweaver akan membuat tag ketika anda menekan
enter saja, dan akan membuat tag jika anda menekan shift+enter sehingga
akan terbentuk baris dan/atau paragraf.
3. tulis kalimat pada paragraf ke dua kemudian tekan enter.

4. sebelum kita menulis kata pertama, kita beri spasi dulu agar kelihatan menjorok ke
dalam. Hal ini tidak bisa secara langsung kita menekan spasi beberapa kali karena
seberapapun kita memberkian spasi dengan keyboard maka yang tertampil hanya
satu spasi saja. Hal tersebut bisa diakali dengan memberikan karakter blank. Anda
bisa memasukkan pada code html and yang lebih gampang yaitu dengan menggunakan
insert non break space pada insert
bar. Dan menekannya beberapa kali
Gambar 26. memasukkan spasi dalam desain kita.

Kemudian lanjutkan dengan menulis isi paragraf ke tiga tersebut.
5. pekerjaan anda akan tampak seperti berikut ini:
44
Gambar 27. Tampilan sementara yang telah kita buat

Sekarang kita tinggal mengaplikasikan style pada pekerjaan kita. Dimulai dari judul
Academic press series in Engineering ters font 6pt dengan jenis font arial. Untuk mengubah
property dari text tertentu kita
tinggal mem-blok bagian text yang ingin kita ubah kemudian kita tinggal
mengubah parameter yang terdapat padaCara sepertiprinioperty berlaku juga untuk
pengubahan property elemen-elemen yang lain.
45
Gambar 28. Cara-cara pengubahan Properties dari elemen-elemen situs

Untuk mengubah judul menjadi bertipe arial, dengan ukuran 6, dan tebal, silahkan
perhatikan tanda panah biru di atas. Saya rasa gambar tersebut sudah mewakili
sebagai penjelasannya.
6. dengan cara seperti langkah 5 diatas, silahkan merubah property text-text lain.
Yang perlu anda rubah intentumenjadis Jbold.Davidberwa Auburn University menjadi italic, dan
para bisa dijadikan referensi untuk bisa mengubah hal tersebut.
Gambar 29. Berbagai tool yang digunakan untuk mengubah property text
46
Tentang image (gambar)

format gambar untuk grafis web
Ada tiga format gambar yang dapat digunakan dalam sebuah website, yaitu GIF, JPEG, dan
PNG. Masing-masing mempunyai karakter dan kemampuan sendiri-sendiri. Untukk bisa
mambuat situs yang efisien, dalam artian mempunyai sedikit waktu download tanpa
mengorbankan estetika, kita perlu untuk bisa secara tepat menentukan format apa yang
tepat untuk gambar tertentu. Berikut ini secara singkat saya jelaskan mengenai karakteristik
masing-masing format gambar.
1. gif
mempunyai kedalaman warna maksimal sebesar 255
bisa digunakan untuk gambar transparan
dapat digunakan untuk animasi
mempunyai ukuran yang sangat kecil untuk gambar dengan warna

yang sedikit, misalnya gambar tanpa gradasi, untuk garis, gambar text, logo,
atau kartun.
Perhatikan gambar berikut:
Gif 64 warna 32 kb
Gif 7 warna 1,2 kb
2. jpeg
1
mempunyai ukuran file lebih kecil daripada gif untuk file dangan ribuan
warna.
Biasa digunakan untuk gambar-gambar foto.
Berikut ini contohnya:
47
Jpeg 60% compresi, 19 kb
Jpeg 100% kompresi, 20 kb
3. png
1
merupakan format baru yang bisa dipakai di dunia web. beberapa

browser lama memerlukan plugins untuk bisa melihatnya.
Mempunyai kemampuan kompresi

mempunyai kedalaman warna yang tinggi.
sebagus
gif,
namun
juga
Gunakanlah format gif apabila dalam gambar anda hanya terdapat sedikit warna, dan
gunakanlah jpg apabila gambar anda melibatkan banyak warna. Hal ini akan dibahas lebih
detail dalam pendesainan situs tingkat lanjut pada bab berikutnya.
Memasukkan gambar ke dalam dokumen
Untuk memasukkan gambar ke dalam dokumen, ad beberapa cara yang dapat kita lakukan,
yaitu:
1. dengan meletakkan cursor pada tempat yang ingin kita taruh gambar, kemudian
dalam menu bar kita pilih insert > image
2. dengan meletakkan cursor pada tempat yang ingin kita tempati gambar kemudian
ctrl + alt + I
3. klik pada seret icon
yang terdapat pada insert bar menuju ke tempat yang
diinginkan.
4. mencari gambar di site panel kemudian mnyeretnya ke tempat yang ingin ditempati
gambar
48
Drag and drop
Gambar 30. Untuk memasukkan gambar pada desain kita bisa menggunakan
metode klik dan seret dari panel files menuju ke tempat yang diinginkan dalam
desain
5. menggunakan assets panel. Akan dibahas lebih lanjut pada bab tersendiri
Tampilan di berikut ini akan muncul ketika anda ingin mengisikan gambar ke website anda.
Anda boleh mengambil gambar dari mana saja dari direktori-direktori di komputer anda
walaupun tidak berada dalam folder situs yang kita definisikan sebelumnya.
49
Gambar 31. Jendela yang muncul setelah kita men-drag&drop gambar

Pilihanrelative to:digunakan untuk menentukan alamat file yang kita ambil nantinya dicari
dari alamat dokumen ini ataukah dicari dari root.
Misalkan saya mempunyai dokumen dalam folder gambar, kemudian saya juga ingin
memasukkan bebek.jpg yang juga berada pada folder tersebut, maka ada dua cara untuk
mencari alamat file gambar tersebut, yaitu:
<img
src=bebek---->relative.tojpg>document
<img
src=/images/bebek---->relativetositeroot.jpg>
Pada relative to document saya langsung menggunakan alamat bebek.jpg kar bebek.jpg berada pada
hirarki yang sama.
Pada relative to site root, maka bebek.jpg tersebut dicari mulai dari root, sehingga harus ditulis
/images/bebek.jpg tanda / sebelum terhadap site root.
Karena gambar yang saya ambil berada di luar site root (perhatikan bahwa alamatnya
adalah alamat local file:///I/work/proyek luar/NGAJAR/transparan.jpg) maka jika saya ok
akan muncul peringatan sebagai berikut:
50
Gambar 32. peringatan yang muncul karena gambar berada di luar folder yang sudah
didefinisikan sebagai tempat situs.
Dreamweaver mengingatkan bahwa karena file gambar berada di luar site root dari situs
yang kita definisikan, maka nantinya gambar tersebut tidak bisa diakses ketika kita upload
karena alamatnya menggunakan local address.
Untuk menghindari hal tersebut, dengan meng-klik yes maka dreamweaver akan meng-copy
file tersebut dan memasukkannya pada folder yang kita definisikan. Kita bisa menentukan
mau ditaruh dimana file tersebut dalam situs kita. Karena sebelumnya kita sudah membuat
folder images, kita taruh saja gambar yang ingin kita masukkan ke dalamnya.
Memodifikasi gambar
Sebagaimana text, kita juga bisa menggunakan property inspector untuk mengubah atau
memodifikasi gambar.
51
Gambar 33. beberapa cara untuk mengubah ukuran gambar

Untuk mengatur ukuran gambar, kita bisa mengi dengan satuan pixel atau persen. Atau dengan
mennyeret tanda yang ditunjukkan tanda
panah di atas. Tanda yang ditunjukkan oleh:
Tanda panah merah digunakan untuk mengatur lebar gambar
Tanda panah kuning untuk mengubah panjang gambar
Tanda panah hijau digunakan untuk secara bebas mengatur kedua-duanya.
Peringatan! : disarankan untuk tidak mengatur ukuran gambar karena dapat

mengakibatkan tampilannya menjadi pecah.
Tips : untuk bisa mengatur ukuran gambar menggunakan mouse dengan proporsional,
tekanlah tombol shift ketika menyeret tanda panah hijau. Sedangkan untuk mengembalikan
ukuran sebenarnya anda bisa menggunakan tombol
V Space dan H space digunakan untuk mengatur jarak tepi gambar
Border digunakan untuk membuat bingkai pada gambar anda.
Alt digunakan untuk membuat deskripsi singkat dari gambar kita. Walaupun sepele, tag alt
akan sangat berguna terhadap validitas sebuah halaman html. Usahakan selalu mengisi alt!
apabila memang tidak ada yang perlu dideskrips dropdown alt tersebut.
52
Tentang list
ada tiga jenis list yang dapat kita buat menggunakan list, yaitu:
1 unordered list
untuk membuatnya, kita bisa mengaktifkan dulu menu tersebut dengan mengklik
icon bullet pada property inspector kemudian mulai mengetik. Untuk menambah
list kita bisa tekan enter. Sedangkan bila kita ingin merubah beberapa paragraf
menjadi berbentuk list, maka kita tinggal mem-blok paragraf-paragraf tersebut
kemudian baru kita klik icon bullet pada property inspector.
Peringatan: yang dapat dibentuk menjadi list hanyalah paragraf, yaitu sesuatu yang
berada pada tag . itulah kenapa untuk membuat list berikutnya kita menekan
enter bukan shift + enter.
Gambar 34. Cara yang digunakan untuk membuat list

Ada beberapa model tampilan untuk bullet (titik) anda bisa mengubahnya pada code
view kemudian klik kanan pada kode tag <ul> kemudian pilih edit tag <ul>. Maka
jendela dialog akan muncul.
53
Gambar 35. cara untuk mengubah tampilan list

Pada dropdown type anda bisa memilih tampilan dari bullet anda. Cobalah.
1 ordered list
ordered list berarti list yang berurutan. Setiap list ddari atas sampai ke bawah
diurutkan berdasarkan nomor. Hal ini sama dengan numbering, jika kita pernah
menggunakan microsoft word.
Pembuatan jenis list ini sama dengan unordered list. Kita tinggal meng-klik icon
ordered list pada property inspector. Selanjutnya sama dengan unordered list.
Gambar 36. Cara yang digunakan untuk membuat list yang berurutan
Ordered list sendiri mempuyai beberapa style. Anda bisa penomorannya bisa anda
ubah menjadi alfabet (a, b, c,...), atau angka romawi (i, ii, iii, ...). caranya adalah
dengan menempatkan cursor pada salah satu list kemudian mengklik tombol list
item yang ditunjukkan tanda panah biru pada gambar di atas.
1 Nested list
Merupakan kombinasi dari kedua model di atas atau bahkan kombinasi style dari
masing-masing jenis list di atas. Perhatikan contoh berikut:
54
Cara membuatnya dapat anda lihat pada ilustrasi di bawah:
Gambar 37. Cara yang digunakan untuk membuat berbagai variasi list
1. Pertama kita aktifkan dulu tombol ordered list. Kemudiann ketik urutannya. Kita tidak
perlu menuliskan hirarki yang tinggi dulu. Tulis saja berurutan tanpa mempedulikan
hirarki.
2. Blok pada hirarki yang lebih rendah. Perhatikan gambar di atas, nomor 3 sampai
nomor 8 saya blok
3. Klik pada tombol indent, maka secara otomatis bagian yang anda blok akan
membuat penomoran sendiri. Karena pada contoh tersebut hirarki yang ke dua
mempunyai style romawi, kita ubah stylenya dengan mengklik sembarang tempat
pada hirarki yang kedua kemudian menekan tombol list item. menjadi romawi
4. Ulangi langkah diatas untuk hirarki yang ke-tiga, kemudian ketika masih ter-blok, klik
padatombol unordered list.
55
Tentang tabel
Tabel merupakan bagian yang sangat sangat penting dalam pendesainan web. dengan
tabel, kita dapat membuat tampilan web lebih bervariasi. Namun tabel bukannya tanpa
kekurangan. Penyusunan tabel yang terlalu rumit, bertumpuk, akan menyebabkan
pembacaan yang lebih lama oleh browser. Efisiensi dalam penggunaan tabel sangat penting
disini. Kita mulai dengan property-property dasar tabel.
Memasukkan tabel
Kita dapat membuat tabel dengan tiga cara, yaitu:
Menggunakan tombol tabel pada insert bar di tab common atau di tab table
Gambar 38. icon yang digunakan untuk memasukkan tabel
Menggunakan menu insert > table
Menggunakan shortcut ctrl + alt + T
Pertama kali jendela yang muncul ketika anda memasukkan tabel adalah seperti di bawah:
Gambar 39. Jendela yang pertama kali muncul ketika memasukkan table.
Rows : disini kita isikan jumlah baris yang diinginkan
Colums : disini kita isikan jumlah kolom yang diinginkan
Width : panjang tabel. Secara default nilainya adalah 75 persen. Hal tersebut berarti lebar
tabel yang kita buat adalah 75 persen dari panjang tampilan. Jika kita memilih satuan
persen, maka tabel kita bisa berubah-ubah panjangnya menurut browser. Sedangkan jika
kita memilih satuan pixel, maka panjang tabel kita tetap menurut yang kita isikan.
Border adalah bingkai dari tabel kita (tanda panah hitam)
Cell padding : adalah jarak antara dinding sel dengan sesuatu yang diisikan dalam sel
tersebut (tanda warna biru)
Cell spacing : jarak antar sel (tanda warna merah)
56
Gambar 40. Penjelasan mengenai bagian-bagian tabel

Menyeleksi elemen dalam tabel
Untuk menjelaskan bab ini silahkan buat tabel 3 x 3 dengan property default. Berikut ini
contoh tabel yang sudah saya beri notasi:
Misalkan kita ingin menyeleksi kolom bagian tengah saja kita bisa kita bisa melkukannya
dengan:
menempatkan cursor pada sel nomor 2 kemudian klik dan seret ke bawah
sampai nomor 8.
Menekan ctrl kemudian mengklik sel yang diinginkan.
Sedangkan untuk menyeleksi seluruh tabel kita bisa melakukannya dengan mengklik pada
daerah di luar tabel kemudian menyeretnya melewati tabel atau dengan mengklik bordernya.
Tapi bila menggunakan cara tersebut kita akan dapat kesulitan ketika tabel kita berada dalam
tabel yang lain yang semuanya tidak mempunyai border seperti contoh di bawah:
57
Gambar 41. jika table kita bertumpuk-tumpuk, bisa sangat sulit untuk menyeleksi
table tertentu. Untuk mempermudahnya gunakanlah tag selector.
Untuk dengan mudah menyeleksi tabel a caranya
1. tempatkan cursor pada tabel a

2. perhatikan bagian tag selector yang terdapat di kiri bawah di atas property inspector
berubah menjadi beberapa tombol dengan tulisan tag-tag tertentu. Dalam pekerjaan
saya terlihat seperti ini:
Tombol tersebut merupakan alat untuk mempermudah kita memilih tag-tag yang
terdapat pada tampilan. Coba klik tombol tersebut dari yang paling kanan, maka
yang terseleksi adalah tampilan hasil dari tag <td>, begitu seterusnya
3. klik pada <table> maka tabel yang berada pada kolom tersebut akan terseleksi
Setelah anda seleksi, maka property-property dari elemen tersebut akan tertampil pada
property inspector. Dari situ kita bisa merubah property dari obyek yang kita buat. Property
dari setiap apa yang kita seleksi akan tertampil di property inspector.
Mengubah property tabel
Sama dengan mengubah ukuran gambar, kita bisa mengubahnya melalui property inspector
atau langsung dengan menggunakan cursor.
Gambar 42. cara untuk mengubah property tabel
58
Untuk mengubah ukuran tabel kita bisa menggu
Untuk mengubah warna background kita bisa gu
Untuk mengubah warna bingkai (border) kita bisa gunakan Brdr color
Untuk memberikan background dengan obyek ter Image.
Untuk mengatur penempatan tabel kita bisa gu
Tentang hyperlink
Link merupakan elemen terpenting dalam sebuah situs. Elemen ini merupakan jembatan
untuk berpindah dari satu halaman ke halaman yang lain dari topik satu ke topik yang lain
dalam satu halaman, atau bahkan ke halaman web yang lain atau ke alamat email.
Di bawah ini adalah sintak penulisan html untuk membuat link
<a
href=alamat_link>text atau gambar</a>
Misalkan untuk membuat link menuju ke halaman kontak.html pada text tertentu maka
htmlya adalah:
<a href=kontak.html>text tertentu</a>
Sedangkan untuk memberikan link pada gambar tentu saja didalam tag <a> terdapat tag
<img>
<a href=alamat<imglink>src=kontak.gif</a>alt=kontak
Dijelaskan di atas bahwa kita bisa membuat link yang menuju ke halaman tertentu, situs
tertentu, dan bahkan alamat email tertentu. Di bawah ini adalah contoh html untuk beberapa
jenis alamat tersebut:
<a href=http://www.google.com>link menuju ke google</a>
<a href=mailto:dk_arismawan@yahoo.com>mengirim email ke
dk_arismawan@yahoo.com</a>
Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa
menggunakan target=_blank
<a
href=http://www.google.com
google</a>
target=_>linkblankmenuju
ke
Untuk membuat link di dreamweaver sangatlah mudah. Kita tinggal menyeleksi text atau
gambar mana yang ingin digunakan sebagai hyperlink kemudian tinggal mengisikan alamat
yang ingin dituju pada kotakpropertyinspectorlink. pada
59
Gambar 43. Cara memasukkan link pada text

Cara kedua adalah dengan meng-klik icon folder (panah merah) kemudian mencari file yang
kita tuju. Jika file kita berada di luar root site yang telah kita definisikan maka dreamweaver
akan mengcopy file tersebut ke root site kita sehingga nantinya tidak akan terjadi kesalahan
alamat.
Cara yang ketiga adalah dengan megklik icon target (tanda panah biru) kemudian
menyeretnya pada file yang terdapat pada site panel kita. Ini merupakan cara paling unik
yang mempermudah kita membuat situs dengan cepat
60
Gambar 44. menentukan target link menggunakan target, kita hanya perlu mengklik
kemudian drag ke dokumen yang dituju pada panel file.
Link untuk menuju ke tempat tertentu dalam satu dokumen
Kita dapat memberikan link untuk menuju ke tempat tertentu dalam satu dokumen. Link jenis
ini sering disebut sebagai anchors. Tempat tertentu dalam sebuah dokumen kita beri named
anchor sebagai target untuk link.
Untuk lebih jelasnya silahkan ikuti lagkah berikut:
1. pertama kita buat halaman baru pada situs kita yang mempunyai banyak teks dan
paragraf. Disini kita buat saja tiga paragraf yang mempunyai banyak isi. Buat juga
tulisan paragraf 2 pada bagian paling atas
2. posisikan cursor anda pada awal paragraf ke dua. Kemudian menu insert > named
anchor atau dengan shortcut ctrl + alt + A. Maka akan kelihatan tanda
3. blok tulisan paragraf 2 di bagian paling dan arahkan ke tanda
61
Gambar 45. dengan anchor point kita bisa menuju ke tempat tertentu dalam satu
halaman ketika sebuah link di-klik.
4. sekarang anda telah mempunyai link menuji ke tempat tertentu dalam halaman anda.
Tekan F12 untuk melihatnya di browser kemudian klik link anda. Apa yang terjadi?
NB : jika ingin melihat perbedaannya maka halaman anda harus panjang sampai
bisa di-scroll, atau dengan mengecilkan windows borowser.
Tentang image maps

Jika anda membuat link pada sebuah gambar, maka sudah pasti bahwa area yang bisa
anda klik berupa kotakan dengan ukuran sama dengan gambar bukan? Nah dengan image
maps kita bisa membuat area link tidak hanya kotak, namun bisa berupa elips atau bangun
tak beraturan.
Selain kemampuan tersebut, dengan image maps kita juga bisa membuat area link lebih dari
satu buah sehingga kita tidak perlu memecah gambar tersebut menjadi beberapa bagian
untuk bisa diberi link yang berbeda.
Untuk bisa membuatnya ikuti langkah berikut ini :
1. Buat halaman baru kemudian masukkan gambar yang besar di dalamnya. Masukkan
saja image imagemaps.gif yang ada pada cd
2. seleksi gambar yang kita masukkan kemudian silahkan mulai menggambar maps
pada gambar anda.
62
Gambar 46. dengan imagemaps kita bisa membuat lebih dari satu area link pada sebuah
gambar.
Untuk link 1 kita gambar dengan menggunak kuning. Untuk link 2 kita gambar menggunak hijau.
Untuk link 3 kita menggunakan icon
Jika kita ingin menyeleksi map yang kita buat, maka kita bisa menggunakan icon
yang ditunjukkan oleh tanda panah merah.
Untuk memberikan nama map, gunakanlah textbox yang ditunjukkan oleh tanda
panah hitam.
Nah, masing-masing map yang kita buat dapat kita masuki alamat link. Untuk
melakukannya, alamat link kita masukkan ke dalam textbox yang ditunjukkan oleh
tanda panah warna ungu. Setelah selesai silahkan lihat di browser dan klik link yang
telah kita buat (F12). Perhatikan area yang bisa di klik.
63
LATIHAN 1
Sebuah Lembaga Bimbingan Belajar ingin memperkenalkan dirinya ke dunia melalui internet
dengan harapan mendapatkan murid yang lebih banyak. Cobalah membuat situs lengkap
untuk membantu mewujudkan cita-cita lembaga tersebut.
Aplikasikanlah semua yang sudah dipelajari sebelumnya.
Desain web tingkat lanjut dengan dreamweaver

Menggunakan tabel untuk mengatur tampilan
Table tidak hanya dapat berfungsi sebagai penampil data-data saja, namun dapat juga
dipakai untuk mengatur tampilan situs yang lebih rumit. Kita ambil contoh beberapa situs
http://oke.or.id berikut:
Dapat anda lihat bahwa dalam situs tersebut berbagai text ditempatkan pada koordinat
tertentu dengan baground tertentu pula, belum lagi penempatan gambar-gambar yang ada
disitu. Penempatan-penempatan ini nantinya dapat kita atur melalui table.
Untuk tutorial ini kita akan membuat layout web yang umum. Setelah anda mempelajarinya,
cara-cara yang diajarkan dapat juga diaplikasikan untuk berbagai jenis website
Sebelumnya kita perlu tahu dulu tentang apa itu seperti apa web layout yang umum.
Gambar di atas merupakan contoh yang bagus untuk layout web yang umum. Disana
terdapat header, isi dan footer. Header web umumnya diisi dengan nama web dan navigasi
umum web. Sedangkan bagian isi dibagi lagi menjadi tiga kolom, yaitu bagian kiri yang
biasanya sebagai tempat link-link tertentu, bagian tengan adalah untuk isi dari halaman web
tertentu, dan bagian kiri dapat digunakan untuk menampilkan beberapa isi dari halaman
64
yang lainnya. Sedangkan bagian footer biasanya digunakan untuk menampilkan link-link
pembantu dan tulisan hak cipta.
Tentu saja tidak sekaku itu dalam membuat website. Kita harus juga melihat kebutuhan dari
klien dan juga jenis web yang akan dibuat. Namun apabila anda perhatikan pada
kebanyakan website, mereka menggunakan jenis layout yang menyerupai contoh di atas.
Dalam sebuah situs web, kita sering mendengar halaman muka, atau halaman yang pertama kali dilihat
oleh user. Halaman muka biasanya
berbeda dengan halaman-halaman yang lain. Halaman muka tersebut dirancang untuk
mewakili isi keseluruhan dari situs. Perhatikan situs http://cnn.com lihatlah bahwa halaman
utamanya berbeda dengan halaman isinya.
Halaman utama situs cnn:
Halaman isi situs cnn
65
Perhatikan layoutnya mirip dengan yang kita bicarakan tadi bukan?.

Sekarang kita mulai saja membuat situs umum yang mirip dengan desain di atas. Yang
tertulis disini merupakan pengalaman penulis yang dirasa cukup efisien dalam
pembuatannya. Tutorial ini menggabungkan dua software, yaitu photoshop dan
dreamweaver. Namun disini kita tidak akan membahas bagaimana membuat tampilan di
dalam photoshop, sehingga kita gunakan file gambar yang sudah disediakan dalam CD
ROM.
Di folder table desain dalam CD ROM anda terda buat dengan nama file mock up.gif. Mock up.
photoshop, kemudian kita potong-potong kemudian digabung lagi dalam dreamweaver
dengan menggunakan table. Jadi disini intinya adalah, jika kita mendesain situs dengan
tampilan yang kompleks, sebelumnya kita buat tampilannya dalam photoshop. Aturlah
komponen-komponen web seperti link, gambar, dan lain-lain sampai membentuk tampilan
yang kita inginkan. Aplikasikan dasar-dasar dalam mendesain situs disini. Buatlah tampilan
semenarik mungkin dengan tanpa membingungkan user ketika melihat situs kita. Setelah
selesai, kita potong gambar-gambar yang diperlukan untuk membuat tampilan seperti itu.
Sekarang kita pelajari teknisnya.
Bukalah file mockup.jpg.
66
Kita akan membuat tampilan yang kompleks seperti halaman di atas dengan menggunakan
bantuan table.
Ketika desain dalam photoshop anda sudah selesai, sekarang anda menentukan bagian
mana yang harus dimasukkan dalam bentuk gambar dan bagian mana yang bisa dibuat
background.
Pertama kali kita bagi desain kita menjadi tiga bagian, yaitu bagian header, body, dan footer.
Hal ini dilakukan untuk mempermudah kita dalam meng-edit situs nantinya.
67
Setelah kita menentukan bagian-bagian tersebut, kemudian kita tentukan bagian mana yang
harus dijadikan gambar dalam sebuah website. Saya ambil contoh bagian body.
Perhatikan bagian yang dilingkupi warna merah. Kita tidak perlu memasukkan gambar
sebesar (15px x 539px) dalam halaman web kita. Kita hanya perlu menggunakan gambar
sebesar (15px x 1px) kemudian menempatkannya sebagai background pada baris table
sepanjang 539px.
Kita kerjakan bagian header dulu:
Bagian header saya bagi menjadi seperti gambar di bawah:
Bagian 1 dan 3, karena mempunyai warna yang banyak saya simpan dalam bentuk jpeg.
Sedangkan bagian tengah tidak mempunyai banyak warna sehingga format gif merupakan
pilihan yang baik untuk mengurangi ukuran file.
Bagian 4 tidak perlu saya save dalam bentuk gambar karena dapat diwakili dengan
membuat baris table dengan background warna seperti tersebut. Bagian yang perlu untuk
disimpan
dalam file gambar adalah icon rumah di
Sedangkan nomor 5 dan 6 kita hanya perlu membuat gambar dengan ukuran panjang 23x1
pixel kemudian menjadikannya background dari table.
Berikut ini rancangan table yang akan digunakan:
Disini kita membuat table dengan tiga kolom (lihat warna merah) kemudian kolom tengah
kita isi table baru dengan pembagian antar cellnya seperti gambar hijau. Hal ini dilakukan
untuk menghindari pecahnya tampilan jika kita menggunakan satu table dengan banyak cell
yang tidak simetris. Dengan membaginya dengan table baru di dalam table, maka jika salah
satu sel bertambah ukurannya, maka tidak akan mengganggu table yang lain.
Sebelum memulai bekerja, ada baiknya kita review ulang mengenai bagaimana mengubah
property table menggunakan property inspector. Anda bisa membaca pada bagian pertama
(berkenalan dengan dreamweaver)
Sekarang kita mulai menyusun ganmbar tersebut dalam dreamweaver. Copy dan paste
folder images dalam CD ROM ke dalam folder baru dalam hardisk anda. Kita namakan
folder baru tersebut situs baru. Kemudian sebagaimana cara yang sudah kita pelajari pada bab
sebelumnya.
1. Buatlah table dengan tiga kolom dengan ukuran 770px tepat seperti panjang
desain yang kita buat di photoshop. Tabel yang kita buat harus mempunyai
68
border=0, cellpadding=0, cellspacing=0 sehingga tidak akan kelihatan jika dilihat

dalam browser.
2. Klik pada kolom pertama kemudian ubah panjang kolom tersebut menjadi
sama seperti gambar header.Kemudianleftisibackgroundnyayaitu 23 dengan gambar
header_left.
3. Sekarang ulangi langkah nomor 2 untuk kolom paling kiri. Gunakan gambar
headeruntukleftbackgroundnya.
4. Sekarang kita masukkan table baru pada kolom yang ditengah. Klik pada kolom
di tengah kemudian masukkan table dengan width 724px. Table tersebut

mempunyai properties seperti di bawah ini: Row = 3, Column = 3, Border=0, Left
padding = 0, Right padding=0
5. sekarang kita akan mengisi masing-masing kolom pada baris satu dengan gambar-
gambar yang sudah disediakan. Isi kolom kiri dengan heade kolom tengah dengan
header2kanan. gif,dengandanheader.kolom
Nah, kini tampilan header sudah selesai. Kita tinggal meletakkan table tampilan
tersebut tepat di tengah tampilan. Caranya dengan mengubah align dari table paling
luar menjadi centerUntukmenyeleksi. table bagian luar kita bisa menggunakan
bantuan tag selector sebagaimana gambar dibawah hanya kita tinggal klik
sembarang di kolom. Kemudian kita pilih tombol <table> paling kiri.
6. Sekarang kita akan menggabungkan tiga kolom pada baris ke dua table
tersebut. Caranya seleksi ketiga kolom tersebut. Tekan control terus klik pada cell
yang diinginkan. Kemdian tekan icon yang ditunjukkan oleh tanda panah.
69
7. Ubah warna background baris tersebut menjadi #A3ADA2 anda bisa mengisikan
langsung angka tersebut dalam kolom warna seperti yang ditunjukkan gambar di
bawah. Kemudian ubah horizontal alignment-nya menjadi right.
8. Secara umum tampilan header kita telah selesai, kita tinggal mengisi bagian text.
Silahkan isi text seperti tampilan yang diinginkan pada baris kedua bagian table yang
dalam. Seperti ditunjukkan oleh gambar. Jangan lupa memasukkan juga icon home
yang sudah disediakan.
OK untuk sementara bagian header selesai. Masalah warna dan jenis font kita setting
nanti. Sekarang kita beranjak ke bagian body. Bagian ini akan sedikit rumit.
Pertama kita bagi bagian body tersebut menjadi seperti bagian di bawah:
70
Gambar di atas memperlihatkan pembagian dari gambar. Masing-masing warna garis di

atas dapat dianggap sebagai calon table yang akan kita buat. Berarti nanti kita akan buat
tiga table. Dari situ kira mendapat gambaran tentang gambar mana yang bisa dijedikan
background dan bagian mana yang harus disimpan dalam bentuk gambar utuh.
Sekarang kita mulai membuat tabelnya.
1. Di bawah table yang kita buat sebelumnya, kita buat table yang mempunyai 5 kolom
(perhatikan warna merah gambar di atas). Untuk bisa membuat table di bawah.
Masukkan property table berikut: width=770px, cellpadding=0, cellspacing=0,
boder=0.
2. Klik pada kolom 1, kemudian masukkan properties berikut ini: width=23px,

background=header_left.gif.
3. klik kolom ke-dua kemudian ubah propertynya sebagai berikut: width=151, bgcolor=#D2DCD1,
vertical alignment = top.
4. klik
kolom
ketiga,
ubah
propertynya
jadi
sebagai
berikut:
width=33px,
background=body3.gif,=top.verticalKemudianisikolomalignmenttersebut dengan gambar
body3img.gif.
5. klik pada kolom 4 kemudian masukkan property sbb: width=540px, bgcol

F6F8F4, vertical alignment = top.
6. klik pada kolom
ke lima kemudian
background=header_right.gif.
masukkan
property
sbb:
width=23,
nah kita sudah membuat base untuk bagian bodynya. Sekarang kita kerjakan bagian
menu. Bagian menu tersebut terletak pada kolom ke dua pada table yang telah kita buat
71
sebelumnya, sehingga kita klik terlebih dahulu kolom kedua tersebut sehingga
nantinya kolom yang kita buat terletak di situ.
Untuk lebih jelasnya kita langsung aplikasikan cara di atas. Klik pada kolom kedua
kemudian shift + enter terlebih dahulu.
1. Buat table dengan property: width = 151, C8D3Cbgco7,lor=column=2,# rows=15,
cellpadding = 0, cellspacing = 0.
2. seleksi kolom ke dua, kemudian merger semua baris pada kolom tersebut, kemudian
ubah bgcolor= DEE5DD. Masukkan image 1px.gif kemudian ubah widthnya

menjadi 1px.
3. Klik pada kolom pertama baris paling atas kemudian isi dengan gambar
headmenu.gif
4. Klik pada kolom pertama baris ketiga. Kemudian isi dengan property berikut:
width=150px,DEE5DDbgcolor=.Kemudianisibaris tersebut dengan gambar 1px.gif.
dengan begitu maka lebarnya akan berubah menjadi 1 px, mengkuti ukuran dari
gambar yang kita masukkan.
5. Ulangi langkah nomer 4 untuk baris yang ganjil (5,7,9,dst).

6. klik pada baris ke dua, kemudian ubah horizontal alignmentnya menjadi right. Isi
baris ini sesuai dengan menu yang disediakan.
7. Ulangi langkah nomor 6 untuk baris-baris genap.

Sekarang kita membuat table bagian kanan.
Klik pada kolom ke empat table yang berukuran 770 kemudian masukkan table dengan
panjang 100% dengan 1 kolom dan 1 baris. Pada baris pertama isi dengan gambar
atasisikemudian.gifisibackgroundnya dengan gambar itu juga.
Tekan tab kemudian masukkan tulisan seperti yang ada di tampilan anda. Terserah
anda
ingin memasukkan tulisan apapunisi.gif di situ.
Sekarang anda mempunyai tampilan yang mirip dengan desain kita sebelumnya, hanya
font dan peletakan isinya yang tidak sama. Anda tidak perlu merisaukan hal ini. Nantinya
hal tersebut akan kita ubah tampilannya menggunakan beberapa cara.
Kita lanjutkan saja dengan membuat bagian footernya.
Di bagian footer kita hanya perlu membuat table dengan empat kolom dengan
background=footerKolomyang.pertamagifberukuran. 23 pixel dan mempunyai
background header_left.gif.
Klik pada kolom kedua dan ubah panjangnya menjadi 10px
Klik pada kolom ke tiga kemudian ubah panjangnya menjadi 714px, dengan
horizontal alignment = center.
Klik pada kolom ke empat kemudian ubah panjangnya menjadi 23px dan dengan
background=header_right.gif.
Untuk bagian menunya, kita bisa masukkan sembarang link. Gunakan saja tanda #
untuk mewakili link.
Sekarang pekerjaan anda akan tertampil seperti di bawah:
72
Hal terakhir yang kita lakukan adalah mengubah jenis font dan mengatur penempatanya.
Ada dua cara yang bisa kita lakukan untuk mengubah gambar tersebut. Cara yang pertama
adalah dengan menggunakan property inspector untuk mengubah property dari text.
Caranya kita hanya tinggal memblok teks yang akan kita ubah kemudian kita ubah
propertynya menggunakan property inspector. Pada desain di atas kita menggunakan jenis
font Tahoma 11 px dengan ukuran 11 px. Di property inspector property tersebut tidak
tertampil, maka kita harus menulis Tahoma pa menjadi 2pt.
Jika diperlukan font bold, kita hanya perlu meng-klik tombol B saja.
Sedangkan cara yang berikutnya adalah dengan menggunakan CSS (Cascading Style
Sheet). Dengan CSS kita bisa mengellompokkan settingan-settingan dari property font di
atas pada tempat tersendiri bahkan pada file lain. Karena fleksibilitas dan kemudahannya,
kita akan menggunakan cara ini untuk mengatur teks dan properties yang lain.
Bagian yang perlu dirubah untuk bisa memenuhi tampilan desain sebelumnya adalah sbb:
Sekarang kita akan men-setting teks yang telah kita buat menggunakan CSS. Hal pertama
yang dilakukan adalah mebuat CSS terlebih dahulu. Caranya adalah dengan menggunakan
panel css. Ditunjukkan pada gambar di bawah:
73
gambar. Untuk membuat css klik pada icon yang ditunjukkan oleh tanda panah
setelah anda klik maka akan muncul jendela dialog seperti di bawah:
Gambar Kotak dialog pembuatan css

Kotak nama digunakan untuk menentukan nama dari elemen css yang nantinya kita
load dalam desain kita.
Pada bagian type terdapat 3 pilihan, yaitu
Make custom style sheet
Digunakan apabila kita ingin membuat konfigurasi style baru.
Redefine HTML Tag digunakan apabila kita langsung ingin mengatur konfigurasi tampilan
darji tag-tag html kita. Sehingga setelah kita buat css untuk tag , maka dalam html
nantinya setiap tag akan diaplikasikan konfigurasi tampilan yang kita definisikan
dalam css tadi
Use CSS Selector digunakan apabila kita ingin memasukkan atau memodifikasi tampilan
link.
Bagian Define in digunakan untuk menentukan apakah css kita nantinya dibuat dalam html
itu sendiri (dalam elemen head) ataukan dipisah ke file lain.
Sekarang kita akan memperbaiki tampilan situs kita sebelumnya menggunakan
css. Beberapa property yang kita atur adalah:
1. Bagian tag body mempunyai property : semua margin = 0, dan tidak mempunyai
padding, sehingga tampilan kita akan berhimpit ke batas atas kanvas browser.
74
2. Bagian link menu mempunyai jenis font Tahoma bold, jika mouse dilewatkan, warna
font akan berubah menjadi merah.
3. Bagian isi (yaitu tiap paragrafnya) sedikit menjorok ke kanan sekitar 10 pixel.
4. Bagian link pembantu (kanan atas) mempunyai property warnanya putih, jenis font
verdana 10px, dan jika mouse dilewatkan akan berubah menjadi hitam.
Sekarang kita mulai membuat CSS untuk memenuhi criteria yang saya sebutkan di atas.
Ikutilah langkah-langkah berikut:
Sekarang kita buat css untuk mengatur elemen body.
1. Klik NewpadaCSS Style pada bagian kanan bawah p jendela dialog akan muncul. Pilih pada rede
dropdown dan pilih <body>. Maka jendela baru akan muncul.
Kotak dialog untuk memasukkan style.

Perhatikan juga pada bagian Define In saya memilih This berarti Style kita dikelompokkan pada
elemen head dokumen kita. Setelah kita klik OK,
kotak dialog di bawah akan muncul:
75
Dalam Kotak Dialog ini kita memilih property apa saja yang ingin kita masukkan
2. Pilih pada Background kemudian masukkan #374948 pada kotak Background

Colornya.
3. Pilih pada box kemudian masukkan angka 0 pada margin dan padding. Pastikan
checkbox same for all tercentang. Klik apply, perhatikan perbedaannya. Gini
tampilan table yang kita buat berhimpit pada bagian atas. Hal tersebut karena kita
mengatur property dari body yang secara default mempunyai margin dan padding
sekarng tidak (margin=0 padding=0).
Sekarang masuk ke bagian link menu (bagian kiri). Pada bagian menu tersebut berarti kita
akan mengatur tampilan dari link. Untuk membuatnya silahkan ulangi langkah ke-satu di
atas, namun dengan property seperti yang ditunjukkan gambar berikut:
1. Klik pada New CSS Style
Pilih Use CSS Selector Untuk mengatur tampilan link

Jika anda memilih Use CSS Selector maka anda akan menjumpai tiga jenis css yang
bisa diaplikasikan ke link, yaitu:
A:link
Digunakan untuk mengubah tampilan link
A:visited
Digunakan untuk mengubah tampilan link yang telah dikunjungi
A:hover
Digunakan untuk mengubah property link ketika cursor melewatinya
A:active
Digunakan untuk mengubah property link ketika kita mengkliknya. Dari
sini masukkan property masing-masing jenis style link di atas.
Berikut ini property-property yang saya masukkan ke dalam masing-masing jenis di

atas:
Untuk a:link :
76
Untuk a:visited:
Untuk a:hover
77
Untuk a:active
Nah sekarang tampilan setiap link akan memenuhi CSS yang kita buat. F12 untuk melihat
aksinya
Perhatikan bahwa Style yang kita buat sebelumnya tersebut mempunyai efek pada semua
tag link yang ada dalam dokumen, padahal jika kita melihat desain yang kita buat
sebelumnya, pada bagian link pembantu kanan atas linknya berwarna putih. bagaimana
membuat link yang berbeda tersebut adalah dengan membuat custom style sheet untuk link
di atas. Kita tidak perlu repot-repot mengulangi langkah-langkah seperti sebelumnya. Kita
78
hanya perlu memodifikasi scriptnya secara langsung. Hal ini dirasa jauh lebih efisien jika
dibandingkan dengan membuat css baru satu per satu.
Sekarang masuklah ke tampilan code kemudian perhatikan dalam elemen <head> terdapat
script sebagai berikut:
<style type="text/css">
<!-body {
background-color: #374948;
margin: 0px;
padding: 0px;
}
a:link {
font-family: tahoma;
font-size: 11px;
color: #000000; fontweight: bold; textdecoration: none;
}
a:visited {
font-size: 11px; fontweight: bold; color:
#666666; textdecoration: none;
}
a:hover {
font-size: 11px;
font-weight: bold;
color: #CC6600;
}
a:active {
}
79
-->
</style>
Nah script di atas adalah script CSS yang sudah kita buat sebelumnya. Sekarang kita akan
membuat css sendiri untuk bagian link kanan atas.
Siahkan copy paste script link yang ada di atas kemudian ubah scriptnya seperti di bawah:
<style type="text/css">
<!-body {
background-color: #374948;
margin: 0px;
padding: 0px;
}
a:link {
font-size: 11px;
color: #000000; fontweight: bold; textdecoration: none;
}
a:visited {
}
a:hover {
font-size: 11px;
font-weight: bold;
color: #CC6600;
}
a:active {
80
}
.kananatas a:link { fontfamily: tahoma; fontsize: 11px; color:
#ffffff; textdecoration: none;
}
.kananatas a:visited
{ font-family: tahoma;
font-size: 11px;
color: #666666; textdecoration: none;
}
.kananatas a:hover { fontfamily: tahoma; fontsize: 11px; color:
#CC6600;
}
.kananatas a:active { fontfamily: tahoma; fontsize: 11px; color:
}
-->
</style>
Sekarang anda sudah membuat style khusus untuk link kanan atas. Yang kita lakukan
sesudahnya adalah memanggil code CSS yang kita buat tersebut ke dalam link pembantu.
Caranya adalah:
Klik pada salah satu link pembantu kemudian dengan code selector klik pada tag <td>
kemudian aplikasikan style tersebut dengan memilih css yang sudah kita buat sebelumnya
dalam property inspector perhatikan gambar di bawah:
Sedangkan kalau kita lihat pada bagian isi, tulisannya masih dalam bentuk standart. Kita
ingin mengubahnya menjadi Tahoma 11 px. Perhatikan juga dalam isi tersebut mempunyai
81
beberapa paragraph. Untuk mempersingkat pekerjaan kita bisa mengaplikasikan style

baru pada tag paragraph .
Silahkan buat style baru untuk P:
Pilih redefine HTML tag dan pilih p
Masukkan property font
82
Masukkan property box

Klik apply dan kemudian OK. Maka sekarang tampilan anda akan terlihat seperti berikut ini:
83
Hal terakhir yang kita lakukan adalah mengubah align dari semua table dasar menjadi
center.
Sedangkan bagian link kiri anda lihat masih berhimpit pada table. Anda bisa menggunakan
karakter spasI ( ) untuk membuatnya lebih menjorok ke kiri.
1. Komponen Ruang Kerja

Insert Bar
Komponen ini mengandung tombol-tombol untuk menyisipkan berbagai macam
objek seperti image, table dan layer ke dalam dokumen.Setiap objek adalah
kutipan kode HTML yang memberikan fasilitas bagi kita untuk mengatur
atributnya sebagaimana kita menyisipkannnya.
Insert bar memiliki kategori-kategori elemen yang dapat disisipkan. Untuk
memilih kategori yang diinginkan kita dapat mengklik tab-tab di bagian atas
insert bar. Yaitu :
Common
Digunakan untuk menyisipkan objek / elemen yang sering disisipkan dalam

suatu halaman web, seperti image
2 Layout
Digunakan untuk menyisipkan layer atau table.
3 Text
Digunakan untuk menyisipkan teks sesuai format yang diinginkan, misalnya bold, italic, heading
Tables
Digunakan untuk menyisipkan table dan tag-tag untuk table. Tag-tag ini hanya
dapat disisipkan pada modus Code View.
2 Frames
Digunakan untuk membuat halaman web dengan frames.
3 Forms
Digunakan untuk menyisipkan form dan elemen-elemen form
4 Templates
Digunakan apabila kita bekerja dengan tempat.
5 Characters
Digunakan untuk menyisipkan karakter-karakter khusus yang tidak dapat
ditemukan pada keyboard.
84
Media
Digunakan untuk menyisipkan berbagai media seperti objek flash, flash text
dsb
2 Head
Digunakan untuk menyisipkan elemen di dalam tag <head> dari halaman web,
seperti meta tag.
3 Script
Digunakan untuk menyisipkan script, seperti JavaScript, VBScript
4 Application
Kategori ini digunakan untuk membuat aplikasi database dalam DreamWeaver
MX
Document Toolbar
Komponen ini mengandung tombol-tombol dan menu pop-up yang menyediakan
tampilan berbeda dari document windows
Document Windows
Komponen ini merupkana komponen dimana document kita buat dan
ditampilkan
Panel Groups
Adalah kumpulan panel berkaitan yang dikelompokkan bersama di bawah
satu judul.
Tag Selector
Tag Selector terletak pada status bar, tepatnya di bawah Document
windows yang berfungsi menampilkan hierarki tag di sekita pilihan yang aktif
pada Design View.
Property Inspector
85
Memberikan fasilitas untuk melihat dan mengubah berbagai properties objek

yang dipilih atau teks. Setiap macam objek memiliki properties yang berbeda.
Site Panel
Panel ini digunakan untuk mengatur file dan folder yang membentuk situs web
yang kita buat. Panel ini memiliki fungsi yang cukup penting karena
memungkinkan kita bekerja dan mengatur file-file dari situs web dengan
efisien.
Tag Inspector
Tag ini digunakan untuk melihat hierarki tag dan atribut-atribut yang
dapat ditambahkan atau diedit.
Snippets
Snippets merupakan kode yang sering digunakan dan disisipkan pada dokumen.
Latihan Soal
Jawablah pertanyaan di bawah ini !
1. Langkah untuk mengaktifkan ruang kerja dalam Software DreamWeaver
adalah dengan cara .
2. Selain dari DreamWeaver Software apa saja yang kamu kenal dalam
pembuatan Web Desing..
3. Apa yang dimaksud dengan fungsi Web Authoring Tool pada Software Dream
Weaver.
4. Tipe ruang kerja dalam Dreamweaver yang mengutamakan lebih banyak kodekode HTML ataupun kode pemrograman web dap
5. Komponen ini mengandung tombol-tombol untuk menyisipkan macam-macam
objek.
6. Fungsi dari katagori ini digunakan untuk menyisipkan objek / elemen dalam
suatu halaman web seperti image adalah
86
7. Komponen ini mengandung tombol-tombol dan menu pop-up, adalah merupakan

fungsi dari.
8. Fungsi Tamplete digunakan untuk .
9. Kategori ini digunakan untuk membuat aplik
10. Kumpulan panel yang berkaitan yang dikelompokkan bersama di bawah satu
judul adalah merupkan fungsi dari .
11. Property Inspector merupakan fungsi untuk
12. Untuk menyisipkan layer atau tabel dapat k
13. Komponen ini merupakan komponen dimana document kita buat dan
ditampilkan merupakan fungsi dari
14. Snippets adalah merupkan fungsi untuk .
15. Untuk menentukan berbagai jenis tulisan, baik ketebalan, cetakan tulisan
dapat kita pergunakan fungsi
2. Membuat Situs Lokal

Setelah kita mengerti konsep ruang kerja di dalam DreamWeaver,
selanjutnya kita akan menyiapkan situs local. Lokal disini berarti keseluruhan
file yang digunakan untuk membangun situs web berada dalam komputer kita
sendiri. Untuk menampilkan di Internet kita perlu melakukan upload copy dari
file-file local ke remote web server.
Dalam Dreamweaver, kata site merupakan kependekan yang mengacu pada :
Website/Situs web : kesatuna halaman-halaman di server, untuk dilihat oleh
pengunjung menggunakan web.
Remote site : File-file di server yang membentuk sebuah situs web dari sudut
panda kita dan bukan dari sudut pandang pengunjung web.
Definisi site Dreamweaver : Kesatuan definisi karakteristik untuk situs local
dan informasi bagaimana situs local berhubungan dengan situs remote.
Dibawah ini adalah prosedur yang menggambarkan bagaimana mengatur pilihan
pada versi Basic dari kotak dialog :
Pilih Site > New Site pada menu Site atau Site panel sehingga menampilkan
kotak dialog Site Definition. Jika kotak dialog menampilkan tab Advanced,
pilih Basic.
3. Perhatikan yang menampilkan langkah pertama pada kotak dialog Site
Definition dari tab Basic.
87
4. Halaman pertama dari Site Definition Wizar tampak seperti. Meminta kita
mengisikan nama untuk situs yang akan dibuat.
5. Klik Next untuk melangkah ke langkah selanjutnya. Tampilan dari Wizard
berikutnya tampak, mengajukan pertanyaan apakah Anda ingin bekerja
dengan teknologi server.
6. Pilih No untuk menentukan bahwa situs yang akan dibuat adalah situs
statis, tanpa memilih halaman dinamis. Untuk membuat aplikasi web, kita
perlu memilih tipe dokumen dinamis.
7. Klik Next untuk melanjutkan ke langkah berikutnya,
8. Pilih Editpilihanlocalcopies on my machine, then upload to server when
ready (recommended).
9. Kotak teks akan mengizinkan kita untuk menentukan folder-folder di
dalam hard disk dimana Dreamweaver akan menyimpan file-file situs local.
10. Untuk contoh, kita browse ke My Document lalu buat folder baru bernama
Situsku.
11. Kita akan ditanya bagaimana kita terhubung ke remote server. Pilihan
None karena untuk sementara kita tidak melakukan upload ke remote
server.
12. Klik Next untuk melanjutkannya. Kita akan melihat ringkasan dari setting
yang kita buat. Klik Done untuk menyelesaikan definisi situs.
13. Kita dapat mengatur informasi mengenai situs remote di lain waktu, yang
penting saat ini kita telah menentukan informasi situs local yang
diperlukan untuk membuat web.
88
14. Klik Oke untuk alert tersebut.
4. Membuat Dokumen Baru

Setelah selesai mendefinisikan situs, kita dapat memulai dokumen HTML baru
dengan memilih menu File > New dan sebelumnya kita dapat menutup
dokumen kosong yang terbuka.
Untuk memulai pertama kali, kita dapat memilih pada Category : Basic Page,
dan pada kolom Basi Page, pilih HTML karena kita akan belajar membuat
dokumen HTML baru.
5. Manajemen Situs
Setelah kita memahami bagaimana mendefinisikan situs dan membuat

dokumen baru, kita juga perlu memahami bagaimana cara mengedit,
menghapus, dan meduplikasi situs.
a. Mengedit situs
Untuk mengedit situs dapat kita lakukan dengan memilih menu Site > Edit
Site, pilih situs yang ingin di edit kemudian tekan tombol edit.
89
b. Menghapus situs
Klik menu Site > Edit Site kemudian pilih situs yang ingin dihapus lalu
tekan tombol Remove.
c. Menduplikasi situs
Untuk membuat duplikasi suatu site dapat kita lakukan dengan cara, Pilih
menu Site > Edit Site kemudian pilih salah satu situs, lalu pilih Duplicate.
d. Mengenal Panel
Sate panel merupakan fasilitas yang disediakan Dreamweaver untuk
mengorganisasi file-file dalam situs, menangani hubungan antara situs local
dan situs remove.
Untuk menampilkan Site Panel, pilih menu Windows > Site atau tekan
tombol F8 pada keyboard.
e. Melihat Situs Loka
Site panel dapat menampilkan file-file yang ada pada situs local (situs panel
hardisk) maupun situs remove (pada server), karena site panel memiliki
kemampuan koneksi ke server menggunakan protocol FTP, LAN, WebDAV,
RDS, maupun Source Safe Database.
Cara melihat file-file yang terdapat dalam situs local adalah :
Pilih View > Site Files.
f. Bekerja pada Modus Site File Fiew
Cara membuka file pada modus Site File View :

Klik ganda pada icon file
Cara menambahkan folder baru :
90
1. Pastikan kita memilih sebuah file atau folder pada site panel Folder
Baru akan dibuat di dalam folder yang dipilih atau pada folder yang
sama dari file yang dipilih sekarang.
2. Pilih File > New Folder pada Site Panel. Kita juga dapat mengakses
pilihan ini melalui contenxt menu.
3. Masukkan nama untuk folder baru
Cara menambahkan file baru pada situs :

1. Pada Site Panel, pilih file atau folder yang ingin kita ganti namanya.
2. pilih File > Rename
3. Klik file, tunggu sebentar, kemudian klik lagi.
4. ketikkan nama file yang baru
g. Bekerja pada Modus Site Map View

Dua cara untuk memilih banyak file halaman web sekaligus pada modus
site map.
1Tekan tombol shift atau control dan klik pada file halaman web yang
diinginkan.
2Mulai pada daerah kosong pada ruang site map, drag pada sekeliling
group file yang ingin dipilih.
Cara membuka file halaman web untuk diedit :

Klik ganda file atau pilih file dan pilih File > Open.
Cara menambahkan file yang sudah ada ke situs :

1Drag sebuah file dari Windows Explorer dan letakkan pada sebuah file
di site map. File akan ditambahkan ke situs dan sebuah link
ditambahkan pada halaman web di dalam situs yang dihubungkan ke
file baru yang barusan ditambahkan ke situs.
2Pilih sebuah file terlebih dahulu kemudian pilih menus Site > Link to
Existing File pada Site Panel
Cara Membuat file baru dan membuat link :

1. Pilih sebuah file HTML file pada site map.
2. Pilih Site > Link to New atau lewat context menu.
3. Pada kotak teks File Name dari kotak dialog Link to New File, isikan
nama file.
4. Pada kotak teks Title, ketikkan judul halaman web dari file.
91
5. Pada kotak teks Text of Link, ketikkan teks dari link yang akan
menghubungkan file yang dipilih ke file baru.
6. Klik OK
Cara Memodifikasi judul Halaman Web :
1. Pastikan pilihan Show Page Title diaktifkan, caranya : pilih View >
Show Page Title (Ctrl + Shift + T).
2. Lakukan salah satu cara berikut :
3. Pilih sebuah dokumen web dengan mengklik judulnya, kemudian tunggu
sebentar dan klik lagi. Jika judul sudah dapat diedit, isikan nama judul
dokumen yang baru
4. Pilih sebuah dokumen web dan pilih menu File > Rename.
Cara mengganti homepage (halaman web awal):

1. Pada kolom local folder di site panel, klik file yang ingin dijadikan
homepage kemudian klik Set as Home Page dari context menu (klik
kanan mouse untuk menampilkan context menu).
2. Pilih file di Site map, dan pilih menu Site > New Home Page.
3. Pada kolom Local Folder di Site Panel, klik file yang ingin dijadikan
homepage dan pilih Site > Set as Home Page.
4. Pilih Site > Define Sites dan klik Edit. Pilih Site Map Layout pada
kotak dialog Site Definition, kemudian browse file yang akan dijadikan
Home Page.
h. Menggunakan Toolbar pada Site Panel

Kita perlu mengetahui fungsi yang ada pada toolbar pada Site Panel untuk
dapat menggunakan fungsi manajemen situs dengan baik. Berikut adalah
tombol-tombol beserta keterangan penggunaannya.
Connect/Disconnect (FTS, RDS, WebDAV, dan SourceSafe)
Melakukan koneksi atau diskoneksi dari situs remote. Secara default, Dreamweaver melakukan diskoneksi apabila
terjadi idle lebih dari 30 menit (hanya FTP).
Refresh
Digunakan untuk melakukan refresh daftar file dari situs local dan remote.
Get File(s)
Meng-copy file yang dipilih dari situs remote atau testing ke situs local.
92
Put File(s)
Meng-copy file dari situs loka kel situs remote.
Check Out File(s)
Melakukan transfer copy file ke remote server dan membuat file dapat diedit oleh yang lain.
Check In File(s)
Melakukan transfer copy file local ke remote server dan membuat file dapat diedit oleh yang lain.
Expand/Collapse
Mengekspresikan dan mengecilkan tampilan dari site panel untuk menampilkan dua atau satu kolom
93
LATIHAN 1
LINK
Link adalah hubungan antar situs dan halaman. Jika perintah ini
dilaksanakan, maka dapat masuk atau membuka halaman lain.
94
LATIHAN 3
95
LATIHAN 4
96
Jaringan Komputer
Apa saja harta rampasan (fai-i) yang diberikan Allah kepada RasulNya (dari harta benda)
yang berasal dari penduduk kota-kota Maka adalah untuk Allah, untuk rasul, kaum kerabat,
anak-anak yatim, orang-orang miskin dan orang-orang yang dalam perjalanan, supaya harta
itu jangan beredar di antara orang-orang Kaya saja di antara kamu. apa yang diberikan
Rasul kepadamu, Maka terimalah. dan apa yang dilarangnya bagimu, Maka tinggalkanlah.
dan bertakwalah kepada Allah. Sesungguhnya Allah Amat keras hukumannya. (QS, Al
Hasyr, 7)
Standar Kompetensi : Memahami dasar-dasar penggunaan Internet

Kompetensi Dasar
: - Menjelaskan pengertian dasar

Internet/Intranet
1- Memahami dasar-dasar sistem jaringan
Internet
2- Mengidentifikasi perangkat keras yang
digunakan dalam akses internet
Jaringan Komputer
Peranan computer dalam kehidupan sehari-hari semakin terasa.Berbagai
kegiatan bisnis di berbagai bidang dilakukan dengan bantuan computer. Karena
kebutuhan pengolahan data-data dan informasi, maka dalam sebuah organisasi
bisnis kadang-kadang dibutuhkan lebih dari satu computer yang digunakan oleh
banyak orang yang bekerja dalam sebuah tim.
Dalam sebuah jaringan computer, terdapat sebuah computer server dan
computer client. Komputer server berfungsi untuk mengatur aliran data dalam
jaringan. Komputer server berfungsi sebagai penyedia sumber yang dibutuhkan
oleh computer-komputer client. Sumber tersebut dapat berupa data-data,
97
program-program-program, file-file dan sebagainya. Sedangkan komputer client

adalah computer yang menerima pelayanan.
Beberapa manfaat yang diperoleh jaringan komputer, antara lain :
1. Membagi Sumber daya
Jaringan komputer dapat dimanfaatkan sebagai sumber daya yang ada.
Sumber daya tersebut berupa data-data, file-file dan program-program.
2. Reliabilitas tinggi
Meskipun ada komputer lain dalam jaringan yang rusak, ataupun data-data
hilang, tidak akan terhambat. Karena masih ada di dalam komputer yang
lainnya.
3. Menghemat uang
Penghematan biaya terhadap peralatan yang digunakan, misalnya printer.
Misalnya sebuah printer dapat digunakan oleh banyak orang.
4. Sarana Komunikasi
Misalnya ketika ada pengumuman rapat, pimpinan tidak perlu mengirim surat
kepada semua orang dengan lokasi yang berjauhan. Cukup melalui jaringan
komputer yang ada dan akan tersebar ke semua yang dibutuhkan.
A. Berbagai Jenis Jaringan
1. Local Area Network (LAN)
LAN jaringan yang terdapat dalam sebuah gedung atau perkantoran.
Umumnya LAN digunakan oelh perusahaan atau organisasi tertentu. Komputer
yang menghugunkan beberapa kantor yang letaknya berdekatan, misalnya yang
terdapat dalam kota.
2. Wide Area Network (WAN)
Adalah jaringan komputer yang mencakup area yang sangat luas dari segi
geografis. terhubung dalam satu LAN kebanyakan hanya berjarak beberapa
puluh meter.
98
3. Metropolitan Area Network (MAN)

Umumnya MAN digunakan untuk WAN dapat saja mencakup Negara atau
benua.
4. Internet
Internet merupakan jaringan komputer yang sangat besar yang mencakup
seluruh dunia. Orang yang terhubung ke internet berarti terhubung k e semua
komputer yang ada di dunia yang juga terhubung ke internet. Internet
merupakan kumpulan dari LAN, MAN, dan WAN.
B, Perangkat Jaringan Komputer
1. Server
Komputer server umumnya mempunyai
sistem operasi, aplikasi, dan database
yang menyediakan layanan kepada
komputer-komputer lain dalam
jaringan. Databse yang terdapat di
komputer server biasanya berisi
data-data yang digunakan bersamasama oleh komputer-komputer client.
Bila data-data yang ditangani server
2. Client
Komputer client adalah
komputer yang
digunakan untuk
melakukan pengolahan
data yang diambil dari
server. Komputer client
menerima pelayanan
dari komputer server.
3. Kartu Jaringan
K
a
r
t
u
j
a
r
i
n
g
a
n
a
t
a
u
L
A
N
C
a
r
d
a
cukup besar server database

dibuat terpisah.
Jika jaringan
dihubungkan ke internet,
komputer server juga
berfungsi sebagai gateway
atau gerbang komputer
client untuk mengakses
internet.
S
e
r
v
e
r
n
d
i
m
o
t
h
e
r
b
o
a
r
d
k
o
m
p
u
t
e
r
y
a
n
g
t
e
r
d
a
p
a
t
d
i
j
a
r
i
n
g
a
n
(
b
a
i
engkapi dengan LAN

Card, sehingga kita
tidak perlu lagi
membeli secara
terpisah.
Kartu jaringan
memungkinkan
komputer-komputer
yang terdapat
dalam jaringan
salingan
berkomunikasi dan
mempertukarkan
data-data.
4. Hub
99
Hub berfungsi untuk membagi sinyal data dari LAN Card. Hub juga berfungsi
sebagai penguat sinyal. Hub memungkinkan sebuah
kabel dari komputer server dihubungkan ke
beberapa komputer client. Hub juga
memungkinkan jarak komputer yang dihubungkan
oleh kabel jaringan menjadi lebih jauh.
Hub
5. Kabel dan Konektor

Kabel dan konektor adalah kabel jaringan yang digunakan untuk
menghubungkan satu komputer dengan komputer yang lain.
Kadang-kadang bila diperlukan, di antara dua komputer yang

dihubungkan dengan kabel ditempatkan hub. Kabel yang umum
digunakan di jaringan adalah kanel UTP.
Cable
6. Repeater
Repeater berfungsi untuk memperkuat sinyal di jaringan. Repeater
menguatkan sinyal yang diterima dari komputer pengirim, sehingga kekuatan sinyal
sama dengan kekuatan aslinya. Dengan
menempatkan
repeater maka jarak antar komputer
di jaringan dapat dibuat semakin jauh.
Repeater
7. Bridge
Bridge adalah perangkat jaringan yang digunakan untuk
menghubungkan sebuah jaringan (LAN) dengan jaringan yang lain.
Dengan menggunakan bridge maka sebuah
jaringan yang lebih besar, yang merupakan
gabungan dari beberapa jaringan dapat diperoleh.
Bridge
8. Router
Router berfungsi untuk mengatur aliran data dari satu jaringan ke jaringan
yang lain. Dengan adanya router maka arus data dari satu LAN dapat diisolasi
dari arus LAN yang lain. Dengan demikian, arus data dari satu LAN tidak
bercampur-baur dengan arus data dari LAN yang lain.
Ada dua jenis router yang biasa
digunakan, router dedicated yang
merupakan keluaran dari pabrik dan router
PC. Router PC adalah komputer PC yang
dibuat menjadi router.
Router
100
C. Model Jaringan
Ciri jaringan komputer adalah antar komputer bisa berbagi sumber daya seperti
berbagai pernagkat keras, perangkat lunak, berbagai data juga berbagi koneksi
internet. Ada dua model jaringan, yaitu sebagai berikut.
1. peer to peer
Pada jaringan peer to peer setiap komputer memiliki kedudukan yang
setara. Setiap komputer yang terhubung ke jaringan bisa bertindak
sebagai workstation ataupun server perhatikan diagram gambar di
bawah ini.
2. Client-Server
Pada jaringan ini ada satu komputer yang bersungsi sebagai server,
sedangkan komputer yang lain sebagai komputer workstation. Server
harus mempunyai kemampuan yang lebih tinggi di bandingkan dengan client
karena server menjadi pusat kontrol dan sumber daya yang dibagi kepada
client. Perhatikan diagram pada gambar dibawah ini.
D. Topologi Jaringan
Jaringan yang paling sederhana adalah dua komputer yang dihubungkan, bisa
menggunakan kabel (kabel serial, paralell atau bluetooth). Hubungkan antara dua
komputer biasanya terbatas hanya pada transfer data.
a. Topologi Bus
Jaringan yang dibangun dengan konfigurasi BUS memiliki diagram
seperti di bawah ini :
Computer
Computer
Computer
Computer
Computer
Server
Topologi ini mempunyai beberapa kelebihan.

101
1. Jaringannya sederhanan
2. Kabel yang digunakan sedikit
3. Pengembangan jaringan cukup mudah.
Selain mempunyai kelebihan,topologi ini mempunyai beberapa kelemahan.
1. jaringan akan macet jika salah satu client atau komputer rusak, sementara
kita juga sulit mendeteksi client mana yang mengalami kerusakan.
2. Diperlukan penguat jika jarak antarkomp
3. Performance jaringan akan turun jika yang menggunakan bertambah
banyak.
b. Topologi Ring
Disebut ring karena topologi ini menghubungkan komputer dalam
jaringan membentuk lingkaran (walaupun tidak mesti lingkaran). Perhatikan
gambar diagram di bawah ini.
Kelebihan topologi ring adalah kecepatan aliran datanya dapat
diandalkan. Namun, jika ada masalah di kabelnya maka seluruh jaringan
akan macet.
Computer
Token-ring
Server
Computer
\
Computer
Computer
c. Topologi Star
Kelebihan dari topologi jenis ini merupakan konfigurasi yang paling
fleksibel dalam penambahan jumlah komputer yang dapat terhubung,
karena semua komputer dihubungkan melalui hub/switch.
Beberapa keuntungan topologi ini adalah sebagai berikut :
1. Pemasangan client baru tidak mempengaruhi yang lainnya
2. Jika ada kesalahan atau kerusakan, lebih mudah dideteksi.
3. Pengaturan terpusat.
Kelemahannya adalah sebagai berikut.
1. Kabel yang digunakan banyak, karena setiap komputer terhubung ke
hub.
2. Jika hub/switch rusak akan menggangu keseluruhan jaringan.
102
Computer
Computer
Computer
Hub
Computer
Computer
103
Membuat Karya Tulis

Yang Mengajar (Manusia) Dengan Perantara Kalam. Dia
Mengajarkan Kepada
Manusia Apa Yang Tidak Diketahuinya. ( Al-Alaq, 4 5 )
Ketentuan membuat karya tulis :

1. Kertas yang digunakan untuk pengetikan berukuran A4
2. Gunakan peraturan margin dengan criteria sebagai berikut :
3.
4. Buatlah judul dengan menggunakan jesis arial dengan besar huruf adalah 14 dan tebal
(bold)
5. Buatlah paragraf dengan menggunakan jenis huruf arial dengan besar huruf 12 dan
gunakan perataan tepi justifed
6. Gunakan ine spacing : double, untuk jarak spasi pada text secara umum.
104
7. Gunakan page number untuk seluruh halaman di dalam karya tulis

Catatan :
1. Penomoran sebuah lampiran merupakan penomoran berbentuk angka romawi.
2. Peletakkan page number yang bersifat khusus/untuk penomoran setelah BAB
terletak pada posisi pojok kanan atas (Top of page, plain number 3)
8. Gunakan internet untuk mendapatkan sebuah artikel .
Teknologi Informatika dan Komunikasi Yang bersifat Islami

Makalah
Diajukan untuk memenuhi pelajaran TIK sebagai salah satu nilai
Kompetensi Dasar
Disusun Oleh :
Nama : Moh. Narto
Kelas : IX.W
No. Induk
: 1234567890
Sekolah Menengah Pertama Islam Al-Azhar 1
105
KATA PENGANTAR
Segala puji bagi Tuhan yang telah menolong hamba-Nya menyeleaikan makalah ini
dengan penuh kemudahan. Tanpa pertolongan Dia mungkin penyusun tidak akan sangup
menyelesaikan dengan baik.
Makalah ini disusun agar pembaca dapat memperluas ilmu tentang KANKER PARUPARU DAN PENGOBATANNYA, yang kami sajikan berdasarkan pengamatan dari berbagai
sumber. Makalah ini disusun oelh penyusun dengan berbagai rintangan. Baik itu yang datang
dari diri penyusun maupun yang datang dari luar. Namun dengan penuh kesabaran dan
terutama dan terutama pertolongan dari Tuhan akhirnya makalah ini dapat terselesaikan.
Makalah ini memuat tent-parung PeyangyakitsangatKan bagi kesehatan seseorang. Walaupun

makalah ini mungkin kurang sempurna tapi juga
memilki detail yang cukup jelas bagi pembaca.
Penyusun juga mengucapkan terimakasih kepada giru Bahasa Indonesia sang

penyusun yaitu Ibu Sumi yang telah membimbing penyusun agar dapat menegrti tentang
bagaimana cara kami menyusun karya tulis ilmiyah.
Semoga makalah ini dapat memberikan wawasan yang lebih luas kepada pembaca.
Walaupun makalah ini memiliki kelebihan dan kekurangan, penyusun mohon untuk saran dan
kritiknya.
Jakarta, Januari 2010
106
DAFTAR ISI
KATA PENGANTAR ..............................................................................................i

DAFTAR ISI .............................................................................................................ii
BAB I Pendahuluan 1
a. Latar Belakang 1
b. Permasalahan
c. Tujuan Penulisan 3
d. Metode Penulisan
e. Sistematika
BAB II Pembahasan 6
2.1. Hal-hal yang berkaitan 7
2.2. Prosedur
2.3. Pembuatan
10
BAB III Penutup
20
3.1. Kesimpulan
3.2. Saran
20
21
DAFTAR PUSTAKA22
107
7
Latihan Soal
Pilihlah satu jawaban yang kamu anggap benar dari soal-soal di bawah ini
!
1. Perhatikan gambar :
Komponen komputer yang berfungsi untuk menampilkan data...

A b
2.
Gambar di bawah ini adalah media penyimpanan yang disebut...
a. Disket
b. Hard disk
c. CD
d. Flash disk
3. Media penyimpanan yang bahannya terbuat dari resin (polycarbonate) adalah ...
a. Disket
b. RAM
c. CD-ROOM
d. Flash disk
4. Media penyimpanan yangalah ...memiliki ukuran 3,5

a. Disket
b. Harddisk
c. CD
d. Flash disk
5. Perangkat komputer terhubung ke sumber listrik PLN setelah melalui stabilizer, untuk
mengaktifkan komputer dengan urutan yang benar yaitu hidupkan...
a. CPU, monitor lalu stabilizer
108
2. Monitor, Stabilizer lalu CPU

3. Stabilizer, CPU, lalu monitor
4. Stabilizer, monitor lalu CPU
6. Simbol icon dari program pengolah data adalah...
7. Perintah mengganti nama folder adalah ...

a. Cut
c. rename
b. delete
d. paste
8. Berikut adalah fungsi dari program microsoft world adalah...

a. Pengolahan angka
c. Pengolah kata
b. Pengolah angka dan kata
d. Pengolah database
9. Extention dari microsoft world adalah ...

a. XLS
c. DOC
b. MDB
d. PPT
10. Ikon
berfungsi untuk ...
1. membuka dokumen baru
2. membuka dokumen yang tersimpan
3. mencetak dokumen
4. menyimpan dokumen
11. Tombol kombinasi keyboard yang digunakan untuk menyimpan dokumen adalah...
a.
ctrl + O
c. Ctrl + A
b.
ctrl + S
d. Ctrl + N
12. Perhatikan pernyataan di bawah ini !
109
1. Klik tombol save atau enter untuk menyimpannya.

2. pada tombol daftar pilihan save in, pilih dan klik drive atau folder yang diinginkan
untuk menyimpan dokumen.
3. Pilihan dan klik menu file, kemudian klik save
4. pada kotak isian file name, ketikan nama file yang diinginkan.
Dari pernyataan diatas susunan cara menyimpan dokumen sesuai dengan prosedur adalah
...
a. 1 2 3 4
c. 3 4 1 2
b.
d. 3 2 4 1
2 3 4 1
13. Pada kotak pilihan line spacing pada sub menu paragrafh, yang termasuk jarak satu spasi
adalah....
a.
at least
c. 1.5 line
b.
single
d. Double
14. Yang merupakan gambar icon word art adalah ...

a.
c.
b.
d.
15.Program pengolah angka adalah ...

a. Microsoft Office
c. Microsoft Word
b. Microsoft Exel
d. Microsoft powerpoint
16.Icon program pengolah angka adalah...

a.
c.
110
b.
d.
17. Cara membuka buku kerja baru microsoft exel dengan menggunakan keyboard yaitu :
a.
Ctrl + O
C. Ctrl + N
b.
Ctrl + P
d. Ctrl + s
18. Definisi sel adalah ...

1. pertemuan antara baris dan kolom
2. persaingan antara baris dan kolom
3. perbedaan antara baris dan kolom
4. perpaduan antara beberapa sel
19. Pengertian dari C.13 dalam lembar kerja adalah ...
1. pertemuan antara kolom C dengan baris 13
2. pertemuan antara kolom C dengan baris C
3. pertemuan antara kolom 13 dengan baris 13
4. pertemuan antara kolom 13 dengan baris C
20. Letak data pertemuan kolom dengan baris disebut....
a. pointer
c. Range
b. sel
d. kursor
21.Bentu tampilan dengan kertas vertikal / tegak adalah ....

a. Portrait
c. printer
b. landscape
d. Print out
22.Rumus formula perkalian dengan lambang ...

a. +
c. *
b. -
d. ^
111
23.Rumus formula pengurangan dengan lambang...

a. +
c. *
b. -
d. ^
24.Nilai rata-rata dicari dengan fungsi ...

a. SUM
c. AVERAGE
b. MAX
d. MIN
25.Fungsi MAX digunakan untuk mencari ...

a. Jumlah
c. terendah
b. Tertinggi
d. Rata-rata
26.Mengubah bentuk huruf dilakukan dengan perintah....

a. Format Cells Number
c. Format Cells Font
b. Format Cells Aligment
d. Format Cells Border
27.Gambar berikut ini merupakan bentuk dari jenis grafik ...

a. Column
c. Line
b. Bar
d. Cylinder
28.Sub menu yang dipergunakan untuk menyimpan lembar kerja adalah....

a. New
c. print
b. open
d. Save as dan save
29. Dipandang dari segi komunikasi, internet adalah ...

1. sarana yang efisien dan efektif untuk melakukan pertukaran informasi jarak jauh
2. Sarana yang menyediakan perpustakaan besar yang menyediakan jutaan informasi
3. Sarana yang menyediakan fasilitas game
4. Salah semua
30. Untuk dapat bergabung dengan internet, kita harus mempunyai akses dengan cara
berlangganan ke penyedia jasa internet yang disebut dengan...
a. Telepon
c. software
112
b. modem d. ISP (Internet Service Provider)
31. Berikut ini adalah gambar modem jenis .....

a.
Internal
c. NIC
b.
eksternal
d. Ethernet
32. Berikut ini adalah gambar kabel jaringan jenis....
a.
UTP
c. coaxial
b.
Fiber Optic
d. Thin Ethernet
33. Gambar dibawah ini termasuk jenis topologi jaringan ..
a. topologi STAR
c. Topologi BUS
b. Topologi peer-to-peer network
d. Topologi token RING
34. Singkatan dari LAN adalah ....

a. Lokal Area Newyork
c. Lokal Area Network
b. Lokal Antena Network
d. Lokal Asia Network
113
35. Kepanjangan dari ISP adalah ....
a. Informasi Service Provider
c. Informasi Service Provider
b. International Service Provider
d. Internal Service Provider
36. Kotak dialog berikut ini digunakan untuk ...
a.
setting network
c. Setting wizard
b.
setting internet
d. Setting printer
37. Icon yang berfungsi untuk menghentikan browser yang sedang mengakses suatu situs
web adalah ..
a. c.
b. d.
38. Singkatan dari HTML adalah ...

1. Hyper Text Markup Language
2. Hyperlink Tool Markup Language
3. Hyperlink Transfer Markup Language
4. Hyperlink Text Markup Language
114
39. Singkatan dari URL adalah ....

1. Uniform Resource Locator
2. Uniform Resourees Locator
3. Uniform Resort Location
40. URL selalu diawali dengan layanan transfer protokol, contohnya adalah ...
a.
html ://
c. ftp : \\
b.
http ://
d. http : \\
41. Pelayanan yang paling menarik dari internet sehingga kita bisa mengakses informasiinformasi tidak hanya berupa teks, tapi juga, gambar, suara, film dan lain-lain merupakan
fasilitas ...
a.
Word Wide Web (www)
c. Chatting
b.
Electronic Mail
d. Salah semua
42. Pelayanan internet dimana pemakai dapat saling berdiskusi atau berbincang-bincang
dengan pemakai lain merupakan fasilitas ...
a.
Word Wide Web (www)
c. Chatting
b.
Elelctronic mail
d. Salah semua
43. Pelayanan internet dimana kita dapat mengirimkan surat elektronik keseluruh dunia
dengan cepat, merupakan fasilitas....
a. Word Wide Web (www)
b. Elelctronic mail
c. Chatting
d. Salah semua
44. Singkatan dari www adalah ....

a. Word Wide Web
c. Work Wind Web
115
b. Work Wide Web
d. Work Wind Web
45. Pelayanan yang dapat memudahkan untuk mengirim e-mail ke satu alamat e-mail,
kemudian didistribusikan secara otomatis kebeberapa alamat e-mail lain adalah ....
a.
E-mail
c. Ghoper
b.
Mailing list
d. Chatting
46. Singkatan dari HTML adalah ....

1. Hyper Text Makrup Language
2. Hyperlink Tool Markup Language
3. Hyper Transfer Markup Language
47. Tanda yang digunakan untuk menentukan tampilan suatu text disebut .....
1. Domain Name System
3. Hyper Text Transfer Protocol
4. File Transfer Protocol
48. Suatu bahasa yang menggunakan tanda-tanda tertentu (disebut sebagai tag) untuk
menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat
ditampilkan secara benar adalah ....
1. URL
2. WWW
3. HTML
4. HTTP
116
49. Gambar disamping ini termasuk jenis topologi jaringan ....
1. Topologi STAR
2. Topologi peer-to-peer network
3. Topologi BUS
4. Topologi tokenring
50. Singkatan dari URL adalah .....
2. Uniform Resourees Locator
3. Uniform Resort Location
4. Uniform Resource Location
51. URL juga disebut sebagai ....
1. Alamat komputer
2. Alamat internet
3. Alamat modem
4. Alamat telepon
52. Suatu alamat yang dipakai untuk menentukan lokasi informasi yang diminta oleh browser
adalah ....
1. HTML
2. WWW
3. URL
117
4. HTTP
53. Url selalu diawali dengan layanan transfer protokol, contohnya adalah ....
1. Html://
2. Http://
3. Ftp:\\
4. Http:\\
54. protokol_tansfer : /nama_host / path / na
1. HTML
2. WWW
3. HTTP
4. URL
55. Kotak dialog berikut ini digunakan untuk ....
a.
Setting network
c. setting wizard
b.
Setting internet
d. setting printer
56. Berikut ini adalah layanan didalam internet adalah ....

1. Word wide web (www)
2. Electronic mail
3. Chatting
4. Benar semua
118
57. Pelayanan internet dimana kita dapat mengirimkan surat elektronik ke seluruh dunia
dengan cepat, merupakan fasilitas ....
2. Electronic mail
3. Chatting
4. Benar semua
58. berikut ini program-program paling populer yang digunakan pada fasilitas electronik mail
adalah ....
1. Nescape messenger
2. Eudora
3. Microsoft outlook
4. Benar semua
59. Dibawah ini yang termasuk fungsi electronik mail adalah ....
1. Untuk mengirim surat secara elektronik lewat komputer
2. Untuk membalas surat menggunakan kertas dengan cepat
3. Untuk menterjemahkan perintah yang ada didalam komputer
4. Untuk mengubah jaringan telepon dengan komputer
60. Singkatan dari www adalah ....
1. World wide web
2. Work wide web
3. Work wind web
4. World wind web
61. Fasilitas internet untuk berdiskusi melalui e-mail adalah ...
2. Electronic mail
3. Chatting
4. Mailing list
119
62. Pelayanan yang memudahkan kita untuk mengirimkan e-mail ke satu alamat e-mail,
kemudian didistribusikan secara otomatis kebeberapa alamat e-mail lain adalah ....
a.
E-mail
c. Ghoper
b.
Mailing list
d. Chatting
63. Istilah untuk mengambil data-data dalam internet disebut dengan ....
a.
E-mail
c. Web browser
b.
Download
d. Hyperlink
64. Dalam istilah internet terdapat istilah http, kepanjangan http adalah .....
1. Hyperlink Text Transfer Protocol
2. Hyper Text Transfer Protocol
3. Hyper Text Travel Protocol
4. Hyperlink Text Travel Protocol
65. Protokol yang dipergunakan untuk menentukan web browser dalam meminta / mengambil
suatu dokumen, dan menentukan server dalam menyediakan dokumen yang diminta oleh
web
browser adalah ....
1. FTP
2. URL
3. HTTP
4. HTML
66. Dengan kita sering menggunakan internet diharapkan kita dapat menambah ilmu
pengetahuan, mengapa kita harus menggunakan internet ?
1. Karena internet mempunyai fungsi yang sama dengan televisi
2. Karena internet mempunyai bermacam-macam game
3. Karena internet merupakan hasil teknologi yang sangat canggih
4. Karena internet dapat memberikan informasi berbagai masalah
120
67. Dua komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga
meliputi jutaan komputer di dunia (internasional), yang saling berinteraksi dan bertukar
informasi adalah ....
1. Internet
2. Intranet
3. Network
4. Homepage
68. Pernyataan yang paling sesuai dengan adanya internet adalah ....
1. Akan mudah mencari kenalan
2. Akan mudah dalam mengikuti perkembangan ilmu pengetahuan
3. Akan mudah dalam mencetak dokumen dari internet
4. Akan mudah dalam membuka semua jenis dokumen
69. Upload adalah
1. Kegiatan pengiriman data dari komputer lokal ke komputer lainnya dalam sebuah
network
2. Kegiatan menalin data dari komputer lokal ke komputer lainnya dalam sebuah
network
3. Kecepatan aliran data dari komputer lokal ke komputer lainnya dalam sebuah network
4. Benar semua
70. Perhatikan pernyataan berikut !
1. Kegiatan pengiriman data dari komputer lokal ke komputer lainnya dalam sebuah
network
2. Kegiatan menyalin data dari komputer lokal ke komputer lainnya dalam sebuah
metwork
3. Kecepatan aliran data dari komputer lokal ke komputer lainnya dalam sebuah network
Pernyataan yang benar tentang pengertian upload adalah ....
1. Nomor iii
121
2. Nomor ii
3. Nomor i
4. Salah semua
71. Nama domain com berfungsi untuk menunjukan ....
1. Nama jaringan server
2. Nama komersial
3. Nama negara indonesia
4. Nama militer
72. Berikut ini adalah ikon untuk mengaktifkan web browser ....
1.
2.
3.
4.
73. Perhatikan pernyataan dibawah ini !
1. Ketikan alamat web yang kita ingin buka pada address bar
2. Klik menu start
3. Tekan tombol enter atau go pada status bar
4. Klik internet explorer
5. Pilih all program
Dari pernyataan diatas langkah yang benar untuk mengaktifkan web browser adalah ....
1. 1 2 3 4 5
2. 2 3 4 5 1
3. 2 5 4 1 3
4. 5 4 3 2 1
122
74. icon
berfungsi untuk .....
1. Menutup internet explorer

2. Mengaktifkan internet explorer
3. Menyimpan internet explorer
4. Mencetak internet explorer
75. Download file adalah ....
1. Mengambil file, kemudian menghapusnya dari internet untuk disimpan dalam
harddisk lokal
2. Menghapus file dari internet untuk disimpan ke harddisk lokal
3. Menyalin file dari internet untuk disimpan ke harddisk lokal
4. Mengambil file dari internet untuk disimpan ke harddisk lokal
76. Icon yang digunakan untuk menampilkan jendela pencarian yang disediakan oleh internet
explorer adalah ......
1.
2.
3.
4.
77. icon yang digunakan untuk kembali kehalaman awal dari internet explorer adalah ...
1.
b.
c.
d.
78. Internet adalah gudangnya informasi, diantara jutaan bahkan milyaran informasi tentunya
kita kesulitan untuk mencari informasi tersebut. Untuk itulah program yang sangat
berperan dalam mencarikan informasi yang dibutuhkan ialah ...
123
1. Search engine
2. Electronic mail
3. Download
4. Upload
79. Icon yang digunakan untuk mengirim surat menggunakan e-mail adalah ....
1.
2.
3.
d.
80. Icon
....berfungsiuntuk
1. Memeriksa e-mail yang kita terima

2. Mengirim e-mail dengan ditambahkan file lain
3. Membaca e-mail
4. Membalas e-mail
81. Simbol icon pengelola design web adalah .......
a. b.
c.
d.
Perhatikan gambar dibawah ini untuk menjawab soal no: 37, 38, 39 dan 40
Catatan : gambar tsb dibuat dengan menggunakan software macromedia dream weaver mx
124
Perhatikan pernyataan dibawah untuk menjawab soal dibawah

1. Klik list/menu
2. Klik insert
3. Klik flash button
4. Klik media
5. Klik form
6. Radio button
7. Button
82. dari pernyataan diatas langkah yang benar untuk membuat button seperti gambar dibawah
ini adalah .....
a. 1 2 3
b. 2 4 1
125
3. 2 3 4
4. 2 5 3
83. Dari pernyataan diatas, langkah2 yang benar untuk membuat menu seperti gambar
dibawah ini adalah .....
1. 1 2 3
2. 2 4 1
3. 2 1 5
4. 2 5 1
84. Dari pernyataan diatas langkah yang benar untuk membuat pilihan menu seperti gambar
dibawah ini adalah ...
1. 2 7 6
2. 2 4 6
3. 2 5 6
4. 2 6 5
85. Dari pernyataan diatas langkah yang benar untuk membuat pilihan menu seperti gambar
dibawah ini adalah ...
1. 2 7 5
2. 2 5 7
3. 2 4 7
4. 2 5 6
86. Tombol pada keyboard yang digunakan untuk melihat hasil akhir design web pada
Software Macromedia Dream Weaver adalah ......
1. F1
2. F10
3. F11
126
4. F12
87. Extention dari Software Macromedia Dream Weaver adalah ....
1. HTML
2. HTM
3. FLA
4. CDR
Essay
1. Sebutkan contoh dari perangkat lunak pada komputer ...............
2. Sebutkan contoh dari perangkat keras pada komputer ...............
3. Sebutkan contoh dari Operating System yang kamu ketahui ........
4. Extention dari software Microsoft Word adalah ...........
5. Sebutkan perbedaaan antara baris dan kolom ...........
6. Sub menu roll over image dari Macromedia Dream Weaver Mx digunakan untuk
.............
7. Perusahaan yang menawarkan dan menyediakan layanan akses internet ke kalangan
umum dengan memakai biaya disebut dengan .......
Dan berikan 3 contoh nama perusahaan yang menyediakan jasa internet tersebut!
8. Sebutkan 5 nama domain geografis dan dilengkapi dengan nama negara pemilik
domain tersebut !
9. Jelaskan perbedaan domain pendidikan .ac dengan domain pendidikan .edu !
10. Jelaskan apa fungsi dari mailing list ?
127

Buku Kelas 9 Regular

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Buku Kelas 9 Regular

Diunggah oleh

Hak Cipta:

Format Tersedia

1

: Mengenal Elemen-elemen Dasar Program Visual Basic

: Siswa dapat membuat program sederhana

: Siswa mampu mengenal dan menjalankan Ms.Visual Basic

A. Pengertian Microsoft Visual Basic

C. Elemen Elemen Didalam Ms. Visual Basic

Radio Button, Memo, Label, Panel dan sebagainya.

pada tool bar

Cara mengaktifkannya, yaitu dengan menekan

Kontrol yang bisa digunakan untuk

menampilkan teks yang tidak bisa diubah

teksnya bisa diubah oleh pemakai

Tool Box yang kita gunakan terdiri dari :

Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama

Mengenal Visual Data

Kompetensi Belajar : Mengenal Elemen-elemen Dasar Program Visual Basic

Jenis Jenis Visual Data.

Private Sub cmdhitungpp_Click()

Variabel dan Konstanta

: Mengenal Program dengan pemakian sebuah

6. Jangan kembar (sama). Cara

Buatlah sebuah Program seperti dibawah ini :

A. Interface Running Program

PROGRAM MENGHITUNG KELILING PERSEGI PANJANG DENGAN JAM

Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama

Tenteram Dari Kejutan Yang

: Mengenal Elemen-elemen Dasar Program Visual

: Siswa dapat membuat program sederhana

Digunakan untuk mengeksekusi satu kali atau lebih perintah yang

Ada dua cara penulisan If . Then . Else

If <Kondisi 1> Then

If <kondisi 1> Then

Else If <kondisi ke-n> Then

[Perintah blok ke-n]

[Perintah blok kondisi else]

Private Sub cmdlagi_Click()

Untuk menampilkan gambar statis maupun

2. Setelah perintah diatas dilaksanakan semua , selanjutnya tugas berikutnya

: Pengenalan Program DreamWeaver dan icon-iconnya

internet,...asal tahu alamatnya!. Web teknik mesin brawijaya mempunyai alamat

Jenis web berdasarkan teknologinya

Dasar HTML (tinjauan secara umum)

Gambar 2. <Title> ditampilkan pada title bar internet explorer

Berkenalan dengan Dreamweaver

Gambar 3. Jendela dialog ketika pertama kali dreamweaver di-start

Gambar 5. Bagian-bagian utama tempat kerja dreamweaver

Me-minimize, me-restore, dan

Gambar 7. Masing-masing halaman baru dreamweaver dipisah ke dalam tab-tab tertentu.

Memulai mendesain web

Gambar 10. Langkah awal pendefinisian sebuah situs

Gambar 14. kita coba membuat halaman baru sembarang

1. menetapkan kerangka kerja termasuk didalamnya menentukan jenis desain,

3. mulai bekerja membuat situs, termasuk didalamnya membuat folder-folder untuk

Membuat Website (Bagian I)

Gambar 19. Jendela yang digunakan untuk mengubah-ubah tag meta.

Gambar 20. Jendela yang berfungsi mengubah-ubah tag keywords

Gambar 21. Jendela yang berfungi untuk mengubah-ubah tab description

menjadi code and design view dengan mengklik

. Pelajarilah setiap kode dan

1. dokumen tersebut berjudul latihan seputar t atas

5. paragraf kedua adalah paragraf biasa

1. pada document toolbar kita isi kotakenter title d

Gambar 25. Memasukkan title dokumen