Materi ajar PWPB kelas XI RPL - Hyperlink pada HTML
0 likes948 views
Dokumen ini menjelaskan tentang kompetensi dan keterampilan yang diperlukan untuk menerapkan format hyperlink pada halaman web menggunakan HTML. Terdapat penjelasan mengenai tag-tag hyperlink, prosedur pembuatannya, serta contoh kode yang menunjukkan cara membuat dan menguji hyperlink. Selain itu, dokumen ini juga membahas atribut target untuk menentukan cara link dibuka dan cara menggunakan gambar sebagai hyperlink.
Materi ajar PWPB kelas XI RPL - Hyperlink pada HTML
- 2. KOMPETENSI YANG HARUS DIKUASAI Pengetahuan 3.5 Menerapkan format hyperlink pada halaman web Keterampilan 4.5 Membuat kode html untuk menampilkan format hyperlink pada halaman web
- 3. MATERI YANG DIPELAJARI Konsep format hyperlink dalam halaman web Tag-tag hyperlink dalam html Menentukan prosedur hyperlink Merancang program tampilan hyperlink Membuat program tampilan hyperlink Menguji program tampilan hyperlink
- 4. KONSEP HYPERLINK Hyperlink adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link di-klik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut. Halaman 1 Pindah halaman 2 Halaman 2
- 5. Contoh diatas adalah contoh hyperlink untuk menuju ke halaman MENU Dimana ketika kita klik tulisan MENU maka akan mengantarkan kita ke halaman menu
- 6. TAG HYPERLINK PADA HTML <a href="url">teks link</a> Tag <a> menggunakan atribut href untuk menentukan alamat tujuan link teks link adalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link. Contoh : <a href=“halaman2.html”>pindah halaman 2</a> <a href=“http://smktaq-wsb.sch.id”>Web SMKTAQ</a>
- 7. CONTOH MEMBUAT LINK HTML 1. Buka text editor, Buatlah dokumen HTML menggunakan kode berikut 2. Simpan file dengan nama “link-dokumen1.html”
- 8. 3. Buatlah file baru, lalu buatlah dokumen HTML berikut 4. Simpan file dengan nama “link-dokumen2.html”
- 9. 5. Buka kembali file link-dokumen1.html melalui web browser dan klik link Lihat Dokumen 2, maka halaman web akan berpindah ke dokumen 2
- 10. ATRIBUT TARGET SUATU LINK Atribut target kita gunakan untuk menentukan dimana alamat link harus dibuka. _self - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan) _blank - Membuka alamat link di tab/jendela browser yang baru _parent - Membuka alamat link di frame induk _top - Membuka alamat link di jendela penuh framename - Membuka alamat link di frame yang namanya sudah ditentukan
- 11. HYPERLINK BERUPA GAMBAR <a href="url"> <img src=“nama_file_gambar”/> </a> Contoh : <a href=“hal_3.html”> <img src=“logo.jpg”> </a> Suatu gambar dengan tag <img> dapat dijadikan suatu link dengan menyisipkannya pada tag <a>, perhatikan format berikut: