Hai, balik lagi ditutorial pemrograman web Dumet School membahas semua artikel mengenai pemrograman web yang pastinya membangun teman teman lebih tertarik lagi belajar pemrograman, nah di kasus kali ini kita akan membahas mengenai Bagaimana Cara Membuat Tombol Download Sederhana Menggunakan HTML5,
telah tak lumrah lagi yah button unduh atau file yang diupload oleh admin dan dapat didownload oleh user, hal ini betul-betul bagus karena saling menguntungkan yah pada segi apapun, jadi tak ada yang merasa di curangkan, oke lumayan menarik yah pembahasan kita kali ini, dan perlu teman teman tahu bahwa yang kita akan lakukan ialah membangun sebuah button unduh menggunakan HTML5 bukan php? Agh apakah dapat HTML5 membuah sebuah file unduh yang seketika diterima oleh si user, tentu saja dapat yah walaupun sifatnya tak dinamis tapi tak apa bagi menambahkan pengetahuan saja dan kedepannya kita akan menggunakan versi phpnya, oke teman teman kita dapat seketika mulai saja, coba teman teman buatkan file baru bernama apapun atau bebas terserah teman teman, saya disini menamakannya index.html oke bila telah bikin file baru coba tambahkan script berikut :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<style type=”text/css”>
body { background: url(“images/bgbody.jpg”) no-repeat; background-size: cover }
</style>
</head>
<body>
<div class=“container”>
<div class=“row” style=“padding-top: 30px”>
<div class=“col-md-4”>
<div class=“card” style=“width: 18rem;”>
<img class=“card-img-top” src=“images/gambar1.jpg” alt=“Card image cap”>
<div class=“card-body”>
<a href=“images/gambar1.jpg” class=“btn btn-info” unduh> Unduh Gambar </a>
</div>
</div>
</div>
<div class=“col-md-4”>
<div class=“card” style=“width: 18rem;”>
<img class=“card-img-top” src=“images/gambar2.jpg” alt=“Card image cap”>
<div class=“card-body”>
<a href=“images/gambar2.jpg” class=“btn btn-info” unduh> Unduh Gambar </a>
</div>
</div>
</div>
<div class=“col-md-4”>
<div class=“card” style=“width: 18rem;”>
<img class=“card-img-top” src=“images/gambar3.jpg” alt=“Card image cap”>
<div class=“card-body”>
<a href=“images/gambar3.jpg” class=“btn btn-info” unduh> Unduh Gambar </a>
</div>
</div>
</div>
</div>
</div>
|
Di designnya saya menggunakan bootstrap 4 yah agar tak terlalu lama pada membangun designnya, bila telah benar tampilannya seperti diatas coba teman teman tekan button unduh karenanya secara otomatis gambar akan ter unduh yah, oh yah pastikan teman teman sesuaikan gambarnya yah dan gambarnya dimasukkan didalam folder images. Oke lumayan gampang bukan, demikianlah panduan mengenai Bagaimana Cara Membuat Tombol Download Sederhana Menggunakan HTML5. Hingga bertemu diartikel berikutnya dan hingga jumpa.
#KeepLearn
#IsmetMA
sumber :kursuswebprogramming.com/blog/
