Gambar tidak langsung masuk ke website, tetapi gambar ditautkan ke halaman website dengan menggunakan tag <img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">6. Tag <img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">_6 berfungsi untuk merujuk ke file sumber gambar di mana itu (disimpan)
Tag <img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">6 kosong, hanya berisi atribut, dan tidak memiliki tag penutup
Tag <img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">6 memiliki dua atribut wajib
- <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">1 – Menentukan jalur ke gambar (mengacu pada file sumber gambar)
- <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">2 – Menentukan teks alternatif untuk gambar
Sintaksis
<img src="url" alt="alternatetext">_
Atribut src
Atribut<img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">3, diperlukan untuk menentukan jalur (URL) ke gambar (sumber file gambar)
Catatan. Saat halaman web dimuat di browser, saat itu juga server akan mengambil gambar dari tempat penyimpanan file gambar tersebut. Jadi pastikan referensi file gambar sudah benar agar bisa ditampilkan di halaman web, jika salah maka halaman tidak akan menampilkan gambar dan yang ditampilkan hanya icon link gambar rusak beserta alt nya
Contoh
Salah
<img src="img_chania.jpg" alt="Flowers in Chania">_
BENAR
<img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">_
Atribut alt
Atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">_4 diperlukan untuk menyediakan teks alternatif untuk gambar, jika karena alasan tertentu gambar tidak dapat dilihat (karena koneksi yang lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar) kemudian, atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">2 akan menggantikan gambar.
Nilai atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">2 harus mendeskripsikan gambar.
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">_
Jika browser tidak dapat menemukan gambar, maka nilai atribut akan ditampilkan <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">2 .
Contoh
<img src="wrongname.gif" alt="Flowers in Chania">
Ukuran Gambar – Lebar dan Tinggi
Kita dapat menggunakan atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">8 untuk menentukan lebar dan tinggi gambar.
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Atau, kita dapat menggunakan atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">9 dan <img src="url" alt="alternatetext">0 .
Contoh
<img src="i//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Atribut <img src="url" alt="alternatetext">1 dan <img src="url" alt="alternatetext">2selalu menentukan lebar dan tinggi gambar dalam piksel.
Catatan. Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman web mungkin berkedip saat gambar dimuat
Lebar dan Tinggi, atau Gaya?
Atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">9 , <img src="url" alt="alternatetext">0 , dan <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">_8 semuanya adalah atribut HTML.
Namun, sebaiknya gunakan atribut ________4______8 . Untuk mencegah halaman gaya mengubah ukuran gambar.
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">0
Gambar di Folder Lain
Jika kita memiliki gambar di sub-folder komputer kita, kita harus menyertakan nama folder di atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">1 .
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">_1
Gambar di Server / Situs Lain
Beberapa situs web mengarah ke gambar eksternal di server lain. Untuk mengarahkan ke gambar di server lain, kita harus menyertakan URL absolut (lengkap) di atribut <img src="//dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">1 .
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">_2
Catatan gambar eksternal. Gambar eksternal mungkin memiliki hak cipta. Jika kami tidak mendapatkan izin untuk menggunakannya, kami dapat melanggar undang-undang hak cipta. Selain itu, kami tidak dapat mengontrol gambar eksternal, gambar tersebut dapat dihapus kapan saja oleh pemilik hak cipta
Gambar Animasi
HTML memungkinkan animasi GIF
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">_3
Gambar sebagai Tautan
Untuk menggunakan gambar sebagai tautan, tempatkan tag<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">6 di dalam tag <img src="img_chania.jpg" alt="Flowers in Chania">0 .
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">_4
Gambar mengambang
Gunakan properti CSS <img src="img_chania.jpg" alt="Flowers in Chania">1 untuk membuat gambar melayang ke kanan atau ke kiri teks.
Contoh
<img src="//dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">5
Format Gambar
Berikut adalah jenis file gambar yang paling umum, yang didukung di semua browser (Chrome, Edge, Firefox, Safari, Opera)