Membuat Hyperlink HTML

 



Assalamu'alaikum teman-teman KWP semua,

Salam sejahtera bagi kita semua, semoga kita semua dalam keadaan sehat dan diberikan pemahaman yang baik dari Tuhan Yang Maha Esa.😊🙏

Diartikel kali ini saya ingin menjelaskan mengenai Hyperlink pada HTML. Apa sih Hyperlink itu? Pengertian Hyperlink menurut saya adalah sebuat elemen yang disisipkan sebuah link pada tulisan ataupun gambar yang jika di klik akan diarahkan ke halaman link yang dituju. Itu sih secara singkatnya menurut saya, hehehehe...😅. Hyperlink pada HTML menggunakan tag <a> untuk menyisipkan link yang akan dituju.

Nah, diartikel kali ini saya akan membahas 2 tipe Hyperlink ada yang dalam bentuk teks dan ada yang dalam bentuk gambar.


Pertama yang akan kita bahas adalah Hyperlink dalam bentuk teks. Oke langsung aja kita praktekkan bersama-sama.

  1. Siapkan bahan-bahan yang diperlukan, Klik disini untuk melihat bahan-bahan yang diperlukan.
  2. Start Apache pada XAMPP dan buka aplikasi sublime text kalian Klik disini untuk melihat langkah-langkahnya dari awal jika kalian mengikuti blog ini
  3. Buat file baru di Sublime Text atau text editor yang kalian gunakan dengan nama hyperlink_text.html .
  4. Langsung aja kita ngodingnya. Silahkan ketikkan code HTML dibawah ini.
<html>
<head>
<title>Membuat Hyperlink Text</title>
</head>
<body>
<h1>Membuat Hyperlink Text</h1>
<p>
<a href="http://google.com">Klik Link Ini</a>
</p>
</body>
</html>

Keterangan: Saya mengarahkan text tersebut website google.com, jika saya klik link tersebut maka, saya akan diarahkan ke halaman website google.com.

            Maka, tampilannya akan seperti dibawah ini




Kedua kita akan membuat Hyperlink image atau Hyperlink dalam bentuk gambar.
  1. Silahkan ketikkan code HTML dibawah ini.
<html>
<head>
<title>Hyperlink Image</title>
</head>
<body>
<h1>Hyperlink Image</h1>
<p>
<a href="https://google.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYtxYOkNM6mKgr0KLhO0Q1bY1KPBY0xC0IHcW4UFpjK45ZChJ2FBl6x1SB5XPCPMZmZiS0SAEmH_IcpcCj97YSpKYABIMRhqfTe9DG2TcW7ZUx_s6BmXGMJ9BrknoWxdnNVQ7t_OaTath/s320/WhatsApp+Image+2020-11-28+at+22.45.32.jpeg">
</a>
</p>
</body>
</html>

Keterangan: Gambar yang nanti akan ditampilkan adalah gambar yang berasal dari internet. Disini saya menggunakan gambar dari blog ini. Jika kalian ingin menggunakan gambar yang berada pada memori internal perangkat kalian juga boleh. Tapi sebagai latihan kalian bisa menggunakan link gambar di atas.

        Oke jika sudah silahkan kalian buka saja dibrowser kalian. Maka, hasilnya seperti ini





Jika gambar tersebut diklik maka akan diarahkan ke halaman website google.com.



Oke, mungkin sampai disini dulu materi tentang Hyperlink HTML semoga bermanfaat bagi kalian semua. Jika ada kekurangan dan pertanyaan silahkan berkomentar di bawah yah....🙏


Terimakasih sudah membaca artikel kami🙏🙏🙏


Semangat Otodidak 💪💪

Komentar

Posting Komentar

Postingan Terpopuler

Cara ngoding HTML di Android

Gambar
  Assalamu'alaikum teman-teman, salam sejahtera bagi kita semua. Banyak diantara kita bertanya-tanya, apakah bisa kita ngoding di android? Jawabannya pasti bisa, karena sudah banyak aplikasi legal yang tersebar di app store atau playstore di Android kalian. Karena saya bukan user atau pengguna android untuk ngoding jadi saya full ngoding di komputer atau laptop saja. Sebenernya ngoding diandroid bisa juga sih, cuman ram android saya 2GB dan sekarang sudah kepenuhan jadi saya tidak bisa pakai android untuk ngoding, karena banyak file penting di handphone saya, hehehehehe... Mungkin saya hanya share pengalaman saya aja nih, karena waktu itu saya juga pernah menjadi programmer yang menggunakan android ya, meskipun cuman ngoding HTML aja sih, apa salahnya jika saya ingin berbagi ilmu buat kalian yang mau ngoding HTML di android.  Yang pernah saya coding di android itu bukan HTML aja sih, CSS dan JavaScript pernah, karena HTML, CSS, JavaScript itu tidak perlu banyak bahan, hanya pe...
Baca selengkapnya

Tulisan berjalan dan menampilkan video dari youtube ke website menggunakan HTML

Gambar
 Assalamu'alaikum sahabat KWP semua🙏😊, Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa. Driartikel kali ini saya ingin memberikan kalian sebuah materi yaitu tentang Tulisan berjalan dan cara menampilkan video dari youtube ke website milik kita menggunakan HTML. Pastinya kalian pernah melihat tulisan-tulisan berjalan pada sebuah website yah dan juga ada video dari youtube yang ditampilkan pada sebuah website. Untuk tulisan berjalan pada website biasanya para Programmer menyebutnya Marquee , Karena tulisan yang berjalan itu pastinya menggunakan tag Marquee untuk membuat tulisan tersebut berjalan.  Pertama kita akan membuat tulisan yang berjalan dari kanan ke kiri atau Marquee Default . Silahkan ketikkan Code HTML dibawah ini pada Text Editor kalian  <html> <head> <title>Marquee</title> </head> <body> <h1>Marquee</h1> <p> <marquee>Tulisan Ini Berjalan</marquee> </p...
Baca selengkapnya

Perkenalan

Gambar
  Assalamu'alaikum Warahmatullahi Wabarokatuh Perkenalkan nama saya Muhammad Ibnu Zein. Dinisi saya sebagai pendiri Forum Koding Web Programming. Dimana forum tersebut adalah tempat untuk mempelajari tentang Web Developing dari awal. Di postingan pertama saya diblog ini saya hanya memperkenalkan saya dan yang akan dibahas di blog ini saja. Diblog ini saya akan menyampaikan berbagai macam materi tentang dunia Web Developing yang terpenting adalah Start up pertama kali kita mulai belajar tentang Web Developing.  Ada pun materi terpenting yang akan saya bahas di blog ini adalah: 1. HTML Dasar 2. CSS Dasar 3. Praktek Pembuatan Website berbasis HTML & CSS 4. PHP Dasar 5. JavaScript Dasar 6. Mysql Database 7. Tambahan info materi tentang Web Developing.
Baca selengkapnya