Cara menggunakan is html source code?

Question

Ketika kita sedang membuat website atau blog dan bingung saat menata layout atau memilih warna yang cocok untuk website, salah satu trik umum yang digunakan untuk mencari ide adalah dengan mengunjungi web yang memiliki desain yang bagus.

Table of Contents Show

Cara Melihat Source Code Website atau Blog
Cara Membuat Link di HTML
Jenis-jenis Link pada HTML
1. Contoh Internal Link
2. Contoh Eksternal Link
Atribut-atribut untuk Link
Menggunakan Atribut <a href="about.html">About us</a>5
Menggunakan Atribut <a href="about.html">About us</a>6
Cara Mengubah Warna Link di HTML
Fungsi Menarik Lainnya dari Link
Membuat Link Buntu
Membuat Link Anchor
Membuat Link untuk Memanggil Fungsi Javascript
Membuat Link dengan Gambar
Membuat Link untuk Download File
Membuat Link untuk Mengirim Email
Apa Selanjutnya?

Saat kita mengunjungi web tersebut, pasti ada pertanyaan tentang bagaimana sang creator membuat layout yang indah pada websitenya, apa saja kode css dan html yang digunakan, warna apa saja yang digunakan. Semua browser memungkinkan pengguna untuk melihat HTML atau skrip lain pada halaman web yang di-kunjungi.

Cara Melihat Source Code Website atau Blog

Untuk mengetahui itu semua bisa dilakukan dengan cara melihat source code website atau blog sang creator, untuk caranya perhatikan langkah-langkah dibawah ini:

Halaman Depan

Buka halaman website atau blog yang ingin dilihat source code-nya. Dalam tutorial kali ini akan menggunakan halaman utama dari www.nyekrip.com. Setelah halaman sudah terload secara sempurna, klik kanan pada halaman tersebut maka akan muncul pilihan dan pilih “lihat sumber laman”.

Melihat Source Code Dengan Klik Kanan

Akan muncul halaman di tab baru secara otomatis, dan disitulah kita bisa melihat source codenya. Cara yang telah dijelaskan diatas adalah ketika kita membuka halaman website atau blog menggunakan browser Chrome dalam bahasa indonesia, jika anda menggunakan firefox langkahnya sama seperti diatas cuma pilihannya “View Page Source”.

Source Code Website

Pada halaman source code ini kita bisa melihat kode HTML dan CSS apa yang dipakai bahkan sampai kode Javascript juga bisa dilihat, biasanya pada kode Javascript sudah di encripsi sehingga susah untuk dibaca.

Pada beberapa website atau blog, terkadang sang creator mencegah agar halaman websitenya tidak bisa di klik kanan, cara untuk mengatasinya adalah dengan memilih menu option pada browser dan pilih “lihat sumber laman” pada chrome, pada firefox pilih “View Page Source” atau langsung tekan CTRL + U secara bersamaan. Setelah kita melihat source codenya, tinggal kita pelajari isi kode tersebut dan semoga mendapat ide baru yang bisa diterapkan dalam pembuatan web.

Lebih jelas untuk melihat kode sumber atau source code pada halaman web:

Firefox – CTRL + U (tekan tombol CTRL dan U pada keyboard secara bersamaan). atau menuju ke menu “Firefox” dan kemudian klik pada “Web Developer” dan kemudian “Page Source”.
Internet Explorer – CTRL + U. Atau klik kanan dan pilih “View Source”.
Chrome – CTRL + U. Atau dapat mengklik ikon tiga garis horizontal di sudut kanan atas. Kemudian klik pada “Tools” dan pilih “View Source”.
Opera – CTRL + U. Atau juga dapat klik kanan pada halaman web dan pilih “View Page Source”.

CatatanKetika kita melihat source code website atau blog, hal yang perlu di-ingat adalah source code yang ditampilkan adalah hanya source code yang diproses oleh browser itu sendiri, bukan source code yang diproses oleh server (seperti PHP).

Jika baru pertama belajar pasti bingung melihat banyak kode dan fungsinya apa saja tiap kode, tapi tenang saja dalam tutorial di website ini akan dijelaskan bagaimana cara membuat website dari awal, jadi pada postingan berikutnya akan di bahas secara mendetail tentang kode HTML.

Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain.

Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.

Tidak hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll.

Nanti kita akan bahas ini lebih dalam..

Nah! sekarang, bagaimana cara membuat link di HTML?

Silahkan lanjutkan membaca:

Cara Membuat Link di HTML

Link pada HTML dapa dibuat dengan tag

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>

4, kemudian tag ini harus memiliki atribut

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>

5 untuk menentukan alamat URL tujuan dari link.

Bentuk sederhananya seperti ini:

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

Hasilnya:

Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Tentu saja ini bisa kita ubah-ubah sesusi selera.

Nanti kita akan bahas caranya ya..

Nah sekarang coba klik link tersbut!

Lha! Kok erorr?

Link yang kita buat ini akan membuka halaman

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7, tapi file ini belum kita buat atau belum ada. Karena itu, pasti error.

Untuk mengatasi ini, kita harus membuat file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 dan disimpan dalam satu folder dengan file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6.

Isi file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

Nah, sekarng mari kita coba lagi:

Yap!

Halaman

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6 dan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 berhasil terhubung.

Tapi tunggu dulu..

Mengapa alamat URL pada atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5 ditulis dengan nama file?

<a href="about.html">About us</a>

Bukannya harus alamat URL lengkap yang pakai

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

4 bla bla?

Ini karena link yang kita buat adalah internal link dan juga file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 masih dalam satu folder dengan file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6. Jadi boleh menuliskan langsung nama filenya, tanpa harus lengkap dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

4.

Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML.

Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:

Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;
External Link: adalah link yang menuju domain lain.

Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain.

Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain. Misalnya seperti: membuka halaman facebook, membuka chat whatsapp, membuka youtube, dan sebagainya.

Intinya:

Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu sendiri maka itu internal.

Biar lebih jelas, mari kita coba membuatnya di HTML:

1. Contoh Internal Link

Buatlah file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

8 kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Kemudian buat lagi file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

9 dengan isi sebagai berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Terakhir, buat file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 dengan isi sebagai berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Pastikan semua file ini disimpan dalam satu folder.

Setelah itu, coba buka

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

8 dengan browser.

Maka hasilnya:

2. Contoh Eksternal Link

Cara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaanya terletak pada alamt URL yang diberikan.

Sebagai contoh.. ini adalah eksternal link yang menuju halaman facebook:

<a href="https://www.facebook.com/petanikode">Facebook Patani Kode</a>

Hasilnya:

Facebook Patani Kode

Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/petanikode.

Contoh lain lagi:

Link CTA (call to action) untuk whatsapp.

<a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a>

Hasilnya:

Chat dengan Saya

Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut eksternal link, karena ia akan membuka halaman whatsapp.

Oh iya, di sana kita berikan parameter berupa nomer hp dan juga teks.

Nah, biar lengkap.. kita akan coba tambahkan eksternal link pada file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

9.

Silahkan buka file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

9 kemudian ubah kodenya menjadi seperti ini:

https://www.petanikode.com/contact.html

0

Hasilnya:

Tes buka link Facebook:

Tes buka link whatsapp:

Sudah paham tentang eksternal link?

Oke, sekarang lanjut belajar atribut:

Atribut-atribut untuk Link

Selain atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5 terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti:

<a href="about.html">About us</a>

5,

<a href="about.html">About us</a>

6,

<a href="about.html">About us</a>

7,

<a href="about.html">About us</a>

8, dan lain-lain.

Menggunakan Atribut <a href="about.html">About us</a>5

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0 akan membuka link pada jendela atau tab baru;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

1 akan membuka link pada halaman itu sendiri (default target);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

2 menuju bagian paling atas pada halaman;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

3 membuka link pada frame induk;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

4 akan membuka link pada

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 dengan nama tertentu;

Contoh:

https://www.petanikode.com/contact.html

1

Hasilnya:

Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0.

Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame.

Buatlah file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

7, kemudian isi kodenya seperti ini:

https://www.petanikode.com/contact.html

2

Hasilnya:

Menggunakan Atribut <a href="about.html">About us</a>6

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.

Contoh:

https://www.petanikode.com/contact.html

3

Hasilnya:

Live Demo:

Untuk lebih lengkapnya, silahkan buka: About us

Cara Mengubah Warna Link di HTML

Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).

Caranya:

Tambahkan atribut

<a href="about.html">About us</a>

8 kemudian isi dengan style css untuk mengubah warna, yakni

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0 (untuk teks) dan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

1 (untuk latar).

Contoh:

https://www.petanikode.com/contact.html

4

Hasilnya:

Fungsi Menarik Lainnya dari Link

Seperti yang saya bilang sebelumnya.. link tidak hanya digunakan untuk menghubungkan halaman web saja.

Ia juga bisa digunakan untuk beberapa fungsi tertentu seperti:

Membuat Link Buntu

Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja.

Cara membuatnya:

Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5.

Contoh:

https://www.petanikode.com/contact.html

5

Hasilnya:

Perhatikan!

Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL sebenarnya adalah anchor (jangkar).

Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika hanya diisi pagar saja, maka ia tidak akan kemana-mana.

Membuat Link Anchor

Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.

Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

3), lalu diisi dengan nama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

4 dari elemen yang akan dituju.

Contoh:

https://www.petanikode.com/contact.html

6

Hasilnya:

Kalau kita perhatikan, di sana kita menggunakan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 sebagai URL.

https://www.petanikode.com/contact.html

7

Sedangkan elemen yang memiliki

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

6, tidak ada di dalam HTML yang kita tulis.

Mengapa link anchor ini bisa menuju ke atas?

Ini karena browser sudah paham, jika ada link anchor yang menuju ke

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 maka ia akan dibawa ke bagian teratas dari dokumen.

Membuat Link untuk Memanggil Fungsi Javascript

Link dapat juga digunakan untuk memanggil fungsi Javascript.

Pemanggilan fungsi Javascript biasanya dilakukan dengan atribut even seperti

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

8,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

9,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0, dan sebagainya.

Contoh:

https://www.petanikode.com/contact.html

8

Hasilnya:

Sebenarnya hampir semua elemen bisa menjalankan fungsi Javascript dengan atribut event.

Nah, khusus untuk link. Dia bisa juga menjalankan fungsi Javascript melalui atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5 atau URL.

Contoh:

https://www.petanikode.com/contact.html

9

Hasilnya akan sama seperti contoh sebelemnya.

Membuat Link dengan Gambar

Membuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat mudah, kita hanya pelu membungkus tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

2 dengan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

4.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

0

Hasilnya:

Semua area gambar akan menjadi link dan jika kita klik, maka akan dibawa ke halaman yang akan dituju oleh link tersebut.

Membuat Link untuk Download File

Link kadang juga digunakan sebagai link untuk download file.

Cara membuatnya sangat mudah, kita hanya perlu memasukan alamat URL dari file yang akan didownload.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

1

Hasilnya:

Pada contoh di atas, kita menuliskan langsung nama filenya. Ini karena HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

4 berada dalam satu folder dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5.

Lalu, bagaimana kalau filenya berada di tempat lain?

Gampang.. tinggal ganti saja URL-nya.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

2

Membuat Link untuk Mengirim Email

Link kadang juga digunakan untuk mengirim email.

Cara membuatnya:

Ubah URL tujuan dari link dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

6, lalu diikuti dengan alamat email yang akan menerima email.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

3

Hasilnya:

Jika kamu membukanya di Google Chrome, maka ia akan membuka Gmail. Tapi jika dibuka di Firefox, ia akan memilih aplikasi email yang tersedia di komputer.