Masukkan gambar dengan HTML - bagaimana ia berfungsi

Jika anda mahu memasukkan imej di laman web anda dengan HTML, gunakan tag img. Baca di sini bagaimana sebenarnya ini berfungsi dan apa yang perlu anda hadapi.

Cara memasukkan imej dengan HTML - asas-asas

• Pada hari itu boleh memasukkan gambar.
• Sumber imej diberikan dalam tag: menyisipkan file "testbild.webp" dari subfolder "gambar" di laman web.
• Sumber luaran melalui URL juga mungkin: mengintegrasikan logo CHIP dari pelayan kami.

Atribut HTML untuk imej terbenam

Banyak atribut boleh ditambah dalam tag img:

• Gunakan "lebar" dan "ketinggian" untuk menentukan saiz imej di laman web: Imej dipaparkan persegi dengan panjang sisi 100 piksel.
• Dengan "alt" anda menentukan teks alternatif yang dipaparkan jika imej masing-masing tidak dapat dimuatkan. Anda harus sentiasa menetapkan atribut ini apabila memasukkan imej dengan HTML.
• Atribut "sempadan" menentukan ketebalan bingkai dalam piksel. Gambar dengan mempunyai bingkai yang agak tebal dengan lima piksel.
• Gunakan "align" untuk menyelaraskan grafik. Nilai untuk atribut ini adalah "bawah", "atas", "tengah", "kiri", "kanan" dan "pusat".
• Dengan "hspace" dan "ruang kosong" anda boleh (melintang dan menegak) menetapkan jarak kepada imej.

Format manakah yang patut saya gunakan?

Terdapat pelbagai format imej yang boleh anda masukkan dalam kod HTML.

• JPG: Imej format JPG paling biasa digunakan untuk laman web. Format ini mewakili 16.7 juta warna. Di samping itu, JPG boleh dimampatkan dengan baik. Oleh karena itu, file gambar dapat dibuat sangat kecil, yang memungkinkan waktu loading cepat.
• PNG: Format PNG juga boleh memaparkan 16.7 juta warna dan boleh dimampatkan. Kelebihan dalam format JPG ialah pemampatan yang mungkin tanpa kerugian.
• Kawasan yang ditakrif dalam format PNG juga boleh dipaparkan secara telus. Walau bagaimanapun, pelayar yang sangat lama mempunyai masalah yang memaparkan transparansi.
• GIF: Jika anda ingin memasukkan gambar bergerak dengan HTML, format GIF sesuai. Hanya 256 warna yang ditunjukkan dalam format ini dan pemampatan berlaku secara automatik tanpa sebarang pilihan tetapan.
• Format GIF paling sesuai untuk grafik, kecil atau logo kecil. Untuk memastikan bahawa logo sesuai dengan harmoni ke dalam halaman, transparansi boleh digunakan dalam format GIF seperti PNG.

HTML contoh

• Ini mengintegrasikan logo CHIP dari laman web kami.
• Ia dipaparkan dengan ketinggian 100 piksel dan lebar 200 piksel.
• Sekiranya ia tidak dapat dimuatkan, "CHIP-Logo" dipaparkan sebagai teks kosong.
• Gambar dibingkai oleh bingkai dua piksel.
• Ia adalah sejajar dengan betul dan adalah 50 piksel selain elemen sisi lain.