iklan banner

Html Dasar Part 4 : Mengenal Hyperlink

HTML Dasar Part 4 : Mengenal Hyperlink


Seperti biasa, sebelum memulai berguru alangkah baiknya membaca do'a terlebih dahulu

     Kali ini kita sudah berada di Part-4 HTML dasar. Sebelumnya kita sudah berguru di part-3 ihwal Tag Heading dan Tag Paragraf, dan untuk di part-4 ini kita akan berguru ihwal Tag Hyperlink.

     Hyperlink sendiri berfungsi untuk membuka halaman lain pada HTML.
Dalam hyperlink sendiri membutuhkan tag <a></a>, di dalam tag pembuka <a> akan diisi attribute, pola menyerupai ini <a href="nilai"> Nama <a/>, pada pola ini href merupakan attributenya, dan "nilai" merupakan link yang akan kita buka, sedangkan Nama yang berada di antara tag pembuka dan epilog merupakan teks yang akan menuju link tersebut. Oke semoga gak pusing atau bingung, mari praktekkan menyerupai biasa.

1. Buka file latihan.html ke text editor (bagi yang belum mengerti, sanggup mempelajari part-1 hingga part-3)
2. Silahkan buat code menyerupai dibawah ini pada text editor yang anda gunakan

Baca Juga

<html>
         <head>
                     <title> Web Ku </title>
         </head>

         <body>

   <h1> Website Keren </h1>

   <p> Selamat tiba di website ku </p>

   <a href="https://google.com"> GOOGLE </a>

        </body>
</html>

3. Seperti biasa save terlebih dahulu sebelum mencobanya di browser, cukup menekan tombol Ctrl+S untuk menyimpannya.
4. Sekarang bukalah latihan.html memakai browser, maka alhasil akan menyerupai ini :
5. Coba anda klik teks GOOGLE, niscaya browser akan otomatis menuju ke link Google
**Penjelasan : Kita fokus ke <a href="https://google.com"> GOOGLE </a>. Pada tag <a> berisi sebuah attribute yaitu href, attribute href berfungsi untuk menciptakan sebuh link yanng akan dituju. "https://google.com" ialah link yang dituju, sedangkan GOOGLE yang merupakan isi dari tag pembuka <a> dan tag epilog </a> yaitu teks yang nantinya kalau diklik akan menuju ke alamat atau link https://google.com.
6. Oke kita balik lagi ke teks editornya, silahkan buat lagi isyarat menyerupai dibawah ini :

<html>
     <head>
         <title> Web Ku </title>
     </head>

     <body>
  
   <h1> Website Keren </h1>
   <h2> Belajar HTML </h2>

   <p> Selamat tiba di website ku </p>

   <a href="https://google.com"> GOOGLE </a>
   <a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a> 

     </body>
</html>

7. Tekan tombol Ctrl+S untuk menyimpan file
8. Refresh browser yang anda gunakan, maka tampilannya akan menyerupai ini :
9. Silahkan klik teks SEGERAN PUNYA, maka akan mengarah ke halaman gres atau ke tab gres pada browser
**Penjelasan : Sebelumnya kita sudah berguru pada poin nomor 1 hingga 5 yaitu membuka link pada halaman web, di poin 6 juga masih sama yaitu membuka link pada halaman web, tapi ada perbedaannya, perbedaannya yaitu kalau pada nomor 1-5 itu hanya membuka link pada satu halaman saja, tapi pada nomor 6 kalau teks yang berisi link tersebut diklik, maka akan menuju kehalaman atau ke tab berikutnya pada browser.
**Kita fokus ke <a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a>, coba perhatikan didalam tag <a> terdapat 2 (dua) attribute yaitu href dan target. Untuk klarifikasi href sama menyerupai pada nomor 5, attribute sasaran yang memiliki nilai "_blank" yaitu berfungsi untuk membuka link pada tab yang berbeda

Cukup hingga disini terlebih dahulu

Rangkuman :


       Tag Hyperlink <a></a> yaitu tag yang dipakai untuk menciptakan sebuah teks yang nantinya kalau diklik akan menuju link tersebut. didalam tag <a> terdapat attribute href yang berfungsi untuk menginput link tersebut, pada pola diatas memakai webnya Google dan Segeran Punya,tadak hanya untuk webnya Googel atau Segeran Punya saja, href juga sanggup atau berlaku untuk semua link, sanggup menyerupai facebook, twitter, dan lain sebagainya. Dan pemanis untuk attribute. Untuk link yang secara otomatis pindah tab sanggup ditambahkan attribute terget= dengan nilai "_blank".  

Oke sekian pembelajaran di Part-4 ini ihwal Hyperlink pada HTML. Semoga bermanfaat, dan tambahkan terus ilmunya di part-part selanjutnya.

Do'a setelah belajar


























Sumber http://segeranat.blogspot.com

Related Posts

0 Response to "Html Dasar Part 4 : Mengenal Hyperlink"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel