Ads by Yasya El Hakim
Link pada HTML

Link pada HTML dapat kalian temukan pada semua halaman Web. Link berguna untuk berpindah dari satu halaman ke halaman lain.

Link (Hyperlink) pada HTML

Link pada HTML adalah Hyperlink
Kalian dapat mengeklik Link tersebet dan berpindah ke dokumen lain.
Ketika kalian mengarahkan mouse ke arah Link, maka Cursor akan berubah menjadi gambar tangan.

Catatan: Link tidak hanya berupa teks. Link dapat berupa gambar atau elemen HTML lainnya.

Penulisan Link pada HTML

Kalian dapat menggunakan Link dengan tag <a>:
<a href="URL">Ini Link</a>

Contoh

<a href="https://elcreativeacademy.blogspot.com/">Kunjungi EL Creative Organization</a> 

Atribut href merupakan tujuan/destinasi alamat (https://elcreativeacademy.blogspot.com/).
Yang akan terlihat pada Browser adalah teks saja (Kunjungi EL Creative Organization).
Jika kalian mengeklik Link tersebut, maka kalian akan pindah ke alamat URL yang ditentukan.

Catatan: Jika kalian tidak menggunakan garis miring (/) diakhir URL, mungkin kalian akan mendapatkan dua Request dari Server. Biasanya, garis miring diakhir URL akan ditambahkan secara otomatis dan membuat Request baru.

Link Lokal

Contoh yang sudah saya berikan diatas merupakan Link dengan menggunakan URL Web.
Link Lokal (Link pada Web yang sama) dapat kalian tulis tanpa menggunakan URL Relatif (tanpa https://www...).

Contoh

<a href="/p/tentang.html">Link HTML</a> 

Warna Link pada HTML

Secara Default, sebuah link dapat terlihat pada semua Browser:
Link yang belum dikunjungi memiliki garis bawah dan berwarna biru.
Link yang sudah dikunjungi memiliki garis bawah dan berwarna ungu.
Link yang sedang aktif memiliki garis bawah dan berwarna merah.

Kalian dapat mengubah warna tersebut dengan menggunakan CSS.

Contoh

<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style> 

Link juga dapat dibuat seperti tombol dengan menggunakan bantuan CSS.

Ini adalah Link

Untuk mempelajari lebih lanjut tentang CSS, kalian bisa melihat Tutorial Lengkap CSS.

Link dan Atribut target

Atribut target dapat kalian gunakan untuk menentukan dimana dokumen link akan terbuka.
Atribut target memiliki salah satu nilai berikut:
  • _blank - Untuk membuka link pada jendela atau tab baru.
  • _self - Untuk membuka link pada jendela atau tab yang sama (Default).
  • _parent - Untuk membuka link pada Frame yang ditentukan.
  • framename - Untuk membuka link dengan nama Frame yang ditentukan.

Contoh

Berikut adalah contoh untuk membuka link pada jendela atau tab baru:
<a href="https://elcreativeacademy.blogspot.com/" target="_blank">Kunjungi EL Creative Academy</a> 

Gambar sebagai Link

Sangatlah umum untuk menggunakan gambar sebagai Link.

Contoh

<a href="https://elcreativeacademy.blogspot.com/">
<img src="https://1.bp.blogspot.com/-2T7bcPgd26o/XWoKitlsB7I/AAAAAAAAGbU/LpxigxrHGSwp7RxjG5gYfB_UsEQEwiazgCLcBGAs/s1600/apple-icon-120x120.png" alt="Tutorial HTML" style="width:42px;height:42px;border:0;">
</a> 

Catatan: Kami menambahkan border:0; untuk mencegah Browser (seperti Internet Explorer 9 kebawah) dalam menambilkan garis disekitar gambar. (Ketika menggunakan gambar sebagai link).

Judul Link

Kalian dapat menggunakan atribut title untuk memberikan informasi tambahan tentang sebuah elemen. Informasi tersebut dapat kalian lihat jika kalian mengarahkan mouse kearah elemen yang memiliki informasi tambahan.

Contoh

<a href="https://elcreativeacademy.blogspot.com/" title="Kunjungi Kami">EL Creative Academy</a> 

Bookmark Link pada HTML

Bookmark pada HTML dapat kita gunakan untuk mengarahkan bagian yang ditentukan pada sebuah halaman Web.
Bookmark akan sangat berguna jika halaman Web terlalu panjang.
Untuk membuat Bookmark, kalian harus membuat Bookmark terlebih dahulu, kemudian masukkan link kedalamnya.
Ketika Link tersebut di klik, halaman akan otomatis Scroll ke lokasi yang dituju.

Contoh

Pertama, buat sebuah Bookmark dengan atribut id:
<h2 id="B4">Bagian 4</h2>

Kemudian, tambahkan link ke Bookmark ("Ke Bagian 4"), pada halaman yang sama.
<a href="#B4">Ke Bagian 4</a>

Atau, tambahkan link kedalam Bookmark ("Ke Bagian 4"), dari halaman lain.

Contoh
<a href="#B4">Ke Bagian 4</a>

Ringkasan

  • Gunakan elemen <a> untuk menentukan link.
  • Gunakan atribut href untuk menentikan alamat link.
  • Gunakan atribut target untuk menentukan dimana link akan terbuka.
  • Gunakan elemen <img> (didalam <a>) untuk menggunakan gambar sebagai Link.
  • Gunakan atribut id (id="nilai") untuk menentukan Bookmark pada halaman.
  • Gunakan atribut href (href="#nilai") untuk menentukan tujuan Bookmark.

Sebelumnya: Tutorial Lengkap HTML: CSS pada HTML - Bagian 13
Selanjutnya: Tutorial Lengkap HTML: Gambar pada HTML - Bagian 15
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya