sistemit24.com

Html Cara Membuat Link

02-Februari-2017 - Publish Admin

Sebuah situs web tidak lengkap tanpa adanya link, link itu sendiri berfungsi untuk menampilkan halaman ke halaman yang lain.

Link ditulis dengan <a> yang merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).


HTML Links - Syntax

Berikut ini contoh bagaimana cara membuat sebuah link pada halaman HTML.


Script HTML 
 
                                    <!DOCTYPE html>
                                    <html>
                                    <head>
                                    <title>
                                        Belajar HTML LINK
                                    </title>
                                    </head>
                                    <body>
                                        Link Text
                                    </body>
                                    </html>

Teks link adalah bagian yang terlihat pada suatu halaman web. Untuk menentukan target dari link kita dapat menggunakan atribut href.


Link Atribut Target

Atribut target digunakan untuk menentukan lokasi dimana dokumen terkait akan dibuka. Berikut ini adalah option yang dapat digunakan:

Option Keterangan
_blank Membuka dokumen terkait di jendela baru/tab baru
_self Membuka dokumen terkait dalam frame yang sama.
_parent Membuka dokumen terkait dalam full frame.
_top Membuka dokumen terkait di full body.

Berikut ini contoh penggunaan atribut target pada HTML LINK dan option dari atribut target.

Script HTML 
 
                                    <!DOCTYPE html>
                                    <html>
                                    <head>
                                    <title>
                                        Belajar HTML LINK
                                    </title>
                                    </head>
                                    <body>
                                        
Klik link
                                        
Klik link
                                        
Klik link
                                        
Klik link
                                    </body>
                                    </html>


Local Link

Pada contoh-contoh sebelumnya kita membuat sebuah link lengkap dengan menggunakan nama domain yang akan ditujuh, link tersebut kita gunakan apabilah kita akan menghubungkan antara halaman web yang kita buat dengan halaman web orang lain.

Untuk membuat link local kita tidak harus menyertakan nama domain tetapi yang kita gunakan cukup nama file html nya saja.

Sekarang kita mulai untuk membuat sebuah link local dengan mengikuti langkah-langkah dibawah:

Script HTML 
 
                                    <!DOCTYPE html>
                                    <html>
                                    <head>
                                    <title>
                                        Belajar HTML LINK
                                    </title>
                                    </head>
                                    <body>
                                        
Halaman 1
                                        
Halaman 2
                                        

                                        
Halaman 1

                                        

                                            Belajar HTML halaman 1
                                        

                                        
                                    </body>
                                    </html>

Simpan sintak diatas dan beri nama halaman1.html, selanjutnya buat file html untuk halaman 2 seperti dibawah ini:

Script HTML 
 
                                    <!DOCTYPE html>
                                    <html>
                                    <head>
                                    <title>
                                        Belajar HTML LINK
                                    </title>
                                    </head>
                                    <body>
                                        
Halaman 1
                                        
Halaman 2
                                        

                                        
Halaman 2

                                        

                                            Belajar HTML halaman 2
                                        

                                        
                                    </body>
                                    </html>

Simpan sintak diatas dan beri nama halaman2.html, syaratnya antara file halaman1.html dan halaman2.html harus sama-sama dalam satu folder.

Jika kita lihat maka susunan akan seperti ini:

HTML MEMBUAT LINK


Selanjutnya jika kita lihat maka hasilnya akan seperti gambar dibawah ini:

HTML MEMBUAT LINK


Merubah Warna Link

Secara Default link akan muncul seperti dibawah ini:

  1. Sebuah link yang belum pernah dikunjungi akan digaris bawahi dan bewarna biru.
  2. Sebuah link yang sudah pernah dikunjungi akan digaris bawahi dan bewarna ungu.
  3. Sebuah link aktif akan digaris bawahi dan bewarna merah.

Disini kita dapat merubah warna link sesuai keinginan kita dengan menambahkan CSS pada link yang akan kita buat.

Contoh sintaknya adalah sebagai berikut:

Script HTML 
 
                                    <!DOCTYPE html>
                                    <html>
                                    <head>
                                    <title>
                                        Belajar HTML LINK
                                    </title>
                                    <style>
                                        a:link    {color:green; background-color:transparent; text-decoration:none}
                                        a:visited {color:pink; background-color:transparent; text-decoration:none}
                                        a:hover   {color:red; background-color:transparent; text-decoration:underline}
                                        a:active  {color:yellow; background-color:transparent; text-decoration:underline}
                                    </style>
                                    </head>
                                    <body>
                                        
Memberi warna pada link

                                        Halaman                                        
                                    </body>
                                    </html>

HTML TUTORIAL
;