• Tidak ada hasil yang ditemukan

Mengenal Microsoft Visual Basic 6.0

N/A
N/A
Protected

Academic year: 2022

Membagikan "Mengenal Microsoft Visual Basic 6.0"

Copied!
127
0
0

Teks penuh

(1)

1

1

Mengenal Microsoft Visual Basic 6.0

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

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

Yang Mengajar (Manusia) Dengan Perantara Kalam. Dia Mengajarkan Kepada

Manusia Apa Yang Tidak Diketahuinya. ( Al-Alaq, 4 – 5 )

(2)

2 C. Elemen Elemen Didalam Ms. Visual Basic

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.

Menubar

Toolbar Form

Toolbox

Menu Project

Properties

Windows Layout

(3)

3 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

(4)

4 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

(5)

5

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

Label

Kontrol yang bisa digunakan untuk menampilkan teks yang tidak bisa diubah oleh pemakai program kita.

Text Box Untuk membuat area teks di mana teksnya bisa diubah oleh pemakai

Command Button

Untuk membuat sebuah tombol pelaksanaan perintah.

Tool Box yang kita gunakan terdiri dari : 1. Label : 3 Buah

2. Text Box : 3 Buah 3. Command Button : 2 Buah

(6)

6 C. Properties Program

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

Objek Properties Nilai

Form1 Name

Caption

FrmContoh2

Luas dan Keliling Lingkaran

Textbox1 Name

Text

TxtDiameter (kosongkan)

Textbox Name

Text

TxtKeliling (kosongkan)

Textbox3 Name

Text

TxtLuas (kosongkan)

Label1 Name

Caption

LblDiameter

Diameter Lingkaran

Label2 Name

Caption

LblKeliling

Keliling Lingkaran

Label3 Name

Caption

LblLuas

Luas Lingkaran Command Button1 Name

Caption

CmdHitung

&Hitung Command Button2 Name

Caption

CmdKeluar

&Keluar

(7)

7

2

Mengenal Visual Data

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

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

…. Allah Meninggikan Orang Yang Beriman Diantara Kamu Dan Orang Yang

Diberi Ilmu Pengetahuan Beberapa Derajat….. ( Qs. Al Mujaadalah : 1 )

(8)

8 End Sub

Keterangan :

DD Menyatakan Day ( Tanggal ) MMMM Menyatakan Month ( Bulan ) YYYY Menyatakan Year (Tahun ) 2. Time

Contoh :

Private Sub Timer1_Timer()

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

(9)

9 C. Properties

Objek Properties Nilai

Form1 Name

Caption

Form1

Menghitung Luas

Label1 Caption Label1

Label2 Caption Label2

Label3 Caption Panjang

Label4 Caption Lebar

Label5 Caption Luas Persegi Panjang

Label6 Caption Alas

Label7 Caption Tinggi

Label8 Caption Luas Segitiga

Frame1 Caption Menghitung Luas Persegi Panjang Frame2 Caption Menghitung Luas Segitiga

Command1 Name

Caption

Cmdhitungpp

&Hitung

Command2 Name

Caption

Cmdbersihpp

&Bersih

Command3 Name

Caption

Cmdhitungsg H&itung

Command4 Name

Caption

Cmdbersihsg B&ersih

Text1 Name

Text

Txtpanjangpp (dikosongkan)

Text2 Name

Text

Txtlebarpp (dikosongkan)

Text3 Name

Text

Txtluaspp (dikosongkan)

Text4 Name

Text

Txtalassg (dikosongkan)

Text5 Name

Text

Txttinggisg (dikosongkan)

Text6 Name

Text

Txtluassg (dikosongkan)

Timer1 Interval 1000

Timer2 Interval 1000

(10)

10 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

Private Sub Timer1_Timer()

Label1.Caption = Format(Time, "HH: MM: SS ") End Sub

Private Sub Timer2_Timer()

Label2.Caption = Format(Date, "DD:MMMM:YYYY") End Sub

E. Save Program

 Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama

NoAbsen_Latihan2_Nama

(11)

11

3

Variabel dan Konstanta

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.

Kompetensi Belajar : Mengenal Program dengan pemakian sebuah variable & Konstanta

Hasil Belajar : Siswa dapat membuat program sederhana yang menggunakan variable

Indikator : Siswa mampu mengenal dan menggunakan Variable & Konstanta

Alokasi Waktu : 2 x Pertemuan

Katakanlah : Apakah sama orang–orang yang mengetahui dengan orang yang tidak mengetahui? Sesungguhnya orang yang berakallah yang dapat menerima pelajaran

( Qs. Az Zumar : 9 )

(12)

12 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 Ingin Keluar”.

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 :

(13)

13

A. Interface Running Program

C. Properties

Objek Properties Nilai

Form1 Name

Caption

Form1

Menghitung Luas

Label1 Caption Label1

Label2 Caption Program Menghitung

Luas Persegi Panjang

Label3 Caption Panjang

Label4 Caption Lebar

Label5 Caption Luas

Command1 Name

Caption

Cmdhitung

&Hitung

Command2 Name

Caption

Cmdbersih

&Bersih

Command3 Name

Caption

Cmdkeluar

&Keluar

Textbox1 Name

Text

Txtpanjang (dikosongkan)

Textbox2 Name Txtlebar

(14)

14

Text (dikosongkan)

Textbox3 Name

Text

Txtluas (dikosongkan)

Timer1 Interval 1000

D. Program Code

Private Sub Timer1_Timer()

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

 Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama NoAbsen_Latihan3_Nama

LATIHAN 4

(15)

15 PROGRAM MENGHITUNG KELILING PERSEGI PANJANG DENGAN JAM

DIGITAL DISERTAI DENGAN PENAMBAHAN PROGRAM PESAN PADA COMMAND BUTTON “KELUAR”

 Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama NoAbsen_Latihan4_Nama

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)

(16)

16

1. 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 dengan struktur If …. Then, hanya saja digunakan digunakan untuk banyak blok perintah, contoh :

Ada dua cara penulisan If …. Then …. Else Cara 1 :

If <Kondisi 1> Then [Perintah Blok 1]

Else If <Kondisi 2> Then

Cara 2 :

If <kondisi 1> Then [Perintah Blok 1]

Else If <Kondisi 1> Then [Perintah blok 2]

Kompetensi Belajar : Mengenal Elemen-elemen Dasar Program Visual Basic Hasil Belajar : Siswa dapat membuat program sederhana

Indikator : Siswa mampu mengenal dan menggunakan Variable & Konstanta

Alokasi Waktu : 4 x Pertemuan

(17)

17 [Perintah blok 2]

Else

[Perintah blok kondisi else]

End If

End If

Else If <kondisi ke-n> Then [Perintah blok ke-n]

Else

[Perintah blok kondisi else]

End If

LATIHAN 5

Program Untuk Mencari Hari Lahir dan Umur Dengan Kontrol Program Select Case

Buatlah Form dan Tulis Codenya.

A. Interface

(18)

18 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

(19)

19 Private Sub cmdlagi_Click()

Text1.Text = ""

Text1.Setfocus End Sub

 Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama NoAbsen_Latihan5_Nama

LATIHAN 6

Program Memasukan Gambar

Buatlah Program gambar dibawah ini :

A. Interface

B. Tool Box

Tool Box yang digunakan terdiri dari : 1. Picture Box

2. Command Button 3. Shape

Picture Box

Untuk menampilkan gambar statis maupun gambar aktif dari sumber di luar dirinya

Shape

Untuk memasang kontrol yang mampu menghasilkan sarana agar pemakai bisa menggambar berbagai bentuk seperti oval, lingkaran dan lain-lain.

C. Properties

1. Untuk Tool box Picture Box kita dapat memasukan gambar melalui Properties : Picture

(20)

20

2. Untuk Tool Box Shape kita dapat melakukan perubahan bentuk dengan

menggunakan Properties :

Shape : 2 – Oval

Fill Style : 0 – Solid Fill Color : &H00COFFCO&

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&

D. Program Code E. 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

(21)

21 2. Setelah perintah diatas dilaksanakan semua , selanjutnya tugas berikutnya

adalah melanjut -

kan menuliskan code program untuk Command yang bertuliskan “ Mau Lihat Gambar yang

Lain “ disertai dengan menambahkan gambar pada toolbox Picture Box yang 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 Tuhanmu yang menciptakan……”

(QS. Al-Alaq:1)

(22)

22 Pokok Bahasan : Pengenalan Program DreamWeaver dan icon-iconnya

Tujuan : Siswa dapat mengetahui fungsi Software DreamWeaver Dan icon-icon yang ada didalamnya

Alokasi Waktu : 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” . Ada banyak penyedia 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:

− Pertama tama saya membuat halaman web. Dalam hal ini saya membuat 3 buah halaman berbeda

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

− 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 bisa melihat halaman 1 kita bisa mengetik 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 mempunyai nama “index.html” atau mungkin index.php, tergantung setting dari server web itu. Biasanya yang dibaca adalah index.html.

Jenis web berdasarkan teknologinya

Web statik

(23)

23

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>

<strong>Tinjauan <em>html</em></strong><font color="#CC0000"> dasar secara <font size="7"><strong>umum</strong></font>

sekali </font>

</body>

</html>

Dari contoh sederhana di atas dapat dilihat susunan bahasa html pada umumnya. Kita sebut setiap sintak yang berada dalam tanda “<” dan “>” sebagai elemen. Setiap elemen selalu ditutup dengan tag “</...>”. perhatikan elemen <body> di atas misalnya. Elemen tersebut diawali dengan tanda “<body>”, kemudian ditutup dengan “</body>”. Tag-tag 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.

<strong>Tinjauan <em>html</em></strong><font color="#CC0000"> dasar secara <font size="7"><strong>umum</strong></font> sekali </font>

Kemudian bandingkan hasilnya jika dilihat di browser

(24)

24

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

Perhatikan pada kata “tinjauan html” terlihat bahwa dua suku kata tersebut mempunyai property bold, sehingga dalam bahasa html kedua suku kata tersebut masuk ke dalam element <strong> yang berfungsi untuk merubah property text menjadi bold. Sedangkan suku kata “html” mempunyai property miring, sehingga suku kata tersebut kita masukkan dalam element <em> yang berfungsi merubahnya menjadi text miring.

<strong>Tinjauan <em>html</em></strong>

Sekarang coba pelajari bahasa di bawah ini dengan membandingkannya dengan tampilan pada gambar 2.

<font color="#CC0000"> dasar secara <font

size="7"><strong>umum</strong></font> sekali </font>

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 pada element body?...

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.

(25)

25

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:

(26)

26

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.

menus Insert bar

Document toolbar

(27)

27

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.

(28)

28

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. Elemen- elemen 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.

(29)

29

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.

Me-minimize, me-restore, dan

menutup salah satu dokumen Me-minimize, me-restore, dan menutup dreamweaver

(30)

30

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 sendiri dengan nama “images”, untuk file jenis pdf saya taruh di folder “pdf”, atau mungkin halaman-halaman tentang profil perusahaan saya sendirikan dalam folder “profil”. Hal tersebut akan membantu kita ketika memaintenance sebuah situs.

Dalam merencanakan sebuah situs, ada beberapa hal yang patut menjadi perhatian, yaitu:

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

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

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

− Dan NAVIGASI. Navigasi tentu saja sangat penting karena merupakan kemudi untk bisa menjelajah sebuah situs. Buatlah navigasi sejelas-jelasnya dan semudah- mudahnya 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.

(31)

31

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

(32)

32

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 “mendefinisikan situs”. Hal ini sangat penting 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

(33)

33

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, i dont want to use server technology”

terpilih sebagaimana gambar di bawah. Klik tombol next

Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server

(34)

34

3. Pada jendela berikutnya anda akan ditanya mengaenai bagaimana nantinya anda

bekerja dengan file-file anda ketika sedang membuat website.

Pilihan pertama adalah “Edit Local Copies on My Computer Then Upload to Server When Ready”, pilihan kedua adalah “Edit Directly on Server Using Local Network”, dan pilihan yang terakhir adalah “Edit Directly on Server Using FTP or RDS”.

− 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

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

− 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 apabila sebelumnya anda memilih “edit 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.

(35)

35

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.

(36)

36

Membuat dokumen, menyimpan, dan menampilkannya pada browser

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”

(37)

37

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

(38)

38

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.

(39)

39

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:

(40)

40

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

Perhatikan bahwa “creator” tidak disediakan dreamweaver. Dengan object meta kita bisa 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.

(41)

41

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/gambar.gif” tersebut dianggap berada pada 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:

− Text

− Gambar

− List

− Tabel

− Hyperlink

− Image maps

(42)

42

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 . Pelajarilah setiap kode dan bandingkan dengan tampilannya.

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.

(43)

43

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 text”. Bisa anda lihat di bagian pojok kiri 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 menjorok beberapa “spasi”

OK, mungkin anda sudah mempunyai gambaran bagaimana membuat tampilan seperti contoh di atas. Berikut ini adalah langkah-langkahnya:

1. pada document toolbar kita isi kotak title dengan “latihan seputar text”. Tekan enter

Gambar 25. Memasukkan title dokumen

(44)

44

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:

<p>

Ini baris pertama paragraf pertama<br>

Ini baris ke dua paragraf pertama<br>

</p>

<p>

Sedangkan ini adalah paragraf ke dua

</p>

Secara otomatis dreamweaver akan membuat tag <p></p> ketika anda menekan enter saja, dan akan membuat tag <br> 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 “&nbsp;” pada code html anda beberapa kali, namun ada cara 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:

(45)

45

Gambar 27. Tampilan sementara yang telah kita buat

Sekarang kita tinggal mengaplikasikan style pada pekerjaan kita. Dimulai dari judul

“Academic press series in Engineering” tersebut yang mempunyai property ukuran 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 pada “property inspector”. Cara seperti ini berlaku juga untuk pengubahan property elemen-elemen yang lain.

(46)

46

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 tentu saja “J. David Irwin” menjadi bold berwarna merah,

“Auburn University” menjadi italic, dan paragraf 1 align= center. Dibawah ini mungkin bisa dijadikan referensi untuk bisa mengubah hal tersebut.

Gambar 29. Berbagai tool yang digunakan untuk mengubah property text

(47)

47

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

 mempunyai ukuran file lebih kecil daripada gif untuk file dangan ribuan warna.

 Biasa digunakan untuk gambar-gambar foto.

Berikut ini contohnya:

(48)

48

Jpeg 60% compresi, 19 kb

Jpeg 100% kompresi, 20 kb 3. png

 merupakan format baru yang bisa dipakai di dunia web. beberapa browser lama memerlukan plugins untuk bisa melihatnya.

 Mempunyai kemampuan kompresi sebagus gif, namun juga mempunyai kedalaman warna yang tinggi.

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

(49)

49

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.

Drag and drop

(50)

50

Gambar 31. Jendela yang muncul setelah kita men-drag&drop gambar

Pilihan “relative 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.jpg”> ----> relative to document

<img src=”/images/bebek.jpg”> ---->relative to site root

Pada relative to document saya langsung menggunakan alamat “bebek.jpg” karena gambar 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 “images” menandakan menggunakan relative 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:

(51)

51

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.

(52)

52

Gambar 33. beberapa cara untuk mengubah ukuran gambar

Untuk mengatur ukuran gambar, kita bisa mengisikan langsung pada kotak “W” dan “H”

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 “reset size”

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 dideskripsikan, anda bisa memilih ”empty” pada dropdown alt tersebut.

(53)

53

Tentang list

ada tiga jenis list yang dapat kita buat menggunakan list, yaitu:

− 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 <p></p>. 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.

(54)

54

Gambar 35. cara untuk mengubah tampilan list

Pada dropdown type anda bisa memilih tampilan dari bullet anda. Cobalah.

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

− Nested list

Merupakan kombinasi dari kedua model di atas atau bahkan kombinasi style dari masing-masing jenis list di atas. Perhatikan contoh berikut:

(55)

55

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”. Dan merubahnya menjadi romawi

4. Ulangi langkah diatas untuk hirarki yang ke-tiga, kemudian ketika masih ter-blok, klik padatombol unordered list.

(56)

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

(57)

57

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:

Gambar

Gambar 3. Jendela dialog ketika pertama kali dreamweaver di-start
Gambar  di  bawah  merupakan  gambaran  layout  kerja  dreamweaver  mx.    Jendela-jendela  pembantu  yang  terdapat  pada  menu  window  dikelompokkan  pada  panel  bagian  kanan
Gambar 7. Pada model linear kita bisa mengatur urutan halaman yang dibuka pengguna.
Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server
+7

Referensi

Dokumen terkait

Kata asing adalah kata-kata yang berasal dari bahasa asing yang masih dipertahankan bentuk aslinya karena belum menyatu dengan bahasa Indonesia sedangkan kata serapan

Bukit Makmur Mandiri Utama jobsite Lati Berau antara lain alat pemadam api ringan (APAR), fire alarm system ,dan hydarant, fire box. Sarana proteksi kebakaran yang lain

Dua atau lebih proton dengan lingkungan magnet yang sama akan mempunyai nilai pergeseran kimia yang sama dan hanya menghasilkan satu sinyal proton NMR.. Agenda

Manfaat dari penelitian ini adalah untuk memberikan manfaat dan pengetahuan bagi para pembelajar bahasa Jerman mengenai ungkapan idiomatik dalam bahasa Jerman dan

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang telah melimpahkan karunia dan rahmat-Nya sehingga penulis dapat menyelesaikan penyusunan dan penulisan skripsi

Bahaya sampah B3-RT sampai saat ini belum terbukti secara nyata bagi masyarakat umumnya, untuk itu masih diperlukan pengkajian identifikasi jenis dan tingkat bahaya dari setiap

Berdasarkan hasil penelitian ternyata antara power motive dan kinerja mahasiswa tidak ada korelasi, hal ini berarti mahasiswa dengan power motive yang tinggi belum

Meskipun pemupukan NPK nyata mempengaruhi bobot kering polong dibanding kontrol, namun penambahan pupuk hayati pada dosis N yang lebih rendah (1/4–1/2 N), meningkatkan hasil