Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Namun, sebuah link tidak hanya digunakan untuk menghubungkan halaman web saja. Link pada HTML juga dapat digunakan untuk beberapa hal yang nantinya akan saya jelaskan dibagian Fungsi fungsi link Pada HTML.
Membuat Link di HTML
Link pada HTML dapat dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link.
Berikut ini merupakan bentuk sederhana dalam membuat link :
Jenis-jenis Link pada HTML
Jika dilihat dari fungsi Link berdasarkan alamat URL yang dituju, maka link pada HTML dibagi menjadi dua jenis, yaitu Internal dan External.
Internal Link
Internal Link adalah link yang digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain.
Contoh :
1. Buatlah file baru bernama home.html kemudian salin kode berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Link di HTML</title>
</head>
<body>
<h1>Home</h1>
<p>
<a href="Home.html" >Home</a> |
<a href="Contact.html" >Contact</a> |
<a href="About.html" >About</a>
</p>
<hr>
<p>
Selamat datang di praktekotodidak.com. Pada artikel kali ini
kita akan belajar Link di HTML. Berikut ini adalah contoh internal link.
</p>
<hr>
<div>Copyright © 2022 by Praktek Otodidak</div>
</body>
</html>
2. Setelah itu buat lagi file baru bernama contact.html dengan isi sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Link di HTML</title>
</head>
<body>
<h1>Contact</h1>
<p>
<a href="Home.html" >Home</a> |
<a href="Contact.html" >Contact</a> |
<a href="About.html" >About</a>
</p>
<hr>
<p>
Anda dapat menghubungi kami melalui alamat email: [email protected].
</p>
<hr>
<div>Copyright © 2022 by Praktek Otodidak</div>
</body>
</html>
3. Buatlah file about.html dengan isi sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Link di HTML</title>
</head>
<body>
<h1>About</h1>
<p>
<a href="Home.html" >Home</a> |
<a href="Contact.html" >Contact</a> |
<a href="About.html" >About</a>
</p>
<hr>
<p>
ini adalah contoh link internal di HTML halaman about.
</p>
<hr>
<div>Copyright © 2022 by Praktek Otodidak</div>
</body>
</html>
4. Simpan semua file tersebut di dalam satu folder.
5. Setelah itu, coba buka file home.html dengan browser.
Hasil tampilan di browser:
External Link
External Link: adalah link yang menuju website atau domain lain. Misalnya seperti: membuka halaman facebook, youtube, dan lain-lain. Cara membuat eksternal link sebenarnya sama seperti internal link. Perbedaanya terletak pada alamat URL yang diberikan.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eksternal Link di HTML</title>
</head>
<body>
<p>Ini adalah eksternal link yang mengarah ke halaman facebook:
<a href="https://www.facebook.com/praktekotodidakfanspage">Facebook Praktek Otodidak</a>
</p>
</body>
</html>
Hasil tampilan di browser:
Pada link tersebut, kita memberikan alamat URL halaman facebook, jadi saat link tersebut diklik akan membuka halaman tersebut.
Mengubah Warna Link HTML dengan CSS
Biasanya warna default dari link ini adalah biru, namun kita bisa mengubah warna teks dan backgroundnya dengan style CSS. Adapun caranya adalah dengan menambahkan atribut style, kemudian isi dengan style css untuk mengubah warna untuk teks dan background-color untuk latar.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Link di HTML</title>
</head>
<body>
<h1>About</h1>
<p>
<a href="Home.html" style="color:green">Home</a> |
<a href="Contact.html" style="color:brown">Contact</a> |
<a href="About.html" style="color:purple;">About</a>
</p>
<hr>
<p>
ini adalah contoh link internal di HTML halaman about.
</p>
<hr>
<div>Copyright © 2022 by Praktek Otodidak</div>
</body>
</html>
Hasil tampilan di browser:
Atribut-atribut Link Pada HTML
Coba anda perhatikan contoh kode pada pembahasan sebelumnya, kita telah menggunakan atribut href, dan atribut style CSS. Namun, masih ada banyak atribut yang sering ditambahkan pada link HTML,diantaranya :
- _blank, membuka link pada jendela atau tab baru;
- _self, Atribut yang akan membuka link pada halaman itu sendiri (default target);
- _top, menuju bagian paling atas pada halaman;
- _parent membuka link pada frame induk;
- nama-frame, membuka link pada <iframe> dengan nama tertentu;
- title berfungsi untuk membuat tooltips.
- rel, Menentukan hubungan antara dokumen saat ini dan dokumen terkait.
- style, atribut penggunaan css untuk mengatur gaya isi elemen yang diletakan dalam tag pembuka elemen html.
- href, digunakan untuk menentukan URL dari suatu link.
- src, menentukan url suatu gambar, agar dapat ditampilkan di halaman web.
- alt, untuk membuat alternatif teks pada saat gambar tidak tampil.
- width, digunakan untuk menetukan lebar dari elemen.
- height, untuk menentukan tinggi dari elemen.
- id, memberikan id unik suatu elemen untuk memberikan gaya pada nama id tersebut.
- class, menentukan gaya yang sama pada beberapa elemen dengan nama class yang sama
Dari berbagai macam atribut diatas, anda dapat mencobanya satu persatu untuk latihan karena saya tidak memberikan semua contohnya. Sebagai referensinya berikut ini saya kasih contoh penggunaan atribut blank, title dan nama-frame
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eksternal Link di HTML</title>
</head>
<body>
<!-- Membuka link menggunakan atribut target _blank -->
<p>Atribut yang digunakan untuk Link :
<a href='https://www.facebook.com/praktekotodidakfanspage' target='_blank'>Facebook</a></p>
<!-- Membuka link menggunakan atribut title -->
<p>Untuk lebih jelas, silahkan buka Link berikut :
<a href="about.html" title="Menuju ke halaman about">About</a> </p>
<!-- Membuka link menggunakan atribut nama-frame -->
<p><a href='https://praktekotodidak.com' target='myframe'>Blog</a></p>
<p><iframe name="myframe" width="800" height="800"></iframe></p>
</body>
</html>
Hasil tampilan di browser:
Keterangan :
_blank, Saat link tersebut diklik, browser akan membuka tab baru.
title, informasi tambahan yang akan tampil saat link disentuh pointer
myframe menampilkan link ke dalam sebuah frame.
Fungsi fungsi link Pada HTML
Seperti yang saya jelaskan sebelumnya, selain untuk menghubungkan suatu halaman web, masih ada banyak fungsi lainnya dari link, diantaranya :
- Menghubungkan halaman web
- Memanggil Fungsi Javascript
- Membuat Link Anchor
- Membuat Link dengan Gambar
- Membuat Link untuk Download File
- Membuat Link untuk Mengirim Email
Dibagian awal tadi, kita telah membahas fungsi link untuk menghubungkan halaman web. Tentu kita akan membahas fungsi dan kegunaan lainnya dibawah ini.
Membuat Link untuk Memanggil Fungsi Javascript
Sebuah link juga dapat digunakan untuk memanggil fungsi Javascript. Pemanggilan fungsi Javascript biasanya dilakukan dengan atribut even seperti onclick, onmouseover, onmouseout, dan lain-lain.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Memanggil Fungsi Javascript</title>
</head>
<body>
<p>
<a href="#" onclick="alert('Selamat Datang!')">Klik disini !</a>
<br>
<a href="#!" onmouseout="alert('Anda sudah membuka Link ini !')">Arahkan kursor anda kesini
!</a>
</p>
</body>
</html>
Hasil tampilan di browser:
Membuat Link Anchor
Anchor Link adalah sebuah potongan teks berisi link yang dapat diklik menuju suatu element. Umumnya anchor link ini mempunyai teks berwarna biru. Fungsi Anchor Link adalah sebagai informasi bagi pengguna dan mesin pencari mengenai tautan website yang dilampirkan. Jadi Anchor Link juga penting untuk optimasi atau SEO sebuah web. Menurut Google, anchor adalah sebuah deskripsi isi dari konten.
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#). Setelah itu diisi dengan nama id dari elemen yang akan dituju.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link Anchor di HTML</title>
</head>
<body>
<h1>Membuat Link Anchor</h1>
<p>Ini adalah contoh link anchor. Coba klik link ini:
<a href="#under"> Kesimpulan</a> maka anda
akan dibawa ke bagian akhir dari artikel ini.
</p>
<h2>Apa itu Anchor Link</h2>
<p>
Anchor Link adalah sebuah potongan teks berisi link yang dapat
diklik menuju suatu element. Umumnya anchor link ini mempunyai
teks berwarna biru.
</p>
<h2>Fungsi Anchor Link</h2>
<p>
Fungsi Anchor Link adalah sebagai informasi bagi pengguna
dan mesin pencari mengenai tautan website yang dilampirkan.<br>
Jadi Anchor Link juga penting untuk optimasi atau SEO sebuah web.
Menurut Google, anchor adalah sebuah deskripsi isi dari konten.
</p>
<h2>Cara membuat link anchor</h2>
<p>
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#).
Setelah itu diisi dengan nama id dari elemen yang akan dituju.
</p>
<h2 id="under">Kesimpulan..</h2>
<p>
Sebagai penutup dari artikel ini, anda dapat memperhatikan bagian headingnya.
Di sana kita menggunakan id="under". Maka elemen ini akan menjadi
tujuan dari anchor link.
</p>
<p>
<a href="#top">Back to top!</a>
</p>
</body>
</html>
Hasil tampilan di browser:
Keterangan :
<a href=”#top”>Back to top!</a>, Kita menggunakan #top sebagai URL, Jika ada link anchor yang menuju ke #top maka ia akan dibawa ke bagian dokumen tersebut.
Menyisipkan Link pada Gambar
Pada sebuah halaman web, biasanya terdapat gambar yang jika diklik akan mengarahkan kesebuah link. Cara membuat dan menyisipkan link pada gambar dapat kita lakukan dengan menambahkan tag <img> dengan tag <a>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Link dengan Gambar</title>
</head>
<body>
<h2>Membuat Link dengan Gambar</h2>
<p>Klik gambar ini !:</p>
<p>
<a href="https://praktekotodidak.com">
<img src="logo-web.png"/>
</a>
</p>
</body>
</html>
Hasil tampilan di browser:
Pada area gambar tertentu, kita dapat menyisipkan sebuah link didalamnya dengan menggunakan tag <map> dan <area>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Membuat Link dengan Gambar</h1>
<p>Arahkan kursor anda lalu klik gambarnya:</p>
<p>
<img src="https://praktekotodidak.com/wp-content/uploads/2022/07/Kategori.png" usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" title="komputer"
href="https://praktekotodidak.com/category/komputer/">
<area shape="rect" coords="290,172,333,250" title="elektronika"
href="https://praktekotodidak.com/category/elektronika/">
<area shape="circle" coords="337,300,44" title="arduino"
href="https://praktekotodidak.com/category/arduino/">
</map>
</p>
</body>
</html>
Hasil tampilan di browser:
Pada contoh diatas, kita menyisipkan sebuah link. Jika kursor diarahkan area gambar tertentu dan setelah itu diklik, maka akan mengarah ke link kategori web praktekotodidak,com.
Membuat Link untuk Download File
Sebuah Link juga digunakan sebagai link untuk download file. Sama seperti menampilkan gambar, anda hanya perlu memasukan path atau alamat URL dari file yang akan didownload.
Contoh:
<a href="file.rar">DISINI</a>
Pada contoh diatas, kita menuliskan langsung nama filenya, jika filenya berada di tempat lain, maka kita hanya mengganti URLnya saja.
<a href="https://windows.php.net/download/">DISINI</a>
Anda bisa melihat hasil tampilannya dibagian bawah. (1)
Membuat Link untuk Mengirim Email
Pembahasan terakhir dalam penggunaan Link pada HTML yaitu untuk mengirim email.
Contoh :
<a href="mailto:[email protected]"<br>title="kirim email">Link Email</a>
Cara membuat link HTML untuk mengirim email adalah dengan mengubah URL tujuan dari link dengan mailto, lalu diikuti dengan alamat email yang akan menerima email.
Contoh :
Berikut ini merupakan contoh program dalam membuat Link HTML untuk Gambar, Download File, dan Mengirim Email
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link dengan Gambar, Download File, dan Mengirim Email </title>
</head>
<body>
<p>
<!-- Membuat Link dengan Gambar -->
<a href="#"><img src="https://praktekotodidak.com/wp-content/uploads/2021/12/cropped-cropped-
transparan1-1.png" /></a>
</p>
<!-- Membuat Link untuk Download File berada dalam satu folder -->
<p>Silahkan Download Filenya :
<a href="file.rar">DISINI</a>
</p>
<!-- Membuat Link untuk Download File berada di tempat lain -->
<p>Untuk File PHP dapat anda Download :
<a href="https://windows.php.net/download/">DISINI</a>
<p>
<!-- Membuat Link untuk Mengirim Email -->
Jika ada yang belum jelas, silahkan informasikan melalui Email:
<a href="mailto:[email protected]"
title="kirim email">Link Email</a>
</p>
</body>
</html>
Hasil tampilan di browser:
Begitulah pembahasan tentang Link di HTML yang telah saya rangkum sebagai berikut.
- Cara Membuat Link di HTML
- Jenis-jenis Link pada HTML
- Mengubah Warna Link HTML dengan CSS
- Atribut-atribut Link Pada HTML
- Fungsi fungsi link Pada HTML
Untuk artikel selanjutnya silahkan dibaca : Belajar HTML#8 Cara Membuat Tabel di HTML
