Iklan bawah header

Belajar HTML Part 8 - Cara Membuat Link di HTML

cara membuat link di html

Dalam tutorial kali ini kita akan membahas tentang bagaimana membuat link di html, sebelum masuk ke dalam pembahasan materi kita akan bahas terlebih dahulu pengertian link.

Apa itu link?

Apa jadinya web tanpa ada link?

Tentunya hal itu akan menyulitkan pengunjung, karena mereka harus mengetik sendiri alamat URL dari website yang ingin dikunjunginya di search engine.

Contohnya:

Saat kita ingin membuka halaman about pada sebuah website, maka kita harus harus mengetik "https://www.offaweb.com/p/about.html" di search engine.

Lalu jika kita ingin beralih dari halaman tersebut ke halaman contact, maka kita harus mengetik lagi "https://www.offaweb.com/p/contact.html" di search engine.

Ribetkan!!

Maka dari itu, kita membutuhkan link untuk menghubungkan suatu halaman web ke halaman web lainnya.

Nah! untuk itu, pada tutorial kali ini kita akan belajar membuat link di HTML.

Mari kita bahas..

Apa itu Link?

Link atau hyperlink adalah suatu cara untuk menghubungkan antara satu dokumen ke dokumen yang lainnya pada HTML. Tujuan dari link ini yaitu untuk membuat sebuah teks atau gambar yang ketika diklik, nantinya akan bisa membuka halaman lain sesuai dengan alamat URL yang diberikan.

Tidak hanya itu, link juga mempunyai fungsi lainnya seperti scroll top, dowload file, menjalankan fungsi javascript, dan lainnya.

Cara Membuat Link di HTML

Untuk membuat link pada HTML, kita bisa menggunakan tag <a> (anchor). Setiap tag <a> setidaknya harus memiliki sebuah atribut href. Dimana atribut href ini digunakan untuk menentukan alamat URL tujuan dari link.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat Link di HTML</title>
    </head>
    <body>
         <h1>Membuat Link di HTML</h1>
         <p>
             Untuk lebih lengkapnya silahkan buka: <a href="about.html">about</a>
         </p>
    </body>
</html>

Hasilnya:

link di HTML

Link akan ditampilkan dengan warna biru sesuai dengan warna default link dari setiap browser.

Jenis-jenis Link pada HTML

Berdasarkan pada alamat URL yang dituju, link dibagi menjadi dua jenis yaitu,

1. Internal link adalah link yang di alihkan menuju ke domain atau halaman web itu sendiri. Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan halaman yang lainnya dalam satu website.

2.Eksternal link adalah link yang dialihkan menuju ke domain atau halaman website lain. Eksternal link digunakan untuk membuka domain atau halaman website lain. Misalnya seperti: membuka youtube, membuka chat whatsapp, membuka halaman facebook, dan lainnya.

Atribut untuk Link

Selain dari atribut href, kita juga bisa menambahkan atribut lainnya pada link, seperti: target, title, rel, style, dan lainnya.

1. Atribut target

Atribut target digunakan untuk menentukan target dari pembukaan link. Ada beberapa nilai dari atribut target yang biasa digunakan:

  • name-frame akan membuka link pada <iframe> dengan nama tertentu
  • self akan membuka link pada halaman itu sendiri
  • parent membuka link pada frame induk
  • blank akan membuka link pada tab atau jendela baru
  • top menuju bagian paling atas halaman

2. Atribut title

Atribut title digunakan untuk membuat tooltips. Tooltips merupakan informasi tambahan yang akan tampil pada saat link disentuh oleh pointer.

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel