Cara menampilkan gambar pada HTML lengkap beserta penjelasannya


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/AVvXsEg69PywVEG5_tP4jsQEE8jb52Vbh0GVCPbk4sgKdeKaBUiNPBkPglCctpt50o2psZuAdE98jdyW8U3qbmmMD88IwylbKKE6f481mfUVSsGWy0V7tWSuevixHrQ-mqj55MW7rIjzmffmMPra/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/AVvXsEg69PywVEG5_tP4jsQEE8jb52Vbh0GVCPbk4sgKdeKaBUiNPBkPglCctpt50o2psZuAdE98jdyW8U3qbmmMD88IwylbKKE6f481mfUVSsGWy0V7tWSuevixHrQ-mqj55MW7rIjzmffmMPra/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=


Baca Juga :
Ar-rahim 🇵🇸