{"id":485,"date":"2026-05-03T08:12:09","date_gmt":"2026-05-03T01:12:09","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=485"},"modified":"2026-05-03T08:12:09","modified_gmt":"2026-05-03T01:12:09","slug":"bab-8-link-hyperlink-dalam-html","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-8-link-hyperlink-dalam-html\/","title":{"rendered":"BAB 8 : LINK (HYPERLINK) DALAM HTML"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Pengertian Link<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Link (Hyperlink)<\/strong> adalah elemen HTML yang digunakan untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Berpindah dari satu halaman ke halaman lain<\/li>\n\n\n\n<li>Menghubungkan antar file<\/li>\n\n\n\n<li>Mengakses website lain<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tag yang digunakan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tujuan\"&gt;Teks Link&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 <code>&lt;a&gt;<\/code> = anchor (jangkar)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Struktur Dasar Link<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.google.com\"&gt;Kunjungi Google&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Penjelasan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>href<\/code> \u2192 tujuan link<\/li>\n\n\n\n<li>Isi tag \u2192 teks yang diklik<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Jenis-Jenis Link<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">3.1 Link Eksternal<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Menuju website lain:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.google.com\"&gt;Google&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.2 Link Internal (PENTING \ud83d\udd25)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Digunakan untuk <strong>menghubungkan antar halaman dalam satu website<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"profil.html\"&gt;Profil&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Ini yang digunakan untuk membuat website multi halaman<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.3 Link dalam Halaman (Anchor)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#kontak\"&gt;Ke Kontak&lt;\/a&gt;<br><br>&lt;h2 id=\"kontak\"&gt;Kontak&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.4 Link Email<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"mailto:admin@email.com\"&gt;Kirim Email&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.5 Link Telepon<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:08123456789\"&gt;Hubungi&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4. Atribut Penting pada Link<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">4.1 target=&#8221;_blank&#8221;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Membuka di tab baru:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/google.com\" target=\"_blank\"&gt;Buka&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4.2 title<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tooltip saat hover:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"profil.html\" title=\"Lihat profil\"&gt;Profil&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5. STRUKTUR FOLDER WEBSITE (WAJIB PAHAM \ud83d\udd25)<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ini yang membedakan pemula vs siap industri.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5.1 Contoh Struktur<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>website\/<br>\u2502<br>\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 profil.html<br>\u251c\u2500\u2500 kontak.html<br>\u2502<br>\u251c\u2500\u2500 assets\/<br>\u2502   \u251c\u2500\u2500 css\/<br>\u2502   \u251c\u2500\u2500 img\/<br>\u2502   \u2514\u2500\u2500 js\/<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.2 Penjelasan<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>File<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td>index.html<\/td><td>Halaman utama<\/td><\/tr><tr><td>profil.html<\/td><td>Halaman profil<\/td><\/tr><tr><td>kontak.html<\/td><td>Halaman kontak<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6. CARA MENGHUBUNGKAN HALAMAN<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">6.1 Dari index ke profil<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"profil.html\"&gt;Profil&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6.2 Dari profil ke index<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"index.html\"&gt;Home&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6.3 Navigasi Lengkap<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;<br>    &lt;li&gt;&lt;a href=\"index.html\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;<br>    &lt;li&gt;&lt;a href=\"profil.html\"&gt;Profil&lt;\/a&gt;&lt;\/li&gt;<br>    &lt;li&gt;&lt;a href=\"kontak.html\"&gt;Kontak&lt;\/a&gt;&lt;\/li&gt;<br>&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Ini adalah <strong>navbar website nyata<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">7. RELATIVE PATH vs ABSOLUTE PATH<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">7.1 Relative Path (WAJIB DIGUNAKAN)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"profil.html\"&gt;Profil&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Digunakan dalam project lokal<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7.2 Absolute Path<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/example.com\/profil.html\"&gt;Profil&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Digunakan untuk link luar<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7.3 Folder Path<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jika file di dalam folder:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"assets\/img\/gambar.jpg\"&gt;Gambar&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Jika naik folder:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"..\/index.html\"&gt;Kembali&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 <code>..<\/code> = naik satu folder<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">8. STUDI KASUS UTAMA (WEBSITE MULTI HALAMAN)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf Kasus: Website Sekolah<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>sekolah\/<br>\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 profil.html<br>\u251c\u2500\u2500 kontak.html<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8.1 index.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Website Sekolah&lt;\/h1&gt;<br><br>&lt;ul&gt;<br>    &lt;li&gt;&lt;a href=\"index.html\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;<br>    &lt;li&gt;&lt;a href=\"profil.html\"&gt;Profil&lt;\/a&gt;&lt;\/li&gt;<br>    &lt;li&gt;&lt;a href=\"kontak.html\"&gt;Kontak&lt;\/a&gt;&lt;\/li&gt;<br>&lt;\/ul&gt;<br><br>&lt;p&gt;Selamat datang di website sekolah.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8.2 profil.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Profil Sekolah&lt;\/h1&gt;<br><br>&lt;a href=\"index.html\"&gt;Kembali ke Home&lt;\/a&gt;<br><br>&lt;p&gt;Sekolah unggulan di bidang teknologi.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8.3 kontak.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Kontak&lt;\/h1&gt;<br><br>&lt;a href=\"index.html\"&gt;Kembali ke Home&lt;\/a&gt;<br><br>&lt;p&gt;Email: sekolah@email.com&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Ini sudah menjadi <strong>website sederhana multi halaman<\/strong> \ud83d\udd25<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">9. BEST PRACTICE INDUSTRI<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan struktur folder rapi<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan relative path<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan navbar di semua halaman<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan nama file konsisten<\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">10. KESALAHAN UMUM SISWA<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c File tidak ditemukan<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Salah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"Profile.html\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Padahal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>profil.html<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u26a0\ufe0f Case sensitive!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Path salah<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 File di folder tapi tidak ditulis<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Tidak ada navigasi balik<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 User tidak bisa kembali<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">11. DEBUGGING (WAJIB DIAJARKAN)<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Jika link tidak jalan:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cek nama file<\/li>\n\n\n\n<li>Cek huruf besar\/kecil<\/li>\n\n\n\n<li>Cek folder<\/li>\n\n\n\n<li>Klik kanan \u2192 inspect<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">12. LATIHAN SISWA<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2 halaman (index &amp; profil)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigasi 3 menu<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Link email &amp; telepon<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">13. MINI PROJECT<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf \u201cWEBSITE PROFIL DIRI\u201d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat struktur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>project\/<br>\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 tentang.html<br>\u251c\u2500\u2500 kontak.html<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navbar di semua halaman<\/li>\n\n\n\n<li>Link saling terhubung<\/li>\n\n\n\n<li>Konten berbeda tiap halaman<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">14. KESIMPULAN<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Link HTML adalah kunci untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat website multi halaman<\/li>\n\n\n\n<li>Navigasi antar halaman<\/li>\n\n\n\n<li>Menghubungkan informasi<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tag utama:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"\"&gt;...&lt;\/a&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Pengertian Link Link (Hyperlink) adalah elemen HTML yang digunakan untuk: Tag yang digunakan: \ud83d\udc49 &lt;a&gt; = anchor (jangkar) 2&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-485","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=485"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/485\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/485\/revisions\/486"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}