2.4 Belajar HTML [ Membuat Link ]

pada tanggal

 Mengenal Link DI HTML



Sebelum kita masuk ke materi cara membuat link, kalian harus tau terlebih dahulu pengertian link itu


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.

Pengertian link



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?



Link pada HTML dapa dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut href 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>

Hasilnya:

Contoh Link di HTML


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!

Link error 404


Lha! Kok erorr?

Link yang kita buat ini akan membuka halaman about.html, tapi file ini belum kita buat atau belum ada. Karena itu, pasti error.

Untuk mengatasi ini, kita harus membuat file about.html dan disimpan dalam satu folder dengan file link.html.

File about.html

Isi file about.html 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:

Contoh link pada HTML

Yap!


Halaman link.html dan about.html berhasil terhubung.
Tapi tunggu dulu..

Mengapa alamat URL pada atribut href ditulis dengan nama file?

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

Bukannya harus alamat URL lengkap yang pakai http bla bla?

Ini karena link yang kita buat adalah internal link dan juga file about.html masih dalam satu folder dengan file link.html. Jadi boleh menuliskan langsung nama filenya, tanpa harus lengkap dengan http.

Komentar

Posting Komentar