HYPERLINKS

HYPERLINKS
FAJARAH.WORDPRESS.COM
Apa itu hyperlink?
Di buku, kita membuka halaman berikutnya dengan jari.
Di web, kita mengklik pada sebuah kata, gambar, atau
grafis untuk menuju halaman lain.
Inilah fungsi hyperlink, untuk mengarahkan ke halaman
tersebut.
Digunakan untuk menghubungkan web page to another
web page pada server yang sama atau server lainnya.
Untuk apa hyperlink?
- Memudahkan navigasi web
- Kita dapat menambahkan informasi detil seperti, gambar, email atau lainnya di halaman web.
Apa saja yang bisa di hyperlink-an?
Text
Button
Contoh
Cara kerja link
Bagaimana membuatnya?
Tag anchor ; <a> </a>
Tag <a> digunakan untuk membuat suatu link kepada dokumen lain dalam web dengan
menambah atribut “href” sebagai definisi lokasi link. Contoh :
<a href=”http://www.smkn24jkt.sch.id”> SMKN 24 Jakarta</a>
Latihan sebentar
Buat sebuah halaman web utama dengan nama index.html. Sisipkan fungsi hyperlink dibawah ini.
<a href=”index.html”>Home</a><br />
<a href=”about.html”>Tentang Kami</a><br />
<a href=”contact.html”>Kontak</a>
Latihan 15 menit.
Buat hyperlink tersebut bekerja dengan baik.
Buat 3 halaman : - Home – Tentang Kami – Kontak
Buat hyperlink tersebut secara horizontal.
Jenis – jenis link
Link Absolut
Link Relatif
Link ke bagian dokumen tertentu
Link Absolut
link yang akan menunjuk ke halaman dari situs web lain. Penulisan
alamatnya pun harus ditulis secara lengkap.
Contoh : <a href=http://www.w3.org/>W3</a>
Link Relatif
link yang tujuannya mengarah ke dokumen-dokumen lain yang masih
berada di dalam satu situs web yang sama (komputer yang sama).
Contoh :
<a href=”kontak.html”>Kontak</a>
<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler
Sahara</a>
Link ke bagian dokumen tertentu
◦ Used with large web pages
◦ Moves from top to bottom of page or a specific section
◦ Contoh :
◦ <a name=“label1">This is visible on the screen label1 </a>
Image Link
<a href=”dokumenlain”>teks link</a>
<a href=”dokumenlain”><img src=”NamaFileGambar” /></a>
<a href=”detail-sahara.html”>
<img src=”images/jeep/saharal.jpg” />
</a>
Nikmati tugasnya.
Terima kasih