MODUL 6 BEKERJA DENGAN GAMBAR

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur IMAGE pada HTML untuk berbagai penggunaan.

Tidak dipungkiri, bahwa gambar merupakan salah konten website yang banyak digunakan nantinya. Oleh karena itu, pada modul ini khusus dibahas bagaimana cara menangani gambar pada halaman website.

Format yang digunakan untuk menampilkan gambar ini adalah : <img [attribut] >. Ini merupakan salah satu tag yang tidak memiliki tag penutup.

Berikut ini attribut yang terdapat pada tag <img> :

Attribut Nilai Fungsi
     
src url Merujuk  ke  lokasi  file  gambar   yang  akan
    ditampilkan.
     
Alt teks Teks  alternative  pengganti  jika  gambar  tidak
    tampil.
     
Width pixel Ukuran lebar dari gambar
     
Height pixel Ukuran tinggi dari gambar
     
Align Top/middle/bott Pengaturan perataan posisi gambar
  om/left/right  
     
Border pixel Ukuran besar garis bingkai dari gambar.
     
Hspace pixel Jarak  gambar  dengan  konten  lainnya  secara
    mendatar.
     
vspace pixel Jarak gambar dengan konten lainnya secara tegak
    lurus.
     

Attribut src merupakan atribut yang wajib ada.

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan. Asumsi : pastikan dalam folder yang sama dengan file html anda sudah terdapat sebuah file gambar. Untuk latihan ini file gambar tersebut diberi nama logo.jpg.

1.   Latihan 1 : Menampilkan Gambar

Catatan : src=logo.jpg menandakan bahwa file logo.jpg berada pada folder yang sama dengan file HTMLnya. Nama file gambar ini bersifat case sensitif, artinya harus ditulis persis sama dengan nama file gambarnya, tidak boleh ditulis menjadi Logo.jpg, atau logo.JPG dan seterusnya.

2.   Latihan 2 : Menampilkan gambar dengan atribut ALT

Atribut ALT digunakan untuk menggantikan posisi Gambar jika gagal ditampilkan oleh browser karena kesalahan nama, lokasi file dan lain sebagainya.

3.   Latihan 3 :  Gambar dengan pengaturan ukuran.

Maka gambar akan ditampilkan dengan ukuran lebar = 200 piksel dan tinggi 150 piksel. Jika atribut ini tidak diberikan, maka gambar akan tampil sesuai dengan ukuran aslinya. Baris no. 7 diatas dapat juga digantikan dengan :

4.            Latihan 4 : Menampilkan gambar pada folder yang berbeda

Misalnya seluruh gambar pada sebuah website disimpan dalam folder images seperti contoh diatas, maka pada atribut src tambahkan nama foldernya.

5.   Latihan 5 : Menampilkan gambar dari website lain

6.    Latihan 6 : Gambar disertai teks dengan pengaturan perataannya

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/html/html_images.asp
  2. http://www.w3schools.com/tags/tag_img.asp
  3. http://www.htmlcodetutorial.com/images/_IMG.html