Imej adalah bahagian yang sangat penting dari laman web kerana meningkatkan penampilan laman web dan meningkatkan interaksi pelanggan. USP berbilang laman web adalah bagaimana mereka menyusun gambar yang berbeza di laman web mereka & menambah rasa padanya. Di dalam ini Artikel gambar, kami akan memahami cara memasukkan gambar di laman web menggunakan HTML dalam urutan berikut:
Cara Menambah Imej Dalam HTML
Untuk memasukkan gambar dalam laman web HTML memberi anda teg. Perkara penting lain yang perlu diingat adalah,
tidak mempunyai tanda penutup. scr atribut digunakan untuk menentukan jalan gambar, yang boleh berupa url atau jalur gambar dari sistem / pelayan. Mari kita mulakan dengan sintaks asas penyematan gambar di laman web menggunakan HTML.
Sintaks
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Contoh Kod
Imej Penyisipan Imej HTML di Halaman Web
Sama seperti tag lain, terdapat pelbagai atribut yang berkaitan dengan teg. Mari kita perhatikan masing-masing satu persatu, fahami keperluan mereka & cara menggunakannya.
Teg Gambar HTML
- Atribut alt
Atribut alt adalah teks alternatif untuk gambar. Alasan mengapa atribut alt diperkenalkan adalah jika karena alasan apa pun gambar tidak dapat dimuat maka teks alternatif akan muncul memberikan idea tentang gambar tersebut. Sebab gambar tidak dimuat mungkin sambungan internet lambat atau gambar tidak berada di sumber yang disediakan, dll.
Sekiranya gambar berada di dalam folder yang sama dengan fail HTML, anda boleh menentukan nama fail secara langsung. Jika tidak, anda mempunyai laluan mutlak fail gambar.
Nilai atribut alt harus menggambarkan gambar.
Contohnya
Imej Penyisipan Imej HTML di Halaman Web
apakah penapis konteks di tableau
- Lebar dan Tinggi Imej
Atribut gaya digunakan untuk mengatur ketinggian & lebar gambar. Dalam atribut gaya anda menentukan gaya CSS.
Imej Penyisipan Imej HTML di Halaman Web
Beberapa perkara penting semasa menyisipkan gambar di laman web menggunakan HTML adalah:
- Atribut lebar dan tinggi ditentukan dalam piksel.
- Anda juga dapat menentukan lebar dan tinggi gambar dalam bentuk peratusan. Ini akan mempertimbangkan peratusan mengikut keseluruhan laman web.
- Sekiranya anda hanya menentukan salah satu daripadanya maka ia akan menyesuaikan yang lain dengan sewajarnya.
- Menyematkan Imej menggunakan URL
HTML juga memberi anda fleksibiliti di mana anda dapat memilih gambar dari pelayan lain hanya dengan menentukan URL. Anda boleh menggunakan pelayan yang berasingan untuk menghosting gambar & kemudian membenamkan gambar tersebut menggunakan URL.
Imej Penyisipan Imej HTML di Halaman Web
- Gambar sebagai Pautan
Anda juga dapat menggunakan gambar sebagai pautan di mana pengguna dapat mengklik gambar dan mendarat di laman web baru. Untuk melakukannya, anda hanya perlu meletakkan hari masuk teg.
Imej Penyisipan Imej HTML di Halaman Web
cara mengatur class Java di baris arahan linux
- Imej Terapung
Anda juga boleh menyesuaikan penjajaran gambar menggunakan harta benda CSS float. Semua harta CSS perlu dinyatakan dalam atribut gaya.
Imej HTML
- Peta Imej
Ini adalah salah satu ciri penting yang disediakan oleh HTML. tag membantu dalam menentukan peta gambar. Anda pasti tertanya-tanya apa itu peta gambar. Peta gambar adalah gambar dengan kawasan yang dapat diklik
Imej HTML
- Gambar Latar Belakang
Anda juga boleh menambahkan gambar latar di halaman web. Anda hanya perlu menggunakan harta CSS, iaitu gambar latar belakang pada tag gaya dan menambahkannya ke elemen HTML.
Imej HTMLGambar Latar Belakang
Unsur BADAN
Dengan ini kita akan mengakhiri Blog Imej HTML ini.Sekarang setelah melaksanakan coretan di atas, anda akan memahami cara memasukkan gambar dalam HTML. Saya harap blog ini memberi maklumat dan nilai tambah kepada anda.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Gambar HTML' dan kami akan menghubungi anda.