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 bawahLihat 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
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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Temple.jpg/320px-Borobudur_Temple.jpg" /> </p> </body> </html>9Format 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="//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="//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="//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).