Belajar HTML#11 – Cara Menampilkan Gambar di HTML

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 FormatNama PanjangEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb 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:

cara menampilkan gambar di html

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 :

cara menampilkan gambar di html

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 :

cara menampilkan gambar di html

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 :

cara menampilkan gambar di html

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

cara menampilkan gambar di html

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 :

cara menampilkan gambar di html

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

cara menampilkan gambar di html

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 :

cara menampilkan gambar di html

Begitulah cara menampilkan atau menambahkan gambar di HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#12 – Elemen Semantik pada HTML

Tinggalkan Balasan

Scroll to Top