Cara menggunakan img src html

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”]
<. DOCTYPE html>








[/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”]
<. DOCTYPE html>








[/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”]

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”]

Jika gambar tidak ada di folder yang sama, Anda dapat memanggil gambar tersebut dengan menggunakan ". /”. Jadi aplikasinya adalah sebagai berikut

[sourcecode language=”plain”]

Artinya kita memanggil gambar yang berada 1 tingkat di luar folder file tersebut. html. Jika gambar diletakkan 2 tingkat di luar file. html, Anda dapat menambahkan 2 kali ". /”, yaitu seperti di bawah ini

[sourcecode language=”plain”]

Anda bisa membuat gambar tersebut menjadi bisa diklik dan mengarah ke halaman lain maupun domain lain dengan cara menambahkan tag di luar gambar. Contoh penggunaan link pada gambar adalah seperti di bawah ini :

[sourcecode language=”plain”][/sourcecode]

Jadi, ketika gambar diklik akan mengarah ke url pada tag . Untuk lebih jelasnya, Anda bisa membaca panduan cara membuat link di HTML. Berikut adalah cara menampilkan gambar dalam HTML menggunakan tag . Jika ada pertanyaan, silahkan tanyakan melalui kolom komentar.

Bagaimana cara menyisipkan gambar dalam HTML?

Apa fungsi tag img src?

Mengapa gambar tidak bisa muncul di HTML?

Tag HTML IMG memiliki atribut apa saja?