Assalamualaikum semuanya, apa kabar? Semoga dalam keadaan sehat wal'afiat semua yah :)
Pada kesempatan kali ini ane mau sharing mengenai Gambar dan temen-temennya yang ada di dalam HTML hehe mari disimak yak :D
I. GAMBAR
Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML adalah :
- File gambar lambat untuk di download.
- Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file gambar
- Tidak ada browser grafik/gambar
- Gambar tidak selalu dikenal secara international
- Warna gambar mungkin tidak ditampilkan seperti aslinya
A. Format gambar
Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai format standar untuk menampilkan gambar dalam WEB.
B. WARNA
- GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256 warna.
Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-
gambar lain yang sederhana tetapi tidak cukup baik untuk menyimpan gambar
fotografik.
- JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna. Dengan warna
sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas
foto.
C. Pemadatan Ukuran Gambar
- GIF memadatkan datanya dengan menggunakan metode lossless compression. Metode
lossless compression bekerja dengan mencari pola-pola berulang dalam suatu gambar.
Lossless compression pada GIF membuang informasi dalam jumlah yang sedikit, yaitu
hanya warna-warni dengan pola yang sama. Jika file GIF ditampilkan, waktu yang
digunakan tidak lama, karena file hasil pemadatan dengan file yang diuraikan
merupakan dua buah file yang hampir sama. Gambar file PNG juga menggunakan
lossless compression, sehingga bisa menjadi alternatif pengganti file GIF.
- JPEG menggunakan metode pemadatan lossy compression. Pemadatan gambar metode
lossy compression, membuang sejumlah bit-bit gambar untuk membuat gambar
berukuran kecil. Tingkat pembuangan informasi gambar ini biasanya dapat ditentukan
oleh pemakai sewaktu membuat file JPEG.
D. Menampilkan inline dan external image
Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan eksternal.
- Internal Image : gambar ditampilkan secara langsung saat web page dimuat dalam
browser yang berbasiskan grafik.
- External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu page
dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag <IMG> beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan <IMG> secara umum adalah : < IMG SRC=”nama file”>
Contoh :
<html>
<head>
<title> Penggunaan Tag IMG</title>
</head>
<body bgcolor=lightgrey>
<h3 align=center>Penggunaan tag IMG</h3>
<p>
<img src="nama-file-gambar.gif">
Teks ditampilkan setelah gambar.
</p>
<p>
Teks ini terpotong dengan
<img src="nama-file-gambar.gif">
gambar logo.
</p>
<p>
Gambar tampil inline setelah teks ini
<img src="nama-file-gambar.gif">
</p>
</body>
</html>
E. Mengatur Perataan teks dengan Inline Image
Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag <IMG>.
- TOP : Meratakan teks dengan bagian atas gambar
- MIDDLE : Meratakan gambar dengan bagian tengah gambar
- BOTTOM : Meratakan teks dengan bagian bawah gambar
Contoh :
<html>
<head>
<title> Penggunaan Align Pada Tag IMG</title>
</head>
<body bgcolor=lightgrey>
<h3 align=center>Perataan Teks dalam tag IMG</h3>
<p>
<img src="nama-file-gambar.gif" align=top>
Teks ini rata dengan bagian atas gambar.
</p>
<p>
<img src="nama-file-gambar.gif" align=middle>
Teks ini rata dengan bagian tengah gambar
</p>
<p>
<img src="nama-file-gambar.gif" align=bottom>
Teks ini rata dengan bagian bawah gambar.
</p>
</body>
</html>
F. Mengatur Posisi Gambar Pada halaman WEB
Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB. Penggunaan atribut
ALIGN beserta nilainya dalam tag <IMG> untuk mengatur tampilan teks disekitar gambar.
- LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar
- RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di sekitar gambar.
Contoh :
<html>
<head>
<title> Tag IMG dan atribut ALIGN</title>
</head>
<body bgcolor=lightgrey>
<h2 align=center>Penggunaan Perataan Teks </h2>
<p>
<img src="nama-file-gambar.gif" align=left>
<font size=5>Gambar rata kiri</font size>
Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB)
adalah suatu kumpulan informasi pada beberapa server komputer yangterhubung
satu sama lain dalam jaringan Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame
juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....
</p>
<p>
<img src="nama-file-gambar.gif" align=right>
<font size=5>Gambar rata kanan</font size>
Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB)
adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung
satu sama lain dalam jaringan Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame
juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....
</p>
</body>
</html>
G. Mengatur Ukuran Gambar Pada Browser
Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :
- Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar secara
inline.
- Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.
Pengaturan ukuran tinggi dan lebar pada tag <IMG> dilakukan oleh atribut HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.
Contoh :
<html>
<head>
<title> Menggunakan HEIGHT dan WIDTH</title>
</head>
<body bgcolor=lightgrey>
<h3>Mengatur Ukuran Tinggi dan Lebar Gambar </h3>
<font size=4>Gambar Ukuran Asli</font size><br>
<IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif"><br>
<font size=4>Gambar Ukuran lebar=180px Tinggi 140px</font size><br>
<IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=180
HEIGHT=140>
</body>
</html>
H. Menambahkan Teks Keterangan
Anda dapat menambahkan keterangan tambahan pada gambar yang ditampilkan secara
inline. jika petunjuk mouse diletakan di atas gambar, maka teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag <IMG>. Pemakaian secara umum :
<IMG SRC=”nama file gambar” ALT=”keterangan”>
Contoh :
<html>
<head>
<title> Menggunakan atribut ALT </title>
</head>
<body bgcolor=lightgrey>
<h3>Penggunaan atribut ALT </h3>
<IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=280
HEIGHT=240 ALT="Cover Buku Panduan HTML 4.01">
</body>
</html>
I. Memberi Border Pada Gambar
Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER memberikan suatu
border atau batas pada suatu inline gambar. Inline gambar tidak mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan satuan pixel.
Contoh :
<html>
<head>
<title> Penggunaan Atribut BORDER</title>
</head>
<body bgcolor=lightgrey>
<h3>Penggunaan BORDER untuk gambar </h3>
<A HREF=""><IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=100
HEIGHT=100
BORDER=0></A><br><br>
<A HREF=""><IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=100
HEIGHT=100BORDER=5></A><br><br>
<A HREF=""><IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=100
HEIGHT=100 BORDER=10></A><br>
</body>
</html>
J. Memberi Ruang Pada Gambar
Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambar
dengan objek di sekitarnya. Atribut HSPACE menentukan spasi horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar.
Contoh :
<html>
<head>
<title>Atribut VSPACE dan HSPACE</title>
</head>
<body bgcolor=lightgrey>
<h3>Menggunakan atribut VSPACE dan HSPACE</h3>
<IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=100
HEIGHT=100 VSPACE=20 HSPACE=20
ALIGN=LEFT><FONT SIZE=4>Teks Wrap disekitar Gambar </FONT SIZE><br>
Dalam buku ini akan dipelajari cara membuat halaman web. World Wide Web (WEB)
adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung satu
sama lain dalam jaringan Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga
tidak ketinggalan cara membuat form. Demikian diharapkan para pembaca nantinya
mampu membuat web site sendiri....
</body></html>
K. Link Dengan Gambar
Suatu gambar dapat berfungsi secara bersama-sama dengan tag <A>. jika gambar di klik
maka link akan menuju ke informasi yang diberikan pada tag <A>. Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu dokumen.
Contoh :
<html>
<head>
<title>Gambar sebagai link</title>
</head>
<body bgcolor=lightgrey>
<h3>Gambar sebagai link</h3>
<UL>
<LI><IMG SRC="d:\nama-folder-gambar\nama-file-gambar.gif" WIDTH=100
HEIGHT=100 VSPACE=20
HSPACE=20 ALIGN=middle>Ini gambar biasa<br>
<LI><A HREF="d:\nama-folder\doc.html"> <IMG SRC="d:\nama-folder-gambar\
nama-file-gambar.gif"
WIDTH=100 HEIGHT=100 ALIGN=middle></A> Gambar berfungsi sebagai
link<BR><BR>
<LI><A HREF="d:\nama-folder\doc.html"> <IMG SRC="d:\nama-folder-gambar\
nama-file-gambar.gif"
WIDTH=100 HEIGHT=100 ALIGN=middle> Link ke beruang</A><BR>
</UL>
</body>
</html>
Kelar juga akhirnya postingannya :D semoga bisa memberikan ilmu kepada agan2 yang melihatnya dan menjadi bermanfaat ya ilmunya :) Amin.....
