MODUL
FORMAT KAITAN PADA HALAMAN WEB
A. Tujuan Pembelajaran
1. Peserta didik dapat menjelaskan konsep
format kaitan (link) dalam halaman web
2. Peserta didik dapat menjelaskan tag-tag link
dalam html untuk menampilkan kaitan
3. Peserta didik dapat menentukan prosedur
kaitan dalam halaman web
4. Peserta didik dapat membuat program
tampilan kaitan (link) dalam halaman web
B. Materi Pembelajaran
Link merupakan suatu gambar atau teks yang terkait dengan suatu
alamat tertentu. Jika Link diklik maka dokumen HTML akan menuju ke alamat
tersebut. Ditandai dengan Anchor, yaitu tag <a>. Tag <a> mempunyai dua atribut, yaitu
href dan name. Atribut href digunakan jika sebuah anchor akan digunakan sebagai
link, sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan.
Secara default, link pada halaman web diberi garis bawah
dan umumnya berwarna biru. Ada beberapa atribut untuk mengatur warna link dan
juga pengaturan lainnya. Atribut-atribut ini diletakkan dalam tab <body>.
Berikut atribut yang digunakan untuk mengatur link:
No. |
Atribut |
Fungsi |
1. |
link |
Menentukan warna link |
2. |
alink |
Menentukan warna link
ketika diklik dan halaman link belum terbuka |
3. |
vlink |
Menentukan warna link jika
link tersebut sudah pernah dibuka |
Atribut-atribut yang digunakan dalam tag link <a> antara
lain:
No. |
Atribut |
Fungsi |
1. |
tabindex |
Menentukan urutan link pada
halaman web dengan memanfaatkan tombol tab |
2. |
target |
Menampilkan halaman link
dengan membuka jendela browser yang baru. Nilai yang ada untuk TARGET
yaitu blank, parent, top, self. |
1. Link ke dokumen lain
Untuk
membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, kalian
harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,
baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.
2. Link ke bagian tertentu dalam dokumen
yang sama
Untuk membuat link ke bagian tertentu dalam dokumen yang sama,
harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah
tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor
tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang
bersangkutan.
Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <a> dan untuk membuat link cukup
memberikan tanda # setelah nama file dalam URL.
Misal:
<a href=”#javascript”> Bab 1
</a>
atau dapat ditulis lengkap:
<a href=”belajar_javascript.html#php”>
Bab 1 </a>
dan untuk nama anchornya:
<a name=”javascript”>Bagaimana
belajar Javascript?</a>
3. Link ke alamat URL atau website
Untuk membuat link ke alamat URL adalah dengan menambahkan:
http://nama_URL.
Contoh:
<a href=”http://www.cabdinpasuruan.id”>Situs
Cabang Dinas Wilayah Pasuruan</a>
<a href=”http://www.smkn1sukorejo.sch.id”>Situs
SMKN 1 Sukorejo</a>
4. Link ke alamat e-mail
Link email adalah membuat link pada teks, jika teks tersebut
diklik maka akan menampilkan program pengiriman email yang terdapat pada
komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.
Untuk membuat link ke alamat email hanya menambahkan atribut
mailto:alamat_email ke dalam tag <a href>
Misalnya:
<a
href="mailto:esemkaensukorejo@gmail.com">Kirim email</a>
5. Link file yang akan didownload
Link file dalam hal ini adalah apabila dikik pada teks tersebut
maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen
tersebut. Format penulisannya adalah <a href=nama_file>.
Misal:
<a href=”antivirus.zip”>Download Antivirus</a>
<a href=”latihan_modul.docx”>Download
Latihan Modul HTML</a>
<a href=”mysql.exe”>Download MYSQL</a>
C. Latihan Praktikum
1. Buatlah kode program seperti di bawah
ini!
a. link_utama.html
b. link_satu.html
c. link_dua.html
Tampilan Hasil:
Beri penjelasan:
|
2. Buatlah kode program seperti di bawah
ini!
Tampilan Hasil:
Beri penjelasan:
|
3. Buatlah kode program seperti di bawah
ini!
|
Tampilan Hasil:
Beri penjelasan:
|
D. Tugas Praktikum
Buatlah
sebuah halaman dengan mengelink-an beberapa halaman beserta konten halamannya,
diantaranya:
1. Halaman Beranda (Pembuka halaman)
2. Halaman Profil (Identitas pribadi)
3. Halaman Berita (Pilih salah satu:
olahraga / entertainment / musik / politik / pendidikan)
E. Referensi
1. Sunarya Ap. Modul Pemrograman Web.
SMK Media Informatika: Jakarta.
2. Modul HTML
Komentar
Posting Komentar