FORMAT GAMBAR
- GIF (Graphic Interchange Format) yaitu menghasilkan gambar 256 warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang sederhana.
- JPEG (Joint Photographic Expert Group) yaitu menghasilkan 16,7 juta warna, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto.
Menampilkan inline dan external image
Cara menampilkan gambar dalam web, ada dua cara, yaitu:
- Internal Image yaitu gambar ditampilkan secara langsung saat web page dimuat dalam browser yang berbasiskan grafik.
- External Image yaitu 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 gambar”>
Tag ini mempunyai atribut:
- Width, untuk menentukan lebar gambar
- Height, untuk menentukan tinggi gambar
- Border, untuk memberi bingkai pada gambar
- Hspace, untuk memberi ruang kosong di kiri dan kanan gambar
- Vspace, untuk memberi ruang kosong di atas dan bawah gambar
- Align, untuk menentukan perataan gambar, tengah, kiri, kanan,atas/bawah layar
- Alt, untuk memberikan komentar bila pointer mouse berada diatas gambar
Contoh:
<html>
<head>
<title>tag IMG</title>
</head>
<body>
<img src ="gambar.jpg">
<p>
<img src="gambar.jpg">
Teks ditampilkan setelah gambar.
</p>
<p>
Teks ini terpotong dengan
<img src="gambar.jpg">
gambar logo.
</p>
</body>
</html>
Mengatur teks dengan Inline Image
Pengaturan perataan ini menggunakan atribut ALIGN dalam tag <IMG>.
- TOP untuk meratakan teks dengan bagian atas gambar
- MIDDLE untuk meratakan gambar dengan bagian tengah gambar
- BOTTOM untuk meratakan teks dengan bagian bawah gambar
Contoh:
<html>
<head>
<title>Inline IMG</title>
</head>
<body>
<p>
<img src="gambar.jpg" align=top>
Teks ini rata dengan bagian atas gambar.
</p>
<p>
<img src="gambar.jpg" align=middle>
Teks ini rata dengan bagian tengah gambar
</p>
<p>
<img src="gambar.jpg" align=bottom>
Teks ini rata dengan bagian bawah gambar.
</p>
</body>
</html>
Mengatur Posisi Gambar
Penggunaan atribut ALIGN beserta nilainya dalam tag <IMG> untuk mengatur tampilan teks disekitar gambar.
- LEFT untuk meletakkan gambar di sebelah kiri teks.
- RIGHT untuk meletakkan gambar di sebelah kanan teks.
Contoh:
<html>
<head>
<title>Posisi IMG</title>
</head>
<body>
<p>
<img src="gambar.jpg" align=left>
<font size=5>Gambar rata kiri</font size>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br/>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.<br/><br/>
</p>
<p>
<img src="gambar.jpg" align=right>
<font size=5>Gambar rata kanan</font size>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
Mengatur Ukuran Gambar
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>Ukuran IMG</title>
</head>
<body>
<font size=6>Gambar Ukuran Asli</font size><br>
<IMG SRC="gambar.jpg"><br>
<font size=4>Gambar Ukuran lebar = 100px Tinggi = 70px</font size><br>
<IMG SRC="gambar.jpg" WIDTH=100 HEIGHT=70>
</body>
</html>
No comments:
Post a Comment