Assalamu’alaikum Wr. Wb
Pengantar
Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang List Element. Dan pada kesempatan kali ini akan membahas Image pada HTML.Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.
Praktik HTML
Pada praktik kali kita akan membahas image atau gambar untuk halaman website dengan menautkan gambar untuk lebih menarik. Mari kita praktikan :
Pada image atau gambar menggunakan tag <img>. Dan atribut src (singkatan source) alamat gambar akan ditampilkan, alamat ini bisa relatif atau absolute.
Atribut alt (Singkatan alternate text) untuk memberikan keterangan mengenai gambar.
Contoh penggunaan image:
Kode HTML<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<p>
Foto Cristian Ronaldo
<img src="https://scontent.fcgk9-2.fna.fbcdn.net/v/t39.30808-6/448474001_1102716254548247_2613997786866384047_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=D-UyUyuHOdAQ7kNvwGZ-rhI&_nc_oc=AdkLTWm-gdYRJGmXWnmv9FtEAYMqZm50UhDEW1Z23HzN99vHOn9DLyu2t9YRBjgXM0w&_nc_zt=23&_nc_ht=scontent.fcgk9-2.fna&_nc_gid=YI44-sCdX3_mM0uSLKopaw&oh=00_AfqSYIy2TT5rHOrbzzFbZRBMFuDK-BYVfpnhDFKw40A0-Q&oe=695E6AA3" alt="Cristian Ronaldo">
</p>
</body>
</html>
 |
| Gambar 1 Kode gambar |
 |
| Gambar 2 Hasil kode gambar |
Disini saya akan mencontohkan hasil atribut alt
 |
| Gambar 3 Hasil kode gambar menggunakan atribut alt |
Atribut width dan height dalam tag <img>
Width: untuk menentukan lebar, sedangka Height: untuk menetukan tinggi.
Contoh Praktiknya:
Kode HTML<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<p>Foto Cristian Ronaldo</p>
<img src="https://scontent.fcgk9-2.fna.fbcdn.net/v/t39.30808-6/448474001_1102716254548247_2613997786866384047_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=D-UyUyuHOdAQ7kNvwGZ-rhI&_nc_oc=AdkLTWm-gdYRJGmXWnmv9FtEAYMqZm50UhDEW1Z23HzN99vHOn9DLyu2t9YRBjgXM0w&_nc_zt=23&_nc_ht=scontent.fcgk9-2.fna&_nc_gid=YI44-sCdX3_mM0uSLKopaw&oh=00_AfqSYIy2TT5rHOrbzzFbZRBMFuDK-BYVfpnhDFKw40A0-Q&oe=695E6AA3" alt="Cristian Ronaldo" width="275" height="100">
</body>
</html>
 |
| Gambar 1 kode gambar menggunakan atribut width dan tinggi |
 |
| Gambar 1 hasil kode gambar menggunakan atribut width dan tinggi |
Sekarang kita coba untuk gambar yang dioffline (relatif), pastikan folder foto dan file htmlnya dalam satu folder.
Contoh pratiknya:
Kode HTML<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<p>Foto Lionel Messi</p>
<img src="messi.jpg" alt="foto-messi" width="150" height="250">
</body>
</html>
 |
| Gambar 1 kode gambar messi |
 |
| Gambar 2 hasil kode gambar messi |
Kesimpulan
Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu :
YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli
Daftar Pustaka: Tim Riset Alami Computer