Hallo coders, kali ini kita akan belajar menampilkan gambar di Html. Setelah kemarin kita belajar tentang tag a atau link . Disini kita akan belajar cara menampilkan gambar ke halaman html kita dan mengatur lebar dan tinggi dari sebuah gambar. Pasti temen temen sudah tau ya, implementasinya karena di sebuah website pasti ada sebuah gambar apalagi ecommerce atau toko online seperti https://shopee.co.id/. Website tanpa gambar bisa dibilang sangat hambar ya wkwkwk, maka dari itu gambar ini sangat penting ya gaess.
Menampilkan gambar di Html
Html menyediakan tag khusus untuk menampilkan gambar. Tag tersebut adalah <img> di gunakan untuk menampilkan gambar dengan banyak ekstensi, bisa jpg, png, gif, dan lain lain. tag ini memiliki atribut khusus yaitu ada “src=”,
Atribut ini berfungsi untuk menghubungkan file dengan gambar. Ada dua cara untuk memanggil gambar di atribut src ini temen temen, yang pertama jika gambar berada di satu file dengan folder html kita kita tinggal memanggil nama folder dan nama gambarnya. Yang kedua kita bisa memanggil berdasarkan link atau bisa dibilang gambar ini berasal dari website lain. Dibawah ini adalah contoh kode jika menggunakan url.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag img html</title>
</head>
<body>
<img src="https://lh3.googleusercontent.com/proxy/I3Jeal4wNLo2C-PETdiMpJgAXH1KCuMRDLOFo5_D9_UxJm5Cf3-t9dYMirYn958Z0nzZyxzzIy6kNUbwXs4ba2lNVcQ_gc5iI4GYobI=s0-d">
</body>
</html>
Maka hasilnya akan muncul gambar roket dibrowser kalian menarik bukan. Selanjutnya kita akan mencoba mendownload gambar jadi silahkan temen temen download gambar apapun bisa roket ini kemudian simpan kedalam folder seperti ini.
Selanjutnya temen temen bisa koding seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag img html</title>
</head>
<body>
<img src="img/roket.png">
</body>
</html>
Jika berhasil hasilnya akan tidak jauh berbeda dari yang diatas.
Atribut alt untuk tag img Html
Nah setelah tadi kita mempelajari atribut img, atibut khusus lainnya untuk tag img adalah tag “alt=”. Atribut ini adalah atribut untuk memberika text alternatif jika gambar yang kita panggil tadi itu itdak ada sehinggal tidak tampil. Jika tidak tampil maka akan menjadi seperti ini.
Dengan text alternatif kita bisa lakukan seperti ini
Disini saya sengaja membuat salah dalam pemanggilan agar gambar tidak terbaca dan kemudian akan kita berikan tag alt sebagai contohnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag img html</title>
</head>
<body>
<img src="" alt="gambar rocket">
</body>
</html>
Atribut width dan height tag Html
Di tag img kita bisa mengaut ukuran gambar tanpa menggunakan css yaitu dengan menggunakan atribut width dan height. Width untuk mengatur lebar dan height untuk mengatur tinggi dari sebuah gambar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag img html</title>
</head>
<body>
<img src="img/roket.png" alt="gambar rocket satu" width="200" height="200">
<img src="img/roket.png" alt="gambar rocket dua" width="600" height="600">
<img src="img/roket.png" alt="gambar rocket tiga" width="800" height="800">
</body>
</html>
Menarik bukan, tetapi kita tidak harus menggunakan semuanya. untuk ukurannya kita bisa menggunakan px % dan lainnya seperti css tetapi defaultnya pixel gaess jadi jika kita hanya menulis 300 maka akan terhitung pixel. Hasilnya seperti dibawah ini.
Format File Yang di Support di html
Seperti yang saya bilang diatas tidak semua format file gambar disuport oleh html. itu dikarenakan setiap file gambar memiliki tujuannya masing masing.
Lalu format file gambar apa saja yang disupport html. Berikut ini adalah daftar beberapa format gambar yang disupport dan sering digunaakan dalam pembuatan sebuah website.
- APNG, format file = Animated Portable Network Graphics, file extension .apng
- GIF, format file = Graphics Interchange Format, file extension .gif
- ICO, format file = Microsoft Icon, file extension .ico, .cur
- JPEG, format file = Joint Photographic Expert Group image, file extension .jpg, .jpeg, .jfif, .pjpeg, .pjp
- PNG, format file= Portable Network Graphics, file extension .png
- SVG, format file= Scalable Vector Graphics, file extension .svg
Mengkombinasikan tag a dan tag img
Seperti yang kita pelajari sebelumnya tag link dapat digunakan untuk mengganti ke halaman baru. nah disini kita bisa mengkombinasikan kedua tag ini. idenya ketika user mengeklik gambar maka akan pindah ke halaman tertentu. Contohya adalah seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag img html</title>
</head>
<body>
<a href="https://duniacoding.info">
<img src="img/roket.png" alt="gambar rocket satu" width="200" height="200">
</a>
</body>
</html>
Jadi tag img yang kita buat kita bungkus dengan tag a sehingga jika gambar kita klik akan menuju halaman tertentu.
Nah keren banget ya gaess. Mungkin sampai sini dulu pembelajaran kita pada kesempatan kali ini. JIka temen temen ada pertanyaan temen temen bisa ketikan di kolom komentar insyallah mimin balas secepatnya hehe.
contoh yang mantap