Belajar HTML (09): Membuat Link

Supaya lebih mudah, silahkan ketik dan jalankan kode berikut, jangan lupa simpan dengan nama file 22-html-link-internal.html.

<!DOCTYPE html>
<html>
<head>
   <title>Link Internal</title>
</head>
<body>
   <p>Contoh <b>link</b> <font color="#2288ee">internal</font></p>
   <p>Link akan berfungsi pada halaman ini saja dengan bagian yang berbeda</p>
   <p>Buka <a href="#atas">halaman atas<a>, <a href="#tengah">halaman tengah<a> atau <a href="#bawah">halaman bawah<a>.</p>
   
   <a name="atas"></a>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   Ini halaman atas<br>
   
   <p>Buka <a href="#atas">halaman atas<a>, <a href="#tengah">halaman tengah<a> atau <a href="#bawah">halaman bawah<a>.</p>
   
   <a name="tengah"></a>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   Ini halaman tengah<br>
   
   <p>Buka <a href="#atas">halaman atas<a>, <a href="#tengah">halaman tengah<a> atau <a href="#bawah">halaman bawah<a>.</p>
   
   <a name="bawah"></a>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   Ini halaman bawah<br>
   
   <p>Buka <a href="#atas">halaman atas<a>, <a href="#tengah">halaman tengah<a>.</p>
   
</body>
</html>

Coba jalankan dan lihat bagaimana cara kerjanya ­čśÄ

Link Internal

Target

Target? Ya target, maksudnya adalah menentukan di mana tujuan link itu akan dibuka. Atribut yang digunakan adalah target="targetnya". Ada beberapa target untuk membuka link tujuan ini, yaitu:

  • _blank,┬ámembuka link di jendela baru atau tab baru
  • _self,┬ámembuka link pada jendela atau tab yang sama (secara default ini adalah yang akan digunakan jika target tidak ditentukan)
  • _parent,┬ámembuka link di frame utama (kalau menggunakan frame)
  • _top,┬ámembuka link bagian paling atas dari halaman
  • nama_frame, membuka link pada frame yang ditentukan sesuai nama_frame

Contoh untuk target _blank, silahkan edit kode latihan 20-html-link-pertama.html┬ásebelumnya, tambahkan┬átarget="_blank", kemudian simpan dengan nama file┬á23-html-link-target.html,┬áingat ya, di edit dan di save-as menjadi file baru. Supaya lebih jelas ketik aja semuanya ­čśÇ

<!DOCTYPE html>
<html>
<head>
   <title>Link Pertama</title>
</head>
<body>
   <p>Contoh <b>link</b> <font color="#ff5555">halaman pertama</font></p>
   <a href="21-html-link-kedua.html" target="_blank">buka halaman kedua<a>
</body>
</html>

Hasilnya silahkan dilihat sendiri ya ­čśÇ

Link Eksternal

Link eksternal sama dengan link biasa, bedanya hanya pada tujuannya. Jika tujuannya keluar dari host/server yang berbeda maka disebut dengan link eksternal. Umumnya link eksternal ini dipadukan dengan target _blank, tetapi tidak selalu begitu ­čśÇ

Contohnya tinggal Anda ganti saja link tujuan menjadi alamat website lain atau blog lain, misalnya http://www.amazinglight.info. Jadi linknya kira-kira seperti ini <a href="http://www.amazinglight.info" target="_blank">buka AmazingLight.info</a>. Silahkan modifikasi kode-kode di atas untuk mencoba link eksternal ini.

Warna Link

Iya, di atas sudah disebutkan warna dasar dari link, lebih jelasnya seperti ini:

  • Warna biru untuk link yang belum pernah diklik;
  • Warna ungu untuk link yang sudah pernah diklik;
  • Warna merah untuk link yang sedang diklik.

Oke, cukup dulu untuk bahasan tentang membuat link, sampai jumpa pada tutorial HTML lainnya.

← Sebelumnya

Halaman : 1 2

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *