Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Lengkap: Belajar Cara Mudah Membuat Hyperlink di HTML

Lengkap: Belajar Membuat Hyperlink di HTML

Gambar oleh Mudassar Iqbal dari Pixabay
Gambar oleh Mudassar Iqbal dari Pixabay 

Sekarang kita akan membuat hyperlink di HTML kita akan bahas mulai pengertian struktur hingga  praktik simak daftarnya dibawah!


A. Pengertian Hyperlink
Hyperlink di HTML merupakan elemen HTML yang digunakan untuk menghubungkan halaman web dari yang satu ke yang satunya lagi.

Elemen ini akan membuka halaman web lain ketika saat di klik.. tentunya sesuai dengan URL yang kita berikan.Belajar Membuat Hyperlink di HTML

Konsep hyperlink di HTML

Selain menghubungkan halaman satu ke halaman lain, Hyperlink juga punya banyak fungsi seperti download file, menjalankan javasript, dan lain-lain.

Nahh! Sebelum kita lanjut kepada cara membuat hyperlink. sekarang kita masuk kepada Beberapa macam hyperlink pada HTML.


B. Macam-Macam Hyperlink pada HTML

Hyperlink menurut alamat URL yang akan dituju, Hyperlink di HTML kita bagi menjadi dua kelompok:
  1. Internal Link
  2. External Link
Kita jelaskan satu persatu!
  1. Internal Link: Merupakan hyperlink yang menuju ke halaman web dirinya sendiri atau ke domainnya sendiri.
    Belajar Membuat Hyperlink di HTML

    Konsep Internal Link di HTML

  2. External Link: Merupakan hyperlink yang menuju halaman lain.
Belajar Membuat Hyperlink di HTML

Konsep Internal Link di HTML

 Internal link digunakan untuk menghubungkan dua atau tiga halaman web dalam satu domain. Seperti yang di gambarkan pada gambar di atas.

Sedangkan Eksternal link digunakan untuk membuka domain lain. Contohnya seperti: membuka chat telegram, whatsapp, membuka youtube, download aplikasi, membuka facebook dan lain-lain.
Sampai sinih faham!
Kalau sudah! Kita lanjut cara membuat hyperlink di HTML

C. Membuat Hyperlink di HTML

Dalam pembuatan link di HTML biasanya kita akan menggunakan tag <a>. lalu kita tambahkan atribut href bertujuan untuk menentukan alamat URL dari link tersebut.

Contoh:
Belajar Membuat Hyperlink di HTML
Source code Hyperlink.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat link di HTML</title>
</head>
<body>
<p>Klik disini!
<a href="about.html">Tentang kami</a>
</p>
</body>
</html>
Tampilan link akan berwarna biru dengan mempunyai garis di bawah. Tentunya ini merupakan standar yang diberikan dari setiap web browser.

Namun tampilan link ini, Nanti juga bisa kita utak-atik sesuai selera kita.Nanti kita bahas lebih dalam.
Setelah kalian tadi buat tampilan diatas!

Coba kalian klik link tersebut!.
Belajar Membuat Hyperlink di HTML
Hahh! Kok error!!!
Link yang telah kita buat tadi, akan menuju kepada halaman about.html, akan tetapi file ini tidak ada atau belum kita buat. Makanya saat kita klik pasti akan error. 
Terus kita harus bagaimana!
Dalam mengatasi ini, kita akan buat file about.html lalu kita buat juga hyperlink.html dan kita simpan dalam satu folder.
Belajar Membuat Hyperlink di HTML
Source code about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Hyperlink di HTML</title>
</head>
<body>
<h1>Tentang Kami</h1>
<p>Link digunakan untuk mempermudah seseorang untuk browsing di internet, tingal klik aja</p>
<p>
<a href="Hyperlink.html">Kembali ke Hyperlink </a>
</p>
</body>
</html>
Belajar Membuat Hyperlink di HTML

Gambar Hyperlink.html

Belajar Membuat Hyperlink di HTML 

Gambar About.html

Horee!
Kalian berhasil menghubungkan Hyperlink.html dan About.html.
Ohh iya sobat!

Dalam kasus ini kalian boleh menuliskan alamat URL yang ada di atribut href ditulis seperti ini.
<a href="about.html">Tentang kami</a>

Tidak perlu dituliskan alamat URL lengkap sekali sepeti http…!
Kok bisa!
Yahh! Tentu bisa!
Dikarenakan link yang telah kita buat tadi, disebut internal link dan juga about.html sama hyperlink.html masih dalam satu folder.

Jadi, kita tidak menuliskan http…!
Cukup dengan menuliskan nama filenya saja.
Sampai sinih faham!
Kalau masih belum, coba kita contohkan Hyperlink lagi!
Seperti yang kita sudah tahu bahwa hyperlink itu ada yang internal link dan eksternal link.
Mari kita contohkan!


1. Internal Link

Dalam internal link ini kita akan buat tiga file yakni index.html (home),contact.html (kontak), dan about.html (tentang kami).
Belajar Membuat Hyperlink di HTML
Setelah itu kita akan buat dulu index.html sebagai halaman utama.
Belajar Membuat Hyperlink di HTML

Gambar Index.html

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link di HTML</title>
</head>
<body>
<h1>Selamat datang di website kami</h1>
<p>
<a href="index.html">Home</a>
<a href="contact.html">Kontak</a>
<a href="about.html">Tentang kami</a>
</p>
<hr>
<p>Ini adalah sebuah link yang dimana akan menunjukan alamat yang berbeda-beda, dan ini adalah link internal.</p>
<hr>
<div>01 Agustus 2020 by belajarnesia.com</div>
</body>
</html>
Belajar Membuat Hyperlink di HTML

Gambar contat.html

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link di HTML</title>
</head>
<body>
<h1>Contact</h1>
<p>
<a href="index.html">Home</a>
<a href="contact.html">Kontak</a>
<a href="about.html">Tentang kami</a>
</p>
<hr>
<p>Hub:085721000000<br> IG:belajarnesia.com <br> FB: Belajarnesia.com<br></p>
<hr>
<div>01 Agustus 2020 by belajarnesia.com</div>
</body>
</html>

Belajar Membuat Hyperlink di HTML

Gambar about.html

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link di HTML</title>
</head>
<body>
<h1>Tentang Kami</h1>
<p>
<a href="index.html">Home</a>
<a href="contact.html">Kontak</a>
<a href="about.html">Tentang kami</a>
</p>
<hr>
<p>Ini adalah contoh dari halaman tentang website kami mudah-mudahan bisa kalian fahami</p>
<hr>
<div>01 Agustus 2020 by belajarnesia.com</div>
</body>
</html>
Kalau kalian sudah membuat tiga file tersebut! Maka coba klik aja linknya!.

2. Eksternal Link

Dalam pembuatan eksternal link sebenarnya sama dengan internal link. Namun yang menjadi beda eksternal link terdapat pada alamat URL yang diberikan.

Coba kita berikan contoh:
Eksternal Link:
Belajarnesia.com
<a href="https://www.belajarnesia.com">Belajarnesia</a>HasilYoutube
Hasil :
Belajar Membuat Hyperlink di HTML

Youtube :
<a href="https://www.youtube.com/?hl=id&gl=ID">youtube</a>
Belajar Membuat Hyperlink di HTML
Pada link diatas ini menunjukan bahwa link tersebut merupakan link eksternal karena link tersebut akan membuka halaman google dan juga facebook.
Nahh apakah kalian sudah mengerti
Saya berharap kalian mengerti!
Oke! supaya lebih lengkap gimana kalau kita tambahkan link eksternal di atas ke contact.html.
Yuu kita coba!
Coba kalian ubah kode yang ada pada file contact.html seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Link di HTML</title>
</head>
<body>
<h1>Contact</h1>
<p>
<a href="index.html">Home</a>
<a href="contact.html">Kontak</a>
<a href="about.html">Tentang kami</a>
</p>
<hr>
<p> Ini adalah contoh link eksternal untuk ke youtube.com
<a href="https://www.youtube.com/?hl=id&gl=ID" target="_blank">youtube</a><br>
Ini adalah contoh link eksternal untuk masuk belajarnesia.com
<a href="https://www.belajarnesia.com" target="_blank">Belajarnesia</a><br>
</p>
<hr>
<div>01 Agustus 2020 by belajarnesia.com</div>
</body>
</html>
Hasilnya:
Belajar Membuat Hyperlink di HTML
Oke! Kalau sudah berhasil kita lanjut kepada atributnya!.


D. Jenis-jenis atribut pada link di HTML

Ternyata link di HTML dalam menggunakan atribut tidak hanya menggunakan atribut href tapi link juga bisa ditambahkan seperti: target, rel,title,style, dan lain-lain.

1. Penggunaan Atribut target

Atribut ini biasanya digunakan untuk menentukan target pada saat membuka link. Biasanya ada beberapa target yang bisa kita gunakan.

Coba lihat tabel berikut!
Belajar Membuat Hyperlink di HTML
Nahh! sekarang kita akan contohkan satu persatu!

Contoh _blank:
<a href="https://www.belajarnesia.com" target="_blank">Belajarnesia</a><br>
Hasilnya:
Belajar Membuat Hyperlink di HTML
Disaat kalian mengklik link nya maka akan membuka tab baru atau jendela baru, Dikarenakan kita menggunakan target _blank.
Ohh iya sobat!
Bagi yang tidak mempunyai koneksi internet maka dalam eksternal link akan terjadi error dikarenakan URL tersebut tidak ada.
Belajar Membuat Hyperlink di HTML
Jadi ,Eksternal link harus menggunakan koneksi internet jika kita ingin terhubung.
Nahh sekarang kita lanjutkan!
Kita akan mencoba target yang kedua yakni sebuah frame.
Sekarang kita coba ketikan kode seperti dibawah:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Membuat Link di HTML</title>
</head>
<body>
<p>
<a href="https://www.belajarnesia.com" target="myframe">Belajarnesia.com</a>
</p>
<p>
<!-- ini adalah frame yang menjadi target link-->
<iframe name="myframe" width="500" height="300"></iframe>
</p>
</body>
</html>
Hasilnya:
Belajar Membuat Hyperlink di HTML

Ini adalah hasil dari target frame. 

2. Penggunaan atribut title

Atribut ini biasanya digunakan untuk tooltips.
Apa itu tooltips?
Buat teman yang belum tahu tooltips. Tooltips merupakan informasi tambahan disaat kita menahan link atau disaat pointer menyentuh link. Maka akan muncul informasi tersebut.

Lebih jelasnya kita lihat contoh dibawah!
Contoh:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat link di HTML</title>
</head>
<body>
<p>klik disini untuk mengetahui tentang kami!
<a href="about.html" title="Masuk ke halaman kami">Tentang kami</a>
</p>
</body>
</html>
Hasilnya:
Belajar Membuat Hyperlink di HTML

NEXT!

Pada tutorial sekarang yakni membuat hyperlink di HTML kita sudah banyak belajar mulai dari
  1. Pengertian hyperlink,
  2. Macam-macam hyperlink
  3. Membuat hyperlink
  4. Jenis-jenis artibut pada link
Intinya link merupakan alat untuk menghubungkan halaman yang satu ke satunya lagi.
Oke! Selanjutnya kita akan mempelajari Tips pembuatan Gambar di HTML.

Posting Komentar untuk "Lengkap: Belajar Cara Mudah Membuat Hyperlink di HTML"