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 altSelain 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 <figure>Selain tag Dengan tag Perhatikan contoh berikut:
Hasil keluaran: Secara default tag Tag <picture>Yang 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. Jangan lupa kasih ⭐⭐ Pertemuan SelanjutnyaInsyaallah pada pertemuan selanjutnya kita akan membahas list pada dokumen HTML. Stay tune! Bagaimana cara menampilkan gambar pada HTML?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). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.
Kenapa gambar tidak bisa tampil 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.
Apa HTML yang benar untuk menyisipkan gambar latar?Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.
Apa itu HTML image?Deskripsi. Penjelasan HTML img (image) tag
img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file ( . html , misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).
|