Cara menggunakan html to url

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar HTML 5 Bagian 12 : Cara Membuat Daftar di HTML. Selanjutnya, kita akan belajar cara membuat link di HTML.

Table of Contents Show

Atribut target
Penggunaan Tag Base Pada Direktori
Mengatur Warna Tautan
Tautan Unduh
Bagaimana cara membuat link di HTML?
Bagaimana cara membuat link URL?
Apa itu link HTML?
HTML dimulai dengan kode apa?

Link atau biasa disebut dengan tautan, halaman web dapat berisi berbagai link yang membawa Anda langsung ke halaman lain atau bagian tertentu dari halaman tertentu.

Tautan ini disebut sebagai hyperlink.

Hyperlink memungkinkan pengunjung untuk melakukan navigasi diantara situs Web dengan mengklik kata, kalimat, dan gambar.

Jadi, Anda dapat membuat hyperlink menggunakan teks atau gambar yang tersedia di halaman web.

Menghubungkan Dokumen

Tautan dibuat dengan menggunakan tag HTML <a>.

Tag ini disebut tag anchor (jangkar) dan apa pun kode yang diapit di antara tag pembuka <a> dan penutup </a> menjadi bagian dari tautan, dan pengguna dapat mengeklik bagian itu untuk menjangkau dokumen yang ditautkan.

Berikut ini adalah kode sederhana penggunaan tag <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Contoh :

Pada contoh ini kita mencoba menautkan URL https://mbahwp.com di halaman Anda.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Contoh Hyperlink</title>
   </head>
	
   <body>
      <p>Klik link berikut ini </p>
      <a href="https://mbahwp.com" target="_self" rel="noopener">Mbah WP </a>
   </body>
	
</html>

Browser akan menampilkan hasil sebagai berikut, dan ketika Anda mengklik link tautan yang dibuat, browser akan membukan tab baru, membawa Anda ke halaman web Mbah WP (dalam contoh ini).

Atribut target

Pada contoh di atas, kita sudah menggunakan atribut target.

Atribut ini digunakan untuk menentukan lokasi, di mana dokumen terkait dibuka.

Berikut adalah pilihan atribut target yang bisa digunakan :

NoPilihan & Deskripsi1_blank
Membuka dokumen tertaut di jendela atau tab baru.2_self
Membuka dokumen tertaut dalam jendela yang sama.3_parent
Membuka dokumen tertaut di jendela induk.4_top
Membuka dokumen tertaut di seluruh halaman jendela.5targetframe
Membuka dokumen tertaut dalam targetframe yang dinamai.

Pada contoh berikut, kita akan mencoba beberapa pilihan yang diberikan untuk atribut target.

<!DOCTYPE html>
<html>

   <head>
      <title>Contoh Hyperlink</title>
   </head>
	
   <body>
      <p>Klik pada link berikut ini</p>
      <a href="https://mbahwp.com" target="_blank" rel="noopener">Buka di tab baru </a> |
      <a href="https://mbahwp.com" target="_self" rel="noopener">Buka di jendela yang sama </a> |
      <a href="https://mbahwp.com" target="_parent" rel="noopener">Buka di jendela induk </a> |
      <a href="https://mbahwp.com" target="_top" rel="noopener">Buka di halaman penuh</a>
   </body>

</html>

Browser akan menampilkan hasil sebagai berikut, ketika Anda mengklik tautan berbeda.

CodePen Embed FallbackCodePen Embed Fallback

Penggunaan Tag Base Pada Direktori

Saat Anda menautkan dokumen HTML yang terkait dengan situs web yang sama, Anda tidak perlu memberikan URL lengkap untuk setiap tautan.

Anda dapat menghilangkan URL jika Anda menggunakan tag <base> di header dokumen HTML Anda.

Tag ini digunakan untuk memberikan alamat dasar untuk semua tautan.

Jadi, browser akan menggabungkan alamat relatif yang diberikan ke alamat dasar ini dan akan membuat URL lengkap.

Contoh berikut menggunakan tag <base> untuk menentukan URL dasar, dan nanti kita dapat menggunakan alamat relatif ke semua tautan, daripada memberikan URL lengkap untuk setiap tautan.

<!DOCTYPE html>
<html>

   <head>
      <title>Contoh Hyperlink</title>
      <base href = "https://mbahwp.com /">
   </head>
	
   <body>
      <p>Klik pada link berikut ini</p>
      <a href=" /category/coding/html/ " target="_blank" rel="noopener">Kategori HTML di Mbah WP</a> |
      <a href=" /category/coding/html/ " target="_self" rel="noopener">Kategori HTML di Mbah WP</a> |
      <a href=" /category/coding/html/ " target="_parent" rel="noopener">Kategori HTML di Mbah WP</a> |
      <a href=" /category/coding/html/ " target="_top" rel="noopener">Kategori HTML di Mbah WP</a>
   </body>

</html>

Browser akan menampilkan hasil sebagai berikut, di mana Anda dapat mengklik link yang dihasilkan Tutorial HTML untuk menuju ke tutorial HTML.

CodePen Embed FallbackCodePen Embed Fallback

Sekarang, URL <a href = “/category/coding/html/” dianggap sebagai <a href = “https://mbahwp.com/category/coding/html/”>.

Mengatur Warna Tautan

Cara ini sebenarnya sudah tidak digunakan lagi sekarang. Untuk memberikan warna pada tautan sebaiknya menggunakan CSS.

Anda dapat mengatur warna tautan, tautan aktif dan tautan yang dikunjungi menggunakan atribut link, alink dan vlink dari tag <body>.

Silahkan tuliskan kode berikut dan simpan dengan nama, lalu buka di browser web apa pun untuk melihat cara kerja atribut link, alink, dan vlink.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Contoh Hyperlink</title>
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Klik link berikut ini </p>
      <a href="https://mbahwp.com" target="_blank" rel="noopener">Mbah WP </a>
   </body>
   
</html>

Browser akan menampilkan hasil sebagai berikut.

CodePen Embed FallbackCodePen Embed Fallback

Silahkan periksa warna tautan sebelum mengkliknya, selanjutnya periksa warnanya ketika Anda hendak mengklik tautan dan ketika tautan tersebut telah dikunjungi.

Tautan Unduh

Anda dapat membuat tautan teks agar file PDF, atau DOC atau ZIP dapat diunduh.

Caranya sangat mudah; Anda hanya perlu memberikan URL lengkap dari file yang dapat diunduh seperti pada contoh berikut :

<!DOCTYPE html>
<html>

   <head>
      <title>Contoh Hyperlink</title>
   </head>
	
   <body>
      <a href = "https://ilearn.marist.edu/access/lessonbuilder/item/172134/group/e0d1b466-ea21-433b-8926-c41f19455217/Course%20Materials/SamplePDF.pdf">Download Lorem Ipsum PDF File</a>
   </body>
	
</html>

Kode ini akan menghasilkan tautan yang bisa digunakan untuk mengunduh file ketika tautannya diklik.

CodePen Embed FallbackCodePen Embed Fallback

Itu dia belajar HTML tentang cara membuat link di HTML. Pada materi selanjutnya, kita akan mempelajari Tutorial Belajar HTML5 Bagian 14 : Cara Membuat Link Pada Gambar di HTML.

Bagaimana cara membuat link di HTML?

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Bagaimana cara membuat link URL?

Cara membuat link URL sendiri dengan Bitly.

Klik Create..

Masukkan link panjang..

Tempel link yang ingin dibuat..

Tampilan akan berubah ke mode edit..

Klik bagian Customize Back-Half..

Klik Save..

Edit link ke penamaan sendiri..

Tunggu notifikasi alamat link URL tersedia atau tidak..

Apa itu link HTML?

Mengenal Link di HTML Hyperlink atau link sering digunakan untuk menghubungkan suatu halaman website ke halaman yang lain. Elemen yang menjadi link nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan.

HTML dimulai dengan kode apa?

Penjelasan: Kode diatas dimulai dengan tag html, didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf. Agar lebih jelas berikut ini contoh penulisan elemen bersarang yang salah.