Membuat Anchor Link di Website
Materi Pelatihan 3
Alokasi Waktu: 2 JP
(Penguasaan materi, latihan, dan tugas membuat semua anchor links
pada daftar isi Perencanaan Pembelajaran Digital Terintegrasi)
A
Anchor Link adalah tautan yang berfungsi untuk mengarahkan pengguna secara langsung ke bagian tertentu dalam halaman yang sama. Dengan menggunakan Anchor Link, pengguna tidak perlu melakukan scrolling secara manual untuk mencari bagian atau materi yang diinginkan.
Contoh penggunaan Anchor Link dapat dilihat pada bagian Daftar Isi berikut:
Daftar Isi
- Kelas X: Semester 1, Semester 2
- Kelas XI: Semester 1, Semester 2
- Kelas XII: Semester 1, Semester 2
Pada contoh tersebut, setiap tulisan Semester 1 dan Semester 2 dapat dibuat menjadi Anchor Link. Misalnya, ketika pengguna mengklik Semester 1 pada bagian Kelas X, halaman akan secara otomatis berpindah ke bagian materi Kelas X Semester 1 yang terdapat di bawah pada halaman yang sama.
Demikian pula, jika pengguna mengklik Semester 2, halaman akan langsung mengarah ke bagian materi Kelas X Semester 2. Pengguna dapat dengan mudah berpindah ke bagian lain sesuai dengan pilihan yang tersedia dalam daftar isi.
Dengan demikian, Anchor Link sangat bermanfaat untuk digunakan pada halaman yang memiliki banyak konten atau materi, seperti Modul Ajar Digital Terintegrasi. Penggunaan Anchor Link membuat daftar isi menjadi lebih interaktif, memudahkan navigasi, serta membantu pengguna menemukan materi yang diperlukan dengan lebih cepat dan efisien.
Selanjutnya, untuk membuat Anchor Link silahkan ikuti langkah-langkah berikut ini:
A. Membuat Anchor Target/Bagian yang Dituju
- Tentukan bagian yang dituju (anchor target), misalnya, kita akan menghubungkan tulisan Kelas X Semester 1 pada daftar isi dan bagian Kelas X Semester 1 pada laman bersangkutan, maka kita harus menuju ke bagian target tersebut. Lihat contoh pada gambar 2 di bawah ini.
2. Seperti terlihat pada gambar 2 di atas, bagian yang dituju (anchor target) adalah Sem 2. Maka kita harus memblok kata Sem 2. Lalu pada toolbar, klik menu Insert dan klik Anchor seperti yang terlihat pada gambar 3 di bawah ini.
3. Selanjutnya akan muncul sebuah pop up dan sebuah kotak pada pop up tersebut. Isikan kata, misalnya KelasXSem2, pada kotak tersebut sebagai Id dari teks yang akan dituju, lalu klik OK. Lihat gambar 4 di bawah ini.
4. Selanjutnya tampilan anchor target-nya dapat dilihat pada gambar 5 di bawah ini. Dan pembuatan anchor target pun selesai.
B. Membuat Ancor Link
Setelah membuat Anchor Target, langkah selanjutnya adalah membuat Anchor Link yang akan mengarahkan pengguna ke bagian tersebut.
Pada contoh ini, tulisan “Semester 2” pada bagian Daftar Isi sudah tersedia. Oleh karena itu, kita hanya perlu menambahkan tautan pada tulisan tersebut agar ketika diklik, pengguna langsung diarahkan ke bagian “Sem 2” yang telah dibuat sebagai anchor target.
1. Blok tulisan yang akan diberi Anchor Link Pada bagian Table of Contents/Daftar Isi, blok tulisan “Semester 2”, dan beri warna, misalnya biru. Lihat gambar 6 di atas. Tulisan tersebut akan menjadi teks yang dapat diklik untuk mengarahkan pengguna ke bagian “Sem 2”.
2. Setelah tulisan “Semester 2” diblok, klik ikon Link pada toolbar editor. Selanjutnya akan muncul kotak untuk memasukkan alamat tautan. Masukkan Id dari Anchor Target. Pada bagian sebelumnya, anchor target telah diberi Id KelasXSem2.Untuk menghubungkan tulisan “Semester 2” dengan anchor target tersebut, tambahkan tanda pagar (#) di depan Id.
Sehingga, pada kolom tautan, masukkan:
#KelasXSem2Tanda pagar (#) berfungsi untuk menunjukkan bahwa tautan tersebut mengarah ke bagian tertentu dalam halaman yang sama.
4. Setelah memasukkan #KelasXSem2, klik tanda panah yang melengkung ke kiri (apply) untuk menyimpan tautan. Lihat gambar 7 di bawah ini. Sekarang, tulisan “Semester 2” pada Table of Contents/Daftar Isi telah menjadi Anchor Link.
C. Uji Anchor Link
Simpan atau perbarui halaman, kemudian buka halaman tersebut.
Selanjutnya, klik tulisan “Semester 2” pada Daftar Isi. Jika Anchor Link telah dibuat dengan benar, halaman akan secara otomatis berpindah atau melakukan scrolling ke bagian “Sem 2” yang telah dibuat sebelumnya sebagai anchor target.
Dengan demikian, hubungan antara keduanya adalah sebagai berikut:
Semester 2 → Anchor Link → #KelasXSem2 → Anchor Target: Sem 2
Jadi, pengguna cukup mengklik tulisan “Semester 2” pada Daftar Isi untuk langsung menuju ke bagian “Sem 2” tanpa harus melakukan scrolling secara manual.
