HTML Image
HTML Image merupakan elemen terpenting karena dalam sebuah website pastinya akan selalu ada suatu gambar. Gambar adalah pelengkap bagi konten kita yang ada di website. Langsung saja kita lihat contoh cara menambahkan image ke website.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title>HTML Image</title>
</head>
<body>
<img src="img_name.jpg" alt="gambar sepatu" width="120px" height="120px" />
</body>
</html>
Tag IMG merupakan tag yang diharuskan mempunyai atribut yang mana atribut ini berisi informasi mengenai alamat gambar (img src), keterangan gambar (alt) lebar (width) dan tinggi (height) gambar. Untuk tinggi dan lebar, kita juga bisa mengatur nya di file CSS namun disini kita satukan dengan atribut lainnya karena kita sedang belajar materi HTML.
Untuk memasukkan gambar ke website agar berhasil maka gambar yang akan dimasukkan harus satu folder dengan file html. Img src memiliki fungsi untuk memanggil nama file gambar dan juga nama tipenya, di situ kita memanggilnya dengan img_name.jpg
Jika kita ingin memisahkan file html dan file gambar, maka harus tetap berada di dalam satu folder utama yang di dalam folder utama itu ada file html dan folder baru khusus untuk gambar maka kodenya seperti dibawah ini
<img src="namafolder/img_name.jpg" alt="gambar sepatu" width="120px" height="120px" />
Contoh urutan folder yang terpisah
Folder utama = Latihan website
Folder gambar = img
Di dalam folder latihan website terdapat file html dan satu folder gambar. Di dalam folder gambar kita bisa menaruh file-file gambar yang ingin kita masukkan ke dalam website.
Maka kodenya seperti dibawah ini :
<img src="img/imgname.jpg" alt="gambar sepatu" width="120px" height="120px" />
Di dalam attribut img src terdapat nama folder gambar kemudian di pisahkan garis miring( / ) nama file gambarnya ( . ) tipenya.
Contoh-contoh tipe gambar
JPG/JPEG
PNG
SVG
Selamat mencoba dan juga selamat belajar 🌟✨