Cara Membuat Link di HTML

Dalam tutorial ini kita akan membahas membuat link di html, sebelum ke pembahasan materi kita akan bahas terlebih dahulu pengertian link. Hyperlink pada html adalah suatu cara untuk menghubungkan dokumen satu dengan yang lainnya, penggunaan link ini sangat penting, sebagai contoh apa jadinya sebuah jalan tanpa penghubung dari kota satu ke kota lain, begitu juga dengan link, bagaimana seorang pembaca dapat melihat halaman lain pada sebuah website, maka di butuhkan navigasi sebagai pentunjuk untuk pembaca dapat pergi ke bagian lain dalam satu website atau di luarnya, penulisan link di html menggunakan sebuah tag <a> atau anchor link.

Pengertian Tag Anchor  di HTML

<a> adalah kependekan dari anchor (jangkar) yaitu sebuah tag untuk mendefinisikan sebuah teks atau gambar yang memiliki tujuan atau rujukan ke halaman lain atau pada halaman itu sendiri, tag <a> di tulis secara berpasangan antara tag pembuka <a> dan tag penutup </a> dimana elemen didalam digunakan untuk mendefinisikan sebuah hyperlink.

Tidak semua elemen  yang di tulis antara tag <a> menjadi sebuah hyperlink, pembuatan link dengan tag <a> ini bergantung pada atribut href, apabila sebuah teks atau gambar di definisikan dengan menggunakan tag <a> dan tidak memiliki atribut href didalamnya elemen tersebut adalah menunjukan sebuah placeholder.

Atribut-atribut tag anchor di HTML

Berikut ini adalah atribut-atribut yang terdapat pada tag <a> (anchor link) yang dapat di gunakan untuk membuat link di html, tidak semua atribut tag <a> dicantumkan pada tabel di bawah ini, jika di rasa tabel di bawah kurang, pembaca dapat melihatnya di halaman w3schools mengenai tag <a> yang sedang kita bahas ini.

AtributNilaiKeterangan
hrefURLMenentukan alamat atau ID tujuan
hreflanglanguage_codeMenentukan bahasa yang digunakan
target_blank, _parent, _self, _top, framenameUntuk menentukan bagaimana perlakuan untuk membuka link tersebut.
relalternate, author, bookmark, help, license, next, nofollow, noreferrer, prev, search, tagMenentukan hubungan (relationship) antara dokumen yang sedang di buka atau dokumen lain yang di rujuk link tersebut.

Sampai disini saya anggap pembaca sudah mengerti atribut-atribut tag <a> (anchor link) pada tabel di atas, Berikut ini adalah cara penulisan tag <a> untuk membuat link di html.

<a href="link_tujuan">Nama link</a>
Code language: HTML, XML (xml)

Untuk lebih lengkapnya penulis akan membuat dua halaman, yaitu halaman index.html dan  menu.html dimana kedua halaman tersebut akan saling merujuk ke masing-masing halaman, berikut ini adalah susunan hirarki halaman, file menu.html di simpan didalam direktori  “menu”.

Cara Membuat Link di HTML

Untuk direktori root dapat menggunakan folder apa saja, karena seperti awal pembahasan bahwa html adalah bahasa client-side sehingga untuk menjalankannya tidak perlu menggunakan web server. Selanjutnya silahkan buka text editor apa saja sesuai keinginan, lalu ketik kode di bawah ini dan simpan dengan nama index.html.

<!DOCTYPE html> <html> <head> <title>Cara Membuat Link di HTML</title> </head> <body> <h1>Membuat hyperlink di HTML</h1> <p>Dibawah ini adalah link yang ditujukan ke halaman menu | <a href="menu/menu.html">MENU</a></p> </body> </html>
Code language: HTML, XML (xml)

Dari kode di atas maka seharusnya akan tampil seperti gambar di bawah ini.

Cara Membuat Link di HTML

Selanjutnya, buatlah sebuah direktori baru yang berada pada direktori root, setelah itu ketikan kode html di bawah ini dan beri nama menu.html, lalu simpan pada direktori menu yang telah di buat.

<!DOCTYPE html> <html> <head> <title>Cara Membuat Link di HTML</title> </head> <body> <h1>Membuat hyperlink di HTML</h1> <p>Berikut ini adalah link untuk kembali ke halaman index | <a href="../index.html">INDEX</a></p> </body> </html>
Code language: HTML, XML (xml)

Dari kode html di atas maka akan tampil seperti gambar dibawah ini.

Cara Membuat Link di HTML

Sampai disini pembuatan link telah berhasil, dari contoh di atas penulis hanya menggunakan teks, anda dapat merubahnya dengan menggunakan gambar.

Pada html, jenis link di bagi menjadi dua bagian, yaitu relatif dan absolut, perbedaan dari kedua jenis tersebut hanya cara penulisan alamat tujuannya saja, mari kita coba jabarkan agar lebih mudah di pahami.

Link relatif adalah link yang bisa dikatakan link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa di awali dengan alamat domain website tersebut, sehingga dalam pengunaannya sangat tergantung pada lokasi file berada, contohnya.

<a href="relatif.html">Relatif Link</a>
Code language: HTML, XML (xml)

atau..

<a href="direktori/relatif.html">Relatif Link</a>
Code language: HTML, XML (xml)

Dan apabila ingin mundur selangkah pada lokasi halaman sekarang ke halaman sebelumnya maka harus dengan menggunakan “../” agar dapat pindah ke halaman pada direktori diatasnya atau ke halaman sebelumnya.

Link absolut adalah link yang mengarah langsung pada website tertentu, dimana sebuah dokumen di kunci pada alamat valid sebuah website, dan tidak tergantun pada direktori lokasi dokumen html berada. Sehingga alamat dapat di gunakan pada lain website selama alamat tersebut masih valid, contoh.

<a href="http://domain.com/absolut.html">Absolut</a>
Code language: HTML, XML (xml)

Sebenarnya sebuah link tidak melulu harus ke halaman lain, pada dasarnya penggunaan atribut href dapat juga di tujukan pada ID sebuah tag, sehingga apabila di klik akan menuju pada id tersebut tidak ke halaman lain meskipun anda juga dapat mengarahkan ke halaman lain dengan atribut ID pada halaman tujuan dan secara otomatis browser akan mengarah ke bagian elemen pemilik ID.

8 Komentar

toko bunga bekasi

toko bunga bekasi

Mantap gan ilmunya please visite Toko Bunga Bekasi
vivian vi

vivian vi

boleh coba disini gk gan ?? terima kasih sudah mengijinkan kunjungi website kami juga di tdpoker ya guys
Theta Indomarga

Theta Indomarga

Balas #114
Fheta Morgika Dealesta

Fheta Morgika Dealesta

Balas #1890
jamtrok mania

jamtrok mania

ok sangat bermanfaat nih buat pemula seperti saya komunitas jamtrok mania sukses selalu gan
Balas #2003
Aris Munandar

Aris Munandar

@jamtrok mania
Terima kasih semoga bermanfaat dan sukses selalu.
Balas #2004
slotgacor2022

slotgacor2022

terima kasih ilmunya sangat penting untuk pemula untuk belajar html seperti saya
Balas #2200
Aris Munandar

Aris Munandar

@slotgacor2022
Terima kasih kembali, semoga bermanfaat.
Balas #2201
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.