Dasar Pembuatan Website Lanjutan

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