HTML5 #3 Cara Memuat Gambar menggunakan Tag HTML

Sebuah halaman website memungkinkan kita untuk menambahkan sebuah gambar untuk mendukung text/bacaan. Menambahkan gambar pada program dapat dilakukan dengan memanfaatkan tag pada HTML5.

Sebelum menambahkan gambar ke dalam website pastikan gambar yang akan di muat tidak berukuran terlalu besar, namun tetap memiliki kualitas yang baik. Karena semakin besar ukuran foto maka website akan memiliki kinerja yang buruk. Disarankan foto yang akan di muat tidak lebih dari 1MB. Disarankan foto yang akan di muat tidak lebih dari 1MB. Dan sebaiknya menggunakan format jpg/png.

Sebaiknya sebelum memahami cara memuat gambar menggunakan tag HML. Kamu sudah mengetahui tag apa saja yang ada pada HTML5. Baca disini

Cara menambahkan gambar menggunakan tag HTML :

  1. Buka teks editor yang tersedia di PC. Disini saya menggunakan notepad
  2. Kemudian ketikkan source code berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gambar</title>
</head>
<body>
    <h3>Cara menambahkan gambar</h3>
    <div>
        <img src="html5.jpg" alt="Belajar HTML5">
    </div>
</body>
</html>

penjelasan source code

  • tag <img berfungsi sebagai bagian yang akan melakukan proses penambahan gambar
  • src=”html5.jpg” berfungsi untuk mencari link gambar yang akan dimuat.

*Jika gambar diletakkan pada folder yang sama dengan folder source code maka cukup dengan menuliskan nama dari file gambar saja beserta format file. Jika diletakkan di folder yang berbeda misalnya :

Folder Documents  didalamnya terdapat :

  1. file coba-gambar.html
  2. folder image : 1. file gambar html5.jpg

Maka penulisan pada html : <img src=”image/html5.jpg” alt=”Belajar HTML5″>

  • alt=”Belajar HTML5″ pada source code berguna agar ketika gambar tidak berhasil dimuat maka teks “Belajar HTML5” dapat menjadi alternatif.

3. Simpan file dengan nama coba-gambar.html di dalam folder documents

4. Kemudian pastikan gambar yang akan ditambahkan berada pada folder yang sama dengan file souce code.

5. Selanjutnya, buka file menggunakan web browser dengan cara klik kanan pada file source code >open with>google chrome (web browser yang di inginkan).

6. Jika benar maka hasil nya akan seperti gambar dibawah ini.

Semoga bermanfaat. Jangan lupa share ke teman-teman yang lain untuk saling berbagi ilmu. Salam binerian 😀

Leave a Reply