Cara Menyisipkan Gambar pada HTML

Menyisipkan Gambar

 
Baik, kini saya akan memberikan tutorial tentang cara menyisipkan gambar dalam situs anda.

Perintah untuk menyisipkan gambar dalam file HTML dilakukan menggunakan tag:

<IMG SRC="nama_gambar.gif">

Pada HTML, perlu diketahui bahwa file gambar yang umum digunakan untuk homepage ada tiga jenis. Pertama file gif (Graphics Interchange Format), kemudian file jpg (Joint Photographic Experts Group, terkadang disebut file jpeg) dan yang terakhir file bmp (bitmap). Di antara ketiganya file bmp memiliki kualitas gambar terbaik, namun berukuran relatif besar sehingga akan menambah beban saat meload halaman homepage. Oleh karena itu orang sering menggunakan gambar gif atau jpg. Gambar gif sendiri memiliki satu keunggulan tersendiri, yaitu memungkinkan latar transparan.

Anda juga dapat membuat gambar sebagai link. Caranya dengan menulis seperti contoh berikut:

<A HREF="http://https://www.samehadaku.net/tag/boruto-subtitle-indonesia" target="_blank"><IMG SRC="boruto_uzumaki></A>

Anda dapat melihat hasilnya di bawah ini, silakan coba diklik:

Kini saya akan menjelaskan tentang align, yaitu posisi terhadap teks. Posisi yang umum digunakan adalah "left", "right", "top", "middle", "bottom".

Atribut berikutnya adalah HEIGHT dan WIDTH, yaitu tinggi dan lebar gambar yang akan ditampilkan. Angka yang ditampilkan sebaiknya sesuai dengan ukuran gambar (proporsional) sehingga bentuk gambar yang ditampilkan tidak mengalami distorsi.

Atribut selanjutnya yang akan kita bahas adalah ALT. Harga yang kita isi pada atribut ALT akan memberikan keterangan tentang gambar yang akan ditampilkan. Juga saat gambar tidak dapat ditampilkan (misalkan file gambar yang dipanggil tidak ada), maka tulisan pada ALT tersebut yang akan ditampilkan. Hal ini berguna untuk memberikan informasi kepada pengunjung situs, saat gambar tidak muncul karena satu dan lain hal. 

Atribut terakhir yang akan dibahas di sini adalah HSPACE dan VSPACE. Atribut ini mengatur jarak antara gambar dengan tulisan yang berada di sekitarnya. HSPACE mengatur jarak horizontal antara gambar dan tulisan, sedang VSPACE mengatur jarak vertikal antara gambar dan tulisan.