Agar website terlihat lebih menarik biasanya website diberi gambar. Karena otak manusia lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja.
Atribut pada tag <img>
Tag yang digunakan untuk menambahkan gambar dengan html, adalah tag <img>, tag <img> tidak memiliki tag penutup. tag ini juga bisa diberikan atribut
- src: untuk menentukan sumber dan nama gambar, atribut ini merupakan atribut yang wajib diberikan
- Width: untuk menentukan lebar gambar
- Height: menentukan tinggi gambar
- Alt: Untuk memberikan text alternatif jika gambar tidak muncul
- Title: Untuk menampilkan text yang tampil ketika mouse diatas gambar
Ketentuan Penulisan:
Format gambar yang didukung oleh tag <img> APNG, GIF, ICO, JPEG, PNG, SVG, WebP. Jika gambar tidak ditentukan lebar dan tingginya maka ukuran gambar akan sesuai dengan aslinya. Penulisan nama dan letak gambar sebagai berikut:
- Jika gambar berada pada satu folder dengan file html maka penulisannya src=”nama-gambar.jpg”
- jika gambar berada pada folder yang berada pada folder yang sama dengan html penulisannya src=”nama-folder/nama-gambar.jpg”
- jika gambar berada pada folder yang berbeda dengan file html, penulisannya src=”…/nama-folder/nama-gambar.jpg”. Tanda …/ berarti keluar dari folder yang berisi file html.
- Jika gambar berada di internet atau website lain harus dituliskan alamat lengkapnya
Dibawah ini Contoh gambar yang ditampilkan menggunakan html dengan di internet atau website lain
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Code Gambar diatas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contoh Menambah Gambar Dengan Html</title> </head> <body> <p>Dibawah ini Contoh gambar yang ditampilkan menggunakan html dengan di internet atau website lain</p> <p> <img src="http://www.syaiflash.com/wp-content/uploads/2023/04/Fungsi-Tombol-Keyboard.jpg" /> </p> </body> </html> |
Leave a Reply