SIAP – Sistem Informasi Anak Pintar

Pengenalan HTML 9
Membuat Link Internal dan External

oleh: Suryo Adhy Chandra, ST

Kalian pernah lihat sebuah website yang ketika ada kalimat, dan mouse dilewatkan ke tulisan tersebut akan menjadi jari yang menunjuk, dan ketika diklik maka akan muncul halaman lain? Nah itulah yang namanya link, sebagai contoh saya buat link ini untuk mengarahkan halaman ke google.com.

Website dengan link

Untuk membuat link kita bisa menggunakan tag <a target="_blank" href="https://contoh.com">tulisan sebagai penanda</a>

Kita bahas 1 per 1 komponen utama yang harus ada:

href akan mengarahkan kita ke halaman website yang dituju, kita bisa tuliskan dengan menggunakan alamat website lengkap: misalnya seperti contoh di atas saya masukkan:
```
<a target="_blank" href="https://google.com">
    google.com
</a>
```
target itu akan menandakan setelah link tersebut diklik, halaman yang akan ditampilkan akan menggunakan halaman utama (parent) atau halaman kosong (blank), karena itu kita bisa isi dengan:
- _blank menuju ke halaman baru
- _parent atau kita tidak usah isikan target (jadi atribut target tadi kita tidak tuliskan) otomatis akan mengganti halaman utama dengan halaman yang dituju.
tulisan sebagai penanda merupakan tulisan sembarang yang memberi informasi mengenai link yang dituju, kita bisa menuliskan alamat websitenya atau tulisan apapun seperti pada contoh saya membuat penanda dengan menuliskan google.com.

sampai di sini apakah sudah mengerti? :-)

Kita gali lebih dalam yah apa yang bisa kita lakukan dengan tag anchor atau <a></a> ini.

Ups tadi kalian liat ketika kita klik link contoh ini dia akan mengarahkan kita ke atas? Itu yang dinamakan Internal Link kita bahas ya seperti apa biasanya yang dilakukan ketika kita punya internal link.

Link terbagi menjadi 2, yaitu internal link dan external link.

Internal Link merupakan link yang akan melakukan redirect atau mengarahkan kita ke suatu penanda id yang ada di dalam website kita. Sebagai contoh saya akan membuat penanda dengan nama id atas untuk paragraf yang paling atas dan saya akan buat penanda dengan nama id bawah untuk paragraf paling bawah.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <p>
            <a href="#bawah">pergi ke bawah</a>
        </p>
        <p id="atas">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste ipsa beatae neque dignissimos qui? Nobis vel itaque ipsum tempora! Hic, omnis consectetur! Dignissimos recusandae incidunt dolorem hic magnam, doloremque ipsam!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa quod quis, quidem, quia qui nulla doloribus voluptatem amet iure ullam atque ut rerum incidunt voluptate temporibus, perspiciatis iste maxime!
        </p>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ullam reiciendis quia totam asperiores quisquam laborum necessitatibus velit illo, fuga cum placeat rem voluptates, voluptatibus perferendis corrupti dicta dolorem? Quo.
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi omnis animi quaerat rem adipisci? Minima, fugit harum praesentium quae eius ipsum adipisci. Maxime doloribus dignissimos temporibus sunt rem ut deserunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel in quaerat, necessitatibus temporibus voluptatem eum facilis? Magni deleniti, mollitia magnam aspernatur dicta veritatis iste sunt incidunt animi eius facilis.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut similique maxime ex recusandae? Expedita, tempora fugit tenetur odit iste ducimus? Consequuntur esse necessitatibus numquam recusandae, alias maxime id modi debitis?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae pariatur qui similique libero delectus aspernatur, quaerat minima, adipisci ea labore placeat, necessitatibus deleniti consequatur eaque unde laborum? Rerum, dolores nulla!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe repellendus odio iure ipsam enim nulla asperiores excepturi. Saepe enim ratione, est aliquid optio sed, quisquam molestiae inventore, placeat nobis facere?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repellat, totam natus labore fugiat quidem repudiandae nostrum error. Aut corrupti recusandae necessitatibus molestiae tempore! Officia illo quia at accusamus sit.
        </p>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos laudantium dolorum hic commodi! Eligendi quos quidem at hic, non quia eum vel? Voluptatem rerum quae ullam odit, maiores ipsa non?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum saepe vel nihil, quibusdam expedita soluta nostrum ipsam id odit accusamus in quod eius sit voluptatibus maiores, nobis facilis sunt! Earum?
        </p>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, quia nemo deleniti omnis provident labore temporibus exercitationem aperiam laboriosam totam blanditiis quam molestias reiciendis tempora, unde voluptatibus impedit amet ipsum.
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae sit magni in, odio, tempora animi aliquam voluptatem veritatis voluptatibus, accusantium dicta? Deleniti voluptates voluptas tempora neque reprehenderit est magni facilis.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint numquam omnis eos doloremque perferendis animi, neque ipsam eveniet at debitis vero culpa? In atque debitis sapiente hic, rem saepe? Unde?
        </p>
        <p id="bawah">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illum, ipsam reiciendis ea consequatur ducimus quos odio, officia inventore placeat eius minus est maiores totam eaque omnis, nobis vel.
        </p>
        <p>
            <a href="#atas">pergi ke atas</a>
        </p>
    </body>
    </html>

Coba copy dan paste ke dalam aplikasi coding (vscode) dan jalankan, kira-kira yang akan tertampil adalah seperti pada contoh di bawah ini.

pergi ke bawah

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste ipsa beatae neque dignissimos qui? Nobis vel itaque ipsum tempora! Hic, omnis consectetur! Dignissimos recusandae incidunt dolorem hic magnam, doloremque ipsam!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa quod quis, quidem, quia qui nulla doloribus voluptatem amet iure ullam atque ut rerum incidunt voluptate temporibus, perspiciatis iste maxime!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ullam reiciendis quia totam asperiores quisquam laborum necessitatibus velit illo, fuga cum placeat rem voluptates, voluptatibus perferendis corrupti dicta dolorem? Quo.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi omnis animi quaerat rem adipisci? Minima, fugit harum praesentium quae eius ipsum adipisci. Maxime doloribus dignissimos temporibus sunt rem ut deserunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus vel in quaerat, necessitatibus temporibus voluptatem eum facilis? Magni deleniti, mollitia magnam aspernatur dicta veritatis iste sunt incidunt animi eius facilis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut similique maxime ex recusandae? Expedita, tempora fugit tenetur odit iste ducimus? Consequuntur esse necessitatibus numquam recusandae, alias maxime id modi debitis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae pariatur qui similique libero delectus aspernatur, quaerat minima, adipisci ea labore placeat, necessitatibus deleniti consequatur eaque unde laborum? Rerum, dolores nulla!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe repellendus odio iure ipsam enim nulla asperiores excepturi. Saepe enim ratione, est aliquid optio sed, quisquam molestiae inventore, placeat nobis facere?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repellat, totam natus labore fugiat quidem repudiandae nostrum error. Aut corrupti recusandae necessitatibus molestiae tempore! Officia illo quia at accusamus sit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos laudantium dolorum hic commodi! Eligendi quos quidem at hic, non quia eum vel? Voluptatem rerum quae ullam odit, maiores ipsa non?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum saepe vel nihil, quibusdam expedita soluta nostrum ipsam id odit accusamus in quod eius sit voluptatibus maiores, nobis facilis sunt! Earum?

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, quia nemo deleniti omnis provident labore temporibus exercitationem aperiam laboriosam totam blanditiis quam molestias reiciendis tempora, unde voluptatibus impedit amet ipsum.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae sit magni in, odio, tempora animi aliquam voluptatem veritatis voluptatibus, accusantium dicta? Deleniti voluptates voluptas tempora neque reprehenderit est magni facilis.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint numquam omnis eos doloremque perferendis animi, neque ipsam eveniet at debitis vero culpa? In atque debitis sapiente hic, rem saepe? Unde?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illum, ipsam reiciendis ea consequatur ducimus quos odio, officia inventore placeat eius minus est maiores totam eaque omnis, nobis vel.

pergi ke atas

Catatan:
penamaan id dalam 1 halaman tidak boleh ada yang sama, karena akan membuat halaman website kita menjadi error ketika harus menggunakan id tersebut.

External Link biasa kita pakai untuk menampilkan referensi atau akan membuka halaman lain yang tidak mengubah halaman utama, seperti pada contoh di atas kita akan mengarahkan halaman ke google.com. Jadi penggunaan untuk external link tidak menggunakan tanda pagar # seperti pada internal link, akan tetapi langsung menggunakan alamat yang dituju.

External link ini bisa mengarahkan kita ke halaman:
- file html kita dengan mengetikkan href="html1.html" misalnya.
- alamat html dengan mengetikkan href="https://www.google.com"
Dan tentu saja jangan lupa targetnya kita harus set sesuai penjelasan di atas tadi.

Yuk Kita Mulai Berlatih!

← Kembali Ke Daftar Pelajaran HTML