Cara Membuat link pada HTML

html tag

Yang sering anda temui dalam sebuah website adalah link. Link ini akan membuat konten atau elemen HTML apabila di klik dan akan mengarahkan anda ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style).

Link Standar

Link dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link. tag <a> sendiri biasa disebut dengan tag anchor (pengait).

Klik <a>disini</a> untuk mendownload

Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).

Klik <a href=http://www.alamat-tujuan.com>disini</a> untuk mendownload

Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan sebelumnya.

1. Buatlah file baru dengan nama latihan3.html , simpanlah di folder yang sama dengan latihan-latihan sebelumnya.

folder link html

2. Ketikkan kode berikut pada file latihan3.html

<!DOCTYPE HTML>
 <HTML>
   <head>
     <title>Judul File HTML</title>
   </head>
        <body>
               <h1>Selamat datang di website saya</h1>
                  <a href=latihan1.html>buka Latihan 1</a><br>
                  <a href=latihan2.html>buka Latihan 2</a>
        </body>
 </HTML>

3.  Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah link yang akan mengait ke file latihan3.html tepat sebelum penutup tag body (</body> ).

         ...
         <a href=latihan3.html>Kembali ke halaman utama </a>
    </body>
</html>

4. Save pekerjaan anda, dan bukalah file latihan3.html pada browser. Anda dapat mengklik linknya satu persatu.

link html

 

Ketika link “buka latihan 1” di klik, browser akan menampilkan file latihan1.html

html link

Jika anda perhatikan pada kode yang terdapat dalam latihan3.html, ada beberapa tag yang belum saya jelaskan, yaitu tag <h1> = Judul utama dan <br> = break-memberikan garis baru/enter. untuk materi judul dapat dilihat di https://abuadzhan.com/heading-website-di-dalam-html/.

Tag <br> digunakan untuk memindahkan teks kebaris baru, sehingga teks yang dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda menghapus tag <br> ini, maka teks akan ditampikan satu baris.

Untuk membuat link yang mengacu ke halaman web lain, pastikan anda menyertakan http:// pada atribut href link tersebut.

<a href=http://www.google.com> Buka Google </a>

Jika anda tidak menyertakan http:// maka link tersebut tidak akan bekerja sebagaimana mestinya.

Setiap link yang diklik akan ditampilkan di tab yang sama, bagaimana jika anda ingin membuka link tersebut di tab/window baru? Tambahkan atribut target=“_blank”.

<a href=http://abuadzhan.com target=_blank> abuadzhan.com</a>

Link Email

email html

Anda juga dapat membuat link email, link ini berisi alamat email yang ketika diklik, aplikasi untuk mengirim email akan otomatis terbuka dan tujuan email secara otomatis terisi dengan alamat yang telah ditentukan.

Untuk membuat link email, anda tinggal menambahkan mailto : alamat@email di dalam atribut href.

<a href=mailto: miss.abc@gomall.com>Kirim Email</a>

Selain tipe link-link di atas, masih banyak lagi tipe link lainnya, seperti link No. Telp, Aplikasi dan lainnya.’

Selanjutnya kita akan membahas tentang Heading pada HTML.

Tinggalkan Balasan

%d blogger menyukai ini: