Sebuah halaman web tidak mungkin bisa dipisahkan dengan gambar. Halaman web yang berisi hanya teks tanpa gambar akan membuat pengunjung bosan, kalau pengunjung bosan, ia tidak akan betah berlama-lama dan akan buru-buru menekan tombol close tab. Show
Oleh karena itu: menambahkan gambar ke dalam halaman website adalah suatu yang esensial. Ada beberapa cara untuk menampilkan gambar di dalam sebuah dokumen HTML. Tag <img>Cara yang pertama dan yang paling umum adalah menggunakan tag Di mana dalam atribut tersebut, kita mendefinisikan url atau alamat dari gambar yang ingin kita tampilkan. Misalkan kita ingin menampilkan sebuah gambar dengan url: https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp Kita bisa melakukannya seperti ini: Hasil keluaran: Mengatur Ukuran GambarKita bisa mengatur ukuran gambar pada tag
Perhatikan contoh berikut: Hasil keluaran: Kalau kita perhatikan hasil di atas, gambarnya terlihat penyet karena ukuran rasionya tidak sesuai. Untuk menghindari hal tersebut, kita bisa mengatur salah satu atribut dengan ukuran Perhatikan contoh berikut: Hasil keluaran: Pada output di atas, kedua gambar yang kita tampilkan sudah tidak penyet lagi. Atribut Alternatif <h3>Mengatur ukuran gambar dengan atribut width/height</h3> <img width="100" height="100" src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp"> <h3>Mengatur ukuran gambar dengan css width/height</h3> <img style="width: 150px; height: 150px" src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp"> 6Selain atribut Alternatif dari apa? Alternatif jika gambar yang kita tampilkan ternyata tidak bisa tampil, baik karena koneksi internet bermasalah atau karena url gambar yang kita tulis ternyata tidak benar. Nah, dalam kondisi ini, browser akan menampilkan isi dari atribut Perhatikan contoh di bawah: Pada contoh di atas, kita akan menampilkan gambar dengan alamat Perhatikan hasil keluaran berikut: Bandingkan jika tag Hasil keluaran: Tidak ada tulisan apa pun, hanya ada gambar pigora pecah. Tag <h3>Tinggi auto</h3> <img width="150" height="auto" src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp"> <h3>Lebar auto</h3> <img width="auto" height="200" src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp"> 5Selain tag Dengan tag Perhatikan contoh berikut: Hasil keluaran: Secara default tag Tag <h3>Upacara Bendera</h3> <img src="url-random.jpeg" alt="Ini gambar tiang bendera"> 0Yang terakhir tapi bukan yang paling akhir, kita bisa menampilkan lebih dari satu gambar sesuai dengan ukuran layar. Maksudnya: untuk layar ukuran besar (desktop), kita bisa meminta browser untuk menampilkan gambar ukuran besar. Sedangkan untuk layar ukuran kecil (seperti di ponsel), kita bisa meminta browser untuk menampilkan gambar yang kecil. Teknik ini bisa menghemat kuota internet agar pengguna ponsel tidak terlalu banyak mengunduh data. Perhatikan contoh berikut: Hasil keluaran: Sekarang kita ingin gambar merah akan ditampilkan di desktop, sedangkan gambar biru akan ditampilkan di ponsel. Kita bisa mengubah kode di atas menjadi seperti ini: Hasil keluaran:  Teman-teman silakan resize ukuran browser (jika pakai desktop) dan lihat bahwa gambar yang ditampilkan browser akan berubah: jika ukuran jendela/layar minimal 580px, gambar yang ditampilkan adalah merah, sedangkan sebaliknya jika ukuran maksimal layar/jendela adalah 579px, maka gambar biru yang akan ditampilkan. Atau teman-teman juga bisa mencoba membuka artikel ini di HP dan juga di Desktop dan temukan perbedaannya. Kode Program LengkapBagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github. Apa Fungsi tag HTML untuk menampilkan gambar?Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element).
Kenapa gambar tidak bisa muncul di HTML?Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.
3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar. Atribut alt juga berperan penting untuk mesin pencari seperti Google.
Format file gambar apa saja yang didukung oleh HTML?Nah, kali ini akan dibahas mengenai penyisipan gambar ke dalam dokumen HTML5 secara lebih lengkap. Format gambar yang didukung adalah JPG, PNG, GIF (termasuk yang beranimasi), dan BMP.
|
Ketika kita ingin menampilkan sebuah gambar pada HTML coding apa yang buat?
Pos Terkait
Copyright © 2024 ketajaman Inc.
