|
Pelajaran 5 Mari kita coba menambahkan gambar di halaman yang kita buat. Kita akan menggunakan gambar di bawah ini. Sekali lagi, klik kanan dan simpan gambar tersebut atau copykan dari folder gambar.
Anda menyatakan pemakaian gambar dengan tag <IMG> (image). <BODY> <IMG> </BODY>Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya. <BODY> <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> </BODY>
Perlu saya tekankan bahwa sumber tersebut tidak hanya menerangkan gambar apa yang kita maksud, tetapi juga menyatakan di mana letaknya. Gambar di atas, "chef.gif", menyatakan bahwa browser akan mencari gambar dengan nama chef.gif di folder (atau direktori) yang sama dengan dokumen html itu sendiri. Di bawah ini disajikan beberapa diagram.
Ada satu cara lagi untuk menuliskan keterangan tempat tersebut. Semua keterangan yang mengacu ke gambar dapat menggunakan URL (Uniform Resource Locator/alamat) lengkap sebagai sumbernya. Sebagai contoh: http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif Mungkin anda bertanya-tanya, mengapa lebih baik menggunakan URL relatif (parsial) dibandingkan dengan pemakaian URL absolut (lengkap)?? Karena anda dapat merancang web site anda di hard disk anda sendiri dan semua link akan berfungsi. Sesudah anda selesaikan seluruhnya, anda tinggal meng-upload (mengcopykan ke server di internet) file-file tersebut dan semuanya juga tetap berfungsi dengan baik. Sebagai tambahan, dengan cara ini lebih mudah bagi browser mencari gambar-gambar tersebut dan file anda akan lebih cepat ditampilkan. Adakah alasan untuk menggunakan URL absolut? Tentu, jika gambar tadi terletak di server yang sama sekali berbeda.
Atribut IMG yang juga perlu anda perhatikan adalah ALT.... <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">ALT adalah teks pengganti gambar jika pengunjung anda memakai browser yang (apapun alasannya) tidak menampilkan gambar. Seseorang mungkin menggunakan browser yang hanya bisa menampilkan teks, barangkali dia mematikan fungsi tampilan gambar supaya lebih cepat atau bisa juga dia menggunakan screen reader (browser yang membacakan isi web page). Dalam kasus ini, atribut ALT bisa sangat penting bagi mereka.
Ada satu hal yang sangat menarik yang harus anda tahu tentang gambar dan ukurannya. Coba ini.... <BODY> <IMG SRC="chef.gif"> </BODY>
Seperti anda lihat, browser bisa menentukan sendiri seberapa besar gambar tersebut. Kalau begitu untuk apa repot-repot menuliskan dimensinya? Karena jika ada dimensinya, browser dengan mudah bisa mencadangkan tempat untuk gambar tersebut kemudian menampilkan isi halaman lainnya. Jika seluruhnya sudah ditampilkan, browser dapat kembali dan mengisi tempat tadi dengan gambar yang dimaksud. Tanpa dimensi, pada saat menemukan gambar browser harus berhenti sejenak, menampilkan gambar tersebut, kemudian baru melanjutkan menampilkan sisanya. Kesimpulannya, browser berfungsi jauh lebih baik bila kita memberi dimensi pada gambar. OK, semua itu memang baik, tapi di mana menariknya?? Coba yang ini.... <BODY> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY>
<BODY> <IMG SRC="chef.gif" WIDTH=40 HEIGHT=200> </BODY>
Anda bisa menyatakan berapapun dimensinya sesuai
keinginan anda dan mengabaikan ukuran aslinya. Masih tidak tahu di mana
menariknya?
<BODY> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200> </BODY>
Sangat menarik, kan?
Belajar Sulap Bonus Cewek Seksi..! Bagaimana bisa? Tanya saja >>> webmaster
| ||||||||||||||||||||||||||||||||||||||||
|
|
(sudah saya katakan bahwa NoteTab adalah salah satu favorit saya!)
Titik merah ini berukuran 1x1. Sangat kecil memang, tapi lihat apa yang
bisa saya lakukan dengan itu....
