PEMROGRAMAN WEB SEMESTER 1
184 | P a g e
Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail-
sahara.html.
c. Rangkuman
Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut : HTML tag a mendefinisikan hyperlink.
Sebuah hyperlink atau link adalah kata, kelompok kata, atau gambar yang dapat diklik untuk menuju ke dokumen lain.
Untuk memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil.
Atribut yang paling penting dari elemen a adalah atribut href, yang menunjukkan tujuan link.
Jenis-jenis link dalam HTML, yaitu : -
Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain
- Link relative adalah link ke dokumen internal, dan penulisan alamat
tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya
- Link ke bagian dokumen tertentu atau internal link
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses
d. Tugas
Link 9 Buat direktori baru dengan nama jeep di dalam direktori images
9 Copy file gambar yang akan digunakan ke dalam direktori image\jeep Catatan: dalam contoh ini menggunakan file gambar dengan nama sahara.jpg
9 Buatlah dua dokumen HTML berikut: index.html
html head
Pemrograman Web Semester 1
185 | P a g e
title link title head
body h2 Latihan Membuat link relatifh2
pDi jual Jeep Wrangler Sahara DIJAMIN PUAS :p p
Tahun : 2011 br Harga : Rp 975.000.000, - NEGO br
p a href= “imagesjeepsahara.jpg” Lihat foto. mobila
br Untuk peminat serius, silahkan
a href= “kontak.html”hubungi kamia body
html
kontak.html
html head
titlelinktitle head
body h2Latihan membuat link relatifh2
pUntuk peminat serius, silahkan hubungi kami di : p strongAuto Jeep Perkasa Showroomstrongbr
Jl. Garuda Sakti no. 13 Bandungbr
PEMROGRAMAN WEB SEMESTER 1
186 | P a g e
022 999-00333 p
pa href= “index.html” kembali ke halaman utamaap boby
html
9 Tempatkan ke dalam direktori kerja
9 Jalankan file index.html melalui web brower
9 Coba buka file index.html dan bagaimana link yang terjadi?
Link Gambar
9 Copy file gambar yang akan digunakan ke dalam direktori images\jeep Catatan : dalam contoh ini mengunakan file sahara.jpg
9 Jalankan aplikasi text editor 9 Buatlah dua file baru sebagai dokumen HTML berikut :
link –gambar .html
html head
tittleLinktitle head
body h2Latihan Membuat Link Berupa gambarh2
pKlik gambar dibawah ini untuk melihat informasi detail:p
a href=detail-sahara.html img src=imagesjeepsaharal.jpg
Pemrograman Web Semester 1
187 | P a g e
a body
html
detail-sahara.html
html head
titlelinktitle head
body h2Latihan Membuat Link Berupa Gambarh2
p img src=”imagesjeepsahara1.jpg”align=”left”
Merk: strongjeepstrongbr Seri: strongWranglerstrongbr
Tipe: strongUnlimited Saharastrongbr Tahun: Pembuatan: 2011br
Transmisi: Automaticbr Silinder: 3.700br
Kilometer: 0 km baru br Harga: Rp 975.000.00,- br
Keterangan tambahan: Mewah dan Gagah Ready Stock p
p
PEMROGRAMAN WEB SEMESTER 1
188 | P a g e
a href=”link-gambar.html” Kembali ke halaman utamaa p
body html
9 Tempatkan kedua file tersebut ke dalam direktori kerja 9 Bukalah file link-gambar.html melalui web browser
Pada latihan di atas kita menggunakan gambar sebagai link untuk menuju atau mengarah ke halaman web lain. Untuk mengetahui cara kerjanya, coba klik
gambar di atas Klik link Kembali ke halaman utama untuk mengarah ke halaman web semula
e. Tes Formatif