Tutorial Penggunaan Gambar pada HTML

Tutorial Penggunaan Gambar pada HTML - Dalam membangun sebuah web tidak bisa dipisahkan dengan gambar yang berfungsi sebagai pendukung halaman Web.

Gambar akan mempunyai efek profesional pada halaman web jika dibandingkan dengan teks saja.

Halaman web yang berisi teks saja mungkin bisa membuat web tersebut ringan pada loading, namun jika tidak disisipi gambar hanya akan membuat halaman web terasa memusingkan.

Inilah Pentingnya Penggunaan Image / Gambar Pada Halaman Web:

1. Sebagai pendukung teks pada halaman web
2. Menambah kesan profesional
3. Membuat halaman web semakin menarik
4. Bisa menambah daya tarik pengunjung web

Format pemanggilan image / gambar pada halaman web:

<img src="link-url-gambar">

Penjelasan:

Pada attribut src, Anda bisa memberikan link lokasi URL gambar.

BACA JUGA: Pengertian HTML

Misalnya src="gambar-saya.jpg".

Mengatur Lebar dan Tinggi Gambar

Pada kasus tertentu biasanya diperlukan pemotongan gambar lebar dan tinggi.

Maka, Anda bisa menambahkan attribut width dan height pada element HTML.

Formatnya:

<img src="link-url-gambar" width="ukuran lebar" height="ukuran tinggi">

Penerapannya pada halaman web misalnya:

<img src="contoh-gambar.jpg" width="80" height="100">

Penjelasannya:

Pada baris di atas menandakan bahwa gambar akan diresize sebanyak 80pixel pada lebar dan 100pixel pada tinggi.

Perlu Anda ketahui bahwa setiap value yang diisi pada width dan height akan selalu berformat pixel.

Jadi, penomoran value pada lebar dan tinggi akan menggunakan format ukuran pixel.

BACA JUGA: Mengatur Format Teks Pada HTML

Anda bisa menyesuaikan sesuai dengan kebutuhan halaman web.

Memberikan Judul Pada Gambar

Terkadang Anda membutuhkan sebuah judul pada gambar ketika mouse diarahkan pada gambar tampil semacam poper.

Tujuannya adalah untuk memberikan kesan judul pada sebuah gambar yang ditampilkan.

BACA JUGA: Membuat Link ke Halaman Lain

Format penulisannya:

<img src="link-url-gambar" width="ukuran lebar" height="ukuran tinggi" alt="judul gambar">

Anda bisa menambahkan properti alt agar bisa menambahkan judul pada gambar.

Contohnya:

<img src="contoh-gambar.jpg" width="80" height="100" alt="Ini Contoh Gambar Saya>

Ketika mouse / kursor diarahkan pada gambar, maka akan muncul tulisan Ini Contoh Gambar Saya.

***

Demikianlah tutorial penggunaan gambar pada HTML kali ini, masih banyak tutorial HTML lainnya yang bisa Anda baca pada situs ini.

Semoga bermanfaat.

Sampai ketemu di tutorial lainnya.