Materi HTML #5 : Pengertian dan Cara Membuat Link
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.
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.
Cara Membuat Link Interrnal HTML
<!DOCTYPE html> <html> <head> <title> HomePage </title> </head> <body> <h1> Selamat Datang Di Website Saya </h1> <nav>
<a href="Index.html"> Homepage </a>    
<a href="Tabel.html"> Tabel </a>    
<a href="Orderedlist.html"> Ordered List </a>    
<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>    
<a href="About.html"> About </a>
<div> Copyright © 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>    
<a href="Tabel.html"> Tabel </a>    
<a href="Orderedlist.html"> Ordered List </a>    
<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>    
<a href="About.html"> About </a>
<div> Copyright © 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>    
<a href="Tabel.html"> Tabel </a>    
<a href="Orderedlist.html"> Ordered List </a>    
<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>    
<a href="about.html"> About </a>
<div> Copyright © 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 :
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, Youtube, Facebook, dan Instagram, untuk membuka web domain lain.
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>    
<a href="Tabel.html"> Tabel </a>    
<a href="Orderedlist.html"> Ordered List </a>    
<a href="Internal Link.html"> Internal Link </a>     <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>    
<a href="About.html"> About </a>
<div> Copyright © 2021-syteekno </div> </footer>
</html>
Berikut hasilnya :
Selanjutnya kita akan mempelajari tentang atribute link.
Posting Komentar untuk "Materi HTML #5 : Pengertian dan Cara Membuat Link"