Kode HTML untuk Menyisipkan Gambar Beserta Atributnya

Konten sebuah halaman web tidak hanya terdiri dari tulisan. Kita bisa menambahkan berbagai macam komponen seperti gambar, video, animasi dari flash, dan sebagainya. Kode HTML yang perlu diketahui berikutnya adalah bagaimana menambahkan gambar pada halaman website HTML. Tag HTML yang digunakan untuk menyisipkan gambar adalah tag img. Berikut adalah penjelasan mengenai bagaimana menyisipkan gambar pada halaman website HTML.

Gambar yang akan ditampilkan saya simpan di sebuah lokasi pada hosting yang saya gunakan dengan url sebagai berikut.

http://alewoh.com/image/menyisipkan-gambar.jpg

Untuk menampilkan gambar alakadarnya, kita hanya perlu menggunakan kode berikut ini.

<img src="http://alewoh.com/image/menyisipkan-gambar.jpg"/>

Maksud dari kode tersebut adalah tag img menunjukkan bahwa kode HTML tersebut adalah untuk menampilkan image. Kode src menunjukkan url source (sumber) gambar yang akan ditampilkan. Kode tersebut akan tampil sebagai berikut.

Karena sifat internet yang labil, mungkin saja gambar yang ingin kita tampilkan tidak dapat diatasi dengan baik oleh server dan tidak dapat tampil. Untuk mengatasinya, kita bisa mengganti gambar tersebut dengan teks. Ini juga berfungsi sebagai salah satu metode SEO gambar agar dapat tampil di hasil pencarian mode gambar. Kita bisa menambahkan kode berikut untuk menampilkan alternatif teks menggunakan tag alt jika gambar tidak dapat tampil.

<img src="http://alewoh.com/gambartidakada.jpg" alt="Stop-Contact"/>

Jika gambar tidak dapat muncul karena server gambar sedang bermasalah, posisi yang seharusnya diisi gambar akan diganti oleh tulisan "Stop-Contact".

Kita juga bisa menambahkan keterangan gambar pada saat gambar tersebut ditunjuk oleh pointer mouse. Caranya adalah dengan menambahkan tag title seperti berikut.

<img src="http://alewoh.com/image/menyisipkan-gambar.jpg" alt="Stop-Contact" title="Stop-Contact"/>

Coba tunjuk gambar berikut, akan muncul tulisan sesuai dengan yang teks yang tertera pada tag title.

Stop-Contact

Kita juga bisa menggabungkan kode untuk link atau dan gambar sekaligus agar gambar yang kita tampilkan tertaut pada alamat tertentu. Caranya adalah dengan menggunakan kode HTML untuk link dan meletakan kode HTML untuk gambar di antara kode pembuka dan penutup kode HTML link. Berikut adalah contoh kodenya.

<a href="http://alewoh.com"><img src="http://alewoh.com/image/menyisipkan-gambar.jpg" alt="Stop-Contact" title="Stop-Contact"/></a>

Tampilannya sebagai berikut.

Stop-Contact

Gambar tersebut akan tertaut ke alamat sesuai dengan yang tertulis pada kode HTML link.

Bagikan

Oleh Opan pada
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Kunjungan Halaman Bulan Ini
Protected by Copyscape CodeCogs - An Open Source Scientific Library