Website tanpa gambar = membosankan.
Setuju?
Ya saya juga setuju.
Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja.
Karena itu, gambar sangatlah penting.
Pada tutorial ini, kita akan belajar cara menambahkan gambar di HTML.
Mari kita mulai..
Menambahkan Gambar di HTML
Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>.
Tag ini memiliki atribut wajib, yakni src.Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan.
Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.
CONTOH:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="sawah.jpg" />
</p>
</body>
</html>
Hasilnya:
Perhatikan!
Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML.
Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya.
Misalkan, kita akan menyimpan gambar di dalam folder images.
Kita bisa menulis html seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/sawah.jpg" />
</p>
</body>
</html>
