Bagaimana cara memasang gambar di html?

Question

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?
Tag HTML  . Gambar tidak secara teknis dimasukkan ke dalam halaman web; . Tag 
Di mana saya mengunggah gambar dalam HTML?
Unggah file gambar ke folder di direktori public_html situs melalui pengelola file yang disediakan oleh host web atau WordPress Media. Akses file HTML tempat Anda ingin menyisipkan gambar, dan tambahkan tag img. Sertakan atribut img src untuk menentukan sumber gambar. 
Bagaimana Anda menempatkan gambar dalam HTML CSS?
Untuk menambahkan gambar ke halaman, kami menggunakan elemen  . Elemen 
Mengapa saya tidak bisa memasukkan gambar ke dalam HTML?
Anda harus mengetik ulang kode HTML dalam huruf besar. file gambar Anda diunggah dengan benar ke server, tetapi jalur server ke gambar salah .