Tutorial HTML/CSS 6 : Link HTML, Cara Menggunakan Tag Link di HTML

Last Updated on December 11, 2021 by

Halo pembaca setia Codekey! Selamat datang di tutorial keenam bahasa pemrograman HTML yang akan membahas tag link HTML. Namun sebelumnya kami ingatkan untuk membaca tutorial bahasa pemrograman HTML yang sebelumnya agar Anda dapat mengikuti tutorial ini dengan mudah.

Link merupakan tujuan dari kata Hypertext pada bahasa pemrograman HTML. Nah, kali ini kami akan membahas tutorial tentang cara mudah membuat link di HTML. Jadi, yuk simak penjelasan lengkapnya hingga akhir!

Pengertian Link HTML

Link HTML adalah sebuah elemen yang dapat diklik dan akan membawa pengguna ke halaman lain. Link HTML atau biasa disebut juga dengan hyperlink, memungkinkan Anda untuk berinteraksi dengan situs web dengan mudah.

Untuk memasukkan link ke dalam halaman web Anda, Anda harus menggunakan sepasang tag <a>. Berikut contoh sintaksnya:

<a href="https://www.codekey.id">Belajar coding bersama Codekey.</a>

Catatan untuk Anda ingat ialah link HTML tidak boleh menjadi elemen kosong, sebab link harus memiliki konten yang dapat Anda klik. Selain itu, sangat penting untuk menyertakan href atribut dalam <a> tag – jika tidak, tautan HTML Anda tidak akan mengarah ke halaman mana pun.

Seperti semua atribut , hal ini ditentukan dalam pasangan name-value yang ditentukan dalam huruf kecil. Pada contoh sintaks di bawah ini, Anda melihat tautan HTML sederhana yang akan mengarahkan Anda ke dalam situs web Codekey:

<a href="https://www.codekey.id">Belajar coding bersama Codekey.</a>

Link HTML Mutlak, Relatif, dan Root-Relatif

Sebuah link atau URL yang mutlak akan mendefinisikan path lengkap ke alamat web yang terhubung. Ini alamat URL lengkap yang mencakup http: // www … atau https: // www … . Dalam kebanyakan kasus yang terjadi, tipe link mutlak digunakan untuk mereferensikan sumber daya eksternal.

Sementara itu, sebuah relatif URL menggambarkan lokasi web halaman yang terhubung dalam kaitannya dengan halaman saat ini. URL relatif pada umumnya digunakan untuk mengarahkan pengguna ke lokasi berbeda dalam situs web yang sedang dibuka saat ini. Contoh sintaksnya dapat Anda lihat pada sintaks di bawah ini:

<a href="tentang-kami">Tentang kami</a>

Apabila Anda ingin mereferensikan file dalam folder yang ditemukan satu tingkat di atas folder yang saat ini Anda buka, Anda perlu menambahkan dua titik dan garis miring. Lebih jelasnya dapat Anda lihat seperti contoh sintaks di bawah ini:

<a href="../tentang-kami" target="_blank">Tentang kami</a>

Selanjutnya ialah, link HTML root relatif,  URL ini biasanya digunakan sebagai referensi sebuah alamat relatif terhadap root domain situs web yang dibuka saat ini. Root Relatif selalu dimulai dengan garis miring yang menentukan root, contohnya dapat Anda lihat pada sintaks berikut:

<a href="/profil/tentang-kami" target="_blank">Tentang kami</a>

Untuk dapat lebih memahami tipe-tipe link HTML ini, kami akan membawa Anda melihat perbandingan sederhana untuk mendapatkan perbedaan antara tautan HTML absolut, relatif, dan root-relative dengan lebih baik.

Bayangkan Anda ingin menambahkan link ke halaman https://codekey.id/profil/ pada halaman web https://www.codekey.id/. Beginilah cara Anda mendefinisikan tautan di setiap jenis link HTML:

Menggunakan Gambar Sebagai Tautan HTML

Selain dengan menggunakan URL, Anda juga dapat menggunakan gambar untuk berpindah halaman web. Gambar ini akan berfungsi sebagai link HTML dengan fungsi seperti tautan URL.

Tekniknya sama dengan kata-kata: elemen yang dapat diklik harus ditempatkan di dalam tag jangkar. Dalam kasus ini, Anda harus menumpuk tag <img> di dalam tag tautan. Contohnya dapat Anda lihat pada sintaks di bawah ini:

<a href="https://www.codekey.id/category/html-css">
  <img src="image.png" alt="html-css" style="width: 150px; height: 150px;">
</a>

Cara Mengatur Warna Tautan HTML

Sebenarnya secara default, semua browser menggarisbawahi link HTML dan memberinya warna sebagai berikut:

-Biru untuk link HTML yang belum dikunjungi.

-Ungun untuk link HTML yang telah dikunjungi.

-Merah digunakan untuk link HTML yang sedang aktif.

Untuk mengubah warna default tersebut, Anda dapat melakukannya dengan menggunakan gaya khas HTML/CSS. Contoh cara mengubahnya ialah sebagai berikut:

<style>
a:link {
    color: red; 
    background-color: white;
}
a:visited {
    color: black; 
    background-color: white;
}
a:active {
    color: green; 
    background-color:white;
}
a:hover {
    color: gray; 
    background-color: white;
}
</style>

Selain itu, dengan HTML Anda juga dapat mensetting warna yang berbeda ketika pengguna mengarahkan kursor mereka pada tautan.

HTML Bookmark Links

Anda dapat menandai link HTML Anda untuk melompat ke bagian tertentu dalam halaman web yang sama ataupun halaman web yang berbeda. Bookmark akan sangat membantu jika konten yangAnda buat sangat panjang.

Untuk membuat link bookmark HTML di halaman web yang sama, Anda harus membuat bookmark menggunakan atribut id. Gunakan atribut ini untuk menandai bagian halaman yang Anda inginkan untuk dibuka oleh pengguna. Contohnya dapat Anda lihat pada sintaks di bawah ini:

<h2 id="category">HTML/CSS</h2>

Langkah berikutnya yang harus Anda lakukan ialah membuat hyperlink ke sana dengan menambahkan simbol hash (#) diikuti dengan id nilai target yang akan di-bookmark seperti contoh berikut:

<a href="#category">HTML/CSS</a>

Bagaimana jika Anda ingin menyertakan link ke bookmark pada halaman lain? Untuk menyertakan link ke bookmark dari halaman lain, sertakan URL target sebelum simbol hash (dengan asumsi ada id dengan nilai itu di halaman lain). Caranya dapat Anda lihat pada contoh di bawah ini:

<a href="https://www.codekey.id/html-css/pengenalan-html/#pengenalan_html">Pengenalan HTML: Memahami HTML dan Berbagai Versinya</a>

Atribut pada Link HTML yang Paling Banyak Dipakai

1. href

Atribut  href berfungsi untuk mendefinisikan alamat URL target untuk link HTML, membuat kata ditandai atau frase yang dapat diklik. Saat href membuat hyperlink ke halaman web lain, link HTML tidak akan berfungsi sebagaimana mestinya tanpa href. Contohnya sebagai berikut:

<a href="https://www.codekey.id">Belajar coding bersama Codekey</a>

2. Style

Atribut style berfungsi untuk menetapkan gaya atau style dari setiap property yang ada (misalnya, warna) untuk sebuah elemen yang ada. Contohnya dapat Anda lihat pada sintaks di bawah ini:

<a href="https://www.codekey.id/" style="background-color: gray;">Belajar coding bersama Codekey</a>

3. Target

Atribut target berfungsi untuk mendefinisikan mana link HTML yang akan dibuka. Berikut ini list semua opsi yang memungkinkan untuk Anda gunakan:

_blank, berfungsi untuk mengarahkan pengguna ke jendela atau tab baru

_self, berfungsi untuk memuat URL pada jendela yang sama atau tab tempat link diklik.

_parent, befungsi Memuat URL di bingkai induk. Ini hanya digunakan dengan bingkai.

_top, berfungsi memuat dokumen terkait di seluruh badan jendela.

Frame name, berfungsi memuat dokumen terkait dalam bingkai bernama. Namun saat ini frame name sudah tidak digunakan lagi

Contoh dari penggunaan berbagai atribut target di atas ialah sebagai berikut:

<a href="https://www.codekey.id" target="_blank">Menampilkan tab baru</a>
<a href="https://www.codekey.id" target="_self">Memuat pada tab yang sama</a>
<a href="https://www.codekey.id" target="_parent">Memuat pada induk</a>
<a href="https://www.codekey.id" target="_top">Memuat dalam body</a>

4. Title

Atribut title berfungsi untuk menguraikan informasi tambahan terkait tujuan sebuah link. Jika pengguna mengarahkan mouse ke link HTML, tooltip akan segera muncul untuk menjelaskan tujuan, judul, atau informasi lain dari link HTML. Contoh sintaksnya ialah sebagai berikut:

<a href="https://www.codekey.id/" title="Codekey">Belajar coding bersama Codekey</a>

Tips yang Harus Diingat

• Jika Anda menggunakan gambarsebagai link, sebaiknya sertakan atribut alt yang berfungsi untuk menyediakan teks alternatif yang akan ditampilkan jika gambar tidak dimuat.
• Atribut href juga dapat digunakan dengan properti mailto dan alamat email sebagai nilainya. Setelah mengklik link HTML, pengguna akan diarahkan ke aplikasi email default mereka dengan alamat email yang sudah disertakan sebelumnya. Contohnya ialah sebagai berikut:

<a href="mailto:info@codekey.id">Email Codekey</a>

Nah itulah penjelasan lengkap dan menarik tentang link pada bahasa pemrograman HTML khusus untuk Anda. Apakah Anda telah memahami keseluruhan link dan atribut yang terdapat pada bahasa pemrograman HTML?

Jangan lupa untuk selalu berlatih agar Anda dapat memahaminya dengan baik. Sebab cara terbaik untuk memahami sesuatu adalah dengan mempraktikkannya sesering mungkin.

Sekian pembahasan tentang cara membuat link HTML kali ini, sampai berjumpa di artikel menarik lainnya. Terima kasih telah mengikuti hingga akhir, selamat berlatih dan semoga bermanfaat!