Materi ajar PWPB kelas XI RPL Hyperlink pada HTML

2. KOMPETENSI YANG HARUS DIKUASAI
Pengetahuan
3.5 Menerapkan format hyperlink pada halaman web
Keterampilan
4.5 Membuat kode html untuk menampilkan format
hyperlink pada halaman web

3. MATERI YANG DIPELAJARI
 Konsep format hyperlink dalam halaman web
 Tag-tag hyperlink dalam html
 Menentukan prosedur hyperlink
 Merancang program tampilan hyperlink
 Membuat program tampilan hyperlink
 Menguji program tampilan hyperlink

4. KONSEP HYPERLINK
Hyperlink adalah elemen yang digunakan untuk membuat
kaitan ke halaman lain.
Ketika elemen link di-klik maka halaman browser akan
berpindah menampilkan halaman lain yang dituju link tersebut.
Halaman 1
Pindah halaman 2
Halaman 2

5. Contoh diatas adalah contoh hyperlink untuk menuju ke halaman
MENU
Dimana ketika kita klik tulisan MENU maka akan mengantarkan
kita ke halaman menu

6. TAG HYPERLINK PADA HTML
<a href="url">teks link</a>
Tag <a> menggunakan atribut href untuk menentukan alamat
tujuan link
teks link adalah teks yang akan kita jadikan link.
Ketika teks link diklik, maka halaman akan berpindah ke alamat
tujuan link.
Contoh : <a href=“halaman2.html”>pindah halaman 2</a>
<a href=“http://smktaq-wsb.sch.id”>Web SMKTAQ</a>

7. CONTOH MEMBUAT LINK HTML
1. Buka text editor, Buatlah dokumen HTML menggunakan kode berikut
2. Simpan file dengan nama “link-dokumen1.html”

8. 3. Buatlah file baru, lalu buatlah dokumen HTML berikut
4. Simpan file dengan nama “link-dokumen2.html”

9. 5. Buka kembali file link-dokumen1.html melalui web browser dan klik link Lihat Dokumen 2,
maka halaman web akan berpindah ke dokumen 2

10. ATRIBUT TARGET SUATU LINK
Atribut target kita gunakan untuk menentukan dimana alamat
link harus dibuka.
_self - Membuka alamat link di tab/jendela browser yang sama
(nilai bawaan)
_blank - Membuka alamat link di tab/jendela browser yang
baru
_parent - Membuka alamat link di frame induk
_top - Membuka alamat link di jendela penuh
framename - Membuka alamat link di frame yang namanya
sudah ditentukan

11. HYPERLINK BERUPA GAMBAR
<a href="url"> <img src=“nama_file_gambar”/> </a>
Contoh : <a href=“hal_3.html”> <img src=“logo.jpg”> </a>
Suatu gambar dengan tag <img> dapat dijadikan suatu link dengan
menyisipkannya pada tag <a>, perhatikan format berikut: