Link HTML (HyperLink)


Hyperlink adalah salah satu inovasi yang paling menarik yang ditawarkan oleh web. Hyperlink merupakan salah satu fitur dari web sejak awal yang digunakan untuk menghubungkan suatu dokumen / halaman ke dokumen lain (atau resource lain). Hampir semua konten web dapat dikonversikan ke tautan / link sehingga saat menekan tombol link yang aktif browser akan pergi ke alamat web yang dituju (URL).

Note : URL dapat mengarahkan file HTML seperti, file teks, gambar, video, audio, dan apapun yang dapat ditangani oleh browser.

Link pada HTML

Secara umum link HTML / Hyperlink dibuat dengan membungkus teks (atau konten lainnya) yang ingin kalian ubah ke dalam elemen <a>, dan memberinya atribut href (referensi hypertext, atau target) yang akan berisi alamat web yang ingin dituju.

Contoh :

<p>Ini adalah link menuju halaman depan website <a href="https://www.macode.web.id">MACode</a></p>

Output :

Ini adalah link menuju halaman depan website MACode

Menambahkan Informasi Suatu Link / Tautan

Salah satu atribut yang berguna untuk menambahkan informasi tambahan suatu link seperti informasi jenis halaman, hal – hal yang harus diperhatikan, dll adalah atribut title.

Contoh :

<p>Ini adalah link menuju halaman depan website <a href="https://www.macode.web.id" title="Tutorial pemrograman web">MACode</a>.</p>

Output :

Ini adalah link menuju halaman depan website MACode.

Note : title atau sebuah judul tautan hanya dapat dilihat ketika pointer (cursor) mengenai tautan tersebut.

Menambahkan atribut target

Saat menautkan sebuah sumber daya yang akan diunduh (seperti dokumen PDF atau Word) maupun streaming (seperti video atau audio) atau sebuah aplikasi lain yang sumbernya bukan dari website kita (website orang lain), alangkah lebih baiknya kita membuka halaman tersebut dengan window / tab yang berbeda. Atribut target pada sebuah link digunakan untuk menunjukkan ke mana document / halaman dibuka. Berikut beberapa nilai atribut target :

Contoh :

<p>Ini adalah link menuju halaman depan website <a href="https://www.macode.web.id" target="_blank">MACode</a>.</p>

Note : nilai dari atribut target hanya dapat di isi oleh salah satu dari nilai di atas. _self merupakan nilai default dari atribut target.

Link Lokal

Untuk lebih jelasnya tentang penggunaan link, kamu perlu memahami URL serta jalur file (path). Ini akan membantu kamu dalam menulis alamat.

URL (Uniform Resource Locator), hanyalah sebuah rangkaian teks yang menentukan tempat suatu media berada di web. Sebagai contoh “https://www.macode.web.id/html” alamat tersebut menunjukkan halaman html yang ada pada website tersebut. Url menggunakan path untuk menemukan lokasi sebuah file, serta path tersebut yang menentukan keberadaan file yang diminta oleh pengguna. Sebagai contoh direktori folder seperti ini :

latihan/
├── gambar/
│   └── logo.png
└── sub-latihan/
│   └── index.html
├── index.html
├── blog.html
└── style.css

Terlihat pada direktori atau folder latihan terdapat juga folder di dalamnya yaitu folder gambar dan sub-latihan. Lalu ada 3 file di dalam folder tersebut yaitu index.html, blog.html, dan style.css. Lalu kita lihat di dalam folder gambar ada file logo.png, serta di dalam folder sub-latihan ada file index.html. File index merupakan sebuah sistem file dimana file tersebut nantinya akan menjadi halaman utama pada sebuah folder. Jadi masing – masing folder hanya diperbolehkan 1 file index (perhatikan contoh di atas).

<p>Ini adalah link menuju ke <a href="blog.html">blog</a>.</p>
<p>Ini adalah link menuju ke <a href="sub-latihan/index.html">sub-latihan</a></p>
<img src="../gambar/logo.png">
<!-- Atau -->
<a href="../gambar/logo.png">Lihat logo</a>

Note : Jika kamu ingin naik 2 langkah dari direktori maka “../../nama-folder” begitu juga untuk naik 3 langkah “../../../nama-folder” dan seterusnya.

Link Email

Kamu dapat membuat tautan pada sebuah tombol yang digunakan untuk membuka pesan email yang baru keluar (lebih baik daripada menghubungkan ke sumber daya atau suatu halaman). Untuk link / tautannya menggunakan skema URL mailto: lalu alamat email penerima yang ingin dituju.

Contoh :

<a href="mailto:admin@macode.web.id">Kirim email ke admin MACode</a>

Output :