Memasukan Gambar pada Halaman Website

Bagaimana caranya untuk  Memasukan Gambar pada Halaman Website ?. Dalam memasukan gambar anda dapat menggunakan tag <img>. Tag ini termasuk ke dalam kategori Self Closing Tag yakni tag yang tidak memiliki tag penutup namun memasukan objek berdasarkan sumbernya/alamat objek itu disimpan. Tag <img> memiliki atribut dasar seperti :

Nama Atribut Fungsi
Src Mendefinisikan lokasi gambar disimpan. Atribut ini wajib.
Alt Memberikan informasi berupa teks yang kalian buat, apabila gambar gagal dimuat.
Width Mendefinisikan lebar gambar.
Height Mendefinisikan tinggi gambar.

Dalam menentukan ukuran gambar, disarankan untuk menggunakan width dan height dari CSS. Dan sebelum kita ke praktek codingnya, pertama – tama silahkan anda sediakan gambar yang ingin anda gunakan sebagai praktek. Gambar ini harus 1 folder dengan file HTML.

Jika sudah menentukan gambarnya, silahkan kopi paste kode di bawah ini :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Memasukan Gambar pada Halaman Website

Apabila gambar gagal dimuat, akan muncul informasi yang di tulis pada atribut alt. Berikan informasi yang menspesifikasikan gambar tersebut.

memasukan gambar pada html

Mengatur Ukuran Gambar pada Halaman

Dalam mengatur ukuran gambar anda dapat menggunakan atribut (pada HTML) / property (pada CSS) width dan height. Namun, sangat dianjurkan untuk menggunakan width dan height pada property CSS. Satuan yang digunakan dapat px, ataupun %. Untuk membuat website yang responsive umumnya satuan % lah yang digunakan.

Kode Sumber…

Di bawah ini adalah hasil dari kode sumber di atas, dengan nilai zoom 100%, dan ukuran layar 1187px.

gambar pada html

Ada 2 mode yang akan mempengaruhi ukuran gambar, yakni mode zooming (adalah ketika anda memperbesar/memperkecil ukuran layar dengan konsep Scroll Up / Sroll Down) dan mode Responsive, yakni ketika anda mempersempit / memperlebar ukuran layar.

Nilai Responsive ini ada kaitannya terhadap tampilan gambar di berbagai perangkat, yakni tampilan pada Desktop, Tablet, dan Mobile.

Pada mode zooming silahkan anda perbesar / perkecil ukuran layar (ctrl + scrolling), maka perubahan hanya akan terjadi pada gambar dengan satuan nilai pixel.

Zooming 200%.

image pada html

Sedangkan pada mode Responsive, perubahan ukuran gambar hanya terjadi pada gambar dengan satuan nilai persen. Hal ini terjadi karena ukuran gambar di kali ukuran layar. Satuan nilai ini cocok untuk gambar yang akan setting Responsive.

ukuran gambar pada html

Menjadikan Gambar Sebagai Link

Anda pun dapat menjadikan gambar sebagai link, untuk tersambung ke halaman lainnya. Anda hanya perlu memasukan elemen <img> di dalam elemen <a>.

Kode Sumber…

Di bawah ini adalah hasilnya :

membuat gambar memiliki link

Outputnya adalah seperti gambar di atas, apabila gambar itu di klik akan menuju ke situs Google asalkan anda terhubung dengan internet.

image link in html

Images Map

Maksudnya disini adalah membuat area yang dapat di klik dalam area yang menjadi media tersebut. Perhatikan gambar di bawah ini… dan kalian pun dapat mendownloadnya sebagai contoh, agar sesuai dengan contoh yang akan saya berikan di bawah pula.

image map pada html

Dalam bujur sangkar di atas, saya masukan gambar Twitter, Facebook, dan Google. Lalu akan saya buat sebuah area pada masing – masing logo agar dapat di klik, dan akan menuju ke situs mereka masing – masing.

Intinya saya akan membuat area pada masing – masing gambar seperti ini :

pemetaan gambar

Namun, area tersebut dalam bentuk transparan.

Kode Sumber…

Dan di bawah ini adalah outputnya :

pemetaan gambar pada html

Jika anda arahkan kursor anda pada masing – masing gambar, maka kursor anda akan berubah menjadi gambar tangan dan jika anda klik area tersebut, anda akan ter – arahkan pada masing – masing situsnya sendiri – sendiri.

Catatan : Perhitungan yang anda buat pada kode sumber, harus tepat sesuai lokasi gambar.

Penjelasan dari materi di atas…

  1. Pada tag <img>, terdapat atribut usemap yang mendefinisikan kata kunci untuk pembuatan area pada tag <map>.
  2. Maka pada tag <map>, saya memanggil nilai atribut dari usemap, yakni contoh. Untuk disandingkan/disambungkan.
  3. Lalu masuklah pada tahap pembuatan area dengan tag <area>. Berikut atribut dan nilai atributnya.
    1. Shape, mendefinisikan bentuk area yang dibuat (circle/poly/rect).
    2. Cords, mendefinisikan kordinat, dan luas kordinatnya (panjang x lebar).

pemetaan gambar

    1. Alt, memberikan informasi apabila gambar gagal di muat.
    2. Href, mendefinisikan link yang dituju.

Jika ada kekurangan dalam penjelasan yang saya sampaikan, nasehat dari pengunjung akan memperbaiki kekurangan tersebut.

 Menyisipkan Gambar ke dalam Teks

Anda dapat saja menyisipkan gambar ke dalam teks atau kalimat. Hal ini biasanya di lakukan dalam sebuah paragraf, umumnya gambar ini diletakkan di sebelah kiri.

Namun, anda pun dapat merubah atau mendesainnya dengan menggunakan CSS.

Peletakkan gambar dilakukan dengan atribut float, dan ukurannya disesuaikan dengan atribut width.

Kode Sumber…

Dan di bawah ini adalah output dari kode sumber di atas :

memasukan gambar ke dalam paragraf

Gambar yang gagal dimuat.

Sebuah gambar dapat saja gagal dimuat, dan biasanya hal ini terjadi karena kesalahan penulisan nama gambar tersebut oleh programmer, oleh karena itu HTML menyediakan cara untuk mengatasi masalah ini. Yakni dengan menggunakan atribut alt atau kependekan dari alternative.

Kode Sumber…

Hasil dari kode sumber di atas :

gambar gagal dimuat ke dalam halaman website

Harap diingat, agar memberikan informasi pada atribut alt sesuai dengan Nama gambar yang ingin ditampilkan, hal ini akan meringankan masalah anda, ketika anda tidak mengetahui gambar apa yang gagal dimuat oleh halaman website.

Sekarang anda sudah mengerti Bagaimana caranya untuk  Memasukan Gambar pada Halaman Website.

Leave a comment

Your email address will not be published. Required fields are marked *

X