Cara membuat Link pada HTML (tag a)

Ilmuit.id – Pada kesempatan kali ini kita akan membahas bagaimana cara kita untuk membuat sebuah link pada HTML. Link pada html merupakan hyperlink, dimana hyperlink merupakan sebuah acuan yang ada di dalam dokumen hypertext (HTML – Hypertext Markup Language) ke dokumen lain atau sumber lain. Untuk membuat sebuah link pada HTML kita menggunakan tag <a>.

Pada contoh di atas saya membuat sebuah link menggunakan tag <a> dan di akhiri dengan tag penututp </a>. Di dalam tag <a> terdapat atribut href (hyperlink reference) yang akan kita beri nilai alamat dari sumber yang kita tuju. Isi dari tag <a> sendiri adalah sebuah teks yang befungsi sebagai placeholder (tempat dudukan dari link). Secara default link akan muncul sebagai berikut pada semua browser.

link yang belum dikunjungi = akan digarisbawahi dan berwarna biru.

link yang telah dikunjungi = akan digarisbawahi dan berwarna ungu.

link aktif = akan digarisbawahi dan berwarna merah.

Anchor pada HTML <a>

Anchor merupakan kepanjangan dari a pada tag <a>. seperti dalam penjelasan di atas kita menggunakan tag <a> untuk membuat suatu link. Link pada HTML tidak hanya dapat di tempatkan pada text saja, tetapi juga dapat berupa sebuah image (gambar/foto) atau sebuah element HTML lainnya, supaya lebih jelas perhatikan contoh berikut ini.

Tag <a> memiliki sebuah atribut wajib yang akan sangat berguna yaitu href (hyperlink reference). Tanpa atribut href, tag <a> hanya berguna sebagai placeholder untuk hyperlink. Pad contoh di atas saya membuat dua buah link, link pertama menggunakan text dan link ke dua menggunakan image. Kedua dari link di atas memiliki nilai dari atribut href yang mengarah ke alamat https://www.ilmuit.id/.

Pada saat anda meng-klik link tersebut, halaman yang terbuka akan menimpa halaman browser yang sedang anda gunakan saat ini. Untuk membuat supaya link membuka tab baru saat di klik, kita membutuhkan atribut baru yaitu target. Dengan target, kita dapat menentukan bagaimana cara kita membuka halaman yang kita tuju.

Baca Juga : Cara Membuat List Item Pada HTML

Pada contoh di atas saya membuat atribut target dengan nilai _blank, yang mana jika anda klik akan membuka tab baru. Pada saat saat default nilai dari target adalah _self. Berikut beberapa nilai dari atribut target beserta fungsinya.

“_self” = akan membuka dokumen di jendela/tab yang sama seperti pada saat di klik.

“_blank” = akan membuka dokumen di jendela/tab baru pada saat di klik.

“_parent” = akan membuka dokumen pada parent frame (bingkai induk) saat di klik.

“_top” = akan membuka dokumen di seluruh jendela pada saat di klik.

Pada contoh di atas kita telah membahas bagaimana cara membuat link dengan text dan image. Selanjutnya kita akan membahas bagaimana cara kita untuk membuat button sebagai link dan bagaimana cara kita menautkan link ke alamat email, perhatikan contoh berikut.

Perhatikan tag <button> di atas, saya menambahkan atribut onclick yang fungsinya adalah meng-eksekusi kode javascript. Nilai dari atribut onclick di atas adalah kode dari javascript yaitu document.location=’https://www.ilmuit.id/’, isi dari location merupakan alamat dari dokumen/halaman yang kita tuju.

Kemudian pada tag <a> di bawah tag <button>, anda dapat menemukan tambahan dalam nilai atribut href-nya yaitu mailto:, mailto: berfungsi untuk membuat tautan yang akan membuka program email pengguna yang memungkinkan mereka untuk mengirim sebuah email baru. 

Baca Juga : Cara Membuat Judul dan Paragraf di HTML ( tag h1 dan tag p )

Title pada tag <a>

Pada tag <a> kita juga dapat menambahkan atribut title, yang mana fungsi dari atribut title ini adalah menentukan informasi tambahan tentang suatu elemen HTML. Informasi dari title paling sering ditampilkan sebagai teks keterangan pada saat mouse bergerak di atas sebuah elemen, berikut ini contoh-nya.

Alamat Absolute dan alamat Relative

Alamat yang kita gunakan dari tadi merupakan Absolute URL (URL Absolut), alamat url absolut merupakan alamat url lengkap (menggunakan “http://www”). Selain alamat absolut kita juga dapat menggunakan alamat lokal yang cara penulisan alamatnya menggunakan URL Relatif (tanpa menggunakan bagian “http://www”), berikut contoh penggunaan url relatif.

Supaya kode di atas dapat berjalan sebagaimana mestinya, anda sebelum nya harus sudah menyiapkan file HTML lain yang berfunngsi sebagai tujuan dari link (pada contoh di atas saya membuat file HTML lain dengan nama: alamat baru.html) kemudian pada halaman utama (pada contoh di atas halaman utama saya adalah index.html), kita membuat sebuah link dengan tag <a> dan nilai dari atribut href-nya adalah nama dari file html yang telah anda buat sebelumnya.

Membuat bookmark pada HTML

Link HTML dapat di gunakan untuk membuat bookmark. Bookmark sangat berguna jika isi dari sebuah halaman web sangat panjang, dengan adanya bookmark kita dapat menuju isi tertentu pada halaman web. supaya kita dapat menuju isi tertentu pada halaman web yang kita mau, kita perlu untuk menandai elemen yang membuat ‘isi tertetu’ pada halaman web, berikut contohnya.

Pada kode di atas saya membuat judul yang banyak sebanyak 27 judul, sehingga hasil pada web akan terlihat panjang. Pada posisi tersebut kita dapat menggunakan bookmark untuk menuju judul tertentu yang kita inginkan.

Hal pertama yang harus dilakukan dalam membuat bookmark adalah menandai judul (lokasi khusus yang anda inginkan), dengan cara memberi atribut id pada elemen pembentuk judul yang ingin dituju (pada contoh di atas saya menandai elemen h2 dengan id=”23”). 

Baca Juga : Panduan Struktur Dasar HTML

Setelah menandai elemen h2 (judul konten 23), saya membuat link yang mengarah pada id tersebut dengan mengisi atribut href ada tag <a> dengan nilai id yang sama pada saat menandai elemen h2 (judul konten 23). Jangan lupa untuk menambahkan pagar (#) sebelum nilai id (#23).

Pada contoh di atas jika anda meng-klik link (klik menuju judul 23), anda akan langsung menuju judul 23 pada halaman web. bookmark juga bisa anda gunakan untuk menandai elemen pada halaman lain dan menujunya, anda hanya perlu menambahkan nama alamat halaman lain pada atribut href pada link (tag <a>) kemudian di-ikuti dengan nilai id (nilai id yang telah anda buat pada elemen di halaman lain), berikut contoh kodenya.

Maksud dari alamat di atribut href di atas adalah tuju halaman dengan nama “alamat baru.html” kemudia tuju elemen yang memiliki id “23”. Kode di atas akan berjalan jika anda sebelumnya telah membuat halaman html dengan nama “alamat baru.html” dan di dalam html anda, ada tag yang memiliki atribut id dengan nilai 23.

Sekian pembahasan kita mengenai cara membuat link pada HTML,mohon maaf jika ada salah penulisan atau pengertian, dan semoga bermanfaat untuk anda semua. Sampai jumpa pada pembahasan tutorial HTML selanjutnya. - ilmuit.id 

Writer : Riski Rahmat H