Anda di halaman 1dari 7

Hyperlink adalah suatu bagian dari halaman website yang menghubungkan antar

halaman, menyediakan seamless link (hubungan) ke tiap halaman dan biasa


dikenal sebagai link

Link yang merupakan singkatan dari “hyperlink” adalah sebuah fungsi dalam
HTML yang digunakan untuk mempermudah pengunjung website untuk
menelusuri seluruh isi atau informasi yang tersimpan dalam website anda.
Disarming itu, link juga berguna untuk menghubungkan antar dokumen htm.

Dalam html, sebuah objek yang berupa link akan ditampilkan dengan font
berwarna biru dengan style underline (bergaris bawah). Jika cursor mouse
didekatkan pada objek yang ebrupa link, maka cursor akan berubah menjadi
gambar tangan yang menuju pada link tersebut, kemudian jika sebuah link sudah
pernah diakses atau dikunjungi, maka warna dari teks/ibjek link tersebut akan
berubah menjadi ungu.

Pada umumnya, link dalam website berupa teks yang memmiliki warna berbeda
dan bergaris bawah. Jika bagian tersebut diklik, anda akan dibawa ke alaman web
yang dituju. Kita akan mengetahui bahwa teks tersebut aktif (link) karena jika
melewatkan pointer mouse diatasnya, pointer itu berubah menjadi pointing finger.

Internal link adalah link yang menuju ke domain atau halaman web itu sendiri.
Internal link biasanya digunakan untuk menghubungkan halaman yang satu
dengan yang lainnya dalam satu website atau domain.

a. Hyperlink ke halaman web


Link pada html dapat dibuat dengan tag <a>, kemudian tag ini harus
memiliki atribut href untuk menentukan alamat url tujuan dari link. Bentuk
sederhananya seperti
<a href=”http://petanikode.com/”>petani kode</a>
<A = tag untuk membuat link
Href = atribut untuk menentukan alamat url tujuan dari link
”http://petanikode.com/” = alamat url tujuan yang akan dibuka saat link di
klik
Petani kode = teks label untuk ink
</a> = tag penutup
Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style
standar dari setiap browser. jika link yang kita buat ini akan membuka
halaman abput.html, tapi file ini belum kita buat atau belum ada maka akan
error. Maka dari itu kita harus membuat file abput.html dan disimpan dalam
satu folder dengan file link.html.
b. Menggunakan atribut untuk link
Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan
pada link, seperti : target, title, rel, style, dan lainlain.
- Menggunakan atribut target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada
beberapa target yang biasanya digunakan
a) _blank akan membuka link pada jendela atau tab baru
b) _self akan membuka link pada halaman itu sendiri (default target)
c) _top menuju bagian paling atas pada halaman
d) _parent membuka link pada frame induk
e) Nama-frame akan membuka link pada <iframe> dengan nama
tertentu.
Contoh <a href=”https://www.facebook.com/petanikode’
target=’_blank’>facebook</a>
Saat link tersebut diklik, browser akan memuka tab baru. Ini karena
kita memberikan atribut target dengan nilai _blank.
- Menggunakan atribut title
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi
tambahan yang akan tampil saat link disentuh pointer atau saat kita
menahan tap di hp/computer.
c. Mengubah warna link di html
Untuk menambahkan warna pada link caranya tinggal menambah kode
warna. Contoh:
<a href=”https://artikehidupan.com/” style=”color:blue”>Link Warna
Biru</a> maka hasilnya akan menjadi : Link Warna Biru link pada teks
Link Warna Biru tersebut berwarna biru.
<a href=”https://artikehidupan.com/” style=”color:red”>Link Warna
Merah</a> maka hasilnya akan menjadi : Link Warna Merah link pada
teks Link Warna Merah tersebut berwarna merah.
<a href=”https://artikehidupan.com/” style=”color:green”>Link Warna
Hijau</a> maka hasilnya akan menjadi : Link Warna Hijau link pada teks
Link Warna Hijau tersebut berwarna hijau.

Anda bisa menambah kode warna dengan menggunakan kode warna yang
diawali dengan tanda pagar (#)
Untuk mengubah warna link, setiap template tentunya berbeda-beda
Tag body berfungsi menyediakan untuk penyediaan tempat untuk mengisi
teks yang akan ditampilkan. Beberapa atribut yang mneyertai tag body
yaitu
- Alink yang digunakan untuk menentukan warna link aktif
- Vlink yang digunakan untuk menentukan warna link yang sudah
dikunjungi
1. Membuat dokumen yang berisikan table
a. Membuat table
Table penting perannya dalam halaman web, selain untuk menampilkan
teks atau gambar dalam format lajur dan klom, kita bisa juga
menggunakan table untuk membantu me-layout tampilan halaman
Table merupakan sebuah kotak yang terdiri dari baris/row dan
kolom/column. Untuk membuat table, kita menggunakan tag <table> dan
menutupnya dengan tag </table>. Kita bisa juga menambahkan atribut
lain di tag <table> pembuka. Misalnya menentukan border, warna, dan
sebagainya. Didalam tag <table> ada beberapa tag lain yang perlu
dipahami yaitu:
1) Tag <tr>, artinya adalah tag untuk menuliskan baris biasa di table. TR
ingkatan dari table row
2) Tag <td>, artinya adalah tag untuk menulisakan kotak di dalam baris,
makanya tag <td> ada di dalam tag <tr>. TD singkatan dari table data
3) Tag <th> artinya adalah tag untuk menuliskan kotak biasa seperti
<td>, namun untuk header table. TH singkatan dari table header.
Contoh :
<table>
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Maka akan menghasilkan
Baris 1 kolom 1 baris 1 kolom 2
Baris 2 kolom 1 baris 2 kolom 2
Dimana table yang kita buat belum memiliki garis, sehingga
outputnya seperti diatas.
b. Menampilkan garis pada table
Agar tabelnya memiliki garis, silahkan tambahkan atribut border=”1” di
dalam tag <table>. contoh
<table boder="1">
Nilai “1” pada atribut birder adalah ukuran garisnya. Semakin besar
ukurannya, maka akan semakin besar pula ukuran garisnya. Nilai “1”
merupakan ukuran garis yang paling kecil
c. Membuat judul table html
Tag caption berfungsi untuk membuat judul tabel di dalam HTML.
Tag ini agak jarang digunakan, namun sebenarnya sangat bermanfaat.
Dengan mempelajari tag caption ini, kita mengetahui bahwa HTML telah
menyediakan tag khusus untuk membuat judul tabel.
Tag caption digunakan untuk membuat judul maupun memberikan
keterangan untuk sebuah tabel HTML. Penulisan tag caption harus ditulis
setelah tag pembuka tabel (setelah tag table). Contoh
<caption>Contoh Caption Tabel</caption>
Ketika dijalankan pada web browser, tag caption tersebut akan
ditampilkan sebelum tabel, sehingga cocok untuk membuat keterangan
dari tabel.
d. Menambahkan warna pada table
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan
atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Contoh:
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal
atau nama warna dalam bahasa inggris.
e. Mengatur jarak sel dengan cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis
di dalam sel.
Atribut ini dapat kita berikan kepada tag <table>.
Contoh : <table border="1" cellpadding="10">
Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel
dengan garis.
f. Menggabungkan sel table
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan
dan colspan:

rowspan untuk menggbungkan baris;


colspan untuk mebggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td> atau <th>.
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
g. Mengatur lebar dan tinggi table
Untuk mengatur lebar tabel html kita akan menambah atribut width
kedalam tag table.
<table border="1" width="500px">
atribut height untuk mengatur tinggi tabel html.
<table border="1" height="100px">

DAFTAR PUSTAKA
1. Fathurrahman, 17 agustus 2014. Membuat website mudah dan praktis
dengan weebly. Jakarta. PT Elex Media Komputindo.
2. Muhardian. Ahmad. 28 juni 2020. Belajar html#7: cara membuat ilink
untuk menghubungkan halaman web. https://www.petanikode.com/html-
link/
3. Kuswayanto,lia. 2006. Mahir dan terampil berkomputer.grafindo media
pratama
4. Zaki, Ali & winarno, edy. 4 maret 2015.desain web responsive dengan
html 5 dan css 3.Jakarta. Elex Media Komputindo.
5. Muhardian. Ahmad. 12 februari 2015. Belajar html#10: cara membuat
table di html. https://www.petanikode.com/html-tabel/

Anda mungkin juga menyukai