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

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

2 Responses

  1. 16 Juli 2017

    […] kemarin kita bahas tentang bagaimana cara membuat link, kali ini kita bahas tentang cara menambahkanĀ gambar ke dalam halaman web. Gambar ini nanti juga […]

  2. 25 September 2017

    […] Kali ini kita bicara tentang bagaimana membuat toolbar. Bahan bacaan yang terkait dengan tulisan ini adalah tentang icon, cara membuat link. […]

Tinggalkan Balasan

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