Membuat Tautan Unduh File dengan HTML: Latihan Tanpa JavaScript

Diagram halaman materi yang mengarah ke berkas lembar latihan TXT

Halaman kelas sering memerlukan tautan untuk mengambil lembar latihan. Kita dapat memulainya dengan elemen tautan HTML tanpa membuat tombol JavaScript. Tujuan latihan ini ialah memahami hubungan halaman, alamat berkas, dan nama hasil unduhan. Kita memakai TXT agar berkas contoh mudah dibuat sendiri.

Siapkan folder latihan

Buat folder bernama materi. Di dalamnya buat index.html dan folder berkas. Buat lembar-latihan.txt di dalam folder berkas, lalu isi dengan tiga baris tugas: tulis nama, sebutkan tiga perangkat input, dan tulis fungsi keyboard. Dengan susunan ini, lokasi relatif dari index.html ke berkas ialah berkas/lembar-latihan.txt.

Salin contoh orisinal berikut ke index.html. Pastikan ekstensi berkas benar dengan mengikuti panduan memeriksa ekstensi HTML.

HTML
<!doctype html>
<html lang="id">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Unduh lembar latihan</title>
<body>
<h1>Materi kelas komputer</h1>
<p><a href="berkas/lembar-latihan.txt" download="lembar-latihan.txt">Unduh lembar latihan (TXT)</a></p>
<p><a href="berkas/lembar-latihan.txt">Buka lembar latihan di browser</a></p>
</body>
</html>

Uji dua perilaku tautan

Buka index.html di browser, lalu coba kedua tautannya. Tautan pertama menyatakan niat mengunduh melalui download. Tautan kedua memakai alamat yang sama tanpa atribut tersebut. Hasil yang terlihat dapat bergantung pada browser dan cara server menyajikan berkas; jangan menjanjikan bahwa semua perangkat akan menampilkan dialog yang sama.

Nilai href menunjuk berkas yang tersedia. Nilai download mengusulkan nama hasil unduhan. Mengganti nama menjadi materi.pdf tidak mengubah isi TXT menjadi PDF. Jika ingin memberikan PDF, ekspor dokumen menjadi PDF terlebih dahulu, letakkan berkas sebenarnya dalam folder berkas, lalu sesuaikan href dan nama unduhannya.

Mengapa kadang terbuka, bukan terunduh?

Atribut download dibatasi oleh asal alamat: umumnya dipakai untuk URL dengan origin yang sama, serta URL blob dan data. Origin mencakup skema, nama host, dan port. Tautan dari situs Anda menuju penyimpanan pihak lain belum tentu menghormati download. Header respons server juga dapat memengaruhi perilaku dan nama berkas. Untuk layanan penyimpanan eksternal, gunakan fasilitas unduh resmi layanan tersebut.

Latihan lokal membantu memahami struktur folder. Sebelum membagikan ke orang lain, unggah halaman dan berkas ke hosting uji yang sama. Pastikan path tetap cocok, lalu uji lewat alamat HTTPS publik. Jangan memakai lokasi komputer seperti C:\Dokumen sebagai href untuk pengunjung website.

Checklist pemeriksaan

  1. Buka alamat berkas langsung dari halaman. Jika muncul 404, periksa ejaan, huruf besar, ekstensi, dan folder.
  2. Unduh berkas lalu buka hasilnya. Pastikan isinya benar, bukan halaman login atau halaman kesalahan yang ikut tersimpan.
  3. Uji menggunakan keyboard: tekan Tab sampai tautan terpilih, lalu Enter.
  4. Uji di HP. Periksa lokasi hasil unduhan dan keterbacaan teks tautan.
  5. Jika berkas memerlukan akun, uji dengan hak akses yang memang dimiliki penerima. Atribut download tidak membuka izin akses.

Latihan lanjutan

Tambahkan satu lembar latihan kedua dengan nama berbeda, lalu buat tautan baru. Gunakan teks seperti “Unduh latihan perangkat output (TXT)” agar tujuan jelas. Bila menuliskan ukuran file, ambil dari berkas final dan perbarui saat berkas berubah. Jangan mencantumkan ukuran perkiraan sebagai fakta.

Gunakan materi buatan sendiri atau yang memang boleh dibagikan. Untuk halaman materi yang menampilkan gambar, lanjutkan ke latihan alt text. Hasil akhir latihan ialah halaman yang memiliki alamat berkas benar, teks tautan jelas, dan hasil unduhan yang dapat dibuka.

Rujukan resmi

MDN: elemen a dan atribut download. Dokumentasi diperiksa 5 November 2026. Contoh dan checklist dalam artikel ini disusun khusus untuk latihan Kribbi Study.

No Comment! Be the first one.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *