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

Table of Contents Show

Format File Gambar untuk HTML
Menampilkkan Gambar di HTML
Membuat Gambar Background
Atribut untuk Tag <img>
Tag Gambar di HTML 5
Bagaimana cara menampilkan gambar di HTML?
Apa tag yang digunakan untuk menampilkan gambar pada web HTML?
Kenapa tidak bisa menampilkan gambar di HTML?
Apa HTML yang benar untuk menyisipkan gambar latar?

Format File Gambar untuk HTML
Menampilkkan Gambar di HTML
Membuat Gambar Background
Atribut untuk Tag <img>
Tag Gambar di HTML 5

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>
  <h2>Menampilkan Gambar di HTML</h2>
  <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>
  <h2>Menampilkan Gambar di HTML</h2>
  <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); " >
  <h2 style="color:yellow"> Gambar Background</h2>
  <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>
  <h2>Menampilkan Gambar di HTML</h2>
  
  <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>
  <h2>Menampilkan Gambar di HTML</h2>
  <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>
  <h2>Menampilkan Gambar di HTML</h2>
  <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

Bagaimana cara menampilkan gambar di HTML?

Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.

Apa tag yang digunakan untuk menampilkan gambar pada web HTML?

Di sini kita akan belajar HTML yaitu menampilkan gambar di HTML dengan tag <img>. Tag <img> merupakan kependekan dari image. Jadi, tag <img> ini berfungsi untuk menambahkan gambar di HTML. Tag <img> memiliki banyak atribut, seperti src, alt, dll yang akan kita bahas sekarang.

Kenapa tidak bisa menampilkan gambar di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Apa HTML yang benar untuk menyisipkan gambar latar?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.