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="https://www.drupalnote.my/pantai.jpg" />

Hasil:

Gambar (images)-9291

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="https://www.drupalnote.my/%3Ca%20href%3D"http://example.com/pantai.jpg">http://example.com/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="https://www.drupalnote.my/pantai.jpg". Lokasi bagi gambar adalah relatif dengan lokasi .html anda.

Jenis-jenis pautan sumber:

Penggunaan SRCPenerangan kepada lokasisrc="pantai.jpg"gambar berada dalam folder yang sama dengan file html andasrc="../pantai.jpg"gambar berada dalam folder sebelum file htmlsrc="../pics/pantai.jpg"gambar berada dalam folder sebelum file html dan di dalam folder pics

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="https://www.drupalnote.my/pantai.jpg" alt="Keindahan pantai" />

Hasil:

Keindahan pantai

Saiz Gambar (Height & Width)

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

Kod HTML:

<img src="https://www.drupalnote.my/pantai.jpg" height="120" width="150">

Hasil:

Gambar (images)-9291

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.

Kod HTML:

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

Gambar kedudukan kanan:

Ini Perenggan pertama bagi menunjukan cara penggunaan attribute gambar "align"

Gambar (images)-9291Gambar akan terpapar disebelah kanan bukan? Gambar yang dipaparkan adalah bersebelahan dengan perenggan ke dua. Ini adalah teknik yang menarik untuk anda gunakan supaya pelayar tidak akan berasa janggal melihat website anda. Jika attribute align tidak diletakkan, perenggan ini akan dipaparkan dibawah gambar

Ini perenggan ke tiga yang terpapar dibawah gambar.

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.

Kod HTML:

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

Gambar yang mempunyai pautan:

Gambar (images)-9291

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.

Kod HTML:

<a href="https://www.drupalnote.my/pantai.jpg"> <img src="https://www.drupalnote.my/medium_pantai.jpgf"> </a>

Hasil:

Gambar (images)-9291

Tag #: 
Penilaian: 
3
Average: 3 (2 votes)

Komen

parasolx's picture
Admin

perlu baiki dan memasukkan kembali elemen gambar yang hilang semasa proses perpindahan sebelum ini.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training