Halo teman-teman, apa kabar? Kali ini kita akan belajar cara menambahkan gambar di HTML. Gambar adalah salah satu elemen yang bisa membuat website kita lebih menarik dan informatif. Dengan gambar, kita bisa menampilkan foto, ilustrasi, grafik, logo, dan lain-lain.
|
| Gambar 13.1 : Ilustrasi Menambahkan Gambar ke Kode HTML |
Daftar Isi
Apa itu Elemen Gambar di HTML?
Elemen gambar di HTML adalah elemen yang digunakan untuk menyisipkan gambar ke dalam halaman web. Elemen ini ditulis dengan tag <img> yang bersifat self-closing, artinya tidak memerlukan tag penutup.
Tag <img> memiliki beberapa atribut yang bisa kita gunakan untuk mengatur gambar, seperti:
src: atribut ini wajib ada dan berisi URL atau alamat gambar yang ingin ditampilkan.alt: atribut ini berisi teks alternatif yang akan muncul jika gambar tidak bisa ditampilkan atau dibaca oleh screen reader.width: atribut ini berisi lebar gambar dalam satuan piksel.height: atribut ini berisi tinggi gambar dalam satuan piksel.title: atribut ini berisi teks yang akan muncul saat kita mengarahkan kursor ke gambar.
Contoh penggunaan tag <img> adalah sebagai berikut:
<img src="gambar.jpg" alt="Gambar contoh" width="300" height="200" title="Ini adalah gambar contoh">Bagaimana Cara Menyimpan dan Mengatur Gambar?
Sebelum kita bisa menampilkan gambar di HTML, kita perlu menyimpan gambar tersebut di folder atau direktori yang sama dengan file HTML kita. Jika tidak, kita perlu menulis URL lengkap gambar tersebut, termasuk protokol (http atau https), nama domain, dan path.
Contoh URL lengkap gambar adalah sebagai berikut:
<img src="https://www.example.com/img/gambar.jpg" alt="Gambar contoh">Namun, jika kita menyimpan gambar di folder yang sama dengan file HTML, kita cukup menulis nama file gambar saja.
Contoh:
<img src="gambar.jpg" alt="Gambar contoh">Jika kita menyimpan gambar di folder lain yang berada di dalam folder yang sama dengan file HTML, kita perlu menulis nama folder tersebut sebelum nama file gambar.
Contoh:
<img src="images/gambar.jpg" alt="Gambar contoh">Jika kita menyimpan gambar di folder lain yang berada di luar folder yang sama dengan file HTML, kita perlu menulis tanda ../ sebelum nama folder tersebut untuk keluar dari folder saat ini.
Contoh:
<img src="../images/gambar.jpg" alt="Gambar contoh">Kita bisa mengatur posisi dan ukuran gambar dengan menggunakan atribut width dan height, atau dengan menggunakan CSS. Kita juga bisa mengatur margin, padding, border, dan lain-lain dengan CSS.
Cara Menambahkan Gambar di HTML
Sekarang kita sudah tahu apa itu elemen gambar di HTML dan bagaimana cara menyimpan dan mengatur gambar. Mari kita coba menambahkan beberapa gambar ke dalam halaman web kita.
Langkah pertama, buatlah file HTML baru dengan nama gambar.html dan tulis kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar di HTML</title>
</head>
<body>
<h1>Cara Menambahkan Gambar di HTML</h1>
<p>Halo teman-teman, apa kabar? Kali ini kita akan belajar cara menambahkan gambar di HTML.</p>
</body>
</html>Langkah kedua, simpanlah beberapa gambar di folder yang sama dengan file HTML kita. Misalnya, saya memiliki tiga gambar dengan nama kucing.jpg, gunung.jpg, dan naruto.jpg.
Langkah ketiga, tambahkanlah tag <img> untuk setiap gambar yang ingin kita tampilkan. Jangan lupa untuk menulis atribut src dan alt untuk setiap gambar.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar di HTML</title>
</head>
<body>
<h1>Cara Menambahkan Gambar di HTML</h1>
<p>Halo teman-teman, apa kabar? Kali ini kita akan belajar cara menambahkan gambar di HTML.</p>
<img src="kucing.jpg" alt="Gambar kucing">
<img src="gunung.jpg" alt="Gambar gunung">
<img src="naruto.jpg" alt="Gambar naruto">
</body>
</html>Langkah keempat, bukalah file HTML kita di browser dan lihatlah hasilnya. Kita seharusnya melihat tiga gambar yang berada di bawah paragraf.
|
| Gambar 13.2 : Tampilan hasil praktek menambahkan gambar di kode HTML |
Selamat, kita sudah berhasil menambahkan gambar di HTML!
Kesimpulan
Dalam artikel ini, kita telah belajar cara menambahkan gambar di HTML dengan menggunakan tag <img> dan beberapa atributnya. Kita juga telah belajar cara menyimpan dan mengatur gambar dengan menggunakan URL relatif atau absolut. Semoga artikel ini bermanfaat dan membantu teman-teman dalam membuat website yang lebih menarik dan informatif dengan gambar.