|
Wellcome to my cyber home [ Tutorial / Pelajaran Web]
Halaman 8 Halaman terakhir nech :)
Tutorial | Grafik dan Warna
Halaman web mula-mula hanya berupa kumpulan informasi dalam bentuk
teks yang saling terkait satu sama lain dengan link-link yang juga
berupa teks, sehingga disebut "hypertext". Lambat laun,
seiring dengan perkembangan internet yang semakin komersial dan
teknik kompresi data yang semakin tinggi, halaman-halaman web mulai
dipenuhi gambar-gambar untuk memperindah tampilan. Sekarang, grafik
dan warna adalah salah satu elemen penting perancangan situs web
jika anda ingin situs anda menarik banyak pengunjung.
Warna
Dalam salah satu bagian sebelumnya kita sudah mengenal atribut COLOR
pada elemen FONT yang digunakan untuk menentukan warna teks yang
ditampilkan. Elemen BODY juga mengenal beberapa atribut untuk mewarnai
bagian-bagian tertentu dari dokumen web. Atribut BGCOLOR menentukan
warna latar belakang, atribut LINK menentukan warna link, atribut
ALINK menentukan warna link yang sedang aktif, sedangkan atribut
VLINK menentukan warna link yang sudah dikunjungi.
Warna dapat ditentukan dengan dua cara. Yang pertama dengan menggunakan
nama warna. HTML telah mendefinisikan 16 warna standar dan sekitar
140 warna tambahan baru yang diperkenalkan baik oleh Netscape maupun
Internet Explorer. Cara kedua adalah dengan menggunakan nilai RGB
yang berupa tiga pasang angka heksadesimal yang masing-masing mendefinisikan
kecerahan warna merah, hijau dan biru. Penggunaan warna dalam dokumen
dapat dilihat dalam contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Warna</TITLE>
</HEAD>
<BODY BGCOLOR="#A52A2A">
<P>Warna-warna standar HTML:</P>
<P><B>
<FONT COLOR="aqua">Aqua</FONT>
<FONT COLOR="black">Black</FONT>
<FONT COLOR="blue">Blue</FONT>
<FONT COLOR="fuchsia">Fuchsia</FONT><BR>
<FONT COLOR="gray">Gray</FONT>
<FONT COLOR="green">Green</FONT>
<FONT COLOR="lime">Lime</FONT>
<FONT COLOR="maroon">Maroon</FONT><BR>
<FONT COLOR="navy">Navy</FONT>
<FONT COLOR="olive">Olive</FONT>
<FONT COLOR="purple">Purple</FONT>
<FONT COLOR="red">Red</FONT><BR>
<FONT COLOR="silver">Silver</FONT>
<FONT COLOR="teal">Teal</FONT>
<FONT COLOR="white">White</FONT>
<FONT COLOR="yellow">Yellow</FONT><BR>
</B></P>
</BODY>
</HTML>
Format Gambar
Terdapat dua format gambar yang umum digunakan dalam halaman-halaman
web, yaitu format GIF dan JPEG. Kedua format gambar ini memiliki
kelebihan dan kekurangan masing-masing.
GIF (Graphics Interchange Format) menyimpan gambar dengan 8 bit
per pixel sehingga dapat menampilkan hingga 256 warna. Gambar dimampatkan
dengan metode lossless compression sehingga sama sekali tidak ada
informasi yang hilang. Standar GIF89a dapat menampilkan gambar dengan
latar belakang transparan dan mendukung interlacing sehingga gambar
dapat ditampilkan secara bertahap. Selain itu GIF89a juga dapat
menampilkan animasi. Spesifikasi-spesifikasi ini menyebabkan format
GIF lebih cocok untuk gambar-gambar logo, icon, kartun, artline
dan gambar-gambar sederhana yang membutuhkan ketajaman kontras,
tapi kurang tepat untuk gambar-gambar fotografi.
Di sisi lain, JPEG (Joint Photographic Expert Group) mampu menyimpan
gambar dengan 24 bit per pixel sehingga dapat menampilkan hingga
16 juta warna. Gambar dimampatkan dengan metode lossy compression
di mana sebagian informasi kurang penting dibuang untuk menghasilkan
tingkat pemampatan yang lebih tinggi. Semakin tinggi pemampatan,
semakin jelek gambar yang dihasilkan. Standar JPEG yang lebih baru,
yaitu Progressive JPEG, juga mendukung interlacing. Dengan spesifikasi-spesifikasi
tersebut, format JPEG lebih cocok untuk gambar-gambar fotografi
yang membutuhkan banyak warna dan kurang mementingkan keutuhan informasi.
Elemen IMG
Gambar disisipkan ke dalam halaman web dengan menggunakan elemen
IMG. Nama file gambar yang dimaksud menjadi parameter untuk atribut
SRC. Jika ada gambar alternatif yang berukuran lebih kecil sehingga
bisa ditampilkan lebih cepat sementara menunggu gambar yang lebih
baik di-download, file tersebut diletakkan di atribut LOWSRC. Atribut
ALT berisi teks sebagai pengganti gambar jika browser yang digunakan
tidak dapat menampilkan gambar tersebut. Atribut WIDTH dan HEIGHT
digunakan untuk menentukan lebar dan tinggi gambar dalam pixel.
Akhirnya selesai juga dech ..baca
doang dah pusing yah apalagi buatnya. Oke dech met mencoba yah semoga
sukses...
|
