Pedoman Mudah Membuat Hyperlink HTML

Last Updated on February 2, 2022 by

Tentunya Anda sudah pernah mendengar kata link, bukan? Istilah ‘link’ (bahasa Indonesia: tautan, pranala) sudah sangat umum diketahui oleh masyarakat, baik dari kalangan pegiat IT ataupun masyarakat awam. Di era modern serba internet seperti saat ini, hampir semua orang pasti sempat mengklik sebuah link di setiap harinya – baik itu link website, link masuk ke grup chat atau platform meeting online, link belanja online, dan masih banyak lagi.

Dalam dunia IT sendiri, link memiliki peranan yang fundamental alias penting. Coba bayangkan kira-kira apa jadinya jika semua website yang ada di dunia ini tidak mempunyai link? Web tersebut memang masih tetap dapat beroperasi, hanya saja user (pengguna) akan menjadi 2x lipat lebih repot saat hendak mengakses website.

Tanpa adanya link, Anda harus mengetik sendiri URL website yang hendak dituju. Bahkan untuk berpindah halaman dalam website yang sama pun, Anda tetap harus meng-input manual URL halaman yang ingin diakses. Merepotkan!

Oleh sebab itulah, kita memerlukan yang namanya link atau hyperlink. Pernahkah Anda terpikir bagaimana cara membuat sebuah link? Apakah link tersebut hadir secara ‘otomatis’ saat sebuah web dibuat?

Jawabannya tidak. Anda harus membuat hyperlink HTML sendiri.

Namun Anda tidak perlu cemas, sebab membuat hyperlink HTML sendiri bukan perkara yang rumit. Artikel seri belajar ngoding kali ini akan mengupas tuntas cara membuat hyperlink HTML tersimpel untuk Anda. Selain itu, kami juga akan memberikan sejumlah jenis hyperlink pada HTML beserta link HTML code yang bisa Anda coba.

Yuk kita mulai pembahasannya berikut ini! Keep scrolling dan selamat membaca!

Mengenal Hyperlink: Definisi, Fungsi dan Ciri Khas Hyperlink HTML
Kita sering mendengar dan memakai kata ‘link’ dalam percakapan sehari-hari. Namun apa itu link? Ada banyak sekali definisi tentang link atau hyperlink. Beberapa definisi dari hyperlink adalah:

• Hyperlink adalah sebuah teks khusus untuk mengarahkan user (pengguna) website beralih dari satu halaman web ke halaman yang lain dalam sekali klik.
• Hyperlink adalah sebuah teks yang menghubungkan aneka isi dari sebuah halaman web, seperti file, slide, file multimedia, program, hingga halaman-halaman website lainnya sehingga lebih mudah untuk diakses oleh user.
• Hyperlink adalah teks yang menuntun kita untuk bisa mencapai sebuah website sesuai keinginan.

Dari ketiga definisi di atas, dapat ditarik suatu benan merah bahwa hyperlink atau link adalah sebuah teks yang digunakan untuk menghubungkan beragam halaman website agar dapat diakses dengan lebih praktis oleh user website. Saat Anda mengklik sebuah hyperlink, maka Anda sudah membuka yang namanya ‘world wide web’ alias kode www. Nantinya, Anda dapat berpindah atau diarahkan menuju halaman atau alamat URL lain yang diinginkan.

Cara ini tentunya lebih praktis ketimbang mengetikkan setiap URL ke browser kapanpun kita ingin mengakses sebuah halaman web. Oleh sebab itu, wajib hukumnya bagi sebuah website untuk mempunyai minimal 1 hyperlink di setiap halaman yang dimiliki.

Dari pengertian di atas, kita juga sudah mendapatkan gambaran lengkap terkait fungsi hyperlink. Fungsi utama dari kehadiran link adalah untuk menghubungkan setiap dokumen HTML. Pun link juga berfungsi untuk mempermudah setiap user website dalam mengunjungi web dan melakukan penelusuran.

Berbeda dengan teks lainnya, link mempunyai ciri khas tersendiri yakni mempunyai warna yang berbeda sehingga mudah dikenali atau dibedakan. Umumnya, warna dari sebuah link adalah biru. Warna ini pun akan berubah menjadi ungu, apabila Anda sudah pernah mengklik link tersebut sebelumnya. Bahkan jika Anda dengan sengaja mengarahkan kursor mouse ke link, maka icon panah kursor akan berubah bentuk menjadi gambar tangan kecil yang seolah-olah siap mengklik link. Menarik sekali, bukan?

Sebagai catatan tambahan, hyperlink HTML mempunyai atribut masing-masing dengan kegunaan yang berbeda-beda. Beberapa jenis atribut link HTML antara lain: href, style, target, title, rel, dan seterusnya.

Jenis-Jenis Hyperlink pada HTML

Masyarakat awam mungkin mengira bahwa hanya ada 1 jenis hyperlink pada HTML – atau menganggap bahwa semua link HTML adalah sama saja. Padahal sesungguhnya tidak demikian. Ada beberapa jenis hyperlink pada HTML yang bisa dikelompokkan menurut sifatnya. Alhasil, penting untuk Anda ingat juga bahwa berbeda jenis link maka akan berbeda pula cara membuat hyperlink HTML.

Lalu apa sajakah jenis-jenis hyperlink pada HTML? Menurut tipe alamat URL tujuan, link dapat dibedakan menjadi 2 yakni:

Hyperlink External

Pertama adalah hyperlink external. Link external adalah link yang digunakan untuk mengakses domain / web lain. Semisal Anda mengakses Appkey.id kemudian menemukan link external yang membawa Anda menuju halaman Facebook dari Appkey.id. Mungkin Anda juga pernah membuka link external dari sebuah web atau aplikasi. Semisal teman Anda mengirimkan tautan link YouTube di pesan WhatsApp. Saat Anda mengklik link tersebut dan beralih dari WhatsApp ke YouTube, maka Anda sudah menggunakan link external.

Contoh membuat hyperlink HTML external adalah sebagai berikut:

1. Siapkan link HTML code yang ingin diakses secara external. Semisal link Facebook:

<a href="https://www.facebook.com/appkeyid">Facebook Appkey Indonesia</a>
(Ketika link ini ditekan / klik, maka Anda akan terhubun dengan halaman Facebook dari Appkey: https://www.facebook.com/appkeyid).

2. Sisipkan link tersebut ke file contact.html pada website > buka file contact.html.
3. Ubah kodenya menjadi:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey Belajar Buat Hyperlink</title>
</head>
<body>
<h1>Contact</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
Follow fan page Facebook Appkey untuk tak ketinggalan update dunia ngoding:
<a href="https://www.facebook.com/appkeyid">Facebook Appkey Indonesia</a>
</p>
<hr>
<div>Dipublikasikan oleh  Appkey Copyright © 2020</div>
</body>
</html>
4. Selesai. Anda bisa mencoba menjalankan code di atas untuk mengetahui hasilnya.

Hyperlink Internal

Berkebalikan dengan hyperlink external, hyperlink internal adalah tautan yang digunakan untuk mengarahkan user berpindah dari halaman 1 ke yang lain dalam halaman web Anda sendiri. Jika Anda perhatikan, setiap website cenderung mempunyai lebih dari satu halaman, bukan? Sebuah website bisa mempunyai halaman seperti beranda, kategori, about us, contact, dan lain sebagainya. Saat user berpindah semisal dari beranda ke halaman about us, maka link yang user gunakan adalah link internal.

Intinya, link internal adalah link yang dipakai oleh user untuk berpindah halaman dalam 1 web yang sama. Seperti ibaratnya pintu aneka kamar di dalam rumah Anda – Anda bisa berpindah ke ruangan mana saja tanpa meninggalkan rumah.

Cara membuat hyperlink HTML internal sesungguhnya tidak jauh berbeda dengan cara membuat hyperlink external. Perbedaannya hanya terletak pada jenis link yang disisipkan ke dalam struktur coding.

Contoh membuat hyperlink HTML internal:

1. Buat file index.html
2. Masukkan kode:
   <!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey</title>
</head>
<body>
<h1>Belajar Ngoding Internal Link HTML</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
Selamat pagi! Contoh link di atas adalah contoh link internal: home, contact us dan about us. Jika Anda mengkliknya, maka Anda akan berpindah ke halaman lain dari website ini
</p>
<hr>
<div>Dipublikasikan oleh Appkey © 2020</div>
</body>
</html>
3. Buat file baru > beri nama contact.html. (Di sini Anda akan membuat halaman contact yang berisikan identitas dari web / kontak yang bisa dihubungi)
4. Input kode berikut:
   <!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey</title>
</head>
<body>
<h1>ContactUs</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
   Ingin berkonsultasi perihal pembuatan website? Silahkan WA Appkey di jam operasional kerja kami pada nomor: 081xxx-xxx-xxx atau hubungi kami di media sosial Appkey.id!
   </p>
<hr>
<div>Dipublikasikan oleh Appkey Copyright © 2020</div>
</body>
</html>5. Buat file baru terakhir > beri nama about.html.
5. Input kode berikut ke file:
   <!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey</title>
</head>
<body>
<h1>About</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
Appkey.id hadir untuk memberikan aneka ragam artikel menarik tentang coding.
</p>
<hr>
<div>Dipublikasikan oleh Appkey Copyright © 2020</div>
</body>
</html>
   7. Pastikan kembali bahwa semua file (about, home, contact) sudah tersimpan dalam 1 folder yang sama.
6. Selesai. Kini Anda tinggal melakukan pengujian index.html di browser.

Selain external dan internal link, masih ada jenis hyperlink lainnya yang bisa Anda temukan di internet, yakni:

Relatif Address

Relatif address adalah sebuah URL yang hanya menyebutkan nama file serta path saja. Untuk nama network address / location dan protocol sama sekali tidak akan tampak. Relatif address banyak dipakai oleh blog dan web.

Absolute Address

Absoulte address memuat semua komponen, tidak seperti relatif address. Di sini, Anda bisa mendapat URL address secara lengkap, mulai dari nama file, protokol, network location dan juga path. Absolute address sendiri sering digunakan sebagai backlink untuk artikel web.

Link Section

Tipe link terakhir adalah link section. Link ini digunakan untuk menghubungkan website dengan ‘section’ atau bagian tertentu dari sebuah dokumen / artikel di web. Dengan memakai link section, Anda bisa langsung menuju ke halaman yang spesifik sesuai penelusuran. Link section ini biasa digunakan untuk membuat kamus online.

Tutorial Mudah Membuat Hyperlink HTML

Anda sudah berkeliling mengenal apa itu hyperlink, jenis dan fungsi dari hyperlink. Kini tibalah kita pada tutorial mudah untuk membuat hyperlink HTML. Pada dasarnya, hyperlink HTML memiliki bentuk tag<a>. Bentuk penulisan default hyperlink HTML adalah:

<a href=”URL”>Anchor Text</a>

Tag<a> harus mempunyai atribut HTML href agar link bisa dipakai menentukan URL address tujuan / URL website Anda. Contoh struktur link HTML adalah:

<a href=http://appkey.co.id/>Appkey Indonesia</a>

Baiklah, mari kita mulai tutorial lengkap cara membuat link HTML pada web:

1. Buat file baru bernama link.html > lakukan coding dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey</title>
</head>
<body>
<p>Yuk follow Appkey untuk dapat artikel menarik seputar ngoding di link ini
<a href="about.html">About us</a>
</p>
</body>
</html>

2. Pastikan semua file (link.html, about.html, contact.html, dan seterusnya) sudah berada dalam 1 folder (seperti saat Anda membuat link internal).

3. Anda bebas menyisipkan link apa saja ke dalam struktur di atas sesuai kebutuhan.
4. Coba jalankan program. Nantinya Anda akan mendapatka link dengan tampilan standar berwarna biru dan di-underline (garis bawah).
5. Jika Anda ingin mengubah warna link > tambahkan atribut ‘style’ ke CSS > ubah warna / color (untuk teks) dan background color (untuk latar link). Gunakan struktur kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Seri Belajar Ngoding Appkey</title>
</head>
<body>
<h1>Hallo Codingers!</h1>
<p>
<a href="index.html" style="color:blue">Home</a> |
<a href="contact.html" style="color:red">Contact</a> |
<a href="about.html" style="color:orange;">About</a> |
<a href="download.html" style="color:black;background-color: white;">Download</a>
</p>
<hr>
<p>
Selamat datang di Appkey! Ada yang bisa kami bantu? Silahkan klik link di atas sesuai apa yang ingin Anda cari!
</p>
<hr>
<div>Dipublikasikan oleh Appkey Copyright © 2020</div>
</body>
</html>

6. Jalankan kode. Jika berhasil, maka Anda akan mendapatkan hasil berupa halaman website dan juga aneka link internal warna-warni. Andai kata link internal tidak dapat berjalan, coba cek kembali apakah semua file sudah terletak dalam 1 folder atau belumDemikianlah pembahasan artikel edisi kali ini tentang membuat hyperlink HTML. Setelah mempelajari aneka link HTML code di atas, semoga kini Anda sudah bisa berpraktek membuat hyperlink HTML sendiri, ya!

Terima kasih sudah mengikuti artikel edisi kali ini sampai di sini. Nantikan lebih banyak artikel seri belajar ngoding lainnya hanya dari Appkey.id! Sayonara!