Link

BIKIN BALIK

15 Apr, 2023

Apa itu Link ?

Link dalam HTML adalah sebuah elemen yang digunakan untuk membuat tautan atau hyperlink ke halaman web atau sumber daya lainnya, seperti gambar, video, dokumen, atau file lainnya.

Ketika pengguna mengklik tautan tersebut, halaman atau sumber daya yang ditautkan akan ditampilkan di halaman web yang sama atau di jendela atau tab browser yang baru.

Fungsi Link di Web

Saat membuat Web, biasanya kita akan membuat banyak sekali halaman HTML.

Untuk berpindah dari satu halaman ke halaman lain, kita biasanya jarang melakukannya secara manual dengan cara mengetikkannya di search bar Web Browser.

HTML memiliki fitur Link (Tautan), dimana kita bisa meng-klik Link tersebut, dan berpindah ke halaman HTML lain.

Link tidak harus dalam bentuk Text, Link juga bisa dalam bentuk Gambar misalnya (yang akan kita bahas di materi Image).

Tag a

Untuk membuat Link di HTML, kita bisa menggunakan tag a, isi konten tag a adalah isi dari tampilan Link, bisa Text atau yang lainnya.

Tag a memiliki attribute href, yang berisi lokasi tujuan Link tersebut dan Tag a juga memiliki attribute target, yang digunakan sebagai target jendela Web Browser, kita bisa gunakan nilai :
target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah bawaan default target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser

Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse berada di atas Link tersebut.

<html>
    <body>
        <h1>Belajar HTML Link</h1>
        <ul>
            <li><a href="https://www.youtube.com">Youtube</a></li>
            <li><a href="http://www.facebook.com" target="_blank">Facebook</a></li>
            <li><a href="http://www.instagram.com">Instagram</a></li>
            <li><a href="https://www.bikinbalik.com" target="_blank">Bikin Balik</a></li>
        </ul>
    </body>
</html>

Absolute URL

Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute URL, Absolute URL merupakan alamat lengkap sebuah tujuan Link.

Dalam absolute URL, kita wajib menuliskan seluruh detail domain dan halaman yang dituju, misal :

https://www.facebook.com/login/
https://www.instagram.com/accounts/login/
https://chat.openai.com/auth/login

Kelebihan menggunakan Absolute URL adalah, kita bisa membuat Link menuju domain yang berbeda dengan website yang kita buat.

Relative URL

Relative URL adalah lokasi href dimana tetap menggunakan domain website saat ini, Relative URL memiliki dua format, bisa diawali dengan /, atau tidak diawali dengan /.

Misal sekarang kita berada di halaman http://127.0.0.1/belajar-link/index.html , lalu kita memiliki link sebagai berikut :

hello.html, artinya akan menuju ke http://127.0.0.1/belajar-link/hello.html
/hello.html, artinya akan menuju ke http://127.0.0.1/hello.html
pzn/hello.html, artinya akan menuju ke http://127.0.0.1/belajar-link/pzn/hello.html

<html>
    <body>
        <h1>Belajar Relative Link</h1>
        <ul>
            <li><a href="hello.html">hello.html</a></li>
            <li><a href="bikin-balik/index.html">bikin-balik/index.html</a></li>
            <li><a href="/heading.html">/heading.html</a></li>
        </ul>
    </body>
</html>

Bookmark

Pada kasus halaman web yang sangat panjang, ada bagusnya kita menggunakan Bookmark.

Bookmark adalah link yang bisa digunakan untuk menampilkan HTML element dengan id tertentu, Bookmark menggunakan # pada href, misal jika kita menggunakan index.html#angga, artinya ketika membuka halaman index.html, maka Web Browser akan otomatis menampilkan pada posisi HTML Element dengan id angga.

Jika kita ingin membuat link di halaman HTML itu sendiri, kita bisa langsung buat Link dengan href langsung berisi #bookmark nya

Apa itu Bookmark Pada Link ?

Bookmark pada link adalah fitur yang memungkinkan pengguna untuk menyimpan tautan atau hyperlink ke halaman web atau sumber daya lainnya yang sering mereka kunjungi atau yang ingin mereka simpan untuk digunakan di kemudian hari.

Dengan menggunakan fitur bookmark, pengguna dapat mengakses halaman web favorit mereka dengan cepat dan mudah tanpa harus mengingat atau mengetik URL yang panjang.

Dalam HTML, bookmark pada link dapat dibuat dengan menggunakan atribut id. Atribut id digunakan untuk memberikan nama atau identitas unik pada elemen HTML tertentu.

Dengan memberikan atribut id pada elemen tertentu, kita dapat membuat tautan yang merujuk ke elemen tersebut di halaman yang sama.

Bookmark di Satu Halaman Web

<html>
    <body>
        <h1>Daftar Isi</h1>
        <ul>
            <li><a href="#judul1">Judul 1</a></li>
            <li><a href="#judul2">Judul 2</a></li>
            <li><a href="#judul3">Judul 3</a></li>
        </ul>

        <h1 id="judul1">Judul 1</h1>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>

        <h1 id="judul2">Judul 2</h1>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>

        <h1 id="judul3">Judul 3</h1>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>
        <p>Artikel Panjang</p>

    </body>
</html>

Bookmark di Beda Halaman

<html>
    <body>
        <h1>Daftar Isi</h1>
        <ul>
            <li><a href="bookmark.html#judul1 target="_blank"">Judul 1</a></li>
            <li><a href="bookmark.html#judul1 target="_blank"">Judul 2</a></li>
            <li><a href="bookmark.html#judul1 target="_blank"">Judul 3</a></li>
        </ul>
    </body>
</html>