1 / 15

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language). Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN. MODUL TEORI IV. Membuat Hyperlink/ link dalam HTML. Hyperlink/ link dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu halaman dengan halaman lain.

ted
Download Presentation

HTML (Hypertext Markup Language)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML(Hypertext Markup Language) Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN MODUL TEORI IV

  2. Membuat Hyperlink/ link dalam HTML • Hyperlink/ link dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu halaman dengan halaman lain. • Untuk membuat Hyperlink, tag yang diperlukan adalah <a>. Tag ini kependekan dari anchor

  3. Contoh penggunaan hyperlink <a href="http://klikbelajar.com">Klik Saya</a>

  4. Atribut <href> digunakan untuk mendefinisikan lokasi link.Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan: • Link relatif yang menuju bagian lain dari halaman web anda • Link web yang menuju halaman lain dalam satu website

  5. Link relatif yang menuju bagian lain dari halaman web kita sendiri CONTOH: <html> <body> <a href=“latihan1.html"> Klik untuk menuju latihan1 </a> <br> <a href=“latihan2.html"> Klik untuk menuju latihan2 </a> </body> </html>

  6. Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode di bawah ini. <a href=“latihan2.html"> <img src=“images/wira.jpg" /> </a> • Kode diatas adalah contoh hyperlink dimana ketika gambar wira di klik maka halaman latihan2.html akan terbuka

  7. membuat link dengan menggunakan gambar (image) <html> <body> <a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src=“images/yahoo.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a> </body> </html>

  8. Membuat link ke halaman web lain CONTOH: <html> <body> <a href="http://www.w3schools.com/"> Ayo kehalaman W3Schools</a> <br> <a href="http://id.yahoo.com/"> Ayo kehalaman yahoo</a> </body> </html>

  9. HTML Links - The name Attribute • Atribut ini digunakan untuk memberikan nama dari suatu link. • Atribut ini berbeda dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama sekali dengan teks yang lain. • Penggunaannya pun berbeda dengan atribut HREF yang digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk memberikan nama dari suatu link.

  10. Contoh penggunaanya sebagai berikut : <A href="#MATEMATIKA">MATEMATIKA</A> akan menuju ke Matematika <A name="MATEMATIKA">MATEMATIKA</A>

  11. HTML Links - The target Attribute • Definisi dan Penggunaan Atribut target menentukan terget/ tempat untuk membuka halaman web, apakah di halaman yang sama atau di halaman baru sehingga halaman sebelumnya tidak tertutup. • Syntax: <a target="_blank|_self|_parent|_top">

  12. Contoh: <html> <body> <b>link ini akan membawa kita ke halaman atau tab baru</b> <br> <a href=" http://www.balihopeschool.sch.id/" target="_blank"> web sekolah harapan</a><br> <b>link ini akan tetap di halam ini atau tidak berpindah ke halam baru</b><br> <a href=" http://www.balihopeschool.sch.id/" target="_self"> web sekolah harapan</a><br> </body> </html>

  13. <html><head> <title>hyperlink</title></head><body> <p>Aku sekarang sedang membuat hyperlink</p> Jika anda ingin mengunjungi Microsoft <a href="http://www.microsoft.com/">Klik disini</a> <br> <a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com <p><b>Untuk membuat hyperlink url agar dibuka pada jendela browser yang sama:</b> <p><a href="http://www.balihopeschool.sch.id/" target="_self"> ini web harapan</a> silahkan di kunjungi. <p><b>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:</b> <p><a href="http://www.mp3.com/" target="_blank">Website Musik</a> <p>Agar hyperlink tidak bergaris bawah:<p> <a href="http://www.mp3.com/" target="_blank" style="text-decoration: none">Website Musik</a> </body> </html>

  14. TUGAS BUAT LAH WEB SEDERHANA DENGAN MENGGUNAKAN LINK (SEPERTI CONTOH BERIKUT)

More Related