Belajar HTML Part 9 - Menambahkan Gambar di HTML (Tag Image)
Website tanpa sebuah gambar akan terlihat membosankan dan kurang menarik. Hal itu dikarenakan otak kita lebih mudah untuk menyerap informasi dengan visual dibandingkan hanya teks saja.
Selain untuk memberikan informasi dengan cara visual, gambar juga akan membuat tampilan website menjadi lebih menarik.
Oleh karena itu, gambar pada sebuah website sangatlah penting.
Pada tutotial kali ini, kita akan belajar bagaimana cara menambahkan gambar di HTML.
mari kita bahas..
Cara Menambahkan Gambar di HTML
Untuk menambahkan gambar di HTML, kita bisa menggunakan tag <img> (image). Tag ini memiliki atribut wajib, yaitu src (source) yang berisi alamat dari gambar yang akan ditampilkan. Nilai dari atribut src ini bisa berupa alamat URL maupun alamat path.
Tag <img> merupakan tag yang tidak memiliki pasangan penutup, jadi tag <img> harus ditutup hanya dengan menambahkan garis miring.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cara Membuat Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>
Berikut adalah contoh gambar yang ditampilkan:
</p>
<p>
<img src="gambarlaut.jpg" />
</p>
</body>
</html>Hasilnya:
Format File Gambar untuk HTML
Tidak semua format file gambar bisa ditampilkan di halaman website. Berikut adalah daftar format gambar yang sering digunakan untuk website:
| Nama Format | Nama Panjang | Ekstensi |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
| WebP | Web Picture | .webp |
Atribut untuk Tag <img>
Berikut beberapa atribut yang sering digunakan pada tag <img>:
Atribut height dan width
Atribut height dan width adalah atribut yang digunakan untuk menentukan tinggi dan lebar dari gambar.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cara Membuat Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>
Berikut adalah contoh gambar yang ditampilkan dengan tinggi dan lebar yang berbeda:
</p>
<p>
<img src="gambarlaut.jpg" width="600" height="300" />
<img src="gambarlaut.jpg" width="400" height="200"/> <img src="gambarlaut.jpg" width="200" height="100"/> </p>
</body>
</html>Hasilnya:
Atribut alt
Atribut alt digunakan untuk memberikan teks alternatif pada gambar saat gambar gagal untuk dimuat atau ditampilkan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cara Membuat Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>
Berikut adalah contoh gambar yang ditampilkan saat gagal dimuat:
</p>
<p>
<img src="" alt="gambar laut" /> </p>
</body>
</html>Hasilnya:
Atribut style
Atribut style digunakan untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu pada gambar.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cara Membuat Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>
Berikut adalah contoh gambar yang ditampilkan:
</p>
<p>
<img src="gambarlaut.jpg" style="width: 160px;border: 3px solid blue;" /> <img src="gambarlaut.jpg" style="width: 160px;border-radius: 10px;" /> <img src="gambarlaut.jpg" style="width: 160px;height: 100px;border-radius: 100%;" /> </p>
</body>
</html>Hasilnya:
Selanjutnya
Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML