menampilkan gambar di html dengan mudah

Hallo coders, kali ini kita akan belajar menampilkan gambar di Html. Setelah kemarin kita belajar tentang tag a atau link . Disini kita akan belajar Langkah menampilkan gambar ke halaman html kita dan mengatur lebar dan tinggi dari sebuah gambar. Niscaya temen temen sudah tau ya, implementasinya karena di sebuah website Niscaya Eksis sebuah gambar apalagi ecommerce atau toko online seperti https://shopee.co.id/. Website tanpa gambar Dapat dibilang sangat hambar ya wkwkwk, maka dari itu gambar ini sangat Krusial ya gaess.

Menampilkan gambar di Html

Html menyediakan tag Spesifik Buat menampilkan gambar. Tag tersebut adalah di gunakan Buat menampilkan gambar dengan banyak Perluasan, Dapat jpg, png, gif, dan lain lain. tag ini Mempunyai atribut Spesifik Ialah Eksis “src=”,

Atribut ini berfungsi Buat menghubungkan file dengan gambar. Eksis dua Langkah Buat memanggil gambar di atribut src ini temen temen, yang pertama Kalau gambar berada di satu file dengan folder html kita kita tinggal memanggil nama folder dan nama gambarnya. Yang kedua kita Dapat memanggil berdasarkan link atau Dapat dibilang gambar ini berasal dari website lain. Dibawah ini adalah Teladan kode Kalau menggunakan url.

Maka hasilnya akan muncul gambar roket dibrowser kalian menarik bukan. Selanjutnya kita akan mencoba mendownload gambar jadi silahkan temen temen download gambar apapun Dapat roket ini kemudian simpan kedalam folder seperti ini.

Selanjutnya temen temen Dapat koding seperti dibawah ini.

Kalau berhasil hasilnya akan Tak jauh berbeda dari yang diatas.

Atribut alt Buat tag img Html

Nah setelah tadi kita mempelajari atribut img, atibut Spesifik lainnya Buat tag img adalah tag “alt=”. Atribut ini adalah atribut Buat memberika text alternatif Kalau gambar yang kita panggil tadi itu itdak Eksis sehinggal Tak tampil. Kalau Tak tampil maka akan menjadi seperti ini.

Dengan text alternatif kita Dapat lakukan seperti ini

Disini saya sengaja Membikin salah dalam pemanggilan agar gambar Tak terbaca dan kemudian akan kita berikan tag alt sebagai contohnya.

Atribut width dan height tag Html

Di tag img kita Dapat mengaut ukuran gambar tanpa menggunakan css Ialah dengan menggunakan atribut width dan height. Width Buat mengatur lebar dan height Buat mengatur tinggi dari sebuah gambar.

Menarik bukan, tetapi kita Tak harus menggunakan semuanya. Buat ukurannya kita Dapat menggunakan px % dan lainnya seperti css tetapi defaultnya pixel gaess jadi Kalau kita hanya menulis 300 maka akan terhitung pixel. Hasilnya seperti dibawah ini.

Format File Yang di Support di html

Seperti yang saya bilang diatas Tak Segala format file gambar disuport oleh html. itu dikarenakan setiap file gambar Mempunyai tujuannya masing masing.

Lewat format file gambar apa saja yang disupport html. Berikut ini adalah daftar beberapa format gambar yang disupport dan sering digunaakan dalam pembuatan sebuah website.

1. APNG, format file = Animated Portable Network Graphics, file extension .apng
2. GIF, format file = Graphics Interchange Format, file extension .gif
3. ICO, format file = Microsoft Icon, file extension .ico, .cur
4. JPEG, format file = Joint Photographic Expert Group image, file extension .jpg, .jpeg, .jfif, .pjpeg, .pjp
5. PNG, format file= Portable Network Graphics, file extension .png
6. SVG, format file= Scalable Vector Graphics, file extension .svg

Mengkombinasikan tag a dan tag img

Seperti yang kita pelajari sebelumnya tag link dapat digunakan Buat mengganti ke halaman baru. nah disini kita Dapat mengkombinasikan kedua tag ini. idenya ketika user mengeklik gambar maka akan pindah ke halaman tertentu. Contohya adalah seperti dibawah ini.

Jadi tag img yang kita buat kita bungkus dengan tag a sehingga Kalau gambar kita klik akan menuju halaman tertentu.

Nah keren banget ya gaess. Mungkin Tiba sini dulu pembelajaran kita pada kesempatan kali ini. Kalau temen temen Eksis pertanyaan temen temen Dapat ketikan di kolom komentar insyallah mimin balas secepatnya hehe.