Cara menggunakan html angka adalah

Question

Sebelum HTML5, tidak ada cara untuk menambahkan deskripsi ke gambar secara semantik melalui HTML. Jika ingin menambahkan informasi, maka kita harus menambahkan paragraf atau sesuatu yang berupa teks seperti heading

Untuk itu pada HTML5 telah ditambahkan tag

dimana tag tersebut memiliki elemen opsional yaitu.

yang berfungsi sebagai judul atau memberikan informasi tentang suatu gambar.

Contoh Menambahkan Judul Gambar dengan Kode HTML

Disini kita akan membuat konten web yang berisi gambar dan deskripsi gambar seperti yang ditunjukkan oleh Gambar. 1 di bawah

Gambar. 1
Lihat Gambar. 1, di mana ada deskripsi atau judul di bawah gambar grafik. Kode HTML untuk membuat judul gambar seperti Gambar. 1 di atas.

<!DOCTYPE html>
<html>
<body>

<p>Berbicara tentang penyajian data dalam bentuk visual, cara paling mudah untuk membuat orang lain mengerti data kita adalah penyajian dalam bentuk grafik / diagram.</p>

<p>Studi Kasus yang diangkat dalam tutorial kali ini masih sama seperti  tutorial sebelumnya. Namun disini hanya menambahkan teknik parsing data dengan JSON. Berikut ini adalah target keluaran yang akan kita bahas dalam tutorial kali ini seperti yang ditunjukkan oleh Gambar.1 dibawah ini :</p>

<figure align="center" >
  <img src="grafik.png" alt="Statistik Grafik Penggunaan Browser" width="704" height="328">
  <figcaption align="center">Gambar.1.Statistik Grafik Penggunaan Browser </figcaption>
</figure>
</body>
</html>

Deskripsi.

Kode
akan memblokir gambar agar berada di tengah. Jika Anda ingin gambar berada di kiri atau kanan, ubah saja "center" menjadi "left"< /a> atau "benar".
Kode
akan memuat gambar bernama grafik. png

Kode

akan menambahkan Judul Gambar di tengah. Jika Anda ingin posisi kiri atau kanan, ubah saja menjadi

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

Table of Contents Show

Contoh Menambahkan Judul Gambar dengan Kode HTML
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 Latar Belakang
Membuat Tautan dengan Gambar
Membuat Tautan pada Bagian Gambar
Tag Tambahan untuk Gambar dalam HTML
Tandai <!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
Tandai <!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 berikutnya?
Apa itu angka dalam HTML?
Apa fungsi dari elemen Figcaption?

Oleh karena itu, gambar sangat penting

Dalam tutorial ini, kita akan belajar cara menambahkan gambar dalam HTML

Mari kita mulai

Menambahkan Gambar di HTML

Gambar dapat ditambahkan dalam 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 yaitu

<!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 dalam 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 atau alamat jalur. Kemudian 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>

_

Hasil

Perhatian

Pada contoh di atas, kita langsung menuliskan nama file dari gambar tersebut. Ini karena kami meletakkan gambar di folder yang sama dengan file HTML

Jika file gambar tersebut disimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat pathnya saja

Misalnya, kita akan menyimpan gambar di 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

Jadi di HTML, kita bisa menulis 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 jika gambar tersebut ada di internet atau website lain?

Nah, jika kita menggunakan gambar dari website lain

kita harus menulis 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>

_

Hasil

Mudah bukan?

Nah, selanjutnya kita akan mempelajari format gambar apa saja yang bisa digunakan dalam 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

Tolong lanjutkan

Format File Gambar untuk HTML

Tidak semua format file gambar dapat ditampilkan dalam HTML. Karena setiap file gambar memiliki tujuannya masing-masing

Misalnya, file gambar dengan format PSD, itu adalah file gambar untuk Photoshop. Jelas ini tidak akan dapat ditampilkan dalam HTML

Lalu, format apa saja yang didukung oleh HTML?

Berikut adalah daftar beberapa format gambar yang sering digunakan di web

Name FormatName LengthExtensionAPNGAnimated 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

Mari kita ambil format WebP sebagai contoh, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kami menggunakan browser versi lama, gambar ini tidak akan 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 gaya 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

<!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 adalah atribut untuk memberikan teks alternatif pada gambar ketika 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>

Hasil

Dalam contoh, kami 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 ditampilkan adalah teks alternatif

Apakah kita harus 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, namun sebaiknya tetap menggunakan atribut ini. Sebab, nantinya teks alternatif tersebut akan terbaca oleh screen reader

Screen reader adalah aplikasi pembaca yang digunakan oleh tunanetra untuk 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 menempatkan 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

<!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 adalah atribut yang digunakan untuk menentukan lebar dan tinggi 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>

Hasil

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 beri 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. kami 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 opsional. Namun ada 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

<!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 adalah atribut untuk menambahkan gaya CSS ke elemen. Atribut ini sering digunakan pada gambar untuk memberikan gaya 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>

Hasil

Lihat gambar di atas ☝️

Gambar pertama kita beri corak 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 padat, dan warnanya merah

Lalu gambar kedua, kita beri 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 membuat lekukan di sudut gambar

Pada gambar ketiga, kita beri 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 menjadi

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

Membuat Gambar Latar Belakang

Sebenarnya hal ini sudah masuk dalam pembahasan tentang CSS, tapi tidak apa-apa untuk dibahas disini

Agar gambar dapat ditampilkan sebagai background, 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 dan mengisinya dengan URL 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>

Hasil

Membuat Tautan dengan Gambar

Kita sudah membahas membuat gambar sebagai link di Tutorial membuat link di HTML, tapi tidak apa-apa. kita akan bahas lagi agar kita bisa lebih mengerti

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>

Hasil

Membuat Tautan pada Bagian Gambar

Kita dapat membuat tautan pada bagian gambar tertentu 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>

Hasil

Tag Tambahan untuk Gambar dalam HTML

Pada HTML versi 5, terdapat beberapa tag tambahan yang dapat 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

Diantara mereka

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

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

Tandai <!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 atau 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 sawah:</p>
  <p>
    <img src="images/sawah.jpg" />
  </p>
</body>
</html>

_1 dengan teks caption. Teks keterangan adalah teks yang menjelaskan tentang gambar. Teks keterangan dapat 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>

Hasil

Tandai <!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 sekarang ini, website tidak hanya dibuka melalui komputer, tetapi juga melalui smartphone

Ukuran layar komputer dan smartphone tentunya berbeda. Oleh karena itu, website harus responsif agar dapat menyesuaikan 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 tersebut. Tag ini berfungsi untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu

Mari kita coba sebuah 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" />
  </p>
</body>
</html>

_0

Hasil

Apa berikutnya?

Sejauh ini kita telah belajar bagaimana menampilkan gambar dalam HTML. Intinya, Anda 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 itu angka dalam HTML?

Seperti yang telah dipelajari teman Anda dalam materi HTML 5. Gambar adalah elemen HTML yang berguna untuk menggabungkan a i=7>HTML a i=7>HTML HTML seperti gambar, diagram, daftar kode program dan lain-lain.

Apa fungsi dari elemen Figcaption?

Elemen < figcaption > dapat digunakan untuk menandai judul atau deskripsi gambar. figcaption > digunakan sebagai anak pertama atau terakhir elemen dari < figure> (terletak di dalam elemen dan posisinya bisa di awal atau di akhir).

kode html