 |
ASAS HTML
|
|
ASAS HTML
|
Kita akan belajar tentang capaian (links).Ia amat mudah. Kita akan membuat satu capaian ke ummah2u.com.
Mulakan begini...<BODY BGCOLOR="#FFFFFF">
Pergi ke Yahoo!
</BODY>
Pergi ke Yahoo!
Kemudian masukkan tag-tag "anchor".
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A>Yahoo!</A>
</BODY>
Cuba kita lakukan sekali lagi.
<BODY BGCOLOR="#FFFFFF">
Pergi ke Jaring!
</BODY>
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.bharian.com.my/">Berita Harian!</A>
</BODY>
Satu capaian supaya pelawat boleh terus menulis email dari browser mereka ialah dengan menggunakan mailto.
<BODY BGCOLOR="#FFFFFF">
Sila hantar <A HREF="mailto:mail@zulkiplyharun.com">E-Mail!</A>
</BODY>
Kita boleh menjadikan sesuatu imej sebagai objek capaian. Selain dari menggunakan perkataan 'Pergi ke Utusan!' seperti contoh tadi, kita gantikan dengan tag <IMG> untuk perkataan Utusan!
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.utusan.com.my/"><IMG SRC="zura.jpg" WIDTH=82 HEIGHT=68></A>
</BODY>
Satu soalan yang sering diaju kepada saya ialah bagaimana nak hilangkan border biru yang mengelilingi imej berkenaan bila ianya dijadikan capaian? Mudah!
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.utusan.com.my"><IMG SRC="zura.jpg" WIDTH=82 HEIGHT=68 BORDER=0></A>
</BODY>
Apabila anda memasukkan imej ke dalam homepej anda, sentiasa ingat bahawa imej yang besar dan berat akan menyebabkan kebosanan para pengunjung kerana ia mungkin mengambil masa yang panjang untuk dibawa turun. Satu cara untuk `meringankannya' ialah dengan mengecilkan dimensinya atau mengurangkan warnanya. Berikut ialah beberapa:
Dimensi 310 x 315
# warna- 256
Saiz - 62.9 Kb
Dimensi 207 x 210
# warna- 256
Saiz- 31.3 KbDimensi 207 x 210
# warna- 64
Saiz - 20 KbPengeditan imej dilakukan dengan menggunakan Adobe Photoshop
Kita saksikan sudah, yang pertama imejnya besar, cantik dan lebih baik mutunya, namun... seandainya laman anda terlalu lama untuk di bawa turun oleh para pengunjung, mereka akan bosan, malah serik untuk datang lagi ke halaman anda. Justeru itu berpada-padalah dengan imej.
Satu cara lagi yang boleh dilakukan jika anda mempunyai banyak gambar/imej yang hendak ditunjukkan ialah dengan mewujudkan thumbnails (gambar kecil) yang apabila diklikkan akan membawakan gambar/imej besar.
Klik di atas thumbnail untuk melihat imej yang lebih besarPerkara pertama yang harus anda lakukan ialah menggunakan pengedit imej untuk menghasilkan imej bersaiz kecil (namakan dengan nama baru). Anda boleh gunakan Adobe Photoshop, Corel Photopaint, PaintShop Pro atau mana-mana program grafik yang sesuai untuk melakukan tugasan tersebut.
Kita ambil satu contoh iaitu kereta berwarna biru tadi dan setelah ianya dikecilkan namakan dengan satu nama yang baru. Jangan gunakan nama lama, nanti fail itu akan hilang kerana digantikan dengan imej baru.
Mula dengan tag <IMG>.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
</BODY>
Kemudian masukkan tag </A>.
<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>
Dan terus tambahkan URLnya. Siap!
<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>
Seperti tadi, anda boleh hilangkan kotak biru yang mengelilingi kereta tersebut.
<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0></A>
</BODY>
Seperkara lagi untuk membuat sambungan dan capaian ialah capaian bukan kepada satu halaman baru penuh tetapi kepada hanya bahagian tertentu di dalam sesuatu halaman. Klik di sini yang akan secara automatis membawa anda ke bahagian di mana kita mula-mula membicarakan soal URL. Untuk memudahkan pemahaman saya akan kemukakan melalui contoh-contoh.
Pertama tentukan tempat mana yang anda ingin bawa pengunjung. Pilih satu perkataan di situ dan masukkan ke dalam tag <A>.
<A>Masukkan</A> URLnya dan anda selesai melakukannya!
Kemudian berikan tempat itu satu nama khas.
<A NAME="upabit">Masukkan</A> URLnya dan anda selesai melakukannya!
Apa yang telah anda lakukan ialah menentukan tempat pengunjung hendak dibawa. Sekarang ianya boleh dirujukkan.
Sekarang mula membina capaiannya.
Klik <A>di sini</A> untuk dibawa secara automatis...
Dan masukkan dokumen yang hendak dirujukkan...
Klik <A HREF="pel4.html">di sini</A> untuk dibawa secara automatis...
Dan akhir sekali, masukkan `anchor NAME' seperti contoh tadi ...
Klik <A HREF="pel4.html#upabit">di sini</A> untuk di bawa secara automatis...
Dan itu saja!
LATIHAN
ULANGKAJI
1. Buka satu fail baru di Notepad dan taipkan kod-kod berikut :-
|
<HTML> <A
HREF="http://www.jaring.my/">Laman Web
Jaring</A><br> |
2. Simpan fail anda dan namakan sebagai “fail4.html” dan lancarkan di browser
3. Cuba klikkan semua capaian yang terdapat di halaman berkenaan, termasuk pada imej zura.jpg. (Pastikan internet anda telah terpasang).
| Pel 1 | Pel 2 | Pel 3 | Pel 4 | Pel 5 | Pel 6 | Indeks |
| TUTORIAL ASAS HTML | ||||||
[Tutorial Jadual]
[Tutorial Borang] [Tutorial
Bingkai] [Tutorial Pemetaan Imej]
[Java & Javaskrip]
[Muzik Latarbelakang] [Sumber
Lain]
ZULKIPLY
HARUN'S ONLINE PORTFOLIO
)window.location='pics/car1.jpg'){kind=link}