TUTORIAL HTML 3

Posted by Abol Ezz Sitenblog 10:05 PM

Gambar, Membuat Situs Semakin Cool

Situs-situs yang hanya berisi tulisan biasanya sangat membosankan. Wekss ... anda tidak menganggap situs ini membosankan kan ? please ...;)
Baik, kini saya akan memberikan tutorial tentang cara menyisipkan gambar dalam situs anda. Tapi ada satu syarat, anda tidak menganggap situs ini membosankan. OK. :D

Perintah untuk menyisipkan gambar dalam file HTML dilakukan menggunakan tag <IMG SRC="nama_gambar.gif">. Yup, hanya dengan tag tersebut. Sebagai contoh kini saya akan menampilkan satu gambar di bawah dengan cara seperti itu.


Cakep kan gambarnya. :)

Sebelum melangkah lebih jauh, terutama membicarakan masalah atribut, rasanya perlu saya jelaskan bahwa file gambar yang umum digunakan untuk hompej ada tiga jenis. Pertama file gif (Graphics Interchange Format) seperti di atas, kemudian file jpg (Joint Photographic Experts Group, terkadang disebut file jpeg) dan yang terakhir file bmp (bitmap). Di antara ketiganya file bmp memiliki kualitas gambar terbaik, namun berukuran relatif besar sehingga akan menambah beban saat meload halaman hompej. Apalagi kalau koneksi internet anda menggunakan dial up, modem 28 kbps ... hehehe ... ke laut deh. Oleh karena itu orang sering menggunakan gambar gif atau jpg. Gambar gif sendiri memiliki satu keunggulan tersendiri, yaitu memungkinkan latar transparan. Contohnya file tintin.gif di atas sebenarnya berbentuk kotak (persegi). Namun karena latarnya transparan menyebabkan terlihat seperti bukan gambar berbentuk kotak.
Anda juga dapat membuat gambar sebagai link. Caranya dengan menulis seperti contoh berikut:

<A HREF="http://www.al-ikhwan.net/" target="_blank"><IMG SRC="al-ikhwan2.gif">

Anda dapat melihat hasilnya di bawah ini, silakan coba diklik:

Keren kan.

Kini kita masuk ke atribut. Tag IMG memiliki beberapa atribut yang dapat kita manipulasi. Beberapa atribut yang umum digunakan adalah:

<IMG SRC="nama_gambar.gif" BORDER="0" ALIGN="right" HEIGHT="100" WIDTH="50" ALT="apa hayo" HSPACE="5" VSPACE ="5">

Harga tiap atribut di atas saya tulis sembarang, mari kita bahas satu persatu.

Border berfungsi memberikan pigura pada gambar yang ditampilkan. Mungkin lebih enak kalau saya menerangkan dengan contoh. Jadi di bawah ini gambar yang saya tampilkan dengan border yang berbeda-beda.

Border="0"           Border="1"           Border="5"           Border="10"
Kini saya akan menjelaskan tentang align, yaitu posisi terhadap teks. Posisi yang umum digunakan adalah "left", "right", "top", "middle", "bottom". Anda dapat melihat hasil penggunaan align yang berbeda pada contoh berikut.

Gambar ini tanpa memakai align, kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)

Gambar ini memakai align="left", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)



Gambar ini memakai align="right", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :) Gambar ini memakai align="top", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)

Gambar ini memakai align="middle", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)
Gambar ini memakai align="bottom", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)

Gambar di atas menggunakan perintah yang sama, yaitu:

<IMG SRC="asterix.jpg" ALIGN="......">Gambar ini memakai align="....".... .

Namun ternyata hasil yang ditampilkan berbeda tergantung align yang digunakan. Penggunaan align="left" menyebabkan gambar berada di sebelah kiri tulisan, dan sebaliknya penggunaan align="right" menyebabkan gambar berada di sebelah kanan tulisan, dst.

Atribut berikutnya adalah HEIGHT dan WIDTH, yaitu tinggi dan lebar gambar yang akan ditampilkan. Angka yang ditampilkan sebaiknya sesuai dengan ukuran gambar (proporsional) sehingga bentuk gambar yang ditampilkan tidak mengalami distorsi. Di bawah ini saya berikan contoh penggunaan atribut HEIGHT dan WIDTH secara sembarangan.

HEIGHT="100" WIDTH="50" HEIGHT="50"


HEIGHT="50" WIDTH="100"


HEIGHT="188" WIDTH="160"


HEIGHT="94" WIDTH="80"

Kita lihat dengan mempermainkan harga HEIGHT dan WIDTH kita dapat mendistorsi gambar yang ditampilkan, juga dapat memperbesar gambar asalkan harga HEIGHT dan WIDTH yang kita tampilkan proporsional dengan ukuran sebenarnya. Untuk mengetahui harga HEIGHT dan WIDTH yang sebenarnya, salah satunya dengan menggunakan Adobe Photoshop. Buka file gambar yang ingin kita ketahui ukurannya, kemudian klik Image -> Image Size. Maka akan kita peroleh ukuran gambar yang sebenarnya.

Atribut selanjutnya yang akan kita bahas adalah ALT. Harga yang kita isi pada atribut ALT akan memberikan keterangan tentang gambar yang akan ditampilkan. Juga saat gambar tidak dapat ditampilkan (misalkan file gambar yang dipanggil tidak ada), maka tulisan pada ALT tersebut yang akan ditampilkan. Hal ini berguna untuk memberikan informasi kepada pengunjung situs, saat gambar tidak muncul karena satu dan lain hal. Sebagai contoh perintah berikut

<IMG SRC="al-ikhwan2.gif" ALT="Ini banner al-ikhwan.net">

akan memberikan hasil:

Saat gambar ada


Saat gambar tidak ada

Gerakkan kursor anda ke sekitar gambar, maka tulisan pada pesan ALT di atas akan muncul.

Atribut terakhir yang akan dibahas di sini adalah HSPACE dan VSPACE. Atribut ini mengatur jarak antara gambar dengan tulisan yang berada di sekitarnya. HSPACE mengatur jarak horizontal antara gambar dan tulisan, sedang VSPACE mengatur jarak vertikal antara gambar dan tulisan. Contoh penggunaannya adalah pada gambar berikut.

Pada contoh gambar ini tidak digunakan atribut HSPACE dan VSPACE yang dapat juga diartikan HSPACE="0" dan VSPACE="0". Sengaja digunakan align="left" agar dampak penggunaan atribut HSPACE dan VSPACE dapat lebih jelas terlihat. Hmm saya masih perlu tambahan tulisan lain agar apa yang saya maksudkan terlihat jelas. Oleh karena itu tulisan yang sebenarnya tidak perlu ini, tetap saya tulis. Garink banget kan. :)

Sedang gambar ini menggunakan atribut HSPACE="20" dan VSPACE="20". Gambar ini juga menggunakan align="left" dengan maksud yang sama seperti gambar di atas, agar dampak penggunaan atribut HSPACE dan VSPACE dapat lebih jelas terlihat. Hmm saya masih perlu tambahan tulisan lain agar apa yang saya maksudkan terlihat jelas. Oleh karena itu tulisan yang sebenarnya tidak perlu ini, tetap saya tulis. Garink banget kan. :)

Anda dapat melihat perbedaannya. Dengan adanya atribut HSPACE dan VSPACE, maka terdapat jarak antara gambar dan tulisan.

Kemudian tentang gambar, ada satu penggunaan penting lainnya yang belum saya sebutkan, yaitu sebagai latar belakang. Jika digunakan sebagai latar belakang maka gambar tersebut akan disusun hingga memenuhi seluruh layar. Kita dapat menggunakan gambar kecil untuk menjadi latar memenuhi seluruh layar seperti pada halaman ini.
Perintah yang digunakan untuk menjadikan gambar sebagai latar belakang adalah menggunakan tag <BODY>. Satu atribut penting yang belum dibahas saat membahas tag ini pada tutorial sebelumnya adalah atribut BACKGROUND. Jadi perintah yang digunakan untuk membuat halaman seperti pada contoh tadi adalah:

<HTML>
<BODY BACKGROUND="back.jpg">
</BODY>
</HTML>

OK, saya kira anda kini telah cukup mahir menggunakan gambar dalam hompej anda. Jadi kita akan segera memasuki bahasan lain dalam tutorial berikutnya.

Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com