Teknik Dasar Membuat Link HTML didalam Artikel Blog

Sebenarnya masih banyak blogger yang belum tahu Teknik Dasar dalam Membuat sebuah Link di halamannya. Karena biasanya kita hanya memanfaatkan fasilitas yang disediakan pada menu editor di masing-masing platform, seperti blogger dan wordpress pada umumnya.

Maka dari itu, kali ini saya akan membahas Teknik Dasar Membuat Link HTML agar mempermudah teman-teman yang mau belajar koding HTML didalam blog.

Untuk itu, silahkan teman-teman siapkan terlebih dulu notepad++ / program koding lain yang sesuai dengan kebutuhan teman-teman.


Tools bawaan Windows seperti Notepad juga sebenarnya sudah cukup menurut saya untuk mempraktekkan teknik dasar kali ini. Program koding yang biasa saya gunakan adalah Sublime Text, program ini saya gunakan karena lebih mudah dipahami.

Jika sudah siap, yuk simak ulasan berikut ini.

Seharusnya disini teman-teman lebih mengenal dulu apa saja kode yang ada didalam kamus HTML. Tapi kalau kamu masih belum mengenal pada masing-masing kode HTML, teman-teman bisa baca Halaman Kamus HTML yang sudah saya siapkan untuk kamu pelajari.

Baca juga: Kamus HTML

Karena di artikel ini saya hanya akan membahas tentang Teknik Dasar Membuat sebuah Link di HTML Blog, jadi saya anggap teman-teman sudah tau beberapa fungsi HTML yang sudah saya tulis di Halaman Kamus HTML itu yah.

Link adalah sebuah Text atau Gambar yang bila diklik akan membawa kita ke bagian lain, baik itu didalam halaman blog atau keluar dari halaman blog.

Sebuah link secara default ditandai dengan text berwarna biru yang juga bergaris bawah seperti LINK INI.

LINK Text

Untuk membuat sebuah Text menjadi sebuah Link, kita cukup mengapit Text yang akan diberi link dengan menggunakan Tag pembuka berupa <a href> dan tag penutup berupa </a>. Perhatikan Kode berikut ini:

<a href="Link Tujuan">Link</a>

Kode HTML diatas merupakan Rumus Dasar dari sebuah Link Text. Nah kalau kamu mau membuat sebuah link yang bisa mengantar pengunjung ke blog ini (misalnya), kamu bisa lihat rumus Link Text dibawah ini.

<a href="http://www.kangwira.com">Blog Kang Wira</a>

Lalu apa saja ya yang bisa kita lakukan menggunakan rumus a href ini? Coba perhatikan 4 point dibawah ini.

1. Link yang akan menuju ke halaman lain dalam Blog yang sama.

   href="http://www.kangwira.com/p/kamus-html.html"

2. Link yang menuju ke halaman lain dalam blog yang berbeda.

   href="http://www.artimimpi.ga/p/kontak.html"

3. Link yang mengarah ke sebuah file yang dapat ditampilkan didalam browser seperti Gambar, MP3, Video, dan lainnya. Dan biasanya link ini digunakan oleh situs-situs Download.

   href="https://www.mediafire.com/download/aiourtwes/lagu.mp3"

4. Link yang mengarah ke sebuah Aplikasi Chatting seperti Whatsapp, BBM, Line, Facebook Messanger dan lainnya.

   href="https://api.whatsapp.com/send/+6282310856967"

Untuk setiap jenis Link diatas, yang paling penting diketahui adalah cara penulisan alamat atau URL-nya itu yah teman-teman.

Harap perhatikan pada Point ke-3 diatas yang sudah saya tandai bahwa link tersebut didapat ketika kita akan memberikan file dari situs penyimpanan file yang akan di download oleh pengunjung.

Alamat atau URL ini harus ditulis diantara tanda kuitp sesudah atribut href=. Jadi jangan sampai salah yah teman-teman.

Image Link

Pada dasarnya kita harus tahu dulu teknik dasar HTML untuk menampilkan sebuah gambar pada sebuah blog. Nah rumusnya bisa teman-teman lihat dibawah ini.

<img src="Gambar.jpg"/>

Jika teman-teman ingin menyisipkan Link didalam sebuah gambar, sebenarnya hanya tinggal mengapit rumus Image Link diatas kedalam rumus Text Link.

sama halnya dengan Link Text, Image Link ini juga bisa menampilkan gambar ketika di klik. Sebagai contoh, silahkan teman-teman klik Gambar Utama didalam artikel ini, maka akan menampilkan gambar tersebut di tab baru dengan ukuran lebih besar.

Baca juga: Membuat Semua Gambar di Blog Menjadi Responsive

Sebagai contoh untuk menyisipkan link didalam sebuah gambar, Teman-teman bisa menggunakan kode HTML dibawah ini.

<a href="LINK Tujuan"><img src="Gambar.jpg"/></a>

Nah sekarang saatnya teman-teman untuk berkreasi didalam postingan blognya yah. Teman-teman bisa coba berbagai ekstensi gambar seperti .JPG .PNG dan .GIF yang bisa kita dapat dari google image sebagai bahan praktek saja.

Ohya, saya hampir lupa menjelaskan bahwa Teknik Dasar Membuat Link yang kamu pelajari diatas itu akan mengantarkan pengunjung pada Tab Browser yang sama.

Artinya ketika pengunjung klik link yang kamu buat, maka halaman yang sedang dibuka saat ini akan digantikan oleh halaman yang dituju oleh link tersebut. Coba klik 2 tombol dibawah ini sebagai contoh Link menuju halaman utama Blog Kang Wira

Tab yang sama Tab Yang Baru
Nah bagaimana jika kita ingin mengantarkan pengunjung ke tujuan tanpa harus meninggalkan halaman blog yang sedang dibaca ini seperti pada tombol merah diatas?

Caranya cukup mudah, teman-teman tinggal sisipkan atribut target="_blank" didalam tag pembuka dari rumus Text Link diatas. Lihat contoh nya dibawah ini:

<a href="Link Tujuan" target="_blank">Link</a>

Cukup Mudah bukan?

Sekian dulu artikel tentang Teknik Dasar Membuat Link kali ini yah teman-teman. Jika teman-teman masih merasa kebingungan dengan pemahaman diatas, silahkan bertanya di kolom komentar dibawah ini yah.

Dan jangan lupa masukkan email kamu di kolom Berlangganan dibawah ini untuk mendapatkan notifikasi jika ada postingan terbaru di blog ini.