Hello sobat Desain kali ini saya akan membahas bagaimana cara menampilkan gambar dalam format HTML secara lengkap, dan terkhusus pada pembahasan kita kali lebih tepatnya didalam mengatur tata letak gambar agar lebih efisien ketika ditampilkan
Seperti yang kita ketahui didalam Blogger juga memakai kode HTML untuk menjalankan fungsi nya, mungkin informasi ini akan berguna untuk anda terapkan didalam penyesuaian gambar ketika anda memerlukan nya
Input gambar dangan <img>
Baiklah sobat didalam HTML untuk menampilkan sebuah gambar memakai Tag <img> dan untuk memasukkan gambar sertakan src= dibelakangnya
Nantinya kode dari penggabungan Tag <img> adalah sebagi berikut
<img src="kucing.png">Input gambar dengan CSS
Untuk menyesuaikan tampilan gambar kita bisa menggunakan Kode CSS, contoh kode CSS untuk menyesuaikan gambar sebagai berikut
.gambar{
height: 300px;
width: 500px;
}Selanjutnya pada elemen HTML tambahkan class="id css" sesudah Tag <img
Sebagai contoh lihat contoh berikut ini untuk memasukkan gambar dengan dukungan CSS
<img class="gambar" src="kucing.png">Input gambar sertakan Nama
Lebih mudahnya kamu bisa menggabungkan antara kode HTML dan CSS secara bersamaan dengan menyelipkan kode CSS nya yaitu alt= setelah Tag <img untuk memberikan judul atau Nama dari gambar tersebut
Di bawah ini adalah contoh input gambar dengan HTML dan juga CSS dengan memberikan Judul gambar ketika di klik
<img border="0" alt="Format banner" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FgZcRJ7RG0LOF4BGgw0bOJmAteIO4tChHPEphl2m0FWuUtRIqP_NU8tRX5lutV3t9qVNf2aeOoTXwEl5FbvTifUEkHGqHdWgZF_Z_xyb3jNroDyyxD8DVJcXIAQ4t2KEhAo6V9U1Urjb/s0/0002-1759728493_20210524_000514_0000.png "/>Input gambar sertakan link
Untuk meyelipkan sebuah link didalam Gambar kamu bisa menggabungkan kode HTML dan CSS, dengan menambahakn kode CSS dan juga link sebelum Tag <img yaitu awali dengan kode <a dan tutup seluruh kode dengan </a> dibelakangnya
Berikut ini adalah contoh kode yang bisa kamu gunakan untuk menampilakan gamabr beserta Link
<a width="280" href=https://desain-limited.blogspot.com target="blank" height="8"><img border="0" alt="Link Banner" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FgZcRJ7RG0LOF4BGgw0bOJmAteIO4tChHPEphl2m0FWuUtRIqP_NU8tRX5lutV3t9qVNf2aeOoTXwEl5FbvTifUEkHGqHdWgZF_Z_xyb3jNroDyyxD8DVJcXIAQ4t2KEhAo6V9U1Urjb/s0/0002-1759728493_20210524_000514_0000.png "/></a>Kode href= berfungsi untuk memasukkan link kedalam gambar, kamu bisa mengubahnya dengan Tujuan url kamu, maka ketika gamabr diklik akan menuju ke alamat url tersebut
Kamu bisa menggunakan setiap kode yang saya berikan diatas, untuk lebih memudahkan anda slin dan ganti saja link gambar nya, atau apa yang harus kamu ubah didalam nya sesuai keinginan kamu
Sebagai informasi untuk memoeroleh link gambar 😕 agar bisa ditampilkan kamu bisa mengupload gambar tersebut didalam halaman blog, jika kamu menggunakan blogger, salin kemudian tempelkan didalam Tag scr=