Lompat ke konten Lompat ke sidebar Lompat ke footer

Materi HTML #5 : Pengertian dan Cara Membuat Link


HTML Logo

Pengertian Link HTML

Hyperlink (Link) merupakan sebuah teks yang berisi alamat URL, yang berfungsi untuk menghubungkan halaman web ke halaman lain, hanya dengan meng-klik teks tersebut. 

Hypertext dibuat dengan tag <a>, dengan attribute href untuk menentukan Tujuan alamat URL. 

tag <a> merupakan singkatan dari anchor (jangkar), dan untuk href merupakan singkatan dari Hypertext Reference.

Link


Cara membuat Link HTML

berikut ini kode program yang sudah saya jadikan satu dari materi sebelumnya :


See the Pen Link by MiftaSetiaji (@MiftaSetiaji) on CodePen.


Pengelompokan Link HTML Serta Cara Membuatnya

Di dalam html juga terdapat pengelompokan link HTML menurut dari alamat yang akan dituju, yaitu :

1. Internal Link

Merupakan alamat link yang menuju pada domain maupun sub domain dari pemilik domain tersebut. Internal link digunakan untuk menghubungkan halaman satu dengan halaman lainnya yang masih berhubungan dengan perusahaan tersebut. 

Internal Link

Cara Membuat Link Interrnal HTML

Buat file baru, berikan nama index.html, kemudian isi dengan kode di bawah ini :
<!DOCTYPE html> 
<html>
<head>
    <title> HomePage </title>
</head>
<body>
    <h1> Selamat Datang Di Website Saya </h1>
    <nav>
<a href="Index.html"> Homepage </a> &nbsp &nbsp
<a href="Tabel.html"> Tabel </a> &nbsp &nbsp
<a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
<a href="Internal Link.html"> Internal Link </a>
</nav>
        <p> Disini merupakan halaman awal situs (utama), yang juga berisi halaman direktori lain. Silahkan klik menu di atas (Tabel, Orderedlist,Internal link, dan About).   
</p><hr/>     <footer>         <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>     </footer>
</html>

Buat file baru, berikan nama About.html, kemudian isi dengan kode di bawah ini :

<!DOCTYPE html> 
<html>
<head>
    <title> About </title>
</head>
<body>
    <h1> About </h1>
    <nav>
<a href="Index.html"> Homepage </a> &nbsp &nbsp
<a href="Tabel.html"> Tabel </a> &nbsp &nbsp
<a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
<a href="Internal Link.html"> Internal Link </a>
</nav>
        <p> Disini merupakan halaman About, yang berisi tentang identitas diri anda. ini merupakan contoh dari link internal.
</p><hr/>     <footer>         <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>     </footer>
</html>

Buat file baru lagi, berikan nama Internal Link.html, kemudian isi dengan kode di bawah ini :

<!DOCTYPE html> 
<html>
<head>
    <title> Link Internal HTML </title>
</head>
<body>
    <h1> Selamat Datang Di Website Saya </h1>
    <nav>
<a href="Index.html"> Homepage </a> &nbsp &nbsp
<a href="Tabel.html"> Tabel </a> &nbsp &nbsp
<a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
<a href="Internal Link.html" target="_blank"> Internal Link </a>
</nav>  
        <p> Pada website ini berisi beberapa link internal yang menghubungkan link dengan beberapa postingan yang terdapat pada website ini. Silahkan klik salah satu link pada menu diatas, yang nanti setelah di klik akan membuka dokumen/halaman yang berbeda. Pada link diatas saya menambahkan attribute lagi setelah href, yang nantinya setelah diklik akan berpindah kehalaman baru.
</p><hr/>     <footer>         <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="about.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>     </footer>
</html>

Untuk halaman yang lainnya kita akan menggunakan file html yang sudah kita buat sebelumnya, tinggal menambahkan bagian <nav> dan <footer>.

Dan juga ingat dalam pembuatan file di atas bisa terhubung langsung karena terdapat pada directori folder yang sama, dan juga penempatan namanya juga sama agar bisa terhubung. Berikut hasilnya :

  

Link Internal

2. External Link

Merupakan alamat link yang merujuk pada domain lain. Biasanya terdapat pada paragraf kita seperti kalimat dikutip dari wikipedia (dalam teks wikipedia terdapat alamat www.wikipedia.org), atau bisa juga pada bagian atas kanan halaman web terdapat alamat link seperti Twitter, YoutubeFacebook, dan Instagram, untuk membuka web domain lain.

External Link

Cara Membuat Link External HTML

Sama seperti membuat link internal, pada link external ini kita hanya mengubahnya dengan memberikan alamat link dari situs lain, pada bagian href. Agar lebih mudah dipahami yuk kita langsung saja buat kodenya.

Kita akan menggunakan file yang sebelumnya sudah kita buat yang diberi nama homepage, kemudian kita tambahkan dengan nama alamat Facebook, Instagram, Tweeter dan wikipedia. 

<!DOCTYPE html> 
<html>
<head>
    <title> External Link </title>
</head>
<body>
    <h1> Selamat Datang Di Website Saya </h1>

    <nav>
<a href="Index.html"> Homepage </a> &nbsp &nbsp
<a href="Tabel.html"> Tabel </a> &nbsp &nbsp
<a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
<a href="Internal Link.html"> Internal Link </a>
&nbsp &nbsp       <a href="External Link.html" target="_blank"> External Link </a>
</nav>
        <p> Disini merupakan halaman awal situs (utama), dalam halaman ini berisi halaman link internal dan external. Silahkan klik menu di atas (Tabel, Orderedlist,Internal link, dan About), untuk link internal. Silahkan klik Link pada paragraf berikut ini untuk link externa.   
</p><hr/>         <p> Wikipedia merupakan situs open source, pada postingan situs ini kita bisa mengubah-ubah atau membuat postingan yang nantinya juga bisa dirubah oleh user lainnnya, berikut linknya <a href="https://www.wikipedia.org/"> Wikipedia </a>. Untuk pertanyaan lebih lanjut kalian juga bisa DM saya melalui laman <a href="https://facebook.com/syteekno" target="_blank"> Facebook </a>,
<a href="https://instagram.com/syteekno" target="_blank"> Instagram </a>, atau
<a href="https://twitter.com/syteekno" target="_blank"> Tweeter </a>saya. Dan jangan lupa follow juga fan page saya :).</p>
         <footer>         <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>     </footer>
</html>


Berikut hasilnya :

External Link

Selanjutnya kita akan mempelajari tentang atribute link.

Posting Komentar untuk "Materi HTML #5 : Pengertian dan Cara Membuat Link"