Gambar (images)

Gambar

Gambar adalah nadi pengerak kepada laman web anda. Jadi ianya sangat penting untuk anda memahami cara menggunakan gambar dengan sebaiknya. Gunakan tag <img/> untuk meletakan gambar pada web page.

Kod HTML:

<img src="pantai.jpg" />

Hasil:

Sumber gambar (SRC)

Dalam contoh di atas kita telah menggunakan atribut src. SRC bermaksud source ataupun lokasi bagi gambar tersebut. Dalam pautan sebelum ini, anda boleh menggunakan URL untuk lokasi bagi gambar atau lokasi dalaman.

Terdapat dua cara untuk menetapkan lokasi bagi gambar. Pertama anda menggunakan URL piawai seperti src="http://www.kripkornstudios.com.my/pantai.jpg" dan cara yang kedua anda boleh memuat naik fail tersebut terus ke dalam hos pelayan. Anda seterusnya boleh mencapainya menggunakan pautan pangkal iaitu src="pantai.jpg". Lokasi bagi gambar adalah relatif dengan lokasi .html anda.

Jenis-jenis pautan sumber:

URL mestilah tidak mempunyai huruf cakera. Oleh itu lokasi bagi gambar seperti ini src="C:\\www\web\gambar\" tidak akan berhasil. Gambar mestilah dimuat naik bersama-sama dengan fail HTML anda ke dalam hos pelayan (lokasi fail HTML dan gambar adalah sama).

Setiap tatacara mempunyai kelebihan dan kekurangannya tersendiri. Keburukan URL apabila gambar asal tersebut diubah (sama ada dari segi kedudukan atau dipindahkan) oleh pentadbir web, maka gambar tersebut tidak akan dipaparkan kepada pengguna. Manakala memuat naik fail gambar terus ke dalam hos pelayan akan memakan ruangan cakera keras. Oleh itu, pilihan yang terbaik perlu dibuat TAPI dicadangkan untuk melakukan pilihan yang kedua.

Atribut alternatif

Atribut atau alt adalah bertugas memaparkan teks ringkas mengenai gambar yang dipapar, ataupun jika gambar tersebut gagal dipaparkan, alt teks akan ditunjukkan kepada pengguna. Untuk melihat tatacara menggunakannya, anda boleh letakkan kursor pada gambar tersebut dan tunggu untuk beberapa ketika.

Kod HTML:

<img src="pantai.jpg" alt="Keindahan pantai" />

Hasil:

Saiz Gambar (Height & Width)

Untuk mengubah suai gambar, atrribute height dan width boleh digunakan dengan menetapkan satu nilai tertentu untuk setiap atribut.

<img src="pantai.jpg" height="120" width="150">

Hasil:

Kedudukan Gambar (Vertically & Horizontally)

Gunakan atribut align dan vAlign untuk menyusun dan menentukan kedudukan gambar anda dalam body]*, table (jadual) ataupun layer.

• align (Horizontal)
  • right
  • left
  • center
• vAlign (Vertical)
  • top
  • bottom
  • center

Di bawah adalah contoh untuk meletakkan gambar di bahagian sebelah kiri satu-satu kandungan.

<p>Ini Perenggan pertama<..../p>
  <p>
<img src="pantai.jpg" align="right">
Gambar akan terpapar disebelah kanan bukan? Gambar yang dipaparkan ...
</p>
<p>Ini perenggan ke tiga...</p>

Gambar kedudukan kanan:

Pautan & Gambar

Berikut adalah cara menggunakan gambar untuk menjadikan link. Kebiasaanya kita menggunakan text, walau bagaimana pun, penggunaan elemen gambar itu sendiri boleh memberi seribu kepuasan dan tarikan kepada pengguna.

<a href="http://www.kripkornstudios.com.my">
<img src="pantai.jpg">  </a>

Gambar yang mempunyai pautan:

Dengan kod aturcara ini, apabila pengunjung atau anda sendiri klik pada gambar tersebut, ianya akan membawa ke laman utama Kripkorn Studios.

Lakaran kecil (Thumbnails)

Thumbnails adalah gambar yang berskala kecil yang dipautkan kepada gambar asal. Anda perlu membuat gambar yang dimensi kecil dan kualiti rendah untuk dijadikan sebagai lakaran kecil.

<a href="pantai.jpg"> <img src="medium_pantai.jpgf"> </a>

Hasil: