Bagaimana cara memasang gambar di html?

Tag

Contoh berikut menyisipkan tiga gambar di halaman web

Setiap gambar harus membawa setidaknya dua atribut. atribut src, dan atribut alt

Atribut src_ memberi tahu browser tempat menemukan gambar. Nilainya adalah URL file gambar

Sedangkan atribut alt_ memberikan teks alternatif untuk gambar, jika tidak tersedia atau tidak dapat ditampilkan karena alasan tertentu. Nilainya harus menjadi pengganti gambar yang bermakna

Catatan. Seperti

1 , elemen 3"

Tip. Atribut alt yang diperlukan memberikan deskripsi teks alternatif untuk gambar jika pengguna karena alasan tertentu tidak dapat melihatnya karena koneksi yang lambat, gambar tidak tersedia di URL yang ditentukan, atau jika pengguna menggunakan pembaca layar atau browser non-grafis

Mengatur Lebar dan Tinggi Gambar

Atribut

5 dan 6 digunakan untuk menentukan lebar dan tinggi gambar

Nilai atribut ini diinterpretasikan dalam piksel secara default

Anda juga dapat menggunakan atribut

_7 untuk menentukan lebar dan tinggi gambar. Ini mencegah lembar gaya mengubah ukuran gambar secara tidak sengaja, karena gaya sebaris memiliki prioritas tertinggi

Catatan. Sebaiknya tentukan atribut

5 dan 6 untuk gambar, sehingga browser dapat mengalokasikan ruang sebanyak itu untuk gambar sebelum diunduh. Jika tidak, pemuatan gambar dapat menyebabkan distorsi atau kedipan pada tata letak situs web Anda

Menggunakan Elemen Gambar HTML5

Terkadang, menaikkan atau menurunkan ukuran gambar agar sesuai dengan perangkat (atau ukuran layar) yang berbeda tidak berfungsi seperti yang diharapkan. Selain itu, mengurangi dimensi gambar menggunakan atribut atau properti

5 dan 6 tidak mengurangi ukuran file asli. Untuk mengatasi masalah ini, HTML5 telah memperkenalkan tag 2 yang memungkinkan Anda menentukan beberapa versi gambar untuk menargetkan berbagai jenis perangkat

Elemen

2 berisi nol atau lebih 2 elemen, masing-masing mengacu pada sumber gambar yang berbeda, dan satu elemen 2 memiliki atribut 7 yang menentukan kondisi media (mirip dengan kueri media) yang digunakan oleh browser untuk menentukan kapan sumber tertentu harus digunakan. Mari kita coba sebuah contoh

Catatan. Browser akan mengevaluasi setiap elemen

_2 anak dan memilih kecocokan terbaik di antara mereka; . Selain itu, tag 2

Bekerja dengan Peta Gambar

Peta gambar memungkinkan Anda menentukan hotspot pada gambar yang bertindak seperti hyperlink

Ide dasar di balik pembuatan peta gambar adalah menyediakan cara mudah untuk menghubungkan berbagai bagian gambar tanpa membaginya menjadi file gambar terpisah. Sebagai contoh, sebuah peta dunia mungkin memiliki setiap negara hyperlink ke informasi lebih lanjut tentang negara tersebut

Mari kita coba contoh sederhana untuk memahami cara kerjanya

Atribut

_3 dari tag 2 digunakan untuk merujuk peta dari tag 6. Tag 2 digunakan di dalam elemen 2 untuk menentukan area yang dapat diklik pada gambar. Anda dapat menentukan sejumlah area yang dapat diklik dalam gambar

Catatan. Peta gambar tidak boleh digunakan untuk navigasi situs web. Mereka tidak ramah mesin pencari. Penggunaan peta gambar yang valid adalah dengan peta geografis

Tip. Ada banyak alat online yang tersedia untuk membuat peta gambar. Beberapa editor tingkat lanjut seperti Adobe Dreamweaver juga menyediakan seperangkat alat untuk membuat peta gambar dengan mudah

Bagaimana cara menyisipkan gambar dalam HTML?

Di mana saya mengunggah gambar dalam HTML?

Bagaimana Anda menempatkan gambar dalam HTML CSS?

Mengapa saya tidak bisa memasukkan gambar ke dalam HTML?