Modul "FORMAT KAITAN PADA HALAMAN WEB"

 

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