Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML adalah :
1 File gambar lambat untuk di download.
2 Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file gambar
Tidak ada browser grafik/gambar
3 Gambar tidak selalu dikenal secara international
4 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
1) 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.
2 ) 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="STIK-trs.gif">
Teks ditampilkan setelah gambar.
</p>
<p>
Teks ini terpotong dengan
<img src="STIK-trs.gif">
gambar logo.
</p>
<p>
Gambar tampil inline setelah teks ini
<img src="STK-trs.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 PadaTag IMG</title>
</head>
<body bgcolor=lightgrey>
<h3 align=center>Perataan Teks dalam tag IMG</h3>
<p>
<img src="STIK-trs.gif" align=top>
Teks ini rata dengan bagian atas gambar.
</p>
<p>
<img src="STIK-trs.gif" align=middle>
Teks ini rata dengan bagian tengah gambar
</p>
<p>
<img src="STK-trs.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="STIK-trs.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="STK-trs.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>
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:\S T A F F\STIK-trs.gif"><br>
<font size=4>Gambar Ukuran lebar=180px Tinggi 140px</font size><br>
<IMG SRC="d:\S T A F F\STIK-trs.gif" WIDTH=180 HEIGHT=140>
</body>
</html>
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:\S T A F F\STIK-trs.gif" WIDTH=100 HEIGHT=100 BORDER=0></A><br><br>
<A HREF=""><IMG SRC="d:\S T A F F\STIK-trs.gif" WIDTH=100 HEIGHT=100 BORDER=5></A><br><br>
<A HREF=""><IMG SRC="d:\S T A F F\STIK-trs.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:\S T A F F\STIK-trs.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>
