Membuat tautan HTML adalah salah satu elemen terpenting dalam membuat situs web. Dengan adanya link tersebut, kita sebagai pengguna akan terbantu untuk berpindah ke halaman lain di domain tersebut maupun domain lainnya. Bahkan, tautan bisa disisipkan dalam teks atau gambar
Jika teks atau gambar sudah disisipkan pada link tersebut, maka saat diklik akan mengarahkan kita ke link yang sudah diatur oleh developer. Itu adalah fungsi tautan yang paling penting. Dalam panduan belajar HTML ini, kita akan membuat link pada sebuah website
Daftar isi
Cara Membuat Link HTML di Website
Tautan atau hyperlink ditulis menggunakan tag sebagai pembuka kemudian ditutup menggunakan tag. Berdasarkan jenisnya, link dibagi menjadi 2 yaitu
- External Link (Absolute) = Link ini adalah link yang diarahkan ke halaman website dengan domain yang berbeda. Penulisan link ini untuk menyebutkan alamat website. Contoh
Klik di sini atau Klik di sini - Internal Link (Relative) = Berbeda dengan external link, internal link atau yang sering disebut dengan relative link berfungsi untuk mengarahkan ke suatu halaman website dalam satu domain. Biasanya tulisan internal link ini tidak menggunakan alamat, meskipun bisa dicantumkan alamatnya. Contoh. atau
Klik disini
Untuk link Klik disini artinya kita langsung ke halaman kajian. html di folder panduan. Contohnya ada pada gambar di bawah ini
Selain itu, Anda juga dapat menggunakan '. /' yang berarti keluar satu tingkat dari folder pemanggil tautan. Jadi, file di dalam tag berada di luar file yang memanggilnya. Seperti contoh di bawah ini
Atribut Pada Tag Untuk Membuat Link HTML
Ada beberapa atribut penting yang perlu diketahui saat ingin membuat link HTML, berikut beberapa atributnya
- href. Atribut href ini berfungsi untuk menentukan link yang akan diarahkan ke tag tersebut. Atribut ini harus ada ketika Anda ingin membuat link pada sebuah website
- target. Terdapat berbagai nilai pada atribut ini yaitu. _kosong dan _diri. Penjelasannya ada di bawah ini
- judul. Singkatnya, atribut ini akan menghasilkan tooltip yang berisi nilai dari atribut title itu sendiri ketika tag mengalami aksi hover (ketika dilewatkan oleh mouse).
Atribut Target Pada Tag
Atribut target ini memiliki 4 nilai yaitu _self, _blank, _parent, dan _top. Namun, yang sering digunakan adalah blank. Penjelasannya adalah sebagai berikut
- _diri sendiri. Buka halaman situs web di tab ini
- _kosong. Membuka halaman situs web di tab baru
- _induk. Buka halaman situs web pada bingkai induk
- _atas. Buka halaman situs web dan batalkan semua bingkai
Untuk nilai _parent dan _top sudah tidak digunakan lagi di HTML5. Jadi, Anda tidak perlu menggunakan kedua nilai tersebut. Hal itu dikarenakan website tersebut tidak menggunakan frameset lagi. Atribut ini tidak wajib, namun jika tidak diisi maka defaultnya adalah _self. Tulisannya adalah sebagai berikut
[bahasa kode sumber =”polos”]
<a href="https. //bekerja lebih keras. com"
[/Kode sumber]
Ketika Anda mengklik teks "Klik di sini" maka halaman website menjadi lebih aktif. com akan terbuka di tab baru. Itu karena Anda menggunakan _blank untuk mengisi atribut target
Membuat Tautan Gambar dalam HTML
Oh iya, kamu juga bisa menjadikan gambar sebagai link. Jadi, Anda bisa membuat acara saat gambar diklik yang akan mengarah ke halaman yang ditentukan
Ketika Anda membaca artikel tentang cara menampilkan gambar dalam HTML, Anda akan tahu caranya. Jika Anda belum mengetahuinya, sebaiknya Anda membaca artikel tersebut sebelum melanjutkan ke artikel ini. Berikut kode programnya
[bahasa kode sumber =”polos”]
<a href="https. //bekerja lebih keras. com" . jpg"
[/Kode sumber]
Maka hasilnya adalah sebagai berikut
Membuat Link Mati di HTML
Saat kita membuat link dengan mengisikan atribut href dengan alamat website, kali ini berbeda. Untuk dapat membuat link mati, Anda dapat mengisi atribut href dengan tanda lindung nilai misalnya
[bahasa kode sumber =”polos”]
<a href="#top">Contoh</a>
[/Kode sumber]
Jadi, jika Anda mengklik teks "Contoh" maka Anda akan diarahkan ke area dengan id=top. Anda dapat langsung memeriksa dengan mengklik teks "Contoh" di sebelah ini.
Nah itulah tutorial cara membuat link HTML sederhana. Anda bisa berkreasi seperti itu. Jika ada yang ingin ditanyakan bisa tulis di kolom komentar