Scribd
Unggah
12 tayangan6 halaman

Modul 4

Dokumen ini menjelaskan cara membuat hyperlink dalam HTML, termasuk penggunaan tag anchor dan cara menghubungkan gambar sebagai link. Selain itu, dokumen juga memberikan tips untuk mengoptimalkan gambar agar tidak memperlambat loading halaman web. Contoh praktis dan latihan disertakan untuk membantu pemahaman tentang pembuatan link dan penggunaan gambar dalam halaman web.

Diunggah oleh

madsrif
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
12 tayangan6 halaman

Modul 4

Dokumen ini menjelaskan cara membuat hyperlink dalam HTML, termasuk penggunaan tag anchor dan cara menghubungkan gambar sebagai link. Selain itu, dokumen juga memberikan tips untuk mengoptimalkan gambar agar tidak memperlambat loading halaman web. Contoh praktis dan latihan disertakan untuk membantu pemahaman tentang pembuatan link dan penggunaan gambar dalam halaman web.

Diunggah oleh

madsrif
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

HYPERLINK

Pelajaran 4

TEXT HYPERLINK
Sangat mudah sekali untuk membuat suatu link ke alamat lain. Coba perhatikan script
dibawah ini

<BODY BGCOLOR="#FFFFFF">
Pergi ke Yahoo!
</BODY>

Pergi ke Yahoo!

Kemudian masukkan tag-tag "anchor".


<BODY BGCOLOR="#FFFFFF">
Pergi ke <A>Yahoo!</A>
</BODY>

Pergi ke Yahoo!

Kemudian masukkan URL dan siap (URL adalah Universal Resource Locator, yaitu
suatu alamat khusus server di mana terletaknya file internet).
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

Pergi ke Yahoo!

19
Coba kita lakukan sekali lagi.
<BODY BGCOLOR="#FFFFFF">
Pergi ke Jaring!
</BODY>

Pergi ke Jaring!

<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my/">Jaring!</A>
</BODY>

Pergi ke Jaring!

sedangkan untuk link ke email kita bisa menggunakan mailto.


<BODY BGCOLOR="#FFFFFF">
Silahkan kirim <A HREF="mailto:[email protected]">E-Mail!</A>
</BODY>

Silahkan kirim E-Mail!

HYPERLINK GAMBAR
Kita boleh membuat gambar sebagai objek link. Selain menggunakan perkataan
'Pergi ke Jaring!' seperti contoh tadi, kita bisa melakukannya dengan memakai tag

<IMG> untuk perkataan Jaring!


<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my/"><IMG SRC="zura.jpg"
WIDTH=82 HEIGHT=68></A>
</BODY>

Pergi ke

20
satu permasalahan baru muncul, bagaimana caranya menghilangkan kotak biru yang
mengelilingi gambar yang dijadikan link ? ah itu gampang saja coba perhatikan sript
di bawah ini
<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my"><IMG SRC="zura.jpg" WIDTH=82
HEIGHT=68 BORDER=0></A>
</BODY>

Pergi ke

kotak birunya sudah hilang bukan !, untuk menghilangkan kotak biru kita bisa
memakai kode BORDER dengan diset nilainya menjadi 0

Apabila anda memasukkan gambar ke dalam halaman WEB anda, harus sentiasa
ingat bahwa gambar yang besar dan berat akan menyebabkan kebosanan para
pengunjung kerana browser mungkin mengambil atau menampilkan gambar tersebut
menjadi sangat lama. Salah satu cara untuk ‘meringankannya’ ialah dengan
mengecilkan dimensinya atau mengurangkan warnanya. Berikut ialah beberapa
contoh gambar:

Dimensi 310 x 315


# warna- 256
Ukuran - 62.9 Kb

21
Dimensi 207 x 210 Dimensi 207 x 210
# warna- 256 # warna- 64
Ukuran- 31.3 Kb Ukuran - 20 Kb
Pengeditan gambar dilakukan dengan menggunakan Adobe Photoshop

Coba perhatikan yang pertama dimensinya besar, cantik dan lebih baik mutunya,
namun... seandainya halaman anda terlalu lama untuk dibuka oleh para pengunjung,
mereka akan bosan, malah malas untuk membuka lagi halaman anda. Justru itu kita
harus bersikap bijak jika ingin menampilkan gambar.
Satu cara lagi yang boleh dilakukan jika anda mempunyai banyak gambar/imej yang
akan ditampilkan ialah dengan membuat thumbnails (gambar kecil) yang apabila
diklick akan menampilkan gambar/imej yang lebih besar besar.

Klik di atas thumbnail untuk melihat gambar yang lebih besar

Hal pertama yang harus anda lakukan ialah menggunakan Editor gambar untuk
menghasilkan gambar yang lebih kecil (namakan dengan nama baru). Anda boleh
gunakan Adobe Photoshop, Corel Photopaint, PaintShop Pro atau apa saja program
grafik yang sesuai untuk melakukan pengeditan tersebut.
Kita ambil satu contoh yaitu mobil berwarna biru tadi dan setelah di kecilkan
namakan dengan satu nama yang baru. Jangan gunakan nama lama, nanti file itu akan
hilang kerana digantikan dengan gambar baru.
dimulai dengan tag <IMG>.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
</BODY>

Kemudian masukkan tag </A>.

22
<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 mobil tersebut.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60
BORDER=0></A>
</BODY>

Satu hal lagi untuk membuat sambungan dan link ialah bukan kepada satu halaman
baru tetapi hanya bagian tertentu di dalam sesuatu halaman. Untuk memudahkan
pemahaman coba anda simak contoh-contoh berikut
Pertama tentukan bagian mana yang akan dijadikan tujuan atau target dari link anda.
Pilih satu kata di situ dan masukkan ke dalam tag <A>.
<A>Masukkan</A> URLnya dan anda selesai melakukannya!

Kemudian berikan bagain itu satu nama khas.


<A NAME="upabit">Masukkan</A> URLnya dan anda selesai melakukannya!
Apa yang telah anda lakukan ialah menentukan tempat pengunjung akan dibawa.

Sekarang kita mulai membuat link-nya

23
Klik <A>di sini</A> untuk dibawa secara automatis...

Dan masukkan dokumen tujuan...


Klik <A HREF="pel4.html">di sini</A> untuk dibawa secara
automatis...

Dan yang terakhir, masukkan `anchor NAME' seperti contoh tadi ...
Klik <A HREF="pel4.html#upabit">di sini</A> untuk di bawa secara
automatis...
Dan itu saja!

LATIHAN4
1. Buat satu file baru di Notepad dan ketikan Scipt berikut :-

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 4
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LATIHAN PELAJARAN 4</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Di halaman
ini saya akan coba untuk membuat pelbagai
<b>capaian.</b></FONT>
<br>
<br>
<A HREF="http://www.tm.net.my/">Halaman Web
TMNET</A><br>
<A HREF="http://www.jaring.my/">Halaman Web
Jaring</A><br>
<A HREF="http://www.utusan.com.my/">Laman Web Utusan
</A><br>
<A HREF="http://www.jaring.my/bharian">Laman Web
Berita Harian</A><br>
<A HREF="http://www.thestar.com.my/">Laman Web The
Star</A>
<br>
<br>
Pergi ke <A HREF="http://www.geocities.com/~zulhar">
<IMG SRC="zura.jpg" BORDER=0></A>
<br>
<br>
<FONT COLOR="#000000" FACE="ARIAL" SIZE="4"><I>Itulah
capaian-capaian awal yang dapat saya paparkan di
peringkat oermulaan ini </I></FONT>
<br>
<br>
<center>
Semuga berjaya hendaknya!
</center>
</BODY>
</HTML>
2. Simpan dengan nama file “latihan4.html” dan buka di browser
3. Coba klick semua link yang terdapat di halaman tersebut, termasuk pada imej
zura.jpg. (Pastikan internet anda telah terpasang).

24

Anda mungkin juga menyukai