Gambar adalah salah satu yang sangat penting untuk mempercantik atau menggambarkan banyak konsep kompleks dengan cara sederhana di halaman web kita. Bayangkan jika suatu website tidak memiliki gambar, pastinya halaman web tersebut tidak begitu menarik.
Pada tutorial kali ini kita akan belajar bagaimana cara menampilkan suatu gambar pada halaman website yang akan kita buat.
HTML Images Syntax
Didalam HTML, gambar didefinisikan dengan menggunakan tag <img>. Tag <img> tidak memiliki tag penutup seperti tag paragraf <p>...</p>.
Untuk menampilkan suatu gambar kita menggunakan atribut src. Atribut src itu sendiri digunakan untuk menentukan URL (alamat web) dari suatu gambar:
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML images
</title>
</head>
<body>
</body>
</html>
Jika kita lihat maka hasil akan seperti ini:
Kita dapat menggunakan format gambar seperti JPG,PNG,GIF sesuai format gambar yang kita inginkan, yang harus dipastikan adalah nama dari sebuah gambar atau format dari sebuah gambar di dalam atribut src, karena nama atau format gambar sangatlah sensitive
Sebisa mungkin jangan gunakan spasi pada nama gambar contohnya gambar 1.jpg tetapi gunakan nama gambar gambar_1.jpg
Menggunakan atribut alt
Atribut alt digunakan untuk membuat alternatif text pada suatu gambar, tujuan dari atribut ini jika browser tidak dapat menemukan gambar, maka browser akan menampilkan text pada atribut alt.
Selain itu atribut alt juga digunakan pada mesin pencarian untuk mencari suatu gambar berdasarkan gambar yang dicari. Jadi atribut alt sangat penting untuk mempermudah mesin pencarian menemukan gambar pada web kita.
Berikut ini cara menggunakan atribut alt pada tag <img>.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML images
</title>
</head>
<body>
</body>
</html>
Menampilkan gambar didalam folder
Terkadang kita harus memisahkan antara file gambar dengan konten web agar folder kita terlihat rapi dan enak di pandang mata, jika kita akan menampilkan gambar didalam folder kita bisa membuatnya seperti ini.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML images
</title>
</head>
<body>
</body>
</html>
Jika skrip seperti diatas itu artinya kita mletakan folder gambar sejajar dengan file HTML kita, susunan seperti ini.
Setting tinggi/lebar gambar
Pada tag <img> kita dapat mengatur lebar gambar dan tinggi berdasarkan kebutuhan kita dengan menggunakan atribut width dan height. Kita dapat menentukan lebar dan tinggi gambar untuk mendapatkan gambar yang terbaik dari ukuran aslinya.
Berikut cara menggunakan atribut width dan height
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML images
</title>
</head>
<body>
</body>
</html>
Jika kita lihat maka hasil akan seperti ini.
Shared
Shared
Shared
Shared
