Cara Membuat Link Download Dengan HTML

Halo teman-teman pada tutorial kali ini kita akan belajar cara membuat link download dengan HTML. Link download yang akan kita pelajari disini ada 2 jenis, yaitu link download yang tampilannya menggunakan tulisan dan link dengan menggunakan gambar atau ikon. Sebelum mulai mengikuti tutorial ini silakan persiapkan sebuah file terlebih dahulu. Filenya bisa berupa file apa saja. File ini lah yang akan kita gunakan sebagai percobaan download file. Pada contoh ini saya menggunakan file bernama dokumen.docx. Dan untuk lebih jelasnya tentang cara membuat link download dengan html langsung saja di simak tutorialnya seperti berikut.

Cara Membuat Link Download Dengan HTML

Link Download Dengan Text

Untuk cara membuat link download dengan text sangat lah mudah, pada kode html kita hanya memerlukan tag a. Yang kode lengkapnya dapat disimak seperti dibawah.

Silakan tulis kode diatas pada Notepad++ atau text editor kesukaan kamu. Setelah semuanya selesai silakan simpan dengan nama download1.html dalam satu folder dengan file yang kita siapkan diawal. Pada contoh ini saya menyimpanya dalam directory folder D:\Cara Kode\Latihan\Link Download. Yang contoh gambarnya seperti berikut.

Gambar Contoh Tempat Menyimpan File

Selanjutnya silakan jalankan (buka) file download1.html yang baru saja kita simpan tadi, jalankan pada browser favorit kamu. Pada contoh ini saya menjalankan pada browser Google Chrome, untuk cara menjalankannya silakan klik 2 kali pada file download1.html. Setelah filenya berhasil dijalankan maka pada browser akan tampil seperti contoh gambar dibawah ini.

Gambar Hasil Contoh Kode Membuat Link Download Dengan HTML Dengan Text

Dan untuk screen record ketika tombol download di klik bisa dilihat pada video ini.

Penjelasan Kode

Pada kode diatas terdapat 2 buah link download yaitu pada baris nomor 7 dan 9. Pada baris nomor 7 terdapat kode tag HTML link yaitu <a href=”dokumen.docx”>Download</a> dalam atribut href memiliki value dokumen.docx yaitu yang menuju file yang kita siapkan sebelumnya. Atribut href bisa juga kamu isi dengan link download ke website lainnya misalnya seperti link sharing file yang mengarah ke Google Drive atau penyimpanan online lainnya.

Kemudian pada baris nomor 9 intinya sama dengan baris nomor 7, namun pada baris nomor 9 ini kita menambahkan sebuah tag paragraf (<p>…</p>) tujuannya untuk memberi tulisan atau kata sebelum link download.

Link Download Dengan Gambar

Sebelum memulai membuat link download dengan gambar ini, langkah pertama tentunya kita siapkan gambar atau ikon downloadnya. Disini saya menggunakan gambar png yang saya dapat dari halaman ini. Kamu bisa menggunakan gambar lainnya sesuai keinginan kamu. Supaya lebih mudah memasukkan gambar ini ke dalam file html, maka saya mengubah nama file gambar ini menjadi downloads-icon.png dan tentunya file gambar ini berada didalam satu folder yang sudah kita siapkan diawal tutorial ini.

Gambar Contoh file downloads ikon

Sekarang langsung saja kita mulai buat link downloadnya, dan silakan tulis kode html dibawah ini pada notepad++

Setelah seluruh kode diatas selesai ditulis silakan simpan dengan nama download2.html pada folder yang sama dengan file ikon gambar dan file yang akan didownload. Kemudian silakan jalankan file html yang barus saja kita simpan ini. Maka akan tampil seperti gambar dibawah ini.

Hasil Contoh Kode Membuat Link Download Dengan HTML Dengan Gambar

Ketika gambar download diklik maka akan mendownload file sesuai dengan kode.

Penjelasan Kode

Pada kode diatas kode download terdapat pada baris nomor 7 sampai 9. Pada baris nomor 7 dan 9 merupakan kode link biasa yang sudah kita jelaskan pada poin membuat link download text. Dan disini terdapat tambahan tag gambar didalam tag link. Maka ketika gambar tersebut di klik itu sama saja dengan klik tag link yang membungkus tag gambar ini. Dalam tag gambar tersebut terdapat 2 buah atribut yaitu src=”downloads-icon.png” dan height=”100px”, atribut src berisi sumber gambar yang ditampilkan, dan atribut height berisi ukuran tinggi dari gambar, kamu bisa menyesuaikan ukuran gambar dengan merubah isi (value) atribut height tersebut misalnya seperti 50px, 150px, dan sebagainya. Selain atribut height ada juga atribut width yang berfungsi untuk mengatur lebar gambar. Namun kerena supaya saya lebih gampang mengatur ukuran gambarnya (supaya tetap proporsional) saya hanya menggunakan salah satu dari atribut height ata width.

Saya rasa cukup jelas untuk tutorial cara membuat link download dengan HTML ini, apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan melalui kolom komentar dibawah. Dan jangan lupa kunjungi seri tutorial HTML dasar yang mungkin ada tutorial HTML yang menarik buat kamu.


Kolom Komentar

Related Post