Menambahkan gambar menggunakan css

Question

Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah menyerap informasi dengan visual dibandingkan hanya teks saja.

Table of Contents Show

Menambahkan Gambar di HTML
Format File Gambar untuk HTML
Atribut untuk Tag <!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>1
Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>2
Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>3 dan <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>4
Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>5
Membuat Gambar Background
Membuat Link dengan Gambar
Membuat Link pada Bagian Gambar
Tag Tambahan untuk Gambar di HTML
Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contoh Gambar di HTML</title> </head> <body style="background-image: url(images/sawah.jpg);"> <h1>Background dengan Gmabar</h1> <p>Halaman ini menggunakan gambar sebagai background</p> </body> </html>6
Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contoh Gambar di HTML</title> </head> <body style="background-image: url(images/sawah.jpg);"> <h1>Background dengan Gmabar</h1> <p>Halaman ini menggunakan gambar sebagai background</p> </body> </html>7
Apa Selanjutnya?
Apa HTML yang benar untuk menyisipkan gambar?
HTML apa yang benar untuk memasukkan gambar latar belakang?
Apa itu background
3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

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

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

1. Tag ini memiliki atribut wajib, yakni

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

2.

Jika kita tidak mengisi atribut

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

2, maka gambar tidak akan ditampilkan.

Alamat URL gambar pada atribut

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

2 dapat berupa URL maupun alamat path. Lalu tag

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

1 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

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

6.

Maka di HTML, kita bisa tulis seperti ini:

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

Hasilnya akan sama seperti contoh di atas.

Lalu bagaimana kalau gambarnya berada di internet atau website lain?

Nah, jika kita menggunakan gambar dari website lain..

..kita harus menuliskan alamat URL lengkap dari gambar tersebut.

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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

Hasilnya:

Gampang kan?

Nah, berikutnya kita akan pelajar format gambar apa saja yang bisa digunakan di HTML dan juga atribut lainnya untuk

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

1.

Silahkan lanjutkan..

Format File Gambar untuk HTML

Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki tujuan masing-masing.

Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas ini tidak akan bisa ditampilkan di HTML.

Lalu, format apa saja yang didunkung oleh HTML?

Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:

Nama FormatNama PanjangEkstensiAPNGAnimated Portable Network Graphics

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

8GIFGraphics Interchange Format

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

9ICOMicrosoft Icon

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

0,

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

1JPEGJoint Photographic Expert Group image

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

2,

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

3,

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

4,

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

5,

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

6PNGPortable Network Graphics

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

7SVGScalable Vector Graphics

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

8WebPWeb Picture

<!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 Candi Borobudur:</p>
  <p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" />
  </p>
</body>
</html>

9

Format file ini juga akan bergantung pada versi browser yang digunakan.

Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan.

Atribut untuk Tag <!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>1

Ada beberapa atribut yang sering digunakan pada tag

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

1:

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

2 untuk teks alternatif untuk gambar;

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

3 untuk menentukan lebar gambar;

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

4 untuk menentukan tinggi gambar;

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

5 untuk menentukan style CSS untuk gambar.

Mari kita coba satu per satu..

Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>2

Atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

2 adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan.

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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

Hasilnya:

Pada contoh tersebut, kita sengaja mengosongkan nilai atribut

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

2. Akibatnya gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

Apakah kita wajib menggunakan atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

2?

Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks alternatif akan dibaca oleh screen reader.

Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer.

Selain itu, atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

2 juga sering digunakan untuk meletakan kata kunci untuk SEO.

Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>3 dan <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>4

Atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

3 dan

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

4 adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.

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="images/sawah.jpg" width="200" height="150" alt="Sawah"/>
    <img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
    <img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
  </p>
</body>
</html>

Hasilnya:

Satuan yang digunakan untuk nilai

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

3 dan

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

4 adalah piksel (

<!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" width="200" height="150" alt="Sawah"/>
    <img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
    <img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
  </p>
</body>
</html>

7). Jika kita memberikan nilai

<!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" width="200" height="150" alt="Sawah"/>
    <img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
    <img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
  </p>
</body>
</html>

8, artinya.. kita memberikan nilai

<!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" width="200" height="150" alt="Sawah"/>
    <img src="images/sawah.jpg" width="150" height="100" alt="Sawah"/>
    <img src="images/sawah.jpg" width="50" height="50" alt="Sawah"/>
  </p>
</body>
</html>

9.

Atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

3 dan

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

4 juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar konsisten.

Atribut <!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 Candi Borobudur:</p> <p> <img src="" alt="Candi Borobudur" /> </p> </body> </html>5

Atribut

<!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 Candi Borobudur:</p>
  <p>
    <img src="" alt="Candi Borobudur" />
  </p>
</body>
</html>

5 merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

Hasilnya:

Perhatikan gambar di atas ☝️..

Gambar pertama kita berikan style garis (border) dengan ukuran

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

4, jenis solid, dan warnanya adalah merah.

Lalu gambar kedua, kita berikan style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

5 untuk menciptkan lengkungan pada pojok gambar.

Pada gambar ketiga, kita berikan nilai

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

6 pada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

5 yang akan menciptkan lingkaran.

Membuat Gambar Background

Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di sini.

Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

8 lalu diisi dengan URL dari gambar.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

Hasilnya:

Membuat Link dengan Gambar

Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa.. kita akan bahas lagi biar semakin paham.

Baiklah…

Cara membuat link dengan gambar adalah dengan menggabungkan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

9 dan tag

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

1. Tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>

9 harus mengapit tag

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

1.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Gambar Sebagai Link</h1>
  <p>Coba klik gambar ini:</p>
  <p>
    <a href="https://www.petanikode.com">
      <img src="images/sawah.jpg" width="160"/>
    </a>
  </p>
</body>
</html>

Hasilnya:

Membuat Link pada Bagian Gambar

Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

3 dan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

4.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Gambar Sebagai Link</h1>
  <p>Coba sentuh dan klik gambar ini:</p>
  <p>
    <img src="https://www.w3schools.com/html/workplace.jpg" usemap="#workmap"/>
    <map name="workmap">
      <area shape="rect" coords="34,44,270,350" title="Computer" href="#!">
      <area shape="rect" coords="290,172,333,250" title="Phone" href="#!">
      <area shape="circle" coords="337,300,44" title="Coffee" href="#!">
    </map>
  </p>
</body>
</html>

Hasilnya:

Tag Tambahan untuk Gambar di HTML

Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag

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

1.

Diantaranya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

6 untuk membungkus gambar dan teks caption-nya;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

7 untuk menentukan jenis gambar pada ukuran layar yang berbeda.

Mari kita coba:

Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contoh Gambar di HTML</title> </head> <body style="background-image: url(images/sawah.jpg);"> <h1>Background dengan Gmabar</h1> <p>Halaman ini menggunakan gambar sebagai background</p> </body> </html>6

Tag figure berfungsi untuk membungkus tag

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

1 atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Gambar di HTML</title>
</head>
<body>
  <h1>Gambar Sebagai Link</h1>
  <p>Coba klik gambar ini:</p>
  <p>
    <a href="https://www.petanikode.com">
      <img src="images/sawah.jpg" width="160"/>
    </a>
  </p>
</body>
</html>

0.

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>
    <figure>
      <img src="images/sawah.jpg" width="300" alt="Sawah"/>
      <figcaption>Landscape sawah dan langit</figcaption>
    </figure>
  </p>
</body>
</html>

Hasilnya:

Tag <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contoh Gambar di HTML</title> </head> <body style="background-image: url(images/sawah.jpg);"> <h1>Background dengan Gmabar</h1> <p>Halaman ini menggunakan gambar sebagai background</p> </body> </html>7

Di era mobile seperti saat ini, website tidak hanya dibuka melalui komputer saja, tapi juga smartphone.

Ukuran layar komputer dengan smartphone tentunya berbeda. Karena itu, website harus bersifat responsif agar bisa menyesuaikan diri dengan media yang digunakan.

Nah, tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>
<body style="background-image: url(images/sawah.jpg);">
  <h1>Background dengan Gmabar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>

7 hadir untuk mengatasi masalah ini. Tag ini berfungsi untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu.

Mari kita coba contohnya:

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

0

Hasilnya:

Apa Selanjutnya?

Sejauh ini kita sudah belajar cara menampilkan gambar di HTML. Intinya, kamu hanya perlu mengingat cara menggunakan tag

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

1.

Apa HTML yang benar untuk menyisipkan gambar?

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.

HTML apa yang benar untuk memasukkan gambar latar belakang?

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.

Apa itu background

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar. Atribut alt juga berperan penting untuk mesin pencari seperti Google.

kode css