Belajar Anchor Element dan HTML Attributes (Untuk Membuat Hyperlink di Website)

Halo teman-teman!

Setelah sebelumnya kita belajar tentang nested list dan indentasi, kali ini kita akan mengenal anchor element yang digunakan untuk membuat hyperlink. Kita juga akan mempelajari apa itu HTML attributes untuk menambahkan informasi ekstra ke elemen HTML. Yuk, kita mulai!

Apa Itu Anchor Element?

Anchor element adalah elemen HTML yang digunakan untuk membuat hyperlink. Dengan hyperlink, kita bisa membuat teks yang ketika diklik akan membawa pengguna ke halaman lain.

Struktur dasar anchor element:

<a href="URL">Teks Link</a>

<a>: Tag pembuka anchor.
href: Attribute untuk menentukan URL tujuan link.
Teks Link: Teks yang bisa diklik oleh pengguna.
</a>: Tag penutup anchor.

Contoh Penggunaan Anchor Element

1. Link ke Website Lain

Berikut contoh anchor element yang mengarahkan pengguna ke sebuah website:

<a href="https://www.google.com">Kunjungi Google</a>

Hasil di browser:

Teks "Kunjungi Google" akan tampil sebagai link biru dengan garis bawah.
Ketika diklik, link tersebut akan membawa pengguna ke situs Google.

2. Menambahkan Anchor ke List

Anchor element juga bisa digunakan di dalam list. Contoh:

<ol>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.youtube.com">YouTube</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
</ol>

Hasil di browser:

Google
YouTube
Wikipedia

Apa Itu HTML Attributes?

HTML attributes adalah informasi tambahan yang diberikan pada elemen HTML untuk menentukan perilaku atau properti tertentu.
Struktur umum attribute:

<elemen nama-attribute="nilai">Konten</elemen>

Contoh pada anchor element:

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>

href: Menentukan URL tujuan link.
target="_blank": Membuka link di tab baru.

Proyek: Website Favoritku

Kita akan membuat website sederhana yang berisi daftar 5 situs favorit kalian, lengkap dengan hyperlink.

Langkah 1: Struktur Dasar HTML

Buat file baru bernama index.html, lalu tambahkan struktur dasar berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Website Favoritku</title>
</head>
<body>
    <h1>Website Favoritku</h1>
</body>
</html>

Langkah 2: Tambahkan Ordered List

Buat ordered list untuk daftar website favorit:

<ol>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.youtube.com">YouTube</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
    <li><a href="https://www.github.com">GitHub</a></li>
    <li><a href="https://www.medium.com">Medium</a></li>
</ol>

Langkah 3: Tambahkan Attribute Tambahan

Tambahkan target="_blank" agar link terbuka di tab baru:

<li><a href="https://www.google.com" target="_blank">Google</a></li>

Fitur Tambahan: Mulai Nomor dari 5

Kita bisa menggunakan attribute start untuk memulai ordered list dari nomor tertentu. Contoh:

<ol start="5">
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.youtube.com">YouTube</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
</ol>

Hasilnya, daftar akan dimulai dari nomor 5.

Hasil Akhir Kode

Berikut kode lengkapnya:

<!DOCTYPE html>
<html>
<head>
    <title>Website Favoritku</title>
</head>
<body>
    <h1>Website Favoritku</h1>
    <ol start="5">
        <li><a href="https://www.google.com" target="_blank">Google</a></li>
        <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
        <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
        <li><a href="https://www.github.com" target="_blank">GitHub</a></li>
        <li><a href="https://www.medium.com" target="_blank">Medium</a></li>
    </ol>
</body>
</html>

Kesimpulan

Anchor element dan HTML attributes sangat penting untuk membuat website interaktif dan fungsional. Dengan memahaminya, kalian bisa membuat hyperlink yang rapi dan sesuai kebutuhan.

Di pelajaran berikutnya, kita akan belajar tentang Image Elements untuk menambahkan gambar ke website. Sampai jumpa di pelajaran berikutnya! 😊