» » » » HTML : Membuat HYPERLINK pada HTML

HTML : Membuat HYPERLINK pada HTML

, ,
Assalamualaikum Wr. Wb.

create-script - hai gaess....pasa kesempatan kali ini saya akan shaiing tentang cara membuat Hyperlink pada HTML....Penasaran?....silakan simak pembahasan berikut.



A. PENDAHULUAN
  • Pengertian
Hyperlink atau yang sering disebut hanya dengan kata link adalah penghubung antara suatu dokumen dengan dokumen yang lain pada HTML.
  • Latar Belakang
semua website yang tersedia di internet pasti menggunakan tag <a>. Contohnya saja alat pencarian seperti google. tidak lain, hal tersebut digunakan dalam pembuatan website untuk
  • Maksud dan Tujuan
dapat membuat suatu teks atau suatu gambar yang jika di klik akan diarahkan menuju ke suatu dokumen yang berbeda alamat (sesuai link yang telah dimasukkan pada script Hyperlink tersebut)
  • Hasil yang Diharapkan
dapat menggunakan Hyperlink dan dapat menerapkannya dalam pembuatan website

B. ALAT DAN BAHAN
  • Web Browser
  • Text Editor
C. PEMBAHASAN

  • Cara Penulisan Hyperlink
Hyperlink ditulis dengan menggunakan script yang diawali dengan tag <a> dan juga diakhiri dengan tag </a>. penulisan Hyperlink adalah <a href="alamat link yang akan dituju">Klik Disini</a>.

  • Praktek
penjelasannya adalah didalam tanda petik setelah tanda sama dengan adalah link yang akan ditampilkan jika button di klik dan tulisan "klik link dibawah ini adalah yang tulisan yang akan tampil pada HTML dan tag </a> digunakan sebagai penutup tag link
sebelum membuat hyperlink, pastikan anda memiliki webpage sebagai alamat yang akan dituju oleh hyperlink

1. Contoh Pertama : Script yang disave di satu folder

buat folder terlebih dahulu,
lalu ketikkan script berikut. nama i file HTML nya. dan save ke dalam foldernya
<html>
<head>
<title></title>
</head>
<body>
<p>Klik Disini Untuk<a href="link_tujuan.html">Link Tujuan</a></p>
</body>
</html>

yang kedua, ketikkan script berikut, lalu save dengan nama link_tujuan :
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h2>Ini adalah Link Tujuannya</h2>
</body>
</html>
kemudian save satu folder dengan script file pertama

jika di sudah di save. buka script pertama dengan menggunakan Web Browser anda. maka akan muncul tampilan seperti berikut.
 kemudian jika Link Tujuan di klik, maka akan muncul tampilan seperti berikut :


Penjelasan : di script pertama tag <p> hanya sebagai tambahan, jika tidak dicantumkan juga gak apa-apa. lalu tanda petiknya adalah link tujuannya, kita ketikkan langsung saja nama file-nya, karena kedua file html tersebut akan kita save satu folder. pasti diantara kalian beranggapan, loh, kok satu folder sih?.
santai, selanjutnya nanti akan saya bahas juga kok :)
yang kedua adalah yang di link_tujuan.html, tag <h2> hanya digunakan sebagai penanda saja, selain itu anda juga bisa menggunakan tag <img src="">, <p>, maupun yang lain, sesuka hati anda :)

2. Contoh kedua : Script yang disave berbeda folder
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Klik Disini Untuk<a href="link/link_tujuan.html">Link Tujuan</a></p>
</body>
</html>

lalu save di luar folder, gunakan link tujuan dengan script diatas saja yaa...

penempatan file diatas adalah, file link_tujuan.html berada di dalam folder link. jadi file yang tadi tinggal  dipindah ke folder link saja, hehe.

buka file link.html nya. maka hasilnya akan sama seperti tadi, yaitu seperti ini

dan jika link tujuan di klik. maka akan di arahkan ke link_tujuan.html nya. hasilnya akan seperti ini :


Penjelasan : sebelum link htmlnya, kita ketikkan terlebih dahulu nama foldernya, dikarenakan file link_tujuan.html berada di dalam folder link (terserah nama folder dan nama link kalian apa, yang penting anda tahu konsepnya). maka kita ketikkan link/link_tujuan.html.

3. Contoh ketiga : Mengarahkan link dengan website yang telah dipublikasikan di internet.

ketikkan script berikut :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Klik Disini Untuk<a href="https://create-script.blogspot.com">Link Tujuan</a></p>
</body>
</html>

 dan buka file link.html nya. maka hasilnya akan menjadi seperti ini :
dan jika link tujuan di klik. anda akan diarahkan ke blog saya :)

Penjelasan : untuk Mengarahkan link dengan website yang telah dipublikasikan di internet sebelum linknya, kalian harus menambahkan "http://" karena jika tidak browser anda akan mengira itu link yang file nya ada di folder laptop anda. dan jika anda menggunakan link ini, anda tidak perlu membuat file lagi sebagai link tujuan, dan satu lagi, jika anda menggunakan link jenis ini, anda harus konek ke internet, jika tidak, maka akan "Problem Loading Page"

D. HASIL YANG DIPEROLEH 
  • Kita dapat menggunakan Hyperlink dengan baik dan benar
E. KESIMPULAN
  • penulisan Hyperlink dapat dibedakan menjadi beberapa cara

Sekian sharing saya mengenai Hyperlink HTML pada kesempatan kali, semoga bermanfaat.

Wassalammualaikum Wr.Wb


Subscribe to: Post Comments (Atom)