Untuk memasukkan foto atau gambar ke dalam sebuah website menggunakan HTML, Anda menggunakan elemen <img>. Elemen ini memungkinkan Anda untuk menampilkan gambar dari file lokal atau URL di halaman web.
Langkah-langkah Memasukkan Gambar ke Website dengan HTML
1. Struktur Dasar Elemen <img>
Berikut adalah contoh kode dasar untuk memasukkan gambar:
<img src="path/to/image.jpg" alt="Deskripsi Gambar">
Penjelasan:
src: (source) Menentukan lokasi file gambar.alt: (alternative text) Menyediakan teks deskriptif yang ditampilkan jika gambar gagal dimuat. Alt juga membantu aksesibilitas untuk pengguna dengan keterbatasan visual.
2. Menambahkan Gambar dari File Lokal
Jika gambar ada di folder proyek Anda:
- Pastikan gambar berada di folder yang sama atau di dalam subfolder.
- Gunakan path relatif untuk menentukan lokasi gambar. Misalnya:
- Struktur folder:
/project-folder ├── index.html ├── images │ └── foto.jpg - Kode HTML:
<img src="images/foto.jpg" alt="Foto Profil">
- Struktur folder:
3. Menambahkan Gambar dari URL
Anda juga bisa menggunakan gambar yang di-hosting online dengan URL:
<img src="https://example.com/images/foto.jpg" alt="Deskripsi Foto">
4. Menyesuaikan Ukuran Gambar
Anda dapat mengatur ukuran gambar menggunakan atribut width dan height atau CSS:
- Dengan atribut HTML:
<img src="images/foto.jpg" alt="Deskripsi Foto" width="300" height="200"> - Dengan CSS:
<style> .gambar { width: 300px; height: auto; /* Menjaga proporsi gambar */ } </style> <img src="images/foto.jpg" alt="Deskripsi Foto" class="gambar">
5. Membuat Gambar Klikable
Untuk membuat gambar menjadi tautan, bungkus elemen <img> dengan elemen <a>:
<a href="https://example.com">
<img src="images/foto.jpg" alt="Deskripsi Foto" width="300">
</a>
6. Menambahkan Caption pada Gambar
Gunakan elemen <figure> dan <figcaption> untuk menambahkan teks keterangan:
<figure>
<img src="images/foto.jpg" alt="Deskripsi Foto" width="300">
<figcaption>Ini adalah keterangan gambar.</figcaption>
</figure>
Contoh Lengkap
Berikut adalah contoh lengkap memasukkan gambar ke dalam halaman HTML:
<!DOCTYPE html>
<html lang="id">
<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>Menampilkan Gambar di HTML</h1>
<!-- Gambar dari file lokal -->
<img src="images/foto.jpg" alt="Foto Profil" width="300">
<!-- Gambar dari URL -->
<img src="https://example.com/images/foto.jpg" alt="Foto Online" width="300">
<!-- Gambar dengan caption -->
<figure>
<img src="images/foto.jpg" alt="Deskripsi Foto" width="300">
<figcaption>Ini adalah keterangan gambar.</figcaption>
</figure>
</body>
</html>
Tips Penting
- Format gambar: Gunakan format gambar yang tepat, seperti JPEG (untuk foto) atau PNG (untuk gambar transparan).
- Ukuran gambar: Kompres gambar untuk mengurangi ukuran file dan meningkatkan kecepatan muat halaman.
- Gunakan deskripsi alt yang relevan: Ini membantu SEO dan aksesibilitas.
About the Author
