Belajar HTML Dasar Part 5 - Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML

 

Selamat datang di sesi pembelajaran HTML dasar part 5! Pada materi kali ini, kita akan menjelajahi pentingnya link dalam pembangunan situs web, memahami cara membuat tautan menggunakan tag <a>, serta mengenal perbedaan antara absolute URL dan relative URL. Kita juga akan membahas cara menggunakan bookmark untuk meningkatkan navigasi dalam halaman web yang panjang.

1. Link dalam HTML

• Link sangat penting untuk navigasi di antara berbagai halaman dalam situs web. Dengan menggunakan tautan, pengguna dapat berpindah antar halaman dengan mudah tanpa harus mengetikkan URL secara manual di bilah alamat.

2. Tag <a>

• Untuk membuat link di HTML, kita menggunakan tag <a> (anchor).
• Attribute href: Ini menunjukkan URL tujuan link. Konten di dalam tag <a> dapat berupa teks atau gambar.
• Attribute target: Ini menentukan di mana halaman baru akan dibuka:
  • target="_self": Halaman akan dibuka di tab yang sama (default).
  • target="_blank": Halaman akan dibuka di tab baru.
• Attribute title: Menyediakan informasi tambahan yang muncul ketika mouse berada di atas link.

3. Absolute URL

• Absolute URL adalah alamat lengkap yang mengarah ke suatu halaman, termasuk protokol (http:// atau https://), nama domain, dan jalur file.
• Contoh: https://youtube.com.
• Kelebihan dari absolute URL adalah memungkinkan kita untuk menghubungkan ke situs di luar domain kita.

contoh penerapan dari materi  1-3 : 

4. Relative URL

• Relative URL adalah alamat yang relatif terhadap halaman saat ini, yang tidak mencantumkan nama domain.
• Terdapat dua format:
  • Tanpa /: Contoh, hello.html menuju http://127.0.0.1/belajar-link/hello.html.
  • Dengan /: Contoh, /hello.html menuju http://127.0.0.1/hello.html.
  • Menggunakan folder: Contoh, ss/hello.html menuju http://127.0.0.1/belajar-link/ss/hello.html.
• Relative URL sangat berguna untuk menjaga konsistensi ketika berpindah antar halaman dalam situs yang sama.

contoh penerapan dari materi  4 :

5. Bookmark

• Bookmark memungkinkan pengguna untuk melompat ke bagian tertentu dari halaman yang panjang.
• Menggunakan # di dalam href, kita bisa membuat link yang langsung menuju elemen HTML dengan id tertentu.
• Contoh: Jika kita memiliki link seperti bookmark.html#konten1, saat mengklik link tersebut, halaman akan melompat ke elemen dengan id="konten1".

contoh penerapan dari materi  5 : 

Dengan pemahaman tentang link, absolute dan relative URL, serta penggunaan bookmark, kini kamu dapat menciptakan pengalaman navigasi yang lebih baik untuk pengguna situs web kamu. Semoga materi ini bermanfaat dan bisa diterapkan dalam proyek-proyek web yang akan datang. 

Saya Hummam Zhofari pamit undur diri Assalamualaikum Warahmatulllahi wabarakatuh.