Tutorial HTML 9 : Jenis Atribut tag IMG HTML
• 8 min read • 3978 views
Tutorial HTML 9 : Jenis Atribut tag IMG HTML
Dalam dunia pengembangan web, pemahaman tentang tag HTML merupakan hal yang sangat penting. Salah satu tag yang sering digunakan adalah tag <img> untuk menampilkan gambar di halaman web. Namun, selain menambahkan gambar, tag <img> juga dapat diperkaya dengan berbagai jenis atribut yang dapat meningkatkan fungsionalitas dan penampilan gambar tersebut. Dalam tutorial HTML ini, kita akan menjelajahi berbagai jenis atribut yang dapat digunakan bersama dengan tag <img> untuk mengontrol perilaku, tampilan, dan interaktivitas gambar di halaman web. Dengan memahami berbagai jenis atribut ini, pengembang web akan memiliki lebih banyak alat untuk menciptakan pengalaman visual yang menarik dan dinamis bagi pengguna. Ayo kita mulai eksplorasi tentang jenis atribut tag <img> dalam pembangunan halaman web menggunakan HTML!
Atribut alt
Atribut alt
Atribut alt dalam tag HTML <img> adalah salah satu komponen penting yang sering diabaikan namun memiliki dampak besar terhadap aksesibilitas dan optimasi mesin telusur (SEO) dari sebuah halaman web. Atribut alt digunakan untuk memberikan teks alternatif pada gambar, yang akan ditampilkan jika gambar gagal dimuat atau untuk memberikan deskripsi gambar kepada pengguna yang menggunakan screen reader.
Dalam contoh kode HTML sebelumnya, kita menggunakan atribut alt untuk memberikan teks alternatif pada gambar Candi Borobudur:
```html
<!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>
```
Penting untuk dicatat bahwa meskipun tidak wajib, sebaiknya selalu menggunakan atribut alt untuk setiap gambar yang ditampilkan di halaman web. Hal ini karena teks alternatif dari atribut alt akan dibaca oleh screen reader, sehingga membantu pengguna dengan disabilitas visual dalam memahami konten gambar yang ada di halaman web.
Selain itu, penggunaan atribut alt juga memiliki manfaat dari segi optimasi mesin telusur (SEO). Mesin telusur seperti Google menggunakan informasi dari atribut alt untuk memahami konten gambar dan meningkatkan peringkat halaman web dalam hasil pencarian. Dengan menyertakan deskripsi yang relevan dan berbobot pada atribut alt, halaman web kita dapat lebih mudah ditemukan oleh pengguna yang mencari informasi terkait.
Dengan demikian, penggunaan atribut alt dalam tag <img> tidak hanya meningkatkan aksesibilitas bagi pengguna dengan disabilitas visual, tetapi juga memberikan manfaat tambahan dalam meningkatkan visibilitas dan keterbacaan konten gambar bagi mesin telusur. Oleh karena itu, selalu perhatikan untuk menyertakan atribut alt yang relevan dan deskriptif untuk setiap gambar yang ditampilkan di halaman web.
Baca Juga :
Atribut width dan height
Atribut width dan height merupakan dua atribut yang digunakan dalam tag HTML <img> untuk menentukan lebar dan tinggi dari sebuah gambar. Dengan menggunakan atribut ini, kita dapat mengontrol dimensi visual dari gambar yang ditampilkan di halaman web.
Dalam contoh kode HTML di atas, kita menggunakan atribut width dan height untuk menentukan lebar dan tinggi dari gambar sawah:
```html
<!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>
```
Pada contoh tersebut, kita memberikan nilai width dan height dalam satuan piksel (px). Misalnya, jika kita memberikan nilai 200 untuk width, itu berarti kita menetapkan lebar gambar tersebut sebesar 200 piksel. Demikian pula, nilai 150 untuk height berarti kita menetapkan tinggi gambar sebesar 150 piksel.
Meskipun atribut width dan height tidak wajib, sebaiknya kita tetap menambahkannya agar ukuran gambar konsisten di seluruh halaman web. Hal ini dapat membantu dalam menyajikan konten yang lebih rapi dan estetis. Selain itu, dengan menentukan dimensi gambar secara eksplisit, kita dapat mengoptimalkan performa halaman web dengan memastikan bahwa browser tidak perlu melakukan perhitungan tambahan untuk menyesuaikan ukuran gambar secara dinamis.
Dengan demikian, penggunaan atribut width dan height dalam tag <img> tidak hanya membantu dalam mengatur dimensi visual gambar, tetapi juga dapat meningkatkan konsistensi dan performa halaman web secara keseluruhan.
Atribut style
Atribut style dalam HTML adalah cara untuk menambahkan gaya atau tata letak khusus pada elemen-elemen di halaman web menggunakan aturan CSS. Dengan menggunakan atribut style, kita dapat mengontrol berbagai properti gaya seperti warna, ukuran, dan tata letak elemen-elemen tersebut.
Dalam contoh kode HTML di atas, kita menggunakan atribut style untuk memberikan gaya pada gambar-gambar sawah:
```html
<!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>
```
Dalam contoh tersebut, kita memberikan gaya khusus untuk masing-masing gambar sawah. Misalnya, pada gambar pertama, kita menentukan lebar gambar sebesar 160 piksel dan menambahkan border dengan ketebalan 3 piksel dan warna merah. Sedangkan pada gambar kedua, kita menggunakan properti border-radius untuk memberikan sudut lengkung pada gambar dengan nilai radius 10 piksel. Terakhir, pada gambar ketiga, kita menetapkan lebar dan tinggi gambar sebesar 100 piksel dan menggunakan border-radius dengan nilai 100% untuk membuat gambar menjadi bulat.
Atribut style memberikan fleksibilitas kepada pengembang web untuk menyesuaikan tampilan elemen-elemen di halaman web sesuai dengan kebutuhan dan preferensi desain mereka. Namun, sebaiknya penggunaan atribut style dibatasi hanya untuk keperluan gaya yang sederhana dan spesifik. Untuk gaya yang lebih kompleks dan terorganisir, disarankan untuk menggunakan aturan CSS terpisah dalam file eksternal atau di dalam tag <style> di dalam elemen <head>. Dengan demikian, kode HTML akan tetap bersih dan terstruktur, dan pengelolaan gaya akan lebih efisien dan mudah dipelihara.
Cara Membuat Gambar sebagai background
Membuat gambar sebagai background halaman web dapat memberikan sentuhan visual yang menarik dan memperkaya pengalaman pengguna. Untuk melakukan hal ini, kita menggunakan CSS dengan atribut background-image yang diisi dengan URL dari gambar yang ingin digunakan sebagai background.
Contoh kode HTML di bawah ini menunjukkan cara menggunakan gambar sebagai background halaman web:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
<style>
body {
background-image: url(images/sawah.jpg);
background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan ukuran layar */
background-repeat: no-repeat; /* Agar gambar tidak diulang-ulang */
background-position: center; /* Menempatkan gambar di tengah halaman */
color: white; /* Mengubah warna teks agar terlihat jelas di atas background gambar */
}
</style>
</head>
<body>
<h1>Background dengan Gambar</h1>
<p>Halaman ini menggunakan gambar sebagai background.</p>
</body>
</html>
```
Pada contoh di atas, atribut background-image digunakan di dalam tag <style> untuk menetapkan gambar "sawah.jpg" sebagai background halaman. Selain itu, beberapa properti CSS tambahan juga ditambahkan untuk mengatur tampilan background gambar dengan lebih baik. Properti background-size: cover; digunakan untuk menyesuaikan ukuran gambar dengan ukuran layar, background-repeat: no-repeat; untuk mencegah gambar diulang-ulang, dan background-position: center; untuk menempatkan gambar di tengah halaman. Terakhir, properti color: white; digunakan untuk mengubah warna teks agar terlihat jelas di atas background gambar.
Dengan cara ini, kita dapat membuat halaman web menjadi lebih menarik dengan menggunakan gambar sebagai background, sehingga meningkatkan kualitas visual dan estetika halaman web tersebut.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
