Fungsi Tag Image HTML dan Tutorial Cara Menambahkan Gambar di HTML

HTML atau Hypertext Markup Language merupakan bahasa markup yang digunakan untuk membangun halaman web. Salah satu elemen HTML yang penting adalah tag gambar atau image tag. Tag ini digunakan untuk menampilkan gambar atau foto pada halaman web. Dalam artikel ini, kami akan membahas fungsi tag image HTML dan tutorial cara menambahkan gambar di HTML.

Fungsi Tag Image HTML

Tag image HTML memiliki fungsi untuk menampilkan gambar atau foto pada halaman web. Gambar atau foto tersebut bisa berupa file JPEG, GIF, atau PNG. Tag ini juga memiliki atribut yang berguna untuk mengatur ukuran, posisi, dan tampilan gambar pada halaman web.

Cara Menambahkan Gambar di HTML

Berikut adalah langkah-langkah cara menambahkan gambar di HTML:

1. Pertama, siapkan file gambar yang akan ditampilkan pada halaman web. Pastikan file gambar tersebut berformat JPEG, GIF, atau PNG.
2. Buat tag image HTML dengan mengetikkan kode berikut:
   <img src=”nama-file-gambar.jpg” alt=”deskripsi-gambar”>
3. Ganti “nama-file-gambar.jpg” dengan nama file gambar yang akan ditampilkan pada halaman web.
4. Ganti “deskripsi-gambar” dengan deskripsi singkat tentang gambar tersebut. Deskripsi ini akan muncul jika gambar tidak bisa ditampilkan pada halaman web.
5. Simpan file HTML tersebut dengan ekstensi .html.
6. Buka file tersebut pada browser untuk melihat gambar yang ditampilkan pada halaman web.

Atribut pada Tag Image HTML

Tag image HTML memiliki beberapa atribut yang berguna untuk mengatur ukuran, posisi, dan tampilan gambar pada halaman web. Berikut adalah beberapa atribut pada tag image HTML:

• src: atribut ini digunakan untuk menentukan alamat file gambar yang akan ditampilkan pada halaman web.
• alt: atribut ini digunakan untuk memberikan deskripsi singkat tentang gambar tersebut. Deskripsi ini akan muncul jika gambar tidak bisa ditampilkan pada halaman web.
• width: atribut ini digunakan untuk mengatur lebar gambar pada halaman web. Nilai atribut ini bisa dalam piksel atau persen.
• height: atribut ini digunakan untuk mengatur tinggi gambar pada halaman web. Nilai atribut ini bisa dalam piksel atau persen.
• align: atribut ini digunakan untuk mengatur posisi gambar pada halaman web. Nilai atribut ini bisa “left”, “right”, atau “center”.
• border: atribut ini digunakan untuk mengatur border atau garis tepi pada gambar. Nilai atribut ini bisa dalam piksel.

Contoh Penggunaan Atribut pada Tag Image HTML

Berikut adalah contoh penggunaan atribut pada tag image HTML:

1. Menampilkan gambar dengan lebar 500 piksel dan tinggi 300 piksel:
   <img src=”nama-file-gambar.jpg” alt=”deskripsi-gambar” width=”500″ height=”300″>
2. Menampilkan gambar dengan posisi di tengah halaman:
   <img src=”nama-file-gambar.jpg” alt=”deskripsi-gambar” align=”center”>
3. Menampilkan gambar dengan border 2 piksel:
   <img src=”nama-file-gambar.jpg” alt=”deskripsi-gambar” border=”2″>

Kesimpulan

Tag image HTML memiliki fungsi untuk menampilkan gambar atau foto pada halaman web. Tag ini juga memiliki atribut yang berguna untuk mengatur ukuran, posisi, dan tampilan gambar pada halaman web. Untuk menambahkan gambar di HTML, kita bisa menggunakan tag image HTML dan beberapa atribut yang sesuai dengan kebutuhan. Dengan menguasai cara menambahkan gambar di HTML, kita bisa membuat halaman web yang lebih menarik dan informatif.