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
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