PEMROGRAMAN WEBSITE

DAN
PERANGKAT BERGERAK

KELAS XI
REKAYASA PERANGKAT LUNAK
Pertemuan 7
Guruh Panji Alam, S.Kom
SMK BPPI BALEENDAH
FORMAT HYPERLINK PADA HALAMAN WEB
Memahami Konsep Hyperlink

Hyperlink atau dalam Bahasa Indonesia disebut pranala, merupakan sebuah

acun dalam suatu dokumen hypertext ke dokumen yang lain atau sumber lain.
Hyperlink dapat dipasang pada text maupun gambar. Hyperlink dengan text dapat
dibedakan secara visual.
Secara default, text yang dipasang hyperlink pada sebuah halaman website
akan berwarna biru dan underline. Sedangkan hyperlink yang terpasang pada
gambar tidak bisa di bedakan secara visual langsung, namun jika pointer berada
di atas gambar maka pointer tersebut akan berubah tampilan. Jika text ber-
hyperlink tersebut di klik maka browser akan menampilkan halaman atau file yang
dituju.
Memahami Konsep Hyperlink
Penulisan link pada HTML memerlukan sebuah tag khusus yaitu tag <a> …
</a> untuk mendefinisikan sebuah link. Dan atribut href yang akan berisi sebuah
alamat web yang akan dituju.
Kode program untuk tag link pada HTML adalah :
<a href=“nama_file.html”>Nama Link</a>
MACAM – MACAM HYPERLINK
Macam-macam Hyperlink

Dalam tag pembuatan hyperlink ada banyak sekali atribut yang dapat
digunakan dalam menuliskan format tag ini. Agar lebih paham, perhatikan
macam-macam atribut dalam format link berikut ini.

1. Hyperlink dengan atribut Title

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi
tambahan yang akan ditampilkan saat link disentuh pointer.

<a href=“halaman 1.html” title=“Halaman Beranda”>Beranda</a>

Macam-macam Hyperlink

2. Hyperlink dengan Gambar

Untuk membuat sebuah gambar menjadi hyperlink, yaitu dengan
membungkus elemen <img> ke dalam elemen <a>. Sehingga kode program akan
menjadi seperti di bawah ini.
<a href=“halaman 1.html”><img src=“gambar.png”/></a>
Macam-macam Hyperlink
3. Internal Link (relatif)
Link yang menuju ke domain atau halaman web itu sendiri.
Macam-macam Hyperlink
4. External Link (absolut)
Link yang menuju ke domain atau halaman web itu sendiri.
Atribut – Atribut untuk Link

Atribut-atribut untuk Link

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan
pada link, seperti: target, title, rel, style, dan lain-lain.

Menggunakan Atribut target

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa
target yang biasanya digunakan:

_blank akan membuka link pada jendela atau tab baru;

_self akan membuka link pada halaman itu sendiri (default target);
_top menuju bagian paling atas pada halaman;
_parent membuka link pada frame induk;
nama-frame akan membuka link pada <iframe> dengan nama tertentu;
Atribut – Atribut untuk Link
Atribut Target
_blank
<a href=“https://www.facebook.com/soekarno.puetra/” target=“_blank”>Facebook</a>
_self
<a href=“https://www.facebook.com/soekarno.puetra/” target=“_self”>Facebook</a>
_top
<a href=“https://www.facebook.com/soekarno.puetra/” target=“_top”>Facebook</a>
_parent
<a href=“https://www.facebook.com/soekarno.puetra/” target=“_parent”>Facebook</a>
_iframe
<a href=“https://www.facebook.com/soekarno.puetra/” target=“_iframe”>Facebook</a>
 TUGAS MINGGU 7

Tugas ada di Classroom berupa PG

 Salin dan isi soal berikut di buku
kalian, fotokan hasilnya dan
kumpulkan/kirim di google classroom yang
sudah tersedia

Batas pengumpulan sampai jam 17.00

tanggal 5 September 2020
SELAMAT MENGERJAKAN