Menambahkan gambar ke halaman situs web Anda sering dapat membuatnya lebih enak dipandang dan menyampaikan informasi lebih baik daripada hanya menggunakan teks. Proses ini dilakukan dengan menggunakan kode HTML dan file gambar. File dapat berasal dari halaman web yang berbeda atau disimpan di server web.

Menggunakan menandai

Dalam kode HTML untuk halaman web, Anda dapat menambahkan gambar menggunakan menandai. Dalam tag, Anda perlu menentukan empat atribut:

• Src - Atribut sumber menunjukkan lokasi gambar. Anda dapat menggunakan jalur relatif jika gambar berada di server yang sama dengan situs Anda, tetapi gambar dari situs lain memerlukan jalur absolut.
• Alt - Atribut teks alternatif adalah deskripsi tertulis dari gambar.
• Lebar - Lebar gambar.
• Tinggi - Tinggi gambar.

Atribut opsional adalah Border, yang memungkinkan Anda menentukan batas di sekitar gambar. Atribut perbatasan didefinisikan dalam ukuran piksel. Misalnya, menggunakan batas = 1 di tag berarti batas di sekitar gambar akan menjadi 1 piksel lebar.

Catatan: Atribut Border telah usang dalam HTML5 dan tidak didukung.

Contohnya

Contoh berikut menunjukkan HTML aktual yang digunakan untuk menambahkan gambar di bagian atas halaman ini. Mereka dapat dimasukkan di mana saja di tubuh halaman Anda. Yang pertama memiliki URL yang lebih pendek karena gambar disimpan di server kami; yang kedua adalah bagaimana Anda menghubungkan ke gambar kami.

Contoh satu

Contoh dua

Format gambar apa yang dapat saya gunakan pada halaman web?

Format gambar yang paling umum digunakan untuk gambar, foto, logo, dan gambar lain adalah JPEG, GIF, dan PNG. Format gambar lain yang tidak didukung secara luas seperti BMP mungkin tidak berfungsi di semua browser.

Apakah saya perlu mengutip atribut di dalam tag img?

Iya nih. Meskipun browser hari ini biasanya dapat memperbaiki kesalahan dengan tanda kutip yang hilang di sekitar nilai atribut, Anda harus selalu memiliki tanda kutip di sekitar nilai atribut untuk mencegah kesalahan.