Gambar biasanya menjadi bagian yang paling menarik pada sebuah website. Gambar menjadi daya tarik utama seorang pengunjung untuk tetap betah berlama-lama terpaku pada sebuah website. Selain itu, gambar juga menjadi identitas tersendiri bagi seorang perancang website, yang membedakan website yang dibuatnya dari website-website lainnya. Betapapun sederhananya sebuah website yang dirancang tetap akan memiliki ciri khas yang tidak dimiliki oleh website lain.
Gambar pada sebuah halaman website secara sederhana dapat dihasilkan oleh berbagai perangkat elektronik yang dapat mengubah foto atau gambar menjadi data digital dalam bentuk image. Scanner dan Digital Camera adalah perangkat yang biasa digunakan untuk memproduksi gambar dalam bentuk digital. Sedangkan jenis file yang umum dipergunakan pada halaman html adalah: jpg, gif, png. File-file jenis ini sangat mudah ditemukan dan bertebaran di internet. Namun, untuk memuatnya pada halaman html yang kita buat harus memperhatikan aspek legal agar tidak terjadi hal-hal yang bertentangan dengan hukum nantinya.
Tag yang dipergunakan untuk menampilkan gambar adalah <img src=”namafile.jenisfile”>. Misalnya untuk menampilkan gambar dengan namafile: “header.jpg”, yang berupa gambar berikut:
<html>
<head>
<title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
</head>
<body>
<img src="header.jpg">
</body>
</html> |
Hasilnya akan terlihat sebagai berikut:
File: “header.jpg” di atas memiliki ukuran: 780 x 120 piksel. Dibuat dengan acuan lebar monitor komputer yang berukuran VGA: 800 x 600 piksel. Hasilnya ditampilkan pada monitor dengan ukuran yang lebih lebar dari ukuran VGA. Tampak bahwa gambar tidak berada di posisi tengah. Untuk memperbaikinya kita dapat membuat Tag <center> dengan penutup </center> untuk membuat Tag <img> menjadi rata tengah.
Tambahkan warna background pada Tag <body> dengan warna yang sesuai dengan karakter yang ingin ditampilkan, misalnya warna abu-abu tua untuk memberi kesan gagah. Anda dapat menambahkan atribut border pada Tag <img> untuk memberi garis pembatas pada gambar.
<html>
<head>
<title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
</head>
<body bgcolor="#333333">
<center><img src="header.jpg" border="2"></center>
</body>
</html> |
Menampilkan Gambar Sebagai Background
Gambar selain ditampilkan secara tersendiri, juga dapat dijadikan sebagai background. Halaman website dapat diisi dengan gambar dengan ukuran relatif kecil yang ditampilkan secara berulang-ulang sehingga memenuhi seluruh halaman.Contohnya adalah gambar “bgr.gif” dengan ukuran 1 x 8 piksel, seperti ini:
dapat dijadikan sebagai background dengan cara menuliskan pada properti <body> sebagai berikut:
<html>
<head>
<title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
</head>
<body background="bgr.gif">
<center><img src="header.jpg" border="2"></center>
</body>
</html> |
Hasilnya akan terlihat sebagai berikut:
Nah, mudah bukan? Tentu saja untuk bisa menyiapkan gambar-gambar yang baik, kita harus mempelajari software yang sesuai. Adobe Photoshop adalah salah satu software pengolah gambar / foto yang sangat berguna untuk pekerjaan ini.
Perlu diketahui, file gambar pada sebuah halaman html bisa ditempatkan pada folder yang sama dengan file html – seperti pada 2 contoh di atas. Atau, ditempatkan pada folder khusus yang diberi nama “images”. Gunanya adalah untuk memisahkan file-file gambar dari file-file html agar terorganisasi dengan baik dan tidak bertebaran bercampur dengan file-file html. Pada sebuah website yang sudah lengkap, file-file gambar jumlahnya bisa puluhan, ratusan, bahkan ribuan, sehingga akan lebih rapi jika ditempatkan pada folder khusus dengan nama : images.
Menambahkan Teks Berjalan
Selanjutnya kita bisa menambahkan tulisan berjalan di bawah gambar header tersebut dengan menggunakan Tag <marquee> dan ditutup dengan </marquee>. Tentu saja kita dapat menambahkan style pada tulisan agar ditampilkan dengan warna dan font yang sesuai dengan selera.
<html>
<head>
<title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
</head>
<body background="bgr.gif">
<center><img src="header.jpg" border="2"></center>
<marquee style="color:white; font-family:Arial">Hematlah BBM agar lingkungan kita tetap lestari</marquee>
</body>
</html> |
Tidak ada komentar:
Posting Komentar