Membuat Link Internal dan Link Eksternal (HyperLink) di HTML

Oleh Nikita Dini 20 Mei, 2017 Posting Komentar

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.

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.

Membuat Link Internal dan Link Eksternal (HyperLink) di HTML_

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:

h1{
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}
h1 {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.

Nikita Dini Blogger, Internet Marketer, Web Designer

Posting Komentar untuk "Membuat Link Internal dan Link Eksternal (HyperLink) di HTML"

Tata tertib berkomentar
1. Komentar harus relevan dengan konten yang dibaca
2. Gunakan bahasa yang sopan
3. Tidak mengandung unsur SARA or Bullying.
4. Dilarang SPAM.
5. Dilarang menyisipkan link aktif pada isi komentar.

Berlakulah dengan bijak dalam menggunakan sarana publik ini. Baca dan pahami isinya terlebih dahulu, barulah Berkomentar. Terimakasih.