Belajar Dasar HTML Part 9 - Cara Membuat Link Di HTML (tag a)

Diposkan pada oleh Febri Hidayan

Belajar Dasar HTML Part 9 – Cara Membuat Link Pada HTML (tag a)

kita sudah sampai di pembelajaran pembuatan link. Disini kita akan tahu apasih keuntungan dari penggunaan link. Link juga disebut sebagai hyperlink dimana suatu cara untuk menghubungkan halaman web ke halaman yang lainnya. Penggunaan link itu sangat penting sekali apa lagi dalam pembuatan aplikasi web. Bagaimana seorang pembaca harus dapat melihat halaman lain pada halaman web. Maka kita harus menyediakan navigasi sebagai penunjuk arah halaman yang lainnya. Agar pembaca web bisa melihat bagian yang lainnya di web kita. Agar lebih mengetahui tentang betapa pentingnya penggunaan link, simak sebagai berikut:

Pengertian Link

Saat kita lagi menggunakan salah satu halaman website, tahukah kita kalau sebuah halaman website yang kita kunjungi memiliki tujuan link tertentu. Dimana suatu website terbagi dari beberapa file yang saling berhubungan agar bisa menjadi website yang utuh. Untuk bisa menghubungkan seluruh halaman yang ada pada wwebsite maka kita membutukan link atau disebut hyperlink. Apa si pengertian hyperlink itu? Hyperlink adalah sebuah teks atau link yang dapat memindahkan kita ke halaman web lainnya atau bisa juga untuk menunjukkan arah untuk memunculkan gambar atau video.

Pengertian Tag <a> Pada HTML

Tag <a> yang merupakan singkatan dari Anchor (jangkar) adalah tag untuk mendefenisikan sebuah teks atau pun gambar yang memiliki tujuan atau arah ke halaman web yang lainnya. Penulisan tag <a> di tulis secara berpasangan untuk tag pembuka <a> dan diakhiri tag penutup </a>. Tag <a> memiliki attribut utama yaitu href dimana penggunaannya untuk menunjukan alamat link.

Cara Membuat Link Pada HTML

Untuk membuat link kita harus menggunakann tag <a> dan menggunakan attribut href untuk menentukan tujuan link yang kita gunakan. Kita bisa melihat kode dibawah untuk cara pembuatan link di HTML. Sebagai berikut:

Contoh Membuat Link 
<a href="link_tujuan">nama link</a>

Untuk melihat lebih lanjut tentang penggunaan link, bisa kita lihat lagi kode dibawah ini dengan link tujuan https://www.sekolahprogram.com sebagai berikut:

Kode HTML Membuat Link 
<!DOCTYPE html>
<html>
<head>
            <title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<p>Silakan Kunjungi Websitenya <a href="https://www.sekolahprogram.com">Sekolah Program</a></p>
</body>
</html>

Hasil saat di web browser:

Jenis-Jenis Link Pada HTML

Nah! Ini dia yang kita tunggu. Pada HTML terdapat dua jenis link yang kita bisa gunakan, yaitu link absolut dan link relatif. Pengguannya sama-sama untuk mangarahkan halaman web. Namun untuk setiap jenis link ini memiliki fungsi yang berbedaan masing-masing. Berikut ini adalah jenis jenis link HTML:

Link Absolute

Link absolut adalah heperlink yang menggunakan url penuh. Diamana suatu link yang mengarahkan halaman web yang lainnya. Jenis link ini memiliki tujuan tertentu supaya kita dapat memperoleh lebih mengenai sumber daya yang kita cari di website tersebut atau di internet. Dengan adanya link absolute kita bisa berpindah pindah tempat pada halaman website. Cara penulisannya harus lengkap dengan bagian http://www. Atau http//domain_name karena sebagian website ada juga tidak menggunakan www .Untuk melihat penggunaan link absolute kita bisa lihat contoh kode dibawah ini:

Kode Link Absolute 
<!DOCTYPE html>
<html>
<head>
            <title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<p>Pindah Ke <a href="https://www.sekolahprogram.com/html">Halaman HTML</a></p>
</body>
</html>

Maka Hasil Saat Di Web Browser:

Link Relatif

Link relatif adalah hyperlink yang digunakan secara langsung. Dimana untuk memindahkan halaman web dengan alamat link yang sama. Link relatif tanpa menggunakan alamat domain, hanya saja link relatif digunakan untuk mengarahkan langsung pada lokasi yang tersimpan pada komputer kita. Misalnya kita membuat folder dengan nama PenggunaanLink didalamnya memiliki (folder index, file relatifsatu.html, dan file relatifdua.html) dan difolder index memiliki file home.html. Bisa dilihat gambar dibawah ini:

Folder PenggunaanLink

Folder index

Kalau Anda tidak ingin repot membuat folder dan filenya bisa kita download melalui link berikut ini febrihidayan(indexdownload). Kita bisa menggunakan kode ini secara bebas dan tidak ada persyaratan apapun (tapi ingat hak cipta sangat penting).

Isi Kode HTML pada file relatifsatu.html 
<!DOCTYPE html>
<html>
<head>
<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<h4>File Relatif Satu</h4>
<p>Alamat Link Pertama <a href="relatifsatu.html">Relatif Satu</a></p>
<p>Alamat Link Kedua <a href="relatifdua.html">Relatif Dua</a></p>
<p>Alamat Link Ketiga <a href="index/home.html">File pada folder Index</a></p>
</body>
</html>
Isi kode HTML pada file relatifdua.html 
<!DOCTYPE html>
<html>
<head>
<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<h4>File Relatif Dua</h4>
<p>Alamat Link Pertama <a href="relatifsatu.html">Relatif Satu</a></p>
<p>Alamat Link Kedua <a href="relatifdua.html">Relatif Dua</a></p>
<p>Alamat Link Ketiga <a href="index/home.html">File pada folder Index</a></p>
</body>
</html>
Isi kode HTML pada file home.html 
<!DOCTYPE html>
<html>
<head>
<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<h4>File Home</h4>
<p>Alamat Link Pertama <a href="../relatifsatu.html">Relatif Satu</a></p>
<p>Alamat Link Kedua <a href="../relatifdua.html">Relatif Dua</a></p>
<p>Alamat Link Ketiga <a href="file:///E:/PenggunaanLink/index/home.html">File pada folder Index</a></p>
</body>
</html>

Tampilan saat di web browser (file relatifsatu.html)

Tampilan saat di web browser (file relatifdua.html)

Tampilan saat di web browser (file home.html)

Sedikit penjelasan untuk memanggil file home.html di dalam folder index maka kita harus memanggilnya dengan cara href=”index/home.html”, bila kita ingin memanggil file sesudahnya yaitu di folder PenggunaanLink maka kita akan membuat kodenya menjadi href=”../relatifsatu.html” atau href=”../../relatifsatu.html” (apa bila foldernya 2 kali sebelum file home.html).

Menggunakan Attribut Target Pada Tag <a>

Attribut yang satu ini untuk menentukan target. Dimana link yang kita tuju akan membuat jendela baru di web browser kita atau membuat tab baru pada web browser. Biasanya kita membuka link di halaman web, halaman tersebut akan saling menimpah satu sama lain dalam halaman yang sama. Kalau kita menggunakan perintah target=”_blank” maka akan membuka jendela baru atau tab baru di web browser. Untuk itu lihat kode contoh dibawah ini:

Kode HTML Attribut Target 
<!DOCTYPE html>
<html>
<head>
<title>Sekolah Program</title>
</head>
<body>
<h2>Belajar Membuat Link - Sekolah Program</h2>
<h3>Menggunakan Attribut Target</h3>
<p>Pindah Ke <a href="https://www.sekolahprogram.com/html" target="_blank">Halaman HTML</a></p>
</body>
</html>

Maka hasil di web browser:

Catatan: banyak yang bisa ambil dalam menggunakan tag <a> (link) dari penjelasan diatas sudah bisa dibilang sangat lengkap. Kita juga bisa menggunakan link untuk memutar video dan gambar dari server atau pun dari komputer kita, jangan lupa kalau kita ingin menampilkan video atau gambar ingat format harus kita tulis setelah nama video atau gambar. Sekian dari saya semoga bermanfaat..!

error: Dilarang Copy !!