Selasa, 23 Oktober 2018

Menyajikan format gambar

Rabu,24 Oktober 2018 



MENYAJIKAN FORMAT GAMBAR




A. Menggabung Gambar dan Teks
Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:


 SECARA VERTIKAL
  1. Teks bisa berada sejajar dengan bagian atas gambar
  2. Teks bisa berada sejajar dengan bagian tengah gambar
  3. Teks bisa berada sejajar dengan bagian bawah gambar
Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.

SECARA HORIZONTAL

  1. Gambar bisa berada di bagian kiri teks/paragraf
  2. Gambar bisa berada di bagian kanan teks/paragraf


Untuk posisi gambar yang dilihat dari arah horisontal ditentuk aribut dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.

B. Memperkecil dan Memperbesar Ukuran Gambar


Gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran asli dari gambar tersebut.

Untuk menentukan ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar. Perhatikan contoh berikut ini.
<img src=”images/komputer.jpg” />

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500 x 375 pixel). Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut, misalnya
<img src=images/komputer.jpg” width=320” height=”230” />
pabila menggunakan blogger pengaturan besar kecil gambar dapt menggunakan small, medium, large, dan x-large. Untuk perataan gambar dapat menggunakan left, center, right seperti pada gambar do atas (gamabr disorot terlebih dahulu, opsi ukuran dan perataan akan muncul otomatis).


C. Penambahan Alt dan Title

Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip (sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor (penujujuk mouse) ke atas gambar.
Penambahan Alt dan Title
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>. <img src=”namafile” title=”keterangan”/>.

Contoh Penempatan Gambar :
<html>
<head>
<title>Gambar</title>
</head>
<body>
<p><h2>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2>
<p>Menampilkan gambar dalam format GIF:</p>
<img src=”images/komputer.gif”/>
</body>
</html>

Demikian penjelasan tentang MENYAJIKAN FORMAT GAMBAR semoga bermanfaat.