Hallo sahabat programer Indonesia. Kali ini saya akan berbagi kepada kalian tentang apa itu sebuah link? Apakah kalian sudah mengenal baik tentang link pada html? atau kalian baru mendengarnya sama sekali.

Belajar HTML #5: Mengenal Link pada HTML

Baiklah kali ini saya akan berbagi tepatnya kepada kalian semua tentang sebuah topik yang cukup penting diketahui di dunia web, yaitu link (hyperlink). Namun sebelum kalian memahami materi kali ini, ada baiknya kalian memahami terlebih dahulu artikel saya sebelumnya tentang Format Teks pada HTML .

Pada seri kelima HTML kali ini, kalian akan mempelajari beberapa hal terkait Link ini:

Baiklah langsung saya mulai, saja materi kali ini ya:

5.1 Definisi Dari Link HTML

Apa sih sebenarnya link? Link adalah sebuah tag pada html yang digunakan untuk menghubungkan antar dokumen. Dengan kata lain link, ini sebagai pintu untuk kalian untuk dapat mengakses sebuah halaman lain pada sebuah halaman web. Dan semua web yang ada di internet, selalu menggunakan link ini, untuk menghubungkan tiap halaman sebuah web.

5.2 Tag Anchor pada Link

Untuk memulai menggunakan sebuah link pada dokumen html. Kalian harus menggunakan sebuah tag <a> untuk membuat sebuah link, menuju halaman lain. Dan pada tag <a> tersebut ditmabhkan sebuah attribut href yang digunakan untuk meunjukan lokasi dari sebuah link.

Baca Juga: Format Teks pada HTML

Contoh tag ancor berikut, yang menuju halaman blog saya sendiri:

<a href="https://www.alekpedia.com">Blog Alekpedia</a>

Kalian juga harus tau bahwa, terdapat 3 jenis link:

  1. Link Relatif
  2. Link Absolut
  3. Link dalam dokumen yag sama
Kalian juga akan mempelajari juga ketiga jenis link tersebut disini. Baiklah saya mulai kembali:

5.3 Link Relatif

Link relatif adalah sebuah link yang dibuat untuk menghubungkan page 1 ke page lainnya pada sebuah halaman web yang sama. Untuk penulisannya, kalian tidak perlu menulis alamatnya internetnya secara lengkap. Jadi intinya jika terdapat 2 direktori yang sama, kalian cukup menuliskan nama file htmlnya saja.

Baca Juga: Mengenal Tag Tag Dasar HTML

Contohnya seperti ini:
<a href="page.html">Page html berikutnya</a>

5.4 Link Absolut

Jikalau link relatif tadi cukup menuliskan nama filenya saja, sedangkan link absolut lawan dari link relatif. Sebenarnya link absolut adalah sebuah link yang dibuat untuk mengakses sebuah halaman eksternal sebuah web, yang tidak berada pada direktori yang sama.

Baca Juga: Pengenalan Tentang HTML

Contohnya seperti ini untuk link absolut:

<a href="https://www.google.com">Mengarahkan ke Mesin Pencarian Google</a>

Artinya link tersebut, sudah diluar halaman html yang kalian buat.

5.5 Link ke Bagian Lain dalam Dokumen

Link jenis ini dibuat jika terdapat dokumen panjang sekali berupa teks, dan tentunya sangat menyulitkan seseorang untuk mencari sebuah informasi tertentu di dokumen tersebut jika terlalu panjang. Itulah kegunaan jenis link ini, ia menjadi sebuah jalan pintas menuju bagian tertentu pada dokumen web sehingga tidak perlu lagi melakukan scroll pada halaman html tersebut.

Penerapan jenis link ini, dapat kalian lihat dalam pembuatan daftar isi pada postingan sebuah blog/web. Contohnya saja pada artikel yang sedang kalian baca ini, menggunakan jenis link ini.

Cara penggunaannya:

  1. Silakan kalian letakan kursor pada baris atau teks yang menjadi awal dari bagian tersebut.
  2. Sisipkan nama bagian tersebut dengan  <a name=”namabagian”>
Nah untuk membuat link yang menuju ke halaman dokumen yang sama, kalian dapat membuatnya seperti link absolut dan relatif. Hanya saja nama dokumen dalam link diganti dengan nama bagian dokumen dengan sebelum nama tersebut ditambahkan dengan #.
Berikut ini contohnya:
<a href="#namabagian">Bagian tentang Link</a>

5.6 Membuka Link ke Window Baru

Jadi membuka link ke window baru, dapat kalian gunakan pada dokumen html kalian agar suatu nanti ada pengunjung blog membuka halaman website kalian ,dan mereka meklik link yang ada pada web kalian itu mereka tidak akan meninggalkan halaman web itu.

Contoh programnya:

<!DOCTYPE html>
<html>
<head>
<title>Membuka Link ke Window baru</title>
</head>
<body>
<a href="https://www.facebook.com" target="_blank">Facebook</a>
</body>
</html>