HTML DASAR – Membuat Link pada HTML

  • Post
    codeorayo
    Keymaster
    none
    Bagaimana caranya membuat link pada html ?. Saat anda membuka sebuah halaman website, pastilah ketika anda mengklik menu/tulisan apapun, maka anda akan menuju ke halaman lain. Misalnya dari halaman Beranda, lalu anda mengklik menu Produk, secara otomatis terbuka halaman baru, Halaman Produk. Hal ini disebut dengan nama Link / Hyperlink, atau dalam bahasa Indonesia disebut sebagai Hubungan, dimana halaman Beranda dan Produk saling berhubungan.

    Teks yang digunakan sebagai media Link ini disebut Hypertext, namun anda juga dapat membuat gambar sebagai Link. Perhatikan gambar berikut.

    [img width=432,height=258]http://lautankode.com/wp-content/uploads/2018/01/Link-Explanation.jpg[/img]

    Pada gambar di atas, apabila teks yang dilingkari merah pada halaman 1 di klik, maka akan menuju ke halaman 2. Seperti itulah proses Link, cara penggunaannya adalah sebagai berikut :

  • Gunakan tag , dan apit objek (teks/gambar) yang kalian ingin jadikan sebagai tautan. Tag  ini adalah singkatan dari Anchor / Tautan / Labuh.

  • Atribut yang umum digunakan adalah atribut href, singkatan dari Hypertext Reference. Atribut ini mendefinisikan Link address yang menjadi tujuan.

  • Secara default, Link ini akan :

  • Berwarna biru dan bergaris bawah untuk link yang belum dikunjungi. Contoh.

  • Berwarna ungu terhadap link yang sudah pernah di kunjungi. Contoh.

  • Berwarna merah terhadap link yang aktif, yakni saat ditekan. Contoh.




    Pembuatan LinkUntuk membuat sebuah Link, tag yang digunakan adalah tag …letakan objek disini…. Lalu gunakan atribut href  untuk mendefinisikan halaman yang akan dituju.

    Code:





    Belajar Links


    Google

Output :

[img width=413,height=323]http://lautankode.com/wp-content/uploads/2018/01/Link-unvisited.png[/img]

Pada contoh di atas, apabila teks tersebut di klik akan menuju ke Google.com. Berikut saya berikan contoh apabila kalian menuju ke halaman yang berada pada 1 folder atau di luar folder dari file links saat ini yang anda buat.

Code:




Contoh Links


alamat situs lain
file contoh.html berada 1 folder dengan file link
file contoh.html berada di DALAM folder lain 1x
file contoh.html berada di DALAM folder lain 2x
file contoh.html berada di LUAR folder 1x
file contoh.html berada di LUAR folder 2x
file contoh.html berada di LUAR folder 1x dan MASUK ke DALAM folder lain 1x

Catatan : Apabila URL yang dimasukan merupakan link eksternal, tulis URL-nya seperti ini…

Code:

http://google.com
atau
http://www.google.com

Apabila kalian tulis http://www.google.com, hypertext itu tidak akan bekerja, karena dianggap URL internal.

Menjadikan Gambar sebagai LinkTidak hanya Teks, kalian pun dapat menggunakan gambar sebagai link.

Code:




Link Gambar



  wordpress


Dan di bawah ini adalah hasil dari kode sumber di atas :

[img width=405,height=498]http://lautankode.com/wp-content/uploads/2018/01/Link-Menjadikan-gambar-sebagai-Link.png[/img]

Apabila gambar di atas di klik, akan menuju ke situs WordPress.com

Membuat Link EmailKalian juga dapat membuat Link yang dapat menuju ke sebuah akun Email, namun mengutip Tutorialspoint.com bila menggunakan cara ini akan menjadi penyebab akun email anda terkena spamming/penyampahan. Anda dapat menggunakan cara lain untuk membuat orang lain dapat mengirim email kepada anda, yakni dengan script PHP dan script bahasa pemrograman web lainnya.

Untuk mengaplikasikannya anda hanya tinggal menambahkan nilai atribut mailto: pada atribut href.

Code:




Link Emails


Nama Email Anda

Ketika anda mengklik teks dari hasil kode sumber di atas, akan memunculkan aplikasi Email Client seperti Microsoft Outlook contohnya. Apabila pengguna tidak menginstall aplikasi Email Client pada komputernya maka dia tidak dapat mengirim email tersebut.

Membuat Link BookmarksAnda juga dapat membuat bookmark pada halaman website dengan meggunakan konsep Links ini.

Pertama – tama, buat dulu objek yang akan dijadikan hyperlink. Kemudian pada atribut href, gunakan tanda id / tanda pagar “#”. Karena tanda inilah yang akan menjadi pemicunya.

Code:

Bab 1 HTML

Selanjutnya panggil dengan atribut id…

Code:

Bab 1 HTML

Kurang lebihnya adalah seperti di bawah ini…….

Code:




Link Bookmark

Bab 1 HTML

Bab 2 CSS

Bab 3 PHP

 

Bab 1 HTML

Teks Teks Teks…..

Teks Teks Teks…..

 

Bab 2 CSS

Teks Teks Teks…..

Teks Teks Teks…..

 

Bab 3 PHP

Teks Teks Teks…..

Teks Teks Teks…..


Output….

[img width=1024,height=543]http://lautankode.com/wp-content/uploads/2018/01/Link-Membuat-Link-Image-1024×543.png[/img]

Andaikan saya mengklik Bab 3 PHP  maka akan menuju ke Bab 3 PHP

Atribut – atribut TargetTerdapat beberapa cara dalam membuka halaman website yang dituju pada konsep Link ini, entah akan membukanya pada jendela baru atau pada halaman yang saat ini digunakan.

[table]

[tr]

[/tr]

[tr]

[/tr]

[tr]

[/tr]

[tr]

[/tr]

[tr]

[/tr]

[/table]

[td]Nama Nilai Atribut[/td] [td]Keterangan[/td]
[td]_blank[/td] [td]Membuka halaman pada jendela baru[/td]
[td]_self[/td] [td]Membuka halaman pada jendela yang sama, secara default semua link akan bernilai ini[/td]
[td]_parent[/td] [td]Membuka halaman mengikuti jendela parent-nya[/td]
[td]_top[/td] [td]Membuka halaman juga pada jendela yang sama[/td]

Kode Sumber

Code:




Target Links


Self
Blank
Parent
Top

Silahkan praktekan untuk melihat hasilnya.

Mendesain Hyperlink dengan CSSAnda juga dapat mendesain Teks maupun Gambar yang dijadikan hyperlink ini dengan CSS sesuai keinginan kalian.

Kode Sumber…

Code:




Mendesain Link



Facebook

Secara Default Hyperlink akan berwarna biru muda.

[img width=475,height=300]http://lautankode.com/wp-content/uploads/2018/01/Link-Unvisited-1.png[/img]

Lalu ketika mouse diarahkan ke teks akan berwarna merah jambu bergaris bawah :

[img width=478,height=303]http://lautankode.com/wp-content/uploads/2018/01/Link-Hover.png[/img]

dan ketika aktif (selang waktu ketika teks di tekan) akan berwarna hijau bergaris bawah,

[img width=476,height=304]http://lautankode.com/wp-content/uploads/2018/01/Link-Active.png[/img]

dan untuk teks yang sudah dikunjungi berwarna abu2…[img width=470,height=300]http://lautankode.com/wp-content/uploads/2018/01/Link-Visited.png[/img]

https://www.lautankode.com/membuat-link-pada-html/

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.