Pada sebuah halaman website, gambar merupakan unsur yang penting yang mampu membuat website menjadi lebih indah. Semua website profesional pasti memiliki gambar pada halamannya. Karena jika tidak ada gambar, maka sebuah website sangat tidak menarik bagi pengunjung. Di sini kita akan belajar HTML yaitu menampilkan gambar di HTML dengan tag
Setelah membuat file gambar. html dan letakkan gambar di direktori yang sama, sekarang perhatikan koding di bawah ini dan ketikkan file gambar. html
[bahasa kode sumber =”polos”]
Menampilkan Gambar di HTML – Makinrajin
[/Kode sumber]
Anda dapat melihat hasilnya dengan mengklik dua kali pada gambar. html dan hasilnya akan muncul seperti di bawah ini (tampilan tergantung gambar anda)
Kemudian, coba ubah sintaks menjadi seperti di bawah ini
[bahasa kode sumber =”polos”]
Menampilkan Gambar di HTML – Makinrajin
[/Kode sumber]
Disini kita memodifikasi gambar dengan menambahkan atribut width dan height. Ini berarti kita memberikan tinggi 70 px dan lebar 300 px. Maka hasilnya akan seperti di bawah ini
Anda juga hanya dapat menggunakan salah satu dari atribut tersebut seperti lebar atau tinggi, tergantung kebutuhan Anda. Selanjutnya kita akan mencoba menambahkan atribut title pada tag img seperti gambar di bawah ini
[sourcecode language=”plain”][/sourcecode]
Jadi ketika kursor berada di atas gambar, teks "judul ini" akan muncul. Inilah hasilnya
Sekarang kita coba test atribut alt. Atribut alt berfungsi untuk menampilkan teks ketika gambar tidak berhasil dimuat (mungkin karena koneksi internet yang lambat atau nama dan jalur gambar salah)
Kami akan mencoba mengubah nama gambar menjadi salah untuk mengetahui fungsi dari atribut alt. Coba ubah tag img menjadi seperti di bawah ini
[bahasa kode sumber=”polos”]