05 materi Hyperlink HTML
Download as PPT, PDF1 like2,313 views
Hyperlink merupakan tautan antar halaman web yang memungkinkan pengguna beralih dari halaman satu ke halaman lain. Hyperlink diimplementasikan menggunakan elemen <a> dalam HTML dengan atribut href untuk menentukan lokasi halaman tujuan dan target untuk menentukan bagaimana halaman itu dibuka. Contoh kode hyperlink sederhana menghubungkan dua halaman HTML yang disimpan dalam satu folder.
05 materi Hyperlink HTML
- 2. 5. HTML HYPERLINK Link / Hyperlink merupakan tautan atau penghubung dari halaman web menuju ke halaman web yang lainnya. Link bisa diibaratkan seperti pintu rumah, setiap pintu rumah berisi ruangan-ruangan yang mempunyai isi konten atau informasi yang berbeda dengan yang lainnya. Begitu juga dengan link, setiap nama link mewakili masing-masing halaman web, ada yang sebagai Link menu utama, ada yang berfungsi untuk menampilkan sekilas informasi dan ada juga yang berfungsi sebagai portal untuk menuju halaman web ditempat lain.
- 3. 5. HTML HYPERLINK PART 2 Dalam pemrograman html atau web, link di simbolkan dengan karakter elemen <a>, yang berfungsi untuk membuat sebuah teks menjadi link. Elemen <a> mempunyai beberapa properti, diantaranya : “href”, “name”, dan “target”. Properti href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Properti “name” berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor (#)). Properti target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru. Perintah atau syntax untuk membuat link : <a href="uri" name="name“ target="_blank"|"parent"|"_top"|"_self"> ........................... </a>
- 4. 5. HTML HYPERLINK PART 3 Dalam dunia web, Link merupakan syarat utama untuk membangun sebuah website, dan syarat link minimal membutuhkan 2 halaman web. Contoh : <a href=“profil.html” target=“_blank”>TEKS LINK</a> Keterangan : Pada nilai atribut href=“profil.html”, merupakan sumber file html yang akan dituju oleh suatu link untuk dibuka, sedangkan nilai atribut dari properti target=“_blank”, merupakan metode yang digunakan untuk membuka halaman web link tersebut yaitu dengan menampilkan jendela baru untuk menampilkan halaman web yang bernama “profil.html”.
- 5. 5. HTML HYPERLINK PART 4 Contoh 1, buatlah halaman web pertama dengan nama “latihanlink.html” dan “link2.html” menggunakan aplikasi editor notepad, lalu ketikkan kode di bawah ini untuk file “latihanlink.html” : <html> <head> <title>Latihan HTML Membuat Hyperlink</title> </head> <body bgcolor=yellow> <a href=“link2.html”>MENU LINK 2</a> <h2>INI ADALAH HALAMAN UTAMA WEBSITE</h2> UNTUK MEMBUKA HALAMAN WEB MENU LAINNYA KLIK <b><u>MENU LINK 2</u></b> YANG ADA DI ATAS TERSEBUT </body> </html>
- 6. 5. HTML HYPERLINK PART 5 Kemudian isikan kode di bawah ini untuk file halaman web yang bernama “link2.html” tersebut : <html> <head> <title>INI MENU LINK KEDUA</title> </head> <body bgcolor=yellow> <a href=“link2.html”>KEMBALI MENU UTAMA</a> <h2>INI ADALAH HALAMAN KEDUA WEBSITE</h2> UNTUK KEMBALI KE MENU UTAMA KLIK <b><KEMBALI MENU UTAMA</u></b> YANG ADA DI ATAS TERSEBUT. </body> </html>
- 7. 5. HTML HYPERLINK PART 6 Dan kedua file tersebut harus satu lokasi atau satu folder agar tidak terjadi kesalahan atau terjadi putus link. Seperti contoh gambar di bawah ini
- 8. 5. HTML HYPERLINK PART 7 Dan hasil tampilan untuk file “latihanlink.html” akan terlihat seperti gambar di bawah ini :
- 9. 5. HTML HYPERLINK PART 8 Dan hasil untuk file “link2.html” akan terlihat seperti gambar di bawah ini :
- 10. Konsep Hyperlink Navigasi Antar Halaman Link1.html KE LINK2.HTML Link2.html KE LINK1.HTML
- 11. TUGAS LINK GAMBAR Buatlah 2 File halaman web HTML dalam satu folder yang sudah berisikan file gambar untuk dibuat LINK seperti gambar di bawah ini :