Tuesday, June 18, 2019

Script Singkat Dalam Membuat Gambar Menjadi Botton di HTML

Artikel kali akan membahas tentang bagaimana cara membuat gambar menjadi botton di html, dimana gambar tersebut nantinya menjadi menu yang akan digunakan. Tentu hal ini berbeda dengan memasukkan gambar pada botton di html, karena yang akan dibahas kali ini ialah membuat image menjadi botton.

Cara membuat image jadi button sangat mudah, kita cukup menggunakan dua tag saja, yaitu tag <a href> dan tag <img>. Tag <a href> berguna untuk menyisipkan link tujuan daru image botton tadinya, dan tag <img> adalah untuk menyisipkan image atau gambar yang akan menjadi botton nantinya.

Membuat Gambar Menjadi Botton di HTML


Menjadikan gambar sebagai botton di html memiliki tujuan yang berbeda-beda untuk setiap pembuatnya, bisa saja image tersebut membuat menarik web yang akan dibuat, atau image tersebut adalah icon atau symbol, seperti Delete, Edit, Print, Logo Websitenya dan lain sebagainya.

Baiklah, kita langsung saja ke point pembahasan tentang merubah image menjadi botton di html yang berguna untuk image menu atau image botton.

Script Image Menjadi Botton di HTML


Untuk script htmlnya dalam membuat image menjadi sebuah botton menu adalah sebagai berikut ini.

<a href="anakit.id"><img src="anakit.png"></a>

Diatas adalah contoh sederhana, dimana tujuan dari image buttonnya adalah anakit.id dan image yang digunakan anakit.png. untuk memudahkan kamu, file gambar yang akan kamu jadikan sebagai botton sebaiknya diletakkan dalam satu file yang sama dengan  file html kamu. 

Selain itu, gambar yang baik untuk dijadikan button sebaiknya dalam ekstensi “.png” atau “.icon” namun bukan berarti tidak meperbolehkan ekstensi yang lain.

Perlu di ketahui, dengan script seperti itu saja akan menampilkan gambar yang tidak karuan besarnya,  baik lebarnya, tingginya dan posisinya, ada baiknya kamu harus menambahkan attribute pendukung lainnya agar botton image yang kamu buat menjadi rapi.

Attribute yang berguna untuk merapikannya adalah border, width, dan height untuk dasarnya. Apabila gambar yang kamu berikan tidak pecah atau resolusi gambar yang baik, ketiga attribute tersebut sudah cukup memperbaiki image botton yang sebelumnya tidak rapi.

Attribute tersebut diletakkan pada tag <img> bukan pada tag <a href>, untuk lebih jelasnya, kamu bisa perhatikan script html image botton dibawah ini.

<a href="anakit.id"><img src="anakit.png" width="50" height="50" border="1"></a>

Kamu bisa merubah ukurannya lebih kecil lagi atau lebih besar lagi, kamu tinggal menyesuaikan dengan gambar yang kamu miliki dan yang akan dijadikan sebagai botton. Dan apabila kamu tidak ingin ada bordernya karena garis pinggi tidak selamanya cocok dengan image, maka kamu bisa tidak menggunakan “border” atau beri saja nilainya “0”

Agar lebih baik lagi, kamu bisa menambahkan attribute “title” pada tag image, untuk memberikan judul image botton tersebut yang nantinya apabila cursor mouse diarahkan, akan terlihat tulisan yang bisa juga sebagai panduan. Contohnya seperti berikut ini.

<a href="anakit.id"><img src="anakit.png" width="50" height="50" border="0" title="menuju anakit.id"></a>

Jadi, ketika mouse mengarah, pada image yang menjadi botton akan menampilkan tulisan dari titlenya sebagai informasi dari botton tersebut. 

Gambar Image Jadi Menu Botton di HTML


Jadi, image yang menjadi botton tadi memiliki panduan tentang botton apa dan apa guna botton tersebut, sehingga pengguna tidak salah mengguanakan nantinya.

Jadi demikianlah pembahasan tentang cara membuat image menjadi botton di html yang berguna sebagai image botton yang lebih berkesan pada website anda. Semoga artikel inin berguna dan membantu.


EmoticonEmoticon