Pemrograman Web - LINK DENGAN HTML (Bab 5)(kelas XI)
BAB V
LINK DENGAN HTML
A. KOMPETENSI DASAR
3.5 Menerapkan format kaitan pada halaman web
4.5 Membuat kode html untuk menampilkan format kaitan pada halaman web
B. MATERI PEMBELAJARAN
Hyperlink adalah acuan dalam dokumen hiperteks ke dokumen lain atau sumber lain. Hyperlink dapat juga diartikan sebagai suatu cara untuk menghubungkan suatu bagian tertentu didalam slide, file dokumen, program atau halaman web dengan bagian yang lainnya pada bidang tersebut.
Hyperlink atau biasa disebut dengan Link didalam website adalah suatu metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web.
Tag HTML yang digunakan untuk membuat link adalah <a href="">, dimana atribut href="" berisi URL atau alamat dari halaman yang akan dituju.
Jenis-jenis Link dalam HTML
HTML tag <a> mendefinisikan hyperlink. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat diklik untuk menuju ke dokumen atau halaman web lain. Untuk memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil. Elemen <a> memiliki atribut didalamnya yaitu atribut href, yang merupakan tujuan link.
Jenis-jenis link dalam HTML, yaitu:
Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain
Contoh penerapan pada HTML:
Tampilan pada browser:
Link relative adalah link ke dokumen internal, dan penulisan alamat
tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya
Memiliki 2 dokumen HTML, misal dokumen 1 bernama link1.html
Dokumen ke 2 bernama link2.html
Tampilan untuk file link1.html di browser :
Jika tombol Halaman Selanjutnya diklik maka akan menuju ke halaman link2.html, yaitu
Jika tombol Halaman Sebelumnya diklik maka akan menuju ke halaman link1.html Link ke bagian dokumen tertentu atau internal link
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses.
Link ke Bagian Dokumen HTML
Link dapat dibuat ke bagian teks, kata, kelompok kata atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para pengunjung web tidak perlu melakukan scrolling pada halaman tersebut untuk menuju/kembali ke halaman tertentu dalam dokumen bersangkutan.
Caranya adalah memberikan nama atau id pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. Yang perlu digunakan adalah atribut yang id (identifikasi) dan simbol "#". Dengan menggunakan tag: <a id=" tujuanLink">Teks atau gambar</a>.
Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink">Teks atau gambar</
Selain pada teks, link juga dapat dibuat pada gambar, misal:
Tampilan pada browser:
Jika kursor di sorot pada gambar maka kursor berubah menjadi gambar jari yang artinya pada gambar tersebut dapat diklik menuju halaman yang diminta.
Format Target Link, Email dan Telepon
Atribut TARGET di dalam tag <a>, memiliki bentuk umum penulisan seperti berikut:
<a href="NamaDokumen" target="Nama Target">Teks/Gambar<a/>
Cara penulisan link HTML ke alamat email adalah seperti berikut:
<a href="mailto:nama@yourdomain.com"> Kirim pesan email </a>
Cara penulisan link telepon adalah seperti berikut:
<a href="tel:0123456789"> Hubungi kami di (012)3456789 </a>
C. TUGAS MANDIRI (5 SOAL URAIAN)
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar !
1. Bagaimana cara menggunakan link di dalam halaman web ?
2. Bagaimana membuat link dengan tujuan satu halaman yang sama
3. Bagaimana membuat link dengan tujuan dokumen yang berbeda?
4. Apa bedanya format link pada target link, email dan telepon ?
5. Sebutkan jenis-jenis link dalam dokumen HTML
D. TUGAS KELOMPOK (5 SOAL PRAKTIK URAIAN)
Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!
1. Bagian apa yang paling penting dalam tag link?
2. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang sama?
3. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang berbeda?
4. Bagaimana cara menyajikan target link? Berikan contohnya!
5. Buatlah link email: info@smk2-yk.sch.id
E. UJI KOMPETENSI
PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. Acuan dalam dokumen hiperteks ke dokumen lain atau sumber lain disebut dengan...
A. Hyperlink
B. Hypertext
C. HTML
D. Relasi
E. Elemen
2. Tag <a> digunakan untuk ..
A. Hyperlink
B. Menghapus elemen
C. Menampilkan gambar
D. Menampilkan video
E. Memberi warna
3. Link yang akan menunjuk ke halaman dari situs web lain adalah ..
A. Link Absolut
B. Link relative
C. Link Hyperlink
D. Link tag
E. Link element
4. Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama) adalah
A. Link Absolut
B. Link relative
C. Link Hyperlink
D. Link tag
E. Link element
5. Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama dengan menggunakan id adalah
A. Link Absolut
B. Link relative
C. Link Hyperlink
D. Link tag
E. Link element
6. Protokol pada link dengan atribut href yang digunakan untuk menjadikan link ke email adalah
A. mailto:
B. file:
C. ftp://
D. https://
E. tel:
7. Protokol pada link dengan atribut href yang digunakan untuk menjadikan link ke telepon adalah
A. mailto:
B. file:
C. ftp://
D. javascript:
E. tel:
8. Protokol pada link dengan atribut href yang digunakan untuk menjadikan link ke script adalah
A. mailto:
B. file:
C. ftp://
D. javascript:
E. tel:
9. Link berikut
<a href=http://www.ilmukomputer.com/>Ilmu Komputer</a>
merupakan link...
A. Link Absolut
B. Link relative
C. Link Hyperlink
D. Link tag
E. Link element
10. Dalam kode program <a href="info.html">Informasi Lengkap</a> akan menuju ke dokumen...
A. Info.html
B. A href
C. Informasi Lengkap
D. </a>
E. <a>
11. Dalam HTML dapat ditambahkan hubungan/relasi ke link lain. Yang merupakan command dari link yang apabila di klik akan menuju ke www.detik.com adalah...
A. <href a www.detik.com> </a>
B. <a href www.detik.com> </a>
C. <a href="www.detik.com"> </a>
D. <a www.detik.com> </a>
E. <href www.detik.com> </a>
12. Berikut ini adalah atribut dalam tag <a> kecuali..
A. href
B. title
C. alt
D. type
E. img
13. Tag untuk membuat Link ke dokumen tabel.html yang benar adalah ...
A. <a def="tabel.html">Link ke tabel</a>
B. <a ref="tabel.html">Link ke tabel</a>
C. <a href="tabel.html">Link ke tabel</a>
D. <a herf="tabel">Link ke tabel</a>
E. <a href="tabel">Link ke tabel</a>
14. Penulisan perintah hyperlink untuk alamat web adalah ...
A. <A HREF="#***"></A>
B. <A HREF="URL#***"></A>
C. <A HREF="URL TARGET">URL</A>
D. <A HREF="URL"></A>
E. <A HREF="URL TARGET">
15. Perintah hyperlink untuk target dalam dokumen adalah ...
A. <A HREF="#***"></A>
B. <A HREF="URL#***"></A>
C. <A HREF="URL TARGET">URL</A>
D. <A HREF="URL"></A>
E. <A HREF="URL TARGET">
BENAR-SALAH
Pilihlah B jika pernyataan Benar atau S jika pernyataan Salah
0 komentar: