Mengenal Microsoft Visual Basic 6.0

Transkripsi

1 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 Hasil Belajar Indikator Alokasi Waktu : Mengenal Elemen-elemen Dasar Program Visual Basic : Siswa dapat membuat program sederhana : Siswa mampu mengenal dan menjalankan Ms.Visual Basic : 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 1

2 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 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 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 3

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 4

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 Kontrol yang bisa digunakan untuk Label 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 5

6 C. Properties Program Objek Properties Nilai Form1 Name FrmContoh2 Caption Luas dan Keliling Lingkaran Textbox1 Textbox Textbox3 Label1 Label2 Label3 Command Button1 Command Button2 D. Program Code : Name Text Name Text Name Text Name Caption Name Caption Name Caption Name Caption Name Caption 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 TxtDiameter (kosongkan) TxtKeliling (kosongkan) TxtLuas (kosongkan) LblDiameter Diameter Lingkaran LblKeliling Keliling Lingkaran LblLuas Luas Lingkaran CmdHitung &Hitung CmdKeluar &Keluar Simpanlah Latihan tersebut pada folder kelas masing-masing dengan nama NoAbsen_Latihan1_Nama 6

7 2 Mengenal Visual Data. Allah Meninggikan Orang Yang Beriman Diantara Kamu Dan Orang Yang Diberi Ilmu Pengetahuan Beberapa Derajat.. ( Qs. Al Mujaadalah : 1 ) Kompetensi Belajar Hasil Belajar Indikator Alokasi Waktu : Mengenal Elemen-elemen Dasar Program Visual Basic : Siswa dapat membuat program sederhana dengan visual data type Date and time : Siswa mampu mengenal macam macam visual data : 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") 7

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 8

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 Command2 Command3 Command4 Text1 Text2 Text3 Text4 Text5 Text6 Name Caption Name Caption Name Caption Name Caption Name Text Name Text Name Text Name Text Name Text Name Text Timer1 Interval 1000 Timer2 Interval 1000 Cmdhitungpp &Hitung Cmdbersihpp &Bersih Cmdhitungsg H&itung Cmdbersihsg B&ersih Txtpanjangpp (dikosongkan) Txtlebarpp (dikosongkan) Txtluaspp (dikosongkan) Txtalassg (dikosongkan) Txttinggisg (dikosongkan) Txtluassg (dikosongkan) 9

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 10

11 3 Variabel dan Konstanta Katakanlah : Apakah sama orang orang 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

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 : 12

13 A. Interface Running Program C. Properties Form1 Objek Properties Nilai 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 Command2 Command3 Name Caption Name Caption Name Caption Cmdhitung &Hitung Cmdbersih &Bersih Cmdkeluar &Keluar Textbox1 Name Text Txtpanjang (dikosongkan) Textbox2 Name Txtlebar 13

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 14

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

16 Kompetensi Belajar Hasil Belajar Indikator Alokasi Waktu : Mengenal Elemen-elemen Dasar Program Visual Basic : Siswa dapat membuat program sederhana : Siswa mampu mengenal dan menggunakan Variable & Konstanta : 4 x Pertemuan 1. IF THEN Digunakan untuk mengeksekusi satu kali atau lebih perintah yang menyatakan keadaan. Bisa ditulis dengan dua cara,yaitu : Atau If <Kondisi> Then Perintah If < Kondisi> Then End If Perintah 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] 16

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 17

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 = Year(Text1.Text) Label4.Caption = Hari Label5.Caption = Str(Umur) + " Tahun" End Sub Private Sub cmdkeluar_click() Unload Me End Sub 18

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 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. C. Properties 1. Untuk Tool box Picture Box kita dapat memasukan gambar melalui Properties : Picture 19

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 : &H & 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 20

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

22 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. 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 maka secara otomatis kita bisa melihat halaman google pada browser kita. 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 sehingga karena 3 halaman yang kita buat tadi berada pada folder latihan, maka untuk bisa melihat halaman 1 kita bisa mengetik berikut penjelasananya: Informasi: jika anda hanya menulis 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 22

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> 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 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. tinjauan html dasar secara umum sekali Kemudian bandingkan hasilnya jika dilihat di browser 23

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 yang berfungsi untuk merubah property text menjadi bold. Sedangkan suku kata html mempunyai property miring, sehingga suku kata tersebut kita masukkan 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 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. 24

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: 25

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. Document toolbar Insert bar menus 26

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

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

29 Me-minimize, me-restore, dan menutup salah satu dokumen Me-minimize, me-restore, dan menutup 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

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

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 31

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 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 32

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 33

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

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

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 36

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 37

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

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: 39

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 40

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= > Maka setiap script yang terdapat link images/gambar.gif tersebut dianggap berada pada 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 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 41

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

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 43

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: 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 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: 44

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

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 46

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: 47

48 Jpeg 60% compresi, 19 kb 3. png Jpeg 100% kompresi, 20 kb 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 48

49 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

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: 50

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

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

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

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: 54

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

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

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: 57

58 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 adalah: 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

59 Untuk mengubah ukuran tabel kita bisa menggunakan kotak W dan H Untuk mengubah warna background kita bisa gunakan Bg Color Untuk mengubah warna bingkai (border) kita bisa gunakan Brdr color Untuk memberikan background dengan obyek tertentu kita bisa menggunakan Bg Image. Untuk mengatur penempatan tabel kita bisa gunakan Align 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 . 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_link ><img src= kontak.gif alt= kontak ></a> Dijelaskan di atas bahwa kita bisa membuat link yang menuju ke halaman tertentu, situs tertentu, dan bahkan alamat tertentu. Di bawah ini adalah contoh html untuk beberapa jenis alamat tersebut: <a href= >link menuju ke google</a> <a href= mailto:dk_arismawan@yahoo.com >mengirim ke dk_arismawan@yahoo.com</a> Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa menggunakan target= _blank <a href= target= _blank >link menuju ke google</a> 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 kotak link pada property inspector. 59

60 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

61 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 dokumen. 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 atas. Kemudian gunakan klik target seret dan arahkan ke tanda. 61

62 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 rom. 2. seleksi gambar yang kita masukkan kemudian silahkan mulai menggambar maps pada gambar anda. 62

63 Gambar 46. dengan imagemaps kita bisa membuat lebih dari satu area link pada sebuah gambar. Untuk link 1 kita gambar dengan menggunakan icon yang ditunjukkan tanda panah kuning. Untuk link 2 kita gambar menggunakan icon yang ditunjukkan tanda panah hijau. Untuk link 3 kita menggunakan icon yang ditunjukkan tanda panah biru. 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

64 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 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

65 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 kata homepage. Ini artinya adalah 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 lihatlah bahwa halaman utamanya berbeda dengan halaman isinya. Halaman utama situs cnn: Halaman isi situs cnn 65

66 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 terdapat gambar tampilan situs yang akan kita buat dengan nama file mock up.gif. Mock up.gif tersebut sebelumnya kita buat di 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

67 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

68 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 disamping tulisan home. 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 definisikan situs dalam folder tersebut 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

69 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 left yaitu 23 pixel. Kemudian isi backgroundnya dengan gambar header_left. 3. Sekarang ulangi langkah nomor 2 untuk kolom paling kiri. Gunakan gambar header_left untuk backgroundnya. 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 gambargambar yang sudah disediakan. Isi kolom kiri dengan header1.jpg kemudian kolom tengah dengan header2.gif, dan kolom kanan dengan header3.jpg. 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 center. Untuk menyeleksi 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

70 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

71 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, vertical alignment = top. Kemudian isi kolom tersebut dengan gambar body3img.gif. 5. klik pada kolom 4 kemudian masukkan property sbb: width=540px, bgcolor= F6F8F4, vertical alignment = top. 6. klik pada kolom ke lima kemudian masukkan property sbb: width=23, background= header_right.gif. 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

72 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, bgcolor= # C8D3C7, column=2, rows=15, cellpadding = 0, cellspacing = 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, bgcolor= DEE5DD. Kemudian isi baris 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 atasisi.gif kemudian isi backgroundnya dengan gambar itu juga. Tekan tab kemudian masukkan tulisan seperti yang ada di tampilan anda. Terserah anda ingin memasukkan tulisan apapun di situ. Masukkan juga gambar isi.gif 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= footer.gif. Kolom yang pertama berukuran 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

73 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 pada jenis font dan mengubah ukurannya 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

74 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

75 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 pada New CSS Style pada bagian kanan bawah panel design kemudian jendela dialog akan muncul. Pilih pada redefine html tag kemudian klik pada dropdown dan pilih <body>. Maka jendela baru akan muncul. Kotak dialog untuk memasukkan style. Perhatikan juga pada bagian Define In saya memilih This Document Only. Hal tersebut berarti Style kita dikelompokkan pada elemen head dokumen kita. Setelah kita klik OK, kotak dialog di bawah akan muncul: 75

76 Dalam Kotak Dialog ini kita memilih property apa saja yang ingin kita masukkan 2. Pilih pada Background kemudian masukkan # 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

77 Untuk a:visited: Untuk a:hover 77

78 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

79 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 { } a:link { } background-color: #374948; margin: 0px; padding: 0px; font-family: tahoma; font-size: 11px; color: #000000; font-weight: bold; text-decoration: none; a:visited { } a:hover { } a:active { } font-family: tahoma; font-size: 11px; font-weight: bold; color: #666666; text-decoration: none; font-family: tahoma; font-size: 11px; font-weight: bold; color: #CC6600; font-family: tahoma; font-size: 11px; font-weight: bold; color: #990000; text-decoration: none; 79

80 --> </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 { } a:link { } background-color: #374948; margin: 0px; padding: 0px; font-family: tahoma; font-size: 11px; color: #000000; font-weight: bold; text-decoration: none; a:visited { } a:hover { } a:active { font-family: tahoma; font-size: 11px; font-weight: bold; color: #666666; text-decoration: none; font-family: tahoma; font-size: 11px; font-weight: bold; color: #CC6600; font-family: tahoma; font-size: 11px; font-weight: bold; color: #990000; text-decoration: none; 80

81 }.kananatas a:link { } font-family: tahoma; font-size: 11px; color: #ffffff; text-decoration: none;.kananatas a:visited { } font-family: tahoma; font-size: 11px; color: #666666; text-decoration: none;.kananatas a:hover { } font-family: tahoma; font-size: 11px; color: #CC6600;.kananatas a:active { } --> </style> font-family: tahoma; font-size: 11px; color: #990000; text-decoration: none; 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

82 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

83 Masukkan property box Klik apply dan kemudian OK. Maka sekarang tampilan anda akan terlihat seperti berikut ini: 83

84 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 Layout Digunakan untuk menyisipkan layer atau table. 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. Frames Digunakan untuk membuat halaman web dengan frames. Forms Digunakan untuk menyisipkan form dan elemen-elemen form Templates Digunakan apabila kita bekerja dengan tempat. Characters Digunakan untuk menyisipkan karakter-karakter khusus yang tidak dapat ditemukan pada keyboard. 84

85 Media Digunakan untuk menyisipkan berbagai media seperti objek flash, flash text dsb Head Digunakan untuk menyisipkan elemen di dalam tag <head> dari halaman web, seperti meta tag. Script Digunakan untuk menyisipkan script, seperti JavaScript, VBScript 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

86 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 dapat kita pilih menggunakan 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

87 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 aplikasi database dalam dreamweaver. 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 kita gunakan fungsi 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

88 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 pilihan Edit local copies 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

89 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

90 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

91 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. Tekan tombol shift atau control dan klik pada file halaman web yang diinginkan. Mulai 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: Drag 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. Pilih 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

92 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

93 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

94 LATIHAN 1 LATIHAN 2 LINK Link adalah hubungan antar situs dan halaman. Jika perintah ini dilaksanakan, maka dapat masuk atau membuka halaman lain. 94

95 LATIHAN 3 95

96 LATIHAN 4 96

97 6 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 Kompetensi Dasar : Memahami dasar-dasar penggunaan Internet : - Menjelaskan pengertian dasar Internet/Intranet - Memahami dasar-dasar sistem jaringan Internet - 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

98 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

99 3. Metropolitan Area Network (MAN) benua. Umumnya MAN digunakan untuk WAN dapat saja mencakup Negara atau 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 bersama-sama oleh komputerkomputer client. Bila data-data yang ditangani server cukup besar server database dibuat terpisah. Jika jaringan dihubungkan ke internet, komputer server juga berfungsi sebagai gateway atau gerbang komputer client untuk mengakses internet. 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 Kartu jaringan atau LAN Card adalah perangkat keras jaringan yang dipasangkan di motherboard komputer yang terdapat di jaringan (baik server Card maupun client). Pada saat ini, beberapa motherboard sudah dilengkapi 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

100 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 Hub memungkinkan jarak komputer yang dihubungkan oleh kabel jaringan menjadi lebih jauh. 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 Repeater di jaringan dapat dibuat semakin jauh. 7. Bridge Bridge adalah perangkat jaringan yang digunakan untuk menghubungkan sebuah jaringan (LAN) dengan jaringan yang lain. Dengan menggunakan bridge maka sebuah Bridge jaringan yang lebih besar, yang merupakan gabungan dari beberapa jaringan dapat diperoleh. 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 router PC. Router PC adalah komputer PC yang dibuat menjadi router. 100

101 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. a. 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. b. 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

102 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 antarkomputer jauh. 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 Server Token-ring 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. Computer 102

103 Computer Computer Computer Hub Computer Computer 103

104 Ketentuan 7 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 : 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

105 7. Gunakan page number untuk seluruh halaman di dalam karya tulis Catatan : a. Penomoran sebuah lampiran merupakan penomoran berbentuk angka romawi. b. 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 : Sekolah Menengah Pertama Islam Al-Azhar 1 105

106 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 PARU- PARU 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 tentang Penyakit Kanker Paru-paru yang sangat berbahaya 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

107 DAFTAR ISI KATA PENGANTAR...i DAFTAR ISI...ii BAB I Pendahuluan...1 a. Latar Belakang...1 b. Permasalahan...2 c. Tujuan Penulisan...3 d. Metode Penulisan...4 e. Sistematika...5 BAB II Pembahasan Hal-hal yang berkaitan Prosedur Pembuatan...10 BAB III Penutup Kesimpulan Saran...21 DAFTAR PUSTAKA

108 7 Latihan Soal Pilihlah satu jawaban yang kamu anggap benar dari soal-soal di bawah ini! 1. Perhatikan gambar : A B C D Komponen komputer yang berfungsi untuk menampilkan data... A b c d 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 yang memiliki ukuran 3,5 adalah... 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

109 b. Monitor, Stabilizer lalu CPU c. Stabilizer, CPU, lalu monitor d. Stabilizer, monitor lalu CPU 6. Simbol icon dari program pengolah data adalah... A b c d 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... a. membuka dokumen baru b. membuka dokumen yang tersimpan c. mencetak dokumen d. 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

110 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 c b d 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. c. 110

111 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... a. pertemuan antara baris dan kolom b. persaingan antara baris dan kolom c. perbedaan antara baris dan kolom d. perpaduan antara beberapa sel 19. Pengertian dari C.13 dalam lembar kerja adalah... a. pertemuan antara kolom C dengan baris 13 b. pertemuan antara kolom C dengan baris C c. pertemuan antara kolom 13 dengan baris 13 d. 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

112 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... a. sarana yang efisien dan efektif untuk melakukan pertukaran informasi jarak jauh b. Sarana yang menyediakan perpustakaan besar yang menyediakan jutaan informasi c. Sarana yang menyediakan fasilitas game d. 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

113 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

114 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... a. Hyper Text Markup Language b. Hyperlink Tool Markup Language c. Hyperlink Transfer Markup Language d. Hyperlink Text Markup Language 114

115 39. Singkatan dari URL adalah... a. Uniform Resource Locator b. Uniform Resourees Locator c. Uniform Resort Location d. Uniform Resource Locator 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) c. Chatting b. Elelctronic mail d. Salah semua 44. Singkatan dari www adalah... a. Word Wide Web c. Work Wind Web 115

116 b. Work Wide Web d. Work Wind Web 45. Pelayanan yang dapat memudahkan untuk mengirim ke satu alamat , kemudian didistribusikan secara otomatis kebeberapa alamat lain adalah... a. c. Ghoper b. Mailing list d. Chatting 46. Singkatan dari HTML adalah... a. Hyper Text Makrup Language b. Hyperlink Tool Markup Language c. Hyper Transfer Markup Language d. Hyperlink Text Markup Language 47. Tanda yang digunakan untuk menentukan tampilan suatu text disebut... a. Domain Name System b. Hyperlink Text Markup Language c. Hyper Text Transfer Protocol d. 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... a. URL b. WWW c. HTML d. HTTP 116

117 49. Gambar disamping ini termasuk jenis topologi jaringan... a. Topologi STAR b. Topologi peer-to-peer network c. Topologi BUS d. Topologi tokenring 50. Singkatan dari URL adalah... a. Uniform Resource Locator b. Uniform Resourees Locator c. Uniform Resort Location d. Uniform Resource Location 51. URL juga disebut sebagai... a. Alamat komputer b. Alamat internet c. Alamat modem d. Alamat telepon 52. Suatu alamat yang dipakai untuk menentukan lokasi informasi yang diminta oleh browser adalah... a. HTML b. WWW c. URL 117

118 d. HTTP 53. Url selalu diawali dengan layanan transfer protokol, contohnya adalah... a. Html:// b. c. Ftp:\\ d protokol_tansfer : /nama_host / path / nama_file merupakan format dari... a. HTML b. WWW c. HTTP d. 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... a. Word wide web (www) b. Electronic mail c. Chatting d. Benar semua 118

119 57. Pelayanan internet dimana kita dapat mengirimkan surat elektronik ke seluruh dunia dengan cepat, merupakan fasilitas... a. Word wide web (www) b. Electronic mail c. Chatting d. Benar semua 58. berikut ini program-program paling populer yang digunakan pada fasilitas electronik mail adalah... a. Nescape messenger b. Eudora c. Microsoft outlook d. Benar semua 59. Dibawah ini yang termasuk fungsi electronik mail adalah... a. Untuk mengirim surat secara elektronik lewat komputer b. Untuk membalas surat menggunakan kertas dengan cepat c. Untuk menterjemahkan perintah yang ada didalam komputer d. Untuk mengubah jaringan telepon dengan komputer 60. Singkatan dari www adalah... a. World wide web b. Work wide web c. Work wind web d. World wind web 61. Fasilitas internet untuk berdiskusi melalui adalah... a. Word wide web (www) b. Electronic mail c. Chatting d. Mailing list 119

120 62. Pelayanan yang memudahkan kita untuk mengirimkan ke satu alamat , kemudian didistribusikan secara otomatis kebeberapa alamat lain adalah... a. c. Ghoper b. Mailing list d. Chatting 63. Istilah untuk mengambil data-data dalam internet disebut dengan... a. c. Web browser b. Download d. Hyperlink 64. Dalam istilah internet terdapat istilah http, kepanjangan http adalah... a. Hyperlink Text Transfer Protocol b. Hyper Text Transfer Protocol c. Hyper Text Travel Protocol d. 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... a. FTP b. URL c. HTTP d. HTML 66. Dengan kita sering menggunakan internet diharapkan kita dapat menambah ilmu pengetahuan, mengapa kita harus menggunakan internet? a. Karena internet mempunyai fungsi yang sama dengan televisi b. Karena internet mempunyai bermacam-macam game c. Karena internet merupakan hasil teknologi yang sangat canggih d. Karena internet dapat memberikan informasi berbagai masalah 120

121 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... a. Internet b. Intranet c. Network d. Homepage 68. Pernyataan yang paling sesuai dengan adanya internet adalah... a. Akan mudah mencari kenalan b. Akan mudah dalam mengikuti perkembangan ilmu pengetahuan c. Akan mudah dalam mencetak dokumen dari internet d. Akan mudah dalam membuka semua jenis dokumen 69. Upload adalah a. Kegiatan pengiriman data dari komputer lokal ke komputer lainnya dalam sebuah network b. Kegiatan menalin data dari komputer lokal ke komputer lainnya dalam sebuah network c. Kecepatan aliran data dari komputer lokal ke komputer lainnya dalam sebuah network d. Benar semua 70. Perhatikan pernyataan berikut! i. Kegiatan pengiriman data dari komputer lokal ke komputer lainnya dalam sebuah network ii. Kegiatan menyalin data dari komputer lokal ke komputer lainnya dalam sebuah metwork iii. Kecepatan aliran data dari komputer lokal ke komputer lainnya dalam sebuah network Pernyataan yang benar tentang pengertian upload adalah... a. Nomor iii 121

122 b. Nomor ii c. Nomor i d. Salah semua 71. Nama domain com berfungsi untuk menunjukan... a. Nama jaringan server b. Nama komersial c. Nama negara indonesia d. Nama militer 72. Berikut ini adalah ikon untuk mengaktifkan web browser... a. b. c. d. 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... a b c d

123 74. icon berfungsi untuk... a. Menutup internet explorer b. Mengaktifkan internet explorer c. Menyimpan internet explorer d. Mencetak internet explorer 75. Download file adalah... a. Mengambil file, kemudian menghapusnya dari internet untuk disimpan dalam harddisk lokal b. Menghapus file dari internet untuk disimpan ke harddisk lokal c. Menyalin file dari internet untuk disimpan ke harddisk lokal d. Mengambil file dari internet untuk disimpan ke harddisk lokal 76. Icon yang digunakan untuk menampilkan jendela pencarian yang disediakan oleh internet explorer adalah... a. b. c. d. 77. icon yang digunakan untuk kembali kehalaman awal dari internet explorer adalah... a. 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

124 a. Search engine b. Electronic mail c. Download d. Upload 79. Icon yang digunakan untuk mengirim surat menggunakan adalah... a. b. c. d. 80. Icon berfungsi untuk... a. Memeriksa yang kita terima b. Mengirim dengan ditambahkan file lain c. Membaca d. Membalas 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

125 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 b

Menunjukkan lagi