Disusun Oleh:

1. Maman Srisuganda (1600006108)

2. Melvin Alfiani Putri (1600006106)

Cara Membuat Link di HTML

Link digunakan sebagai penghubung antara satu halaman dengan halaman yang lainnya.
Lebih jelasnya, penggunaan link pada HTML yaitu untuk menghubungkan dokumen HTML tersebut
ke halaman lain yang merupakan alamat tujuan. Link merupakan teks atau gambar yang terkait
dengan suatu alamat tertentu.

a. Penggunaan tag <a>

Penggunaan link pada dokumen HTML ditandai dengan penggunaan elemen anchor
yaitu tag berpasangan <a> …… </a>. Pada browser, link umumnya ditandai dengan
teks berwarna biru yang memiliki garis bawah. Jika Anda mengklik teks atau gambar
yang mengandung link, maka path dari link tersebut akan dibuka baik di tab itu
sendiri ataupun di tab baru. Adapun atribut yang ada pada tag <a> adalah sebagai
berikut:

Atribut Fungsi

href Menunjukkan lokasi dokumen tujuan

Menghubungkan style sheet (CSS) atau menandai lokasi pada sebuah

id halaman

hreflang Menunjukkan bahasa yang digunakan

type Memberi catatan tipe isi dari dokumen tujuan

Menggambarkan hubungan dari dokumen saat ini dengan dokumen

rel tujuan

Menggambarkan hubungan antara dokumen tujuan dengan dokumen

rev asal

charset Menspesifikasikan karakter encoding dokumen web

title Memberikan judul link berupa tooltip

Berikut contoh sederhana penggunaan link di HTML :

b. Atribut id
Atribut href pada tag <a> digunakan untuk menyatakan suatu file tujuan. Path tujuan HTML
yang berada di dalam tag <a> dapat diikuti dengan menggunakan atribut id yang digunakan
untuk membawa pembaca ke suatu bagian tertentu dalam dokumen. Agar lebih mudah
dimengerti, coba tulis “#tentang” pada atribut href di link dan tulis atribut id=”tentang” pada
tag <p>. Untuk contoh kode penulisannya bisa anda lihat dibawah ini :

Saya sengaja menggunakan banyak tag <br> untuk mempermudah Anda memahami fungsi
dari atribut ini. Ketika Anda klik link “Tentang”, Anda akan langsung diarahkan ke bagian
kalimat ini “Matematika UAD yang merupakan salah satu prodi FKIP UAD”yang ada di
bagian bawah.
c. Atribut title
Selanjutnya, jika Anda menggunakan atribut title, maka akan ditampilkan isi title tersebut
sebagai tooltip yang akan muncul jika Anda mengarahkan kursor pada linknya. Berikut
contoh penulisannya di HTML :

d. Perbedaan external link dan local link

External link digunakan untuk membuka web page yang berada pada website lain (berbeda
domain), biasanya diikuti dengan penulisan alamat path tujuan secara lengkap dengan bagian
“http://”. Berikut contoh penulisan dan penggunaannya di HTML :

Berbeda dengan local link digunakan untuk membuka web page pada website atau document root
yang sama. Misalkan alamat website anda www.PmatUad.com dan pada website tersebut terdapat
halaman bernama belajarmatematika.html. Jika anda ingin membuat link yang menuju halaman
tersebut, maka anda tidak perlu menulis urlnya secara lengkap pada atribut href, cukup
menuliskan belajarmatematika.html saja. Contoh penulisannya seperti dibawah ini:
Contoh lainnya seperti ini, misalkan kita mempunyai folder bernama BelajarHTML. Di
dalam folder tersebut terdapat 2 file html dan 2 folder yang masing-masing mempunyai 1 file
html. Lebih jelasnya, struktur foldernya seperti ini:

Jadi begini, anggap saja saat ini saya sedang mengedit file yang bernama webku.html dan
saya ingin membuat link yang mengarah ke halaman kisahku.html, maka saya cukup
menuliskan kode HTMLnya seperti ini:

<a href="cinta/kisahku.html">

Anggap saya masih sedang mengedit file webku.html tapi kali ini saya ingin membuat link
yang mengarah ke halaman karirku.html, maka kode HTMLnya menjadi seperti ini:

<a href="bisnis/karirku.html">

Masih mengedit file webku.html. Jika saya ingin membuat link yang mengarah ke halaman
posting.html, maka kode HTMLnya seperti ini:

<a href="posting.html">

Dengan menggunakan local link, anda tidak perlu menulis secara lengkap alamat halaman
yang ingin dituju.
Menjadikan gambar sebagai link
Ada kalanya kita ingin menjadikan gambar sebagai link untuk kebutuhan tertentu seperti
membuat tombol yang mengarah ke halaman lain, dimana tombol tersebut sejatinya terbuat
dari gambar. Untuk contoh kode HTMLnya bisa Anda lihat dibawah ini:

d. Atribut target pada link

Atribut target digunakan untuk menentukan atau menetapkan bagaimana suatu path tujuan
ditampilkan setelah link diklik seperti apakah dibuka pada tab/ jendela saat ini atau pada tab/
jendela baru. Berikut nilai pada atribut target yang dapat Anda gunakan :

Atribut Fungsi

_blank Membuka web page tujuan di tab atau jendela baru

_self Membuka web page tujuan di tab atau jendela saat ini (default)

_parent Membuka web page tujuan di parent frame

Membuka web page tujuan di tab atau jendela yang sedang dibuka,
_top membatalkan semua frame

Perlu diingat, pada HTML5, penggunaan “_parent” dan “_top” sudah deprecated karena
website sekarang sudah tidak ditulis berdasarkan frame atau frameset. Selain itu kedua atribut
ini jarang sekali digunakan. Jika Anda tidak menentukan atribut target pada link, maka secara
default web page tujuan akan dibuka di tab atau jendela yang saat itu dibuka (“_self”).
Berikut contoh kode penulisan dan penggunaan atribut target=”_blank” di HTML

Itulah tutorial cara membuat link di HTML beserta penjelasan mengenai tag dan atribut apa saja yang
berhubungan dengan link di HTML.