Hyperlink HTML

Zencliv
3 Apr, 2023
HTML Hyperlinks

Dalam suatu halaman web, kita pastinya sering menemukan bagian dalam halaman web tersebut yang jika di klik dapat mengantarkan kita ke halaman lain, pindah ke website lain, atau download suatu file. Itulah yang disebut sebagai hyperlink. Hyperlink mempunyai fungsi sebagai berikut:

  1. Menghubungkan antar halaman web
  2. Memudahkan pengguna dalam mencari informasi

Elemen <a>

Untuk membuat hyperlink pada HTML, kita harus menggunakan tag <a> dengan atribut href. 

<a href="https://www.zencliv.com/p/web-development.html">Web Development</a>

Output dalam web browser:

Hyperlink Example

Jika kita klik teks tersebut dalam web browser, maka kita akan diarahkan ke halaman dengan URL yang didefinisikan pada atribut href. 

Hyperlink by default:

  1. Mempunyai format teks underline dan jika kita arahkan kursor diatasnya maka kursor berubah menjadi pointer yang berbentuk tangan menunjuk.
  2. Berwarna biru ketika dalam kondisi belum di klik / unvisited.
  3. Berwarna merah ketika dalam kondisi kursor yang ditahan / active.
  4. Berwarna ungu ketika dalam kondisi sudah dikunjungi / visited.

Contoh ini adalah hyperlink: klik disini

Konsep:

Hyperlink Element Concept

Atribut href diisi dengan URL yang akan dituju ketika pengguna melakukan klik pada konten yang didefinisikan.

Internal link akan menghubungkan kamu ke halaman yang berbeda dengan alamat website yang sama / folder yang sama. Internal link tidak menggunakan alamat web utuh yang bisa disebut juga sebagai relative URL. Contoh internal link yaitu ketika kamu ingin menghubungkan page home dengan page contact di website yang sama.

Contoh Penerapan:

Skenario: Kamu ingin menghubungkan halaman home dengan halaman contact. Halaman home memiliki nama file home.html sedangkan halaman contact memiliki nama file contact.html

home.html:

<!DOCTYPE html>
<html>

<head>
    <title>Home</title>
</head>

<body>
    <h1>Ini adalah halaman Home</h1> <a href="contact.html">Go to contact</a>
</body>

</html>

contact.html:

<!DOCTYPE html>
<html>

<head>
    <title>Contact</title>
</head>

<body>
    <h1>Ini adalah halaman Contact</h1> <a href="home.html">Back to home</a>
</body>

</html>

Output:

Ini adalah output halaman home.html:

Internal Link - home.html

Ketika teks Go to contact di klik, maka akan mengarahkan kamu ke halaman contact.html

Internal Link - contact.html

Begitupun sebaliknya, ketika Back to home pada halaman contact diklik, maka akan mengarahkan kamu ke halaman home.html

Dalam mengimplementasikan internal link, kita hanya menuliskan alamat URL lokasi filenya saja seperti href="contact.html" atau href="/page/home.html" tanpa alamat website utuh seperti href="https://www.zencliv.com/p/contact.html"

External link akan menghubungkan kamu ke halaman yang berbeda di website yang berbeda. Perbedaannya dengan internal link terletak pada URL yang diberikan pada atribut href. URL pada external link menggunakan alamat website utuh yang bisa disebut sebagai absolute URL. Contoh external link yaitu ketika kamu ingin menghubungkan halaman web kamu dengan halaman website lain.

Contoh Penerapan:

Skenario: Kamu ingin menghubungkan halaman sosial media ke halaman Instagram menggunakan external link

social.html:

<!DOCTYPE html>
<html>

<head>
    <title>Social</title>
</head>

<body>
    <h1>Our Social Media:</h1> <a href="https://www.instagram.com/zencliv/">Follow us on Instagram</a>
</body>

</html>

Output:

Halaman social.html:

External Link - social.html

Jika teks Follow us on Instagram di klik, maka itu akan mengarahkan kamu ke URL Instagram dimana mempunyai domain yang berbeda dari website kamu

External Link - Instagram

Bagaimana jika external link pada href tidak dituliskan dalam alamat web utuh? Mari kita praktikkan!

Disini kita coba menggunakan url tujuan dengan www.instagram.com/zencliv 

<a href="www.instagram.com/zencliv/">Follow us on Instagram</a>;

Maka yang terjadi ketika kita klik hyperlink tersebut adalah:

External Link - Error

Akan terjadi error dengan pesan "Your file couldn't be accessed" yang berarti URL hyperlink tersebut akan tetap dibaca sebagai internal link dengan URL yang relative. Hal tersebut dibuktikan dengan URL yang diakses pada search bar web browser.

Anchor link akan menghubungkan kamu dengan konten yang ada di halaman yang sama. Anchor link ini biasanya berguna dalam membuat daftar isi dalam suatu halaman web. Untuk dapat menggunakan anchor link, elemen HTML yang ingin menjadi tujuan link harus diberikan identifier / id yang unik. Id dalam HTML disimbolkan dengan tanda pagar (#).

Contoh Penerapan:

Skenario: Kamu ingin membuat daftar isi di halaman web kamu

index.html:

<!DOCTYPE html>
<html>

<head>
    <title>Anchor Link Implementation</title>
</head>

<body>
    <h1>Daftar Isi:</h1> <a href="#title1">Front-end</a> <a href="#title2">Back-end</a> <a href="#title3">Full-stack</a>
    <h1 id="title1">Front-end Development</h1>
    <p>Suka dengan visual dari website? Front-end Development jawabannya!</p>
    <p>Bidang ini merupakan "tampak depan" atau "sisi klien" dari suatu website. Bidang ini berkaitan dengan hal yang
        terlihat secara visual dalam webpage seperti layout, navigasi, layar responsif, dan hal lainnya yang terlihat
        secara visual.</p>
    <p>Seorang developer yang menekuni bidang ini disebut sebagai Front-end developer. Bahasa yang digunakan dalam
        bidang Front-end ini diantaranya adalah HTML, CSS, JavaScript dan beberapa framework dan library seperti
        Bootstrap, React, Angular, dan Vue.js.</p>
    <h1 id="title2">Back-end Development</h1>
    <p>Bila Front-end Development berkaitan dengan "visual" atau "tampak depan" dari suatu website, maka Back-end
        Development adalah kebalikannya. Back-end Development berkaitan dengan bagaimana proses jalannya dari website
        atau biasa disebut dengan "sisi server" atau "tampak belakang". Seorang developer yang menekuni bidang ini
        disebut sebagai Back-end developer. Seorang Back-end developer akan bekerja sebagai "orang dibalik layar" yang
        bertanggung jawab dalam urusan sistem dan pemrosesan data dalam suatu website.</p>
    <p>Beberapa tugas yang dikerjakan oleh Back-end developer berkaitan dengan server, database, dan logika dari
        berjalannya suatu website. Oleh karena itu, seorang Back-end developer harus mempunyai kemampuan tambahan diluar
        kemampuan coding seperti dalam urusan server dan database. Adapun beberapa bahasa pemrograman yang digunakan
        seperti PHP, JavaScript, Python, Ruby dan framework seperti Laravel, Express.js, Django, dan Ruby on Rails.</p>
    <h1 id="title3">Full-stack Development</h1>
    <p>Full-stack Development merupakan perpaduan antara bidang Front-end dan Back-end. Bidang ini akan mengurus "sisi
        klien" secara visual beserta "sisi server" nya. Seorang developer yang menekuni bidang ini disebut sebagai
        Full-stack developer.</p>
    <p>Arti "stack" disini mengacu pada kumpulan teknologi dengan fungsionalitas yang berbeda. Teknologi tersebut
        berkaitan dengan user interface, server, database. Salah satu contohnya yaitu MERN Stack (MongoDB, Express.js,
        React, Node.js), dimana kumpulan teknologi tersebut dapat digunakan untuk keperluan Front-end dan Back-end.</p>
</body>

</html>

Dapat diperhatikan dari kode tersebut, di setiap elemen h1 terdapat atribut id. Id tersebut akan menjadi identitas unik dari setiap elemen h1. Dalam elemen <a> pada kode di atas terdapat 3 elemen dimana href setiap elemen bertujuan ke id yang sudah didefinisikan di setiap elemen h1. 

Dalam menetapkan id ke suatu elemen HTML, tidak menggunakan tanda pagar (#). Tetapi ketika ingin menggunakan id tersebut, diperlukan tanda pagar (#) sebelum nama id.

Output:

Halaman index.html:

Anchor Link - index.html

Ketika salah satu hyperlink di klik (misalnya hyperlink Back-end), maka kamu akan diarahkan pada bagian dimana id title2 tersebut berada pada elemen HTML. URL pada halaman web akan berubah dengan tambahan #title2 di belakangnya

Anchor Link - Anchor #title2

Jika nama id tidak dituliskan (misalnya hanya href="#"), maka link tersebut tidak akan menuju kemana-mana, melainkan halaman web akan scroll ke bagian paling atas.

Atribut Target

Atribut target ini akan berguna untuk menentukan dimana link tujuan akan dimuat. Secara default, link tujuan akan dimuat di halaman yang sama. Ada beberapa nilai yang bisa digunakan dalam menentukan target dari link:

  • _self  | Merupakan nilai default, link akan dimuat di halaman / tab yang sama.
  • _blank  | Akan membuka link tujuan dengan membuka tab baru dalam web browser.
  • _parent  | Akan membuka link tujuan di parent iframe. 
  • _top  | Akan membuka link tujuan di top-level konteks penelusuran pada suatu halaman.

Kita juga bisa menggunakan nilai target tujuan menggunakan nama dari elemen <iframe>. Link tujuan juga akan dimuat dimana elemen <iframe> tersebut diletakkan.

Contoh Penerapan:

Skenario: Kamu ingin menerapkan hyperlink yang dimana bila user klik maka akan diarahkan ke tab baru.

Untuk skenario tersebut, kamu harus menggunakan target dengan nilai _blank 

<a href="https://www.zencliv.com/" target="_blank">Zencliv</a>

Contoh ini adalah hyperlink dengan target="_blank": klik disini

Secara default, hyperlink dalam HTML mempunyai warna biru dengan garis underline, tidak menarik bukan? Kamu sendiri bisa merubah style dari elemen <a> tersebut!

  1. Menghilangkan underline dibawah teks:
    2. <a href="#" style="text-decoration: none;">HTML Hyperlinks</a>
  2. Mengubah warna teks:
    3. <a href="#" style="color: deepskyblue;">HTML Hyperlinks</a>

Implementation

Umumnya, hyperlink hanya berbentuk teks. Tetapi pada implementasinya, hyperlink bisa diterapkan dalam berbagai macam variasi.

  1. Teks sebagai hyperlink

    2. Untuk menerapkan teks sebagai hyperlink, cukup menggunakan elemen <a> dengan teks sebagai isinya 

    <a href="#" ">Teks sebagai hyperlink</a>
  2. Gambar sebagai hyperlink

    3. Gambar bisa juga digunakan sebagai hyperlink. Ketika kita klik suatu gambar, maka itu akan mengarahkan kita ke link yang dituju. Untuk mengimplementasikannya, letakkan elemen <img> di dalam elemen <a> 

    <a href="flower.html"><img src="Flower.jpg" alt="Flower"></a>

    Ketika gambar Flower.jpg tersebut di klik, maka kita akan diarahkan pada halaman flower.html

  3. Button sebagai hyperlink

    4. Button / tombol juga bisa dikombinasikan dengan hyperlink. Untuk mengimplementasikannya, letakkan elemen <button> di dalam elemen <a> 

    <a href="https://www.google.com"><button>Search on Google</button></a>

    Ketika button dengan tulisan "Search on Google" tersebut di klik, maka akan mengarahkan kita pada halaman search Google

    Ini adalah hasil dari kode di atas: 

  4. Hyperlink untuk call phone number

    5. Kita dapat menggunakan call phone number dengan memodifikasi URL tujuan pada atribut href 

    <a href="tel:123-456-7890">Contact me!</a>

    Ubah nomor telepon setelah nilai tel: untuk digunakan sesuai kebutuhan

    Ini adalah hasil dari kode di atas:  Contact me!

  5. Hyperlink untuk menghubungkan ke alamat email

    6. Kita juga dapat menghubungkan hyperlink ke alamat email dengan melakukan modifikasi URL tujuan pada atribut href 

    <a href="mailto:email@example.com">Contact by email</a>

    Ubah alamat email setelah nilai mailto: untuk digunakan sesuai kebutuhan

    Ini adalah hasil dari kode di atas:  Contact by email

Next Post Previous Post
No Comment
Add Comment
comment url