FAJAR SURYANI PEMROGRAMAN WEB I

HYPERLINK PADA HTML

POKOK BAHASAN:

✓ Format Link
✓ Link Absolut
✓ Link Relatif
✓ Link Self
✓ Link New Window

TUJUAN BELAJAR:

✓ Menjelaskan konsep format link

✓ Menjelaskan dan menerapkan link absolut
✓ Menjelaskan dan menerapkan link relatif
✓ Menjelaskan dan menerapkan link self
✓ Menjelaskan dan menerapkan link new window

Yang sering kita temui dalam sebuah website adalah link. Link ini akan membuat konten
atau elemen HTML dapat di klik dan akan mengarahkan/membawa kita ke halaman web
lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum
diberi style).
Link ditulis dengan <a> … </a> yang merupakan singkatan cari anchor (jangkar). Seperti
halnya tag font tag a juga memiliki attribut. Tabel dibawah akan menunjukkan pada anda daftar
attribut pada tag a.

ATRIBUT KETERANGAN
href Halaman website yang akan dituju
target Dibuka pada window baru atau tidak
style Penambahan CSS
class Nama class yang dipanggil
name Nama dari link
FAJAR SURYANI PEMROGRAMAN WEB I

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat
kode seperti dibawah ini, simpan dengan nama hyperlink.html.

Berikut hasil yang ditampilkan pada browser:

Keterangan:
FAJAR SURYANI PEMROGRAMAN WEB I

4.1 Absolute Address (Alamat Absolut)

Absolute Address - merupakan full internet address (URL) yang meliputi protocol,
network location dan path dan nama file. Contoh:

Penjelasan:
FAJAR SURYANI PEMROGRAMAN WEB I

4.2 Relatif Address (Alamat Relatif)

Relatif Address maksudnya adalah dimana URL yang tidak menyebutkan protocol dan
network locationya (tetapi hanya path dan nama filenya). Jenis hyperlink ini banyak digunakan
kedalam sebuah website atau blog. Contoh seandainya nama file kita adalah relatif.html, dan
dalam folder yang sama terdapat halaman materi.html. Maka kita dapat menggunakan
href=”materi.html” untuk membuat link kedalam relatif.html. Contoh ketikan program
dibawah ini dan beri nama relatif.html.

Berikut tampilan pada browser :

FAJAR SURYANI PEMROGRAMAN WEB I

Perlu diperhatikan jika kita sebelum kita memanggil file, ada kalanya file yang akan kita
panggil tidak berada dalam satu folder maka kita harus mencantumkan folder tempat
keberadaan file yang akan kita panggil.

4.3 Link Self

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa
halaman web saat ini). Namun dalam HTML kita juga dapat menentukan apakah file akan
ditampilkan pada tab window yang sama atau tidak, dengan kondisi tersebut kita dapat
memanfaatkan atribut target.
Link self sendiri merupakan link yang menampilkan file pada jendela yang sama dimana
file yang ada ditampilkan. Link self dapat menggunakan target dengan atribut _self. Berikut
contoh implementasi program simpan dengan nama home.html dan materi.html pada folder
yang sama
FAJAR SURYANI PEMROGRAMAN WEB I

Berikut tampilan pada halaman browser :

FAJAR SURYANI PEMROGRAMAN WEB I

4.4 Link New Windows

Link new windows merupakan link yang menampilkan file ke dalam jendela yang baru.
Kita dapat menggunakan target dengaan atribut _blank. Berikut contoh program dapat
menggunakan program home.html dan materi.html, kemudian tambahkan sintak seperti
dibawah ini. Lalu buat file about.html dan simpan pada folder yang sama dengan file
home.html dan materi.html.
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser :

FAJAR SURYANI PEMROGRAMAN WEB I

4.5 Langkah Praktikum

1. Buatlah file html sesuai pada contoh program pada sub bab sebelumnya!
2. Jalankan pada browser kemudian amati!
3. Buatlah laporan praktikum dengan ketentuan sebagai berikut :
a. Tambahkan identitas masing-masing pada setiap file program.
b. Buat laporan dengan format PW3_NIM.pdf dengan konten : cover, source code
(bukan screecshot) dan hasil screenshot tampilan browser.
c. Berikan penjelasan atas hasil pengamataan yang telah anda lakukan!
d. Kumpulkan sesuai batas yang telah ditentukan pada e-learning.