Tutorial #3: Menyisipkan Image (gambar)

Image (gambar) merupakan salah satu ornamen yang senantiasa kita temukan dalam halaman web. Rasanya kurang afdhol kalau halaman web tidak disertai dengan gambar-gambar yang menarik. Nah, dalam tutorial kali ini, kita akan membicarakan bagaimana langkah-langkah untuk menyisipkan gambar dan seperti apa properti yang dapat dilekatkan pada image yang di sisipkan tersebut.

Bagaimana cara menyisipkan gambar?

Langkah-langkah menyisipkan sebuah image adalah sebagai berikut:

  1. Klik menu Insert >> Image atau klik shortcut Insert Image pada window Insert yang terletak dibagian atas area kerja..
  2. Pilih gambar (image) yang ingin disisipkan pada lokasi/folder tertentu, seperti contoh berikut:

image

3. Klik OK, maka setelah itu 'mungkin' akan muncul kotak dialog seperti berikut: image

[PERHATIAN] Pada kotak dialog diatas dijelaskan bahwa file tersebut berada pada sebuah folder diluar site 'olaholah' dan mungkin tidak akan bisa diakses manakala site tersebut di tayangkan di browser. Untuk itu kita harus klik pada pilihan Yes untuk mengkopikan gambar tersebut ke folder site 'olaholah'. Nah dalam kasus diatas, kotak dialog tersebut tidak akan muncul di layar monitor jika file gambar yang akan disisipkan itu telah di salin sebelumnya ke folder site 'olaholah'. Jadi, kotak dialog diatas hanya akan tampil jika kita belum mengkopikan file sumber ke folder 'website' kita. Langkah berikutnya berikan nama file yang sesuai dan simpan file gambar tersebut ke folder site.

image

4. Selanjutnya akan muncul kotak dialog Image Tag Accessibility Attributes, yang terdiri dari kotak 'Alternative text' dan 'Long description'. Pilihan ini boleh dikosongkan alias tidak wajib untuk di isi atau boleh langsung klik 'Ok'. Namun, jika Adapun penjelasan dari kedua atribut file tersebut adalah:

image

Alternative text = teks yang akan muncul manakala pointer mouse berada di atas gambar.

Long description = detail lokasi penyimpanan/sumber fle tersebut.

Mengatur Image Property

Bila gambar diaktifkan maka di bawah halaman desain akan muncul Property khusus untuk gambar dengan tampilan seperti berikut:

image

  • Image, 94k mengindikasikan bahwa kapasitas gambar adalah 94 kilobyte
  • W: 400, H: 546 mengindikasikan bahwa Width (lebar) gambar adalah 400 pixel dan Height (tinggi) gambar adalah 546 pixel
  • Src berarti sumber gambar
  • Link mengindikasikan file yang terkait dengan gambar
  • Alt mengindikasikan teks alternatif gambar
  • Edit, berisikan tools dan shortcut software editing gambar, seperti:

Edit = mengaktifkan program Macromedia Fireworks

Optimize in fireworks = mengoptimasi gambar dengan program Fireworks

Crop = memotong gambar

Resample = pengaturan ulang kualitas, ukuran dan bentuk gambar.

Brightnes and contrast = kecerahan dan kontrasitas gambar

Sharpen = ketajaman cahaya gambar

  • Target mengatur pada frame atau window manakah halaman yang terkait akan dibuka/dimunculkan. Pilihan ini tidak akan aktif jika tidak ada file lain yang terkait dengan gambar tersebut. Pilihan yang tersedia pada kotak Target adalah:
    • _blank menayangkan file kaitan pada sebuah window baru.
    • _parent menayangkan file terkait pada frame atau window lain yang masih terkait dengan window sebelumnya.
    • _self menayangkan file terkait pada window yang sama dengan file sebelumnya. Pilihan ini merupakan pilihan yang baku sehingga kita sebenarnya tidak perlu memilihnya.
    • _top menayangkan file terkait pada sebuah window baru dengan mode 'full' sehingga jika terdapat beberapa frames dalam suatu halaman, maka pilihan ini akan menghapus semua frame yang ada.
  • Low Src mengindikasikan gambar yang harus dimunculkan sebelum gambar utama tampil di window browser.
  • Border berarti garis bingkai gambar. Nilai baku untuk pilihan ini adalah 0. Jika ingin menambahkan bingkai, berikan nilai yang lebih besar dari 0, misal 1, 2, 3, dst….
  • Align, yaitu pilihan untuk memposisikan gambar dalam suatu teks, baik secara horizontal maupun vertikal.

Oke, itulah beberapa hal yang perlu diperhatikan terkait dengan Image atau gambar. Semoga bermanfaat dan selamat mencoba!!!

Technorati : ,

Leave a Reply