Cara membuat internal link html

HyperLink pada halaman HTML digunakan untuk memanggil halaman web, file, gambar, alamat email dan bagian-bagian pada halaman web yang telah ditandai. Objek pada hyperlink dapat berupa teks atau gambar.

Table of Contents Show

Bagaimana cara membuat link di HTML?
Bagaimana cara membuat link URL?
Apa itu link pada HTML?
Apa fungsi dari tag href?

Membuat Link Internal dan Link Eksternal (HyperLink) di HTML - Secara default teks yang diberikan hyperlink digaris bawah dan akan merubah icon mouse menjadi telapak tangan bila kursor melewatinya.

Untuk membuat hyperlink dibutuhkan teknik anchor. Pada tag html anchor disingkat dengan

<a>...</a>

. Adapun atribut wajib yang harus ada pada tag anchor adalah href singkatan dari hypertext reference.

image source: wisegeek.com

baca juga: Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya

Protokol URL

URL singkatan dari Uniform Resource Locator, adapun protokol yang di support oleh URL adalah sebagai berikut:

1. http : hyper text transfer protocol
Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung dengan tautan, yang disebut dengan dokumen hiperteks/HTML.

2. ftp : file transfer protocol (link luar)

Adalah sebuah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pengiriman berkas (file) komputer antar mesin-mesin dalam sebuah Antar jaringan.

3. File (lokal)

4. news

5. mailto

Protokol mailto digunakan untuk mengirim email melalu jaringan internet.

Jenis URL

1. Absolut

Mengandung protokol-protokol URL
Mengarah ke link luar

Contoh penulisan:

<html>
<body>
<a href=‘http://www.google.com’>Google</a>
</body>
</html>

2. Relatif

Mengarah ke link dalam dokumen HTML
Tidak mengandung protokol-protokol URL

Contoh penulisan:

<html>
<body>
<a href=‘home.html’>Home</a>
</body>
</html>

Atribut Tag Anchor

Secara default warna text yang mengandung link adalah biru, untuk mengganti warna link tersebut sesuai keinginan kita maka, diperlukan atribut-atribut pendukung berikut ini:

Link (untuk menentukan warna link)
Alink (untuk menentukan warrna ketika di klik)
Vlink (untuk mentukan warna pada link yang telah dikunjungi)

Dengan value nilai warna berdasarkan hexa atau name. Atribut tersebut diletakan pada tag “body”

Hubungan antar bagian dokumen

Untuk mengarahkan link kepada bagian dokumen perlu ditandai dahulu bagian-bagian dokumen yang menjadi tujuan link. Atribut untuk menandai dokumen tersebut dengan menggunakan atribut ‘id’ atau ‘name’ dengan value nama dari bagian dimaksud

Contoh penulisan:

<html>
<body>
<a id=“paragraf_satu”> Pragraf Satu</a>
<a name=“paragraf_satu”> Pragraf Satu</a>
</body>
</html>

Dan untuk mengarahkan link kebagian dari dokumen tetap menggunkan tag ‘href’ dengan value nama bagian dokeman ditambah tanda pagar (#) didepan nama dokumen

Contoh penulisan:

<html>
<body>
<a href=“#paragraf_satu”>Paragraf Satu</a>
</body>
</html>

Sedangkan untuk mengarahkan link kebagian dari dokumen pada beda halaman web tetap menggunkan tag ‘href’ dengan value nama halaman web dan nama bagian dokuman ditambah tanda pagar (#) diantara nama halaman dan nama bagian dokumen

Contoh penulisan:

<html>
<body>
<a href=“home.html#paragraf_satu”>Paragraf Satu</a>
</body>
</html>

Atribut Target

Untuk menetukan sasaran terbukanya link anchor yang kita klik maka, perlu ditambahkan atribut “target” pada tag anchor. Secara default atribut target memiliki value “_SELF”, dimana target akan secara defoult membuka pad ahalaman website yang sedang aktif.
Bila kita menginginkan untuk dapat membuka halaman baru setiap link yang di klik maka, value dari atribut target adalah “_BLANK”

Contoh:

<html>
<body>
<a href=“...”  target=“_self”>....</a>
<a href=“...”  target=“_blank”>....</a>
</body>
</html>

CSS (Cascading Style Sheet)

CSS merupakan salah satu bahasa scripting untuk pemrograman web yang berjalan pada sisi client. CSS dapat mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Struktur CSS

Tag_selector {
property:value;peoperty_2:value;..... Property_n:value
}

Contoh:

h2{
Color:#ffffff;
}

Metode Penulisan CSS

Inline Style Sheet

CSS insert langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Dengan cara ini CSS hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.

Contoh:

<html>
<body>
<a href=“test.html” style=“color:green”>test</a>
</body>
</html>

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh:

<html>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h2 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial}
</style>
<body>
</body>
</html>

Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> … </style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan dalam format .css

Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>

Contoh:

<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href=“style.css" type="text/css" />
</head>
<body>
</body>
</html>

Sekian artikel tentang Membuat Link Internal dan Link Eksternal (HyperLink) di HTML. Semoga bermafaat.

Bagaimana cara membuat link di HTML?

Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.

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 pada HTML?

Hyperlink adalah suatu fungsi yang ada di dalam halaman HTML yang mampu membantu para pembaca menuju informasi lainnya secara singkat. Umumnya, teks yang disisipkan dengan hyperlink bisa dilihat secara mudah perbedaannya dalam suatu slide presentasi ataupun website.