PERTEMUAN 3

DASAR PEMBUATAN WEBSITE 1

Andreas Hery Prasetya

http://prascakon.co.cc

Membuat Garis Horizontal

Untuk membuat garis horizontal pada halaman website sangatlah mudah karena dreamweaver telah
menyediakan fasilitas untuk membuat garis horizontal. Untuk membuat garis horizontal adalah
sebagai berikut :

Praktek 1 :

Kita akan membuat garis horizontal seperti gambar 3.1

gambar 3.1 Membuat Horizontal Rule

Lankah-langkah membuat horizontal rule :

1. Sipakan sebuah halama baru menggunakan dreamweaber.

 2. Buatlah tulisan seperti pada contoh 3.1

3. Untuk membuat garis, pilih pada menu insert > HTML >Horizontal Rule

gambar 3.2 Menu Membuat Horizontal Rule

4. Kemudian simpan dan lihat hasil dengan F12

Menampilkan Gambar

Untuk menampilkan gambar pada halaman website dreamweaver sudah menyediakan fasilitas yang
sangat mudah digunkan sekrang Kita akan membuat halaman website yang dapat menampilkan
gambar seperti gambar 3.3 menggunakan failitas yang disediakan oleh dreamweaver.
 gambar 3.3 Halaman Menampilkan Gambar

untuk menampilkan gambar adalah sebagai berikut :

1. Buat sebuah dokumen baru dengan mengetik Ctr+N.

2. Pada dokumen ketiikan tulisan :

KEBUNBINATANG.co.ccc
kebun binatang online untuk anda

3. Tambahkan horizotal rule.

4. Sebelum memasukkan gambar ke dokumen terlebih dahulu kumpulkan gambar kedalam

folder tempat kita menyimpan dokumen.

5. Masukkan gambar dengan pilih pada insert > image seperti gambar 3.4

gambar 3.4 memasukkan gambar

6. klik pada halaman HTML kemudian klik pada insert seperti gambar 3.4 maka akan muncul
seperti gambar 3.5
 gambar 3.5 pilih gambar

7. pilih gambar sesuai dengan keinginan kita setelah itu ok maka akan muncul seperti gambar
3.7.

gambar 3.6 Menyisipkan gambar

8. Ulangi dampai gambar yang ketiga

Link Antar Dokumen

Salah satu ciri dari sebuah halaman website adalah link, pada halaman website akan terlink
kehalaman lainnya. Untuk membuat halaman yang mengantung link seperti gambar3.7 cara
sangat mudah karena dreamweaver telah menyediakan fasilitas untuk membuat link.

gambar 3.7 Halaman yang mengandung link

1. Buah sebuah halaman baru dengan ctr+n

2. Buat tulisan dan garis horizontal pada halaman baru tersebut :

ADOBE DREAMWEAVER

Home | Download | Tentang Kami

Ini adalah halaman Home

3. Atur properties Simpan dengan nama home

4. Buat halaman baru kembali dengan ctr+n

5. Copy semua data pada halaman home, ubah tulisan menjadi ini adalah halaman download :
 ADOBE DREAMWEAVER

Home | Download | Tentang Kami

Ini adalah halaman download

6. Simpan dengan nama download

7. Buat halaman baru kembali dengan ctr+n

8. Copy semua data pada halaman home, ubah tulisan menjadi ini adalah halaman tentang
kami :

ADOBE DREAMWEAVER

Home | Download | Tentang Kami

Ini adalah halaman tentang kami

9. Simpan dengan nama tentangkami

10. Masuk kembali ke halaman home, kita akan menambah link pada menu halaman home

11. Blok pada tulisan home pada halaman home seperti gambar 3.8

gambar 3.8 Halaman Home

12. Setelah di blok klik pada insert > hiperlink

gambar 3.9 Manyisipkan Hyperlink

13. Klik pada hyperlink maka akan muncul pilihan halaman seperti gambar 3.10
 gambar 3.10 Hyperlink

14. Pilih halamaan yang akan kita tuju dengan mklik seperti gambar 3.10 maka akan muncul
seperti gambar 3.11

gambar 3.11 Pilih halaman

15. Pilih halaman home kemudian tekan ok maka hasilnya adalah seperti gambar 3.12
 gambar 3.12 Hasil Memilih Halaman

16. Pilih ok maka hasil pada halaman seperti gambar 3.13

gambar 3.13 Hasil Penambahas Link

17. Ulangai pada Download dan Tentang Kami

18. Copy tulisan Home | Download | Tentang Kamu yang telah mengandung link ke halaman
downloada dan tentang kami.

19. Jalankan halman home melalui http://localhost /home

Soal :

Buat halaman yang dapat berhubungan deperti gambar 3.14

Home Download Tentang kami