Membuat HyperLink di HTML Oleh SMK Telkom AKN Marzuqi

Membuat HyperLink di HTML Oleh SMK Telkom AKN Marzuqi

 

http://media-zone.xyz – Membuat Link Internal dan Link Eksternal (HyperLink) di HTML Oleh SMK Telkom Akn Marzuqi.

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.
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-hyperlink-di-html-oleh-smk-telkom-akn-marzuqi

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 Oleh SMK Telkom AKN Marzuqi. Semoga bermafaat.

Leave a Reply

Your email address will not be published. Required fields are marked *