 |
Ilustrasi {pixabay}
|
Biotekners - Menyambung dari pembahasan implementasi HTML dan CSS dari pertemuan sebelumnya, kali ini kita akan membahas tentang bagaimana cara membuat hyeperlink dari menu navigasi yang sudah disusun pada pertamuan 4. Hyperlink pada menu navigasi ini nantinya dapat berupa halaman baru atau file yang bisa didownload. Menu navigasi yang sudah berisikan link akan memberikan fungsi sebagai Call to Action atau akan aktif ketika diklik.
Nah, untuk bisa membuat hyperlink ada beberapa jenis yang bisa kita praktikan. Berikut rinciannya:
Hyperlink dengan tujuan Halaman Website
Untuk membuatnya bisa menggunakan kode HTML sebagai berikut:
- Jika link ingin dibuka dalam satu halaman yang sama, maka kodenya <a href="https://detik.com">Klik Di Sini</a>
- Jika link ingin dibuka pada tab halaman berbeda, maka kita perlu menambahkan target="_blank", sehingga kode yang muncul sebagai berikut <a href="https://detik.com" target="_blank">Klik Di Sini</a>
- Jika ingin memanggil halaman yang masih merupakan bagian dari website, maka buat halaman baru atau Anda bisa mengcopy kodingan dari halaman utama dengan memodifikasi sedikit pada halaman baru. Namun perlu diperhatikan, jika Anda membuat halaman baru maka kodingan menu navigasi juga harus sama dengan kodingan menu di halaman utama misal seperti pada gambar di bawah ini:
 |
| Kodingan HTML menu navigasi di halaman utama |
 |
| Kodingan HTML menu navigasi di halaman yang baru, bisa Anda perhatikan perbedannya pada tulisan class="active" |
Jika Anda, sudah mengcopy paste kan kode HTML di halaman yang baru, bisa dilanjutkan untuk mengcopy paste kode CSS juga di halaman utama ke halaman yang baru. Seperti gambar di bawah ini:
 |
| Kode CSS di halaman utama |
 |
| Kode CSS di halaman yang baru, diletakkan di antara <style>..... </style> |
Jika sudah meletakkan halaman baru di menu navigasi, Anda bisa melanjutkan untuk mencoba membuat hyperlink pada menu navigasi yang akan mengarahkan pengguna untuk mendownload file secara langsung. Caranya yaitu sebagai berikut:
Buat folder file
Buat folder file yang digunakan untuk menyimpan file yang didownload, misalnya seperti gambar di bawah ini:
 |
| Folder Files untuk menyimpan file yang akan didownlaod |
Jika sudah membuat folder dan meletakkan file yang akan didownload dari folder tersebut, maka selannjutnya silahkan meletakkan kode berikut pada bagian konten yang berisikan file download. Kode diletakkan di antara <body>...</body>. Berikut kodingannya:
<p style="text-align:justify">
Download file SOP, <a href="../folderyangberisikanfiledownload/targetfile" target="_blank">Klik Di Sini</a>
</p>
Tambahkan kode di bawah di bagian pembuka <script>....</script>, letakkan di atas <body>...</body>:
const link = document.createElement('a');
link.download = 'file name';
link.href = '/path/to/file';
// Append to the document
document.body.appendChild(link);
// Trigger the click event
link.click();
// Remove the element
document.body.removeChild(link);
Secara keseluruhan, model struktur kodingan seperti gambar di bawah:
 |
| Struktur menu navigasi dan link download |
Demikian informasi ini disampaikan, jika ada pertanyaan. Silahkan berdiskusi menggunakan kolom komentar di bawah.
Biotekners
Minggu, 11 September 2022
More From Author
Tutorial