Cara Membuat Link url Dengan Gambar di HTML

Ada berbagai alasan kenapa pengunjung blog atau website tidak menklik link yang kita taruh, Salah satunya yaitu karena link yang kita taruh tidak menarik atau susah dilihat, nah untuk mengatasi masalah tersebut maka kita dapat menggunakan gambar sebagai link url. Secara default, penggunaan kode link html akan menampilkan suatu text. Namun kita dapat mengubahnya secara bebas, yaitu menjadi icon, video, ataupun gambar biasa.

Membuat Link Gambar Dengan HTML

Seperti yang kita ketahui bahwa penggunaan kode link html yaitu seperti berikut ini :

<a href=”link”>Unduh Disini </a>

Jika kita pasang pada file html, maka akan tampil tulisan asli “unduh disini” yang disertai url.
Untuk menambahkan gambar, kita memerlukan kode penampil img html. Seperti berikut ini :

<img src=”Lokasi Gambar”/>

Kita perlu menggabungkan kedua kode tersebut, seperti berikut ini :

<a href=”link_url”><img src=”gambar_link”/></a>

Dari kode kombinasi tersebut, kita tempatkan kode img html di dalam kode link html. untuk memperjelas pemahaman kamu, mari kita aplikasikan dalam file notepad.

Siapkan aplikasi browser (seperti google chrome, opera mini atau sejenisnya) dan edit text (seperti notepad, notepad++ atau sejenisnya). Buat satu buah folder lalu beri nama saja “latihan” (tanpa tanda petik).

Setelah itu siapkan gambar yang akan digunakan sebagai link atau url. Setelah itu, ubah nama gambar tadi menjadi “link.jpg” (tanpa tanda petik), Lalu simpan di Folder latihan yang telah kita buat tadi.

Langkah selanjutnya yaitu buka aplikasi editor textnya, dan ketikan format kode html seperti dibawah ini:

<html>
<head><title>judulnya kita belajarlah</title>
</head>
<body>

<h3>Untuk Mendownload Kamu bisa klik link dibawah</h3><hr/><br/>

<a href="www.google.com"><img src="link.jpg" width="100" height="60"/></a><br/><hr/>

<h6>terimakasih banyak telah berkunjung ke blog ini</h6>

</body>
</html>

Simpan kode tersebut ke dalam folder “latihan” dan beri nama “tampil_link.html” (tanpa tanda petik).

Lalu buka dengan aplikasi browsernya, Hasilnya kurang lebih seperti berikut ini:

Jika kamu menklik gambar download tersebut, maka akan mengarah ke alamat link yang dituju.

Penjelasan:

<a href=”ini url nya”> Merupakan tag yang berfungsi untuk menyisipkan link kedalam gambar atau text, dan akan diakhiri dengan </a>
<img src=”Lokasi gambar”/> berfungsi untuk mengabil gambar dan menampilkannya, tag ini juga mempunyai atribut yang berfungsi untuk merubah ukurannya yaitu atribut width=”nilai” (mengubah lebar gambar) dan height=”nilai” (mengubah panjang gambar).

Artikel sebelumnya membahas tentang :

Membuat Link Gambar Dengan HTML

Related posts:

Leave a Reply Cancel reply