Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.
Link di sebuah halaman web bisa berupa internal link dan external link. Internal link, disebut juga dengan inbound link, akan mengarahkan visitor ke halaman lain masih di blog atau website yang sama, sedangkan external link, disebut juga dengan outbound link, akan mengarahkan visitor ke halaman yang ada di blog atau website berbeda.
Internal link dapat meningkatkan otoritas dan peringkat halaman web. Setiap halaman web dari blog atau website bisa saja memiliki peringkat berbeda. Bila Anda memiliki artikel baru, Anda dapat menambahkan link dari artikel baru ini ke artikel relevan lainnya yang sudah mempunyai peringkat lebih tinggi.
Menambahkan external link tidak akan merusak peringkat halaman web sepanjang masih relevan dan menuju ke blog atau website yang memiliki otoritas tinggi. External link akan bernilai bila mengarah ke halaman yang popular dan relevan. External link yang bernilai juga dapat membantu meningkatkan otoritas halaman web dengan menyediakan visitor referensi ke sumber terpercaya, informatif dan berkualitas tinggi.
Cara 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.
Bentuk sederhananya seperti ini:
Secara default, halaman yang ditautkan akan ditampilkan di jendela browser saat ini. Untuk mengubahnya, Anda harus menentukan target lain untuk tautan tersebut.
Atribut target menentukan tempat untuk membuka dokumen terkait.
Atribut target dapat memiliki salah satu dari nilai berikut:
- _self - Default. Membuka dokumen di jendela / tab yang sama seperti yang diklik
- _blank - Membuka dokumen di jendela atau tab baru
- _parent - Membuka dokumen di bingkai induk
- _top - Membuka dokumen di seluruh badan jendela
Gunakan target = "_ blank" untuk membuka dokumen tertaut di jendela atau tab browser baru:
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.
Contoh:
<a href="https://pulalee.blogspot.com" title="Menuju ke blog pulalee">Belajar Komputer</a>
tag rel atribut digunakan untuk menentukan hubungan antara dokumen saat ini dan dokumen terkait. Hanya menggunakan atribut href untuk menggunakan atribut rel
Pengunaan tag = rel lainnya adalah:
| No | Value | Deskripsi |
|---|---|---|
| 1 | alternate | Halaman yang dituju merupakan halaman alternatif yang serupa atau memiliki tujuan yang sama dengan halaman yang saat itu dikunjungi |
| 2 | author | Halaman yang dituju merupakan halaman pribadi pemilik website |
| 3 | bookmark | Halaman yang dituju biasanya halaman yang secara umum banyak dibookmark |
| 4 | help | Halaman yang dituju merupakan halaman ‘help’, yang berisi konten informasi istilah, dan cara, seputar website tersebut |
| 5 | license | Halaman yang dituju merupakan halaman informasi lisensi atau hak cipta website tersebut |
| 6 | next | Dokumen lanjutan dari halaman yang saat itu sedang dibaca/dikunjungi. Biasanya digunakan dalam konteks ‘read more’ |
| 7 | nofollow | Halaman yang dituju tidak memiliki relasi dengan halaman yang saat itu dikunjungi. Biasanya ini untuk link eksternal |
| 8 | noreferrer | Memberitahu browser bahwa halaman yang akan dituju tidak diharuskan mengirim header HTTP |
| 9 | prefetch | Memberitahu browser bahwa halaman yang akan dituju harus di-cache, atau disimpan data-datanya dalam memori browser. (Data yang dimaksudkan disini yaitu file javascript, css, dan file gambar) |
| 10 | prev | Halaman yang dituju merupakan konten sebelumnya dari halaman yang saat itu dikunjungi |
| 11 | search | Halaman yang dituju merupakan halaman fitur pencarian |
| 12 | tag | keyword tag untuk dokumen yang sedang saat itu dikunjungi |
Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).
Contoh:
<h1>Belajar Komputer</h1>
<p>
<a href="https://pulalee.blogspot.com/" style="color:red">Home</a> |
<a href="https://pulalee.blogspot.com/p/sitemap.html" style="color:green">Sitemap</a> |
<a href="#" style="color:deeppink;">Media sosial</a> |
<a href="https://pulalee.blogspot.com/p/e-book-komputer.html" style="color:white;background-color: orange;">E - Book</a>
</p>Link buntu adalah sebuah link yang tidak berhubungan kemana pun juga. Contoh: .
Link yang berhubungan dengan gambar
<img src='URL_GAMBAR' width='LEBAR_GAMBAR' height='TINGGI_GAMBAR' title='JUDUL_GAMBAR' alt='DESKRIPSI GAMBAR' border='none' />
</a>
Membuat Link Anchor
Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.
<h1>Contoh Link Anchor</h1>
<p>Ini adalah contoh link anchor. Coba klik link ini:
<a href="#penutup">Meluncur ke Penutup</a> maka kamu akan dibawa ke bagian penutup dari dokumen ini.
</p>
<h2>Apa itu Jangkar?</h2>
<p> Anchor dalam bahasa indonesia artinya jangkar. Saya yakin kamu pasti pernah melihat jangkar. Fungsi jangkar untuk menahan kapal agar tidak hanyut. Tapi dalam HTML, fungsinya untuk membuat link yang bisa membawa kita meluncur ke tujuan jangkar itu.
</p> <p>
Jangkar atau anchor di HTML tidak hanya bisa digunakan pada satu dokumen saja. Ia juga bisa digunakan untuk membuka dokumen lain, lalu mengaitkan jangkarnya.
</p> <p>
Jangkar biasanya dibuat dengan tanda pagar (#) lalu diikuti dengan nama id dari elemen yang ingin dituju. Contohnya #penutup, maka link yang menggunakan anchor tersebut akan mencari elemen HTML yang memiliki id `penutup` dan membawa kita ke sana. Kira-kira begitulah cara kerjanya.
</p>
<h2 id="penutup">Akhir Kata..</h2>
<p> Ini adalah penutup dari artikel ini, dan coba perhatikan headingnya. Di sana kita menggunakan id="penutup". Maka elemen ini akan menjadi tujuan dari anchor link.
</p> <p&
<a href="#top">Kembali ke Atas!</a>
</p> </body>
Sebuah web atau blog biasanya terhubung dengan whatsapp atau email.
Link CTA (call to action) untuk whatsapp.
Hasilnya:
Chat dengan Saya Link ke email mengunakan mailto : contoh
Tidak ada komentar:
Posting Komentar