Menyajikan Format Tampilan Gambar
Wednesday, March 25, 2020
Edit
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Hampir semua web memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik pengunjungnya. Tentunya untuk sanggup menampilkan gambar harus memahami teknik untuk menampilkan gambar tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik.
Cara yang sanggup dilakukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak mempunyai pasangan. Atribut terpenting dari tag <img> yakni SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> yakni : <img src=”namafile”>. Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut. Contoh: <img src= “../image/komputer.jpg”> Atau <img src=http://www.abcde.com/image/kamera.jpg/>. Format gambar yang sering dipakai dalam halaman web yakni GIF (.gif ) dan JPEG (.jpg atau . jpeg ).
- GIF yakni abreviasi dari Graphics Interface Format.
- JPEG, yakni abreviasi dari Joint Photographic Expert Group.
- PNG (.png ), yang merupakan abreviasi dari Portable Network graphics.
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:
1. Secara vertikal:
- Teks sanggup berada sejajar dengan bab atas gambar
- Teks sanggup berada sejajar dengan bab tengah gambar
- Teks sanggup berada sejajar dengan bab bawah gambar
Untuk posisi gambar yang dilihat dari arah vertikal sanggup ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.
2. Secara horisontal:
- Gambar sanggup berada di bab kiri teks/paragraf
- Gambar sanggup berada di bab 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, jikalau diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.
B. Memperkecil dan Memperbesar Ukuran Gambar
B. Memperkecil dan Memperbesar Ukuran Gambar
Gambar yang ditampilkan pada dokumen HTML terkadang tidak mempunyai ukuran gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar dengan kualitas yang ibarat aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran orisinil dari gambar tersebut.
Untuk memilih ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar. Perhatikan pola berikut ini.
<img src=”images/komputer.jpg” /> Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran orisinil (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” />
Apabila memakai blogger pengaturan besar kecil gambar dapt memakai small, medium, large, dan x-large. Untuk perataan gambar sanggup memakai left, center, right ibarat 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 sanggup memperlihatkan 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 ketika penunjung mengarahkan kursor (penujujuk mouse) ke atas gambar.
Contoh Penempatan Gambar :
<html>Hasilnya yakni sebagai berikut.
<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>
Latihan Menambahkan Gambar GIF, JPG, dan PNG
Menampilkan gambar dalam format GIF:
/div> Pada pola di atas,ditampilkan gambar dengan format GIF. Seperti yang terlihat, format tersebut sanggup ditampilkan dengan baik di dalam halaman web. Nilai yang kita isikan untuk atribut SRC di atas mengandung nama direktori images. <img src=”images/komputer.gif”/>.