Pada artikel ini, kita akan belajar cara menampilkan gambar di HTML. Mengenai tentang gambar di HTML, sebenarnya sudah pernah pernah saya bahas tentang cara menyisipkan link pada gambar. Namun untuk tutorial ini, saya akan membahasnya lebih dalam lagi.
Format File Gambar untuk HTML
Sebelum ke pembahasan cara menampilkan gambar di HTML, terlebih dahulu kita harus mengetahui format pada file gambar tersebut. Karena tidak semua format file gambar dapat ditampilkan di HTML.
Misalnya, anda tidak dapat menampilkan format file baru seperti WebP jika masih menggunakan browser versi lama. Selain itu, ada format PSD. Format ini hanya ditujukan untuk aplikasi Photoshop.
Berikut ini daftar format gambar digunakan dalam HTML :
| 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 Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
| WebP | Web Picture | .webp |
Menampilkkan Gambar di HTML
Gambar dapat kita tambahkan ataupun menampilkan nya di HTML, yaitu dengan menggunakan tag <img> dan atribut src.
<img src=" alamat URL gambar " />
Alamat URL gambar pada atribut src dapat berupa URL atau path.
Alamat URL harus berada didalam tanda petik atas (”), lalu ditutup dengan garis miring.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar logo praktekotodidak:</p>
<p>
<img src="logo-web.png" />
</p>
</body>
</html>
Pada contoh diatas, kita menampilkan gambar di html dengan cara langsung menuliskan nama file gambarnya, karena gambar tersebut ditempatkan pada folder yang sama dengan file HTML.
Hasil tampilan di browser:
Namun, jika file gambar tersebut tersimpan di folder yang berbeda, maka kita perlu menuliskan alamat path-nya. Misalnya gambar tersebut tersimpan di E:\test
Maka penulisannya dibuat seperti ini :
<img src="E:\test/logo-web.png" />
Beda lagi halnya jika kita ingin menampilkan gambar di HTML dari website lain, maka kita harus menuliskan alamat URL lengkap dari gambar tersebut.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Logo CSS</p>
<p>
<img src="https://praktekotodidak.com/wp-content/uploads/2022/03/logo-css.png"/>
</p>
</body>
</html>
Hasilnya :
Membuat Gambar Background
Kita bisa menampilkan gambar background di html dengan CSS, yaitu menggunakan atribut background-image. Setelah itu, diisi URL atau path gambar yang akan dijadikan background.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gambar di HTML</title>
</head>
<body style= "background-image: url(https://praktekotodidak.com/wp-content/uploads/2021/12/online-programming-course-03-1.jpg); " >
<h1 style="color:yellow"> Gambar Background</h1>
<h2 style="color:white"> Kita bisa menjadikan sebagai background dengan CSS menggunakan atribut background-image.<br>
Setelah itu diisi dengan URL atau path dari gambar yang akan dijadikan background. </h2>
</body>
</html>
Hasilnya :
Atribut untuk Tag <img>
Selain atribut src, Masih ada beberapa atribut tambahan yang sering digunakan pada tag <img>, diantaranya :
1. atribut alt
Atribut yang memberikan teks alternatif saat gambar gagal ditampilkan. Atribut alt sering digunakan untuk kata kunci SEO. Teks alternatif ini akan dibaca oleh screen reader.
2. Atribut width
Atribut untuk menentukan lebar gambar agar ukurannya konsisten. Satuan yang digunakan untuk nilai width adalah piksel (px).
3. Atribut height
Atribut untuk menentukan tinggi gambar agar ukurannya konsisten. Sama seperti width, untuk nilainya menggunakan piksel (px).
4. Atribut style
Atribut untuk menambahkan style CSS pada sebuah elemen yang berfungsi untuk memberikan style atau efek tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Atribut alt</p>
<p>
<!-- Atribut alt -->
<img src="" alt="Logo CSS" />
</p>
<p>Berikut ini adalah gambar Atribut width dan height</p>
<p>
<!-- Atribut width dan height -->
<img src="logo-web.png" width="100" height="100" alt="logo"/>
<img src="logo-web.png" width="80" height="80" alt="logo"/>
</p>
<p>Berikut ini adalah gambar Atribut style</p>
<p>
<!-- Atribut style -->
<img src="logo-web.png" style="width: 100px;border: 1px solid red;" />
<img src="logo-web.png" style="width: 100px;height: 80px;border-radius: 100%;" />
</p>
</body>
</html>
Hasilnya :
Keterangan :
- Kita sengaja mengosongkan nilai atribut src, sehingga yang ditampilkan adalah teks alternatif.
- Pada Atribut width dan height, gambar pertama lebih besar dari pada gambar kedua karena kita memberikan nilai ukurannya 100 pada gambar pertama. Sedangkan gambar kedua memberikan nilai ukurannya 80.
- Untuk Atribut style pada gambar pertama, kita memberikan style garis (border) dengan ukuran 1px, jenis solid, dan warnanya adalah merah. Pada gambar kedua, kita berikan nilai 100% pada border-radius yang akan menciptakan lingkaran.
Tag Gambar di HTML 5
Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag <img>, diantaranya:
<figure> untuk membungkus gambar dan teks caption-nya;
<picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda.
Mari kita coba satu satu :
Tag <figure>
Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar tag <figcaption>.
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 logo praktekotodidak:</p>
<p>
<figure>
<img src="logo-web.png" width="150" alt="praktekotodidak"/>
<figcaption> logo web praktekotodidak</figcaption>
</figure>
</p>
</body>
</html>
Hasilnya :
Tag <picture>
Untuk menentukan gambar mana yang akan ditampilkan pada halaman web HTML. Fungsi ini agar gambar tersebut dapat menyesuaikan ukuran media seperti handphone dan komputer. Dengan menggunakan tag ini, maka website kita akan menjadi responsif pada tampilan mobile maupun dekstop
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah Contoh Tag picture</p>
<p>
<picture>
<source media="(min-width: 950px)" srcset="danau.png">
<source media="(min-width: 350px)" srcset="logo-web.png">
<img src="danau.png">
</picture>
</p>
</body>
</html>
Hasilnya :
Begitulah cara menampilkan atau menambahkan gambar di HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#12 – Elemen Semantik pada HTML
