Cara Membuat link di HTML Blog

Cara Membuat link di HTML - Kita akan membahas bagagaimana Membuat Link pada HTML.

Cara Membuat Link URL di Posting Blog agar Bisa Diklik

Sebelum membahas bagaimana cara Membuat Link pada HTML Blog, sebagai contohnya adalah membuat link di postingan blog, kita harus mengetahui apa yang dimaksud dengan link berikut ini.

Apa yang dimaksud dengan link?

Secara bahasa, link adalah kata bahasa inggris yang berarti koneksi. Namun di Internet, link adalah tautan yang digunakan untuk menghubungkan satu halaman ke halaman yang lainnya. Link berasal dari kata "hyperlink" yaitu objek HTML yang memungkinkan user untuk membuka halaman website saat Anda membukanya dengan klik atau ketukan.

Silahkaan baca pengertian link tersebut di sini.

Jika Anda mengklik kata atau tulisan "di sini", maka Anda akan diarahkan ke halaman lain yang saya rujuk artikelnya tentang apa itu link.

Ini merupakan contoh dari sebuah link yang berisi URL tujuan. Bahasa lain dari link adalah tautan (dalam bahasa Indonesia).

Perlu diketahui bahwa link tidak hanya untuk menghubungkan halaman. Link juga punya fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll.

Apa yang dimaksud dengan URL?

Selain pengertian dari link, kita juga harus mengetahui pengertian dari URL sehingga kita tidak salah dalam menggunakan kedua istilah ini.

Menurut wikipedia, URL adalah:

Singkatan dari Uniform Resource Locator yang berarti Lokator Sumber Seragam, adalah rangkaian karakter menurut suatu format standar tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet.

Contoh URL postingan pada Blogger berformat:

https://belajarhtmldasar.lajangspot.web.id/2022/08/cara-membuat-link-di-html-blog.html

URL di atas merupakan URL dari postingan yang sedang kita bahas ini. Lalu bagaimana caranya membuatnya menjadi link yang bisa diklik?

Cara Membuat Tulisan yang Bisa Diklik di HTML

Untuk membuat link di HTML, biasanya menggunakan teks atau tulisan yang bisa diklik. Untuk membuatnya, kita menggunakan tag a dengan atribut href berikut ini.

<a href="URL">Teks/Tulisan</a>

Jika dalam bentuk teks atau tulisan, kode HTML linknya seperti ini:

<a href="https://belajarhtmldasar.lajangspot.web.id/2022/08/cara-membuat-link-di-html-blog.html">Membuat Link pada HTML Blog</a>

Hasilnya: Cara Membuat link di HTML Blog.

Lalu bagaimana jika menggunakan gambar?

Cara Membuat Gambar Menjadi Link di HTML

Misalnya, saya memiliki gambar berikut ini yang saya tambahkan pada postingan ini.

Gambar di atas adalah gambar dari fasilitas Blogger yang merupakan cara menyisipkan link pada postingan blog dengan mengklik icon link pada bagian bawah tempat judul postingan yang disediakan saat menulis postingan.

URL dari gambar di atas adalah:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLWp79JKCn4ivKS-uKvgujlQNk5MiDjfxtKHiVHUjivToXvGZTat91ZMXuLUHuxvOmKp_IRRJgjCL6xYG6FYC8iAXznR4zQpxpH6M79DUiV5yDtBSYOR65utYE1jd8eR7zZhlos9-OTK61y564n96rBlCi_27xuqJvcLQIgHrRd6aQh0dbX1i6gsD/s1600/Menyisipkan%20Link%20di%20Postingan%20Blog.png

Untuk membuat link dengan menggunakan gambar, kita menggunakan kode HTML:

<a href="URL-Postingan"><img src="URL-gambar"/></a>

Tapi, kita juga bisa menambah link di gambar yang sudah ada dengan mengganti URL gambar pada bagian awal kode HTML untuk menampilkan gambar:

<a href="URL-Gambar"

Contoh kode HTML menampilkan gambar di postingan blog:

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLWp79JKCn4ivKS-uKvgujlQNk5MiDjfxtKHiVHUjivToXvGZTat91ZMXuLUHuxvOmKp_IRRJgjCL6xYG6FYC8iAXznR4zQpxpH6M79DUiV5yDtBSYOR65utYE1jd8eR7zZhlos9-OTK61y564n96rBlCi_27xuqJvcLQIgHrRd6aQh0dbX1i6gsD/s1600/Menyisipkan%20Link%20di%20Postingan%20Blog.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="Membuat Link pada HTML Blog" border="0" data-original-height="353" data-original-width="566" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLWp79JKCn4ivKS-uKvgujlQNk5MiDjfxtKHiVHUjivToXvGZTat91ZMXuLUHuxvOmKp_IRRJgjCL6xYG6FYC8iAXznR4zQpxpH6M79DUiV5yDtBSYOR65utYE1jd8eR7zZhlos9-OTK61y564n96rBlCi_27xuqJvcLQIgHrRd6aQh0dbX1i6gsD/s1600/Menyisipkan%20Link%20di%20Postingan%20Blog.png"/></a></div>

Silahkan ganti yang ditandai dengan warna merah dengan URL tujuan Anda sehingga jika gambar tersebut di klik, bukan lagi menampilkan gambar, tetapi mengarahkan ke alamat URL yang dituju.

Demikianlah Cara Membuat link di HTML, semoga bermanfaat.

Buka lainnya di Tutorial HTML untuk Blogger Pemula.