Kali ini yang akan kita pelajari dalam HTML adalah Hyperlink Atau sering juga disebut dengan link saja Atau weblink Ya jadi sama aja Link adalah sebuah koneksi dari sebuah sumber web Ke sumber lain Itu menurut spesifikasinya Dengan kata lain jika tidak ada ada hyperlink maka tidak akan ada juga yang disebut dengan web jadi komponen hyperlink ini adalah komponen yang sangat penting dalam sebuah web link pada HTML dibuat dengan menggunakan tag a atau singkatan dari anchor ya mungkin kenapa disebut anchor karena anchor itu adalah jangkar analoginya adalah jangkar itu pasti terhubung pada sebuah kapal, sama seperti hyperlink juga pasti terhubung pada sebuah sumber begitu ya, cara membuatnya langsung saja kita coba saya akan buka sublime text saya, seperti biasa saya sudah punya latihan 6 dengan file halaman 1.html di dalamnya ya Di dalam HTMLnya, saya akan coba buat sebuah paragraf yang berisi seperti ini Seperti ini Saya punya paragraf yang bertuliskan klik di sini untuk mengetahui informasi lebih lanjut Yang nantinya, kata di sini akan saya jadikan sebuah link Sehingga kita bisa klik untuk terhubung ke sumber lain atau ke halaman lain Jadi cara menuliskannya adalah kita tambahkan tag A sebelum kata di sini Dan tutup A setelah kata di sini Kita lihat dulu hasilnya Ini hasilnya Nah kata disini belum menjadi sebuah hyperlink Karena untuk membuat hyperlink kita butuh satu atribut Yang dinamakan dengan href Di dalam href ini kita bisa menuliskan sumbernya Nah yang bisa kita tuliskan di dalam href itu ada beberapa jenis Kalau kita lihat di slide-nya Dalam href ini yang pertama kita bisa tuliskan external link Atau link ke website lainnya lain ya kita coba misalkan kita akan terhubung ke Google saya harus menuliskan http jadi http-nya harus dituliskan titik dua double slash google.com ya kalau kita lihat hasilnya lagi kembali ke browser lalu refresh sekarang kalau kalian lihat ini otomatis link yang berubah stylenya yang berbeda hanya menjadi ungu atau biru lalu ada garis bawahnya apa perbedaannya antara ungu dan biru Kalau ungu itu kita sudah pernah mengunjungi linknya Kenapa disini ungu? Karena saya sudah pernah menggunakan browser ini Saya sudah pernah mengunjungi google.com sebelumnya Tapi kalau warnanya biru terang Itu artinya kalian belum pernah sama sekali mengunjungi website tersebut Kalau saya coba klik Kalau terhubung dengan internet Langsung masuk ke google.com Itu yang pertama kita bisa isi hrefnya menggunakan external link Tapi jangan lupa tuliskan juga protokolnya http.2 yang kedua kita bisa simpan internal link atau halaman website lain yang ada di dalam domain kita atau satu satu domain dengan website yang kita buat contohnya saya buat halaman lain misalkan product atau admin, ya kita coba buat satu buah file lagi di dalam sublime text, kita kasih nama halaman2.tml isinya seperti ini kalau kita kembali saya akan ganti href nya dengan file yang akan saya tuju yaitu halaman2.html kita tidak perlu menuliskan http karena ini satu domain bahkan saya simpan di dalam satu folder yang sama. Jadi saya tinggal penuliskan halaman 2.html. Kalau kita lihat hasilnya, refresh, klik di sini, maka dia akan pindah ke halaman 2. Untuk kembali ke halaman 1, kita klik di sini, harus ubah halaman 2 nya, saya harus tambahkan tag a lagi di bawah h1 ini seperti ini ya saya tambahkan href halaman1.html lalu tulisannya kembali ke halaman 1 jadi kalau saya refresh, saya bisa belak-balik ke halaman 1, ke halaman 2 ya jadi itu tadi penggunaan href untuk eksternal dan internal url ya nah ini ada yang disebut dengan relatif url apa ya Apa maksud dari relative URL? Contohnya begini Kalau misalkan saya masuk ke dalam foldernya Latihan 6 misalnya Lalu saya buat sebuah folder lagi misalnya admin Dan saya simpan halaman 2 ini ke dalam folder admin Lalu saya kembali ke browsernya Ini di halaman 1 Kalau saya klik disini Akan terjadi error Karena sekarang Kalau kita lihat di sublime textnya Dia akan mengarah ke halaman 2 Sedangkan sekarang Alaman 2 sudah pindah ke dalam folder admin Jadi untuk bisa berjalan dengan normal Kita harus tambahkan nama foldernya Admin seperti ini Jadi ini saya bacanya Di folder yang sama Di latihan 6 Masuk dulu ke folder admin lalu cari halaman 2.html nah sekarang dari halaman 2 mau kembali ke halaman 1 itu error juga kenapa?
karena sekarang halaman 2 nya ada di dalam folder admin Kalau saya tulis halaman 1.html artinya dia akan mencari di folder yang sama. Dan halaman 1.html tidak berada di folder yang sama. Tapi berada di satu folder di atasnya. Nah untuk itu kita harus tambahkan titik-titik slash. Ini artinya naik satu folder di atasnya lalu cari halaman 1.html.
Jadi sekarang dari halaman 2. Kalau saya klik dia naik satu folder lalu mencari halaman 1. Lalu makan. Halamannya tampil karena sudah benar Itu yang disebut dengan relative URL Coba kalau begini Misalnya Sekarang saya simpan halaman 1 Kedalam folder user Ya Saya simpan Kedalam folder user Kita cek lagi halaman 1 dan halaman 2 Kita buka lagi halaman 1 dan halaman 2 ini kalau saya jalankan di browser itu pasti error lagi sekarang saya mau kasih tugas untuk kalian bagaimana caranya agar linknya tetap jalan silahkan pause dulu videonya coba mengetahui apa yang harus diperbaiki agar halaman jalan kalau sudah kalian boleh play lagi videonya kita lihat hasilnya sama-sama yang harus kalian perbaiki di halaman 1 adalah karena halaman 1 sekarang berada di dalam folder user jadi kita harus keluar dulu naik dulu satu folder ya, naik dulu satu folder itu artinya kita berada di latihan 6 lalu masuk ke folder admin, ya jadi kita harus tambahkan titik-titik slash begitu pula halnya dengan halaman 2 Hai jadi sekarang kita ada di sini kita harus naik dulu satu folder lalu sekarang kita masuk ke halaman user ya Hai jadi itu yang harus kalian perbaiki kalau kita lihat lagi hasilnya open di browser saya klik disini kembali ke alaman 1 itu jalan dengan normal itu untuk menggunakan relatif url yang ketiga kita bisa simpan page anchor atau yang biasa disebut dengan bagian tertentu dari sebuah sebuah halaman jadi bukan hanya kita masuk ke sebuah halaman tapi kita pindahnya ke bagian tertentu dari sebuah halaman nah contohnya gimana kita lihat ya Nah sekarang kita lihat lagi di sublime textnya halaman 1 dan halaman 2 sudah saya perbaiki lagi jadi seperti awal ya jadi enggak ada lagi folder user dan folder admin yang saya baru buat adalah ini halaman 3.html ini kalau kalian lihat jangan dulu kaget dengan isinya kalian nggak perlu bingung nanti kita terus yang pertama saya tuliskan heading 1 bertuliskan ini adalah halaman 3 lalu ceritanya nanti di halaman 3 ini saya punya 3 buah artikel yang masing-masing punya judul yang menggunakan H2 dan artikelnya ya ini tidak perlu khawatir dengan apa itu lorem ipsum, dolor, dan seterusnya ini adalah placeholder atau text sembarang yang digunakan untuk melihat apakah sebuah paragraf itu akan tampil Sesuai dengan keinginan kita atau tidak Di sublime text Akan dengan mudah membuat ini Tapi intinya Saya punya nanti 3 buah bagian Bagian pertama Saya tulis bagian 1 Yang memiliki 2 buah paragraf Lalu saya pisahkan dengan 10 buah br Supaya nanti jaraknya Ada 10 spasi Lalu ada bagian 2 Saya juga tulis menggunakan h2 Di bagian 2 ini Saya punya 3 buah buah paragraf, jadi artikelnya ada 3 buah paragraf, sama dibatasi juga oleh 10 buah br dan yang terakhir, ini kita buat sama-sama saya akan buat bagian 3 jadi kita buat dengan menggunakan H2 ya, ketik H2, tab lalu bagian 3 lalu disini ceritanya kita akan buat 1 buah paragraf, jadi bagian 1 2 paragraf, bagian 2 3 paragraf bagian 3 hanya 1 cara menuliskannya, kita tinggal tuliskan P ya, lalu diisi dengan kalau di sublime test, kita bisa saya tulis lorem l-o-r-e-m lalu tekan tab ya L-nya huruf kecil sehingga dia akan otomatis membuat teks lorem ipsum atau teks placeholder ini Oke, sekarang kita sudah punya 3 buah bagian. Kalau kita lihat hasilnya, jadi idenya begini.
Nanti setelah H1, saya akan membuat ul yang berisi 3 buah link menggunakan list item. Sehingga kalau saya klik, nanti dia akan pindah ke bagian 1. Kalau saya klik list yang kedua, kita pindah ke bagian 2. pindah ke bagian 2, kalau saya klik list yang ketiga, kita pindah ke bagian 3. Begitu ya. Oh ya, yang saya lupa tambahkan di bagian 3 adalah 10 buah BR, jadi tolong tambahkan dulu. Begini.
Sekarang yang akan kita lakukan adalah setelah H1, saya akan menambahkan UL, di mana di dalamnya akan terdapat 3 buah list item. Yang pertama seperti ini, yang pertama saya tuliskan LI, saya tambahkan A, ref nya kosong. tolongkan dulu kita tulis di dalamnya ke bagian satu lalu selanjutnya kalian bisa copy paste aja kalau kita lihat hasilnya ini tampil jadi kalau saya klik ini nanti dia pindah seperti ini kalau Saya klik yang 2, nanti dia pindah. Seperti ini. Ya, ceritanya begitu.
Nah, apa yang harus kita lakukan? Kita harus memberikan penanda pada tiap-tiap bagian yang ingin kita pindah. Atau anchor-nya tadi ya.
Misalkan gini, untuk H2, kita harus beri dia ID. Misalkan ini bagian 1. untuk bagian 2 juga sama kita kasih id bagian 2 dan yang terakhir untuk bagian 3 jadi sekarang kita sudah punya anchor nya kita sudah punya penandanya tinggal kita panggil di harif nya kita tuliskan crash ini penanda untuk id kalian tulis aja bagian 1 kedua juga sama crash bagian 2 yang ketiga crash, bagian 3 jadi ini bacanya saya akan pindah ke halaman yang sama tapi mencari anchor yang bagian 1 atau ID bagian 1, jadi kalau kita kembali Saya klik, dia akan pindah ke bagian 1. Saya klik bagian 2, dia akan pindah ke bagian 2. Nah, pada saat saya klik yang bagian 3, itu tidak berada di sini, tulisannya tidak berada di atas. Itu karena spasinya... habis, jadi halamannya ini paling bawah agar bagian 3 berada diatas ini, kita harus tambahkan br dulu ini br nya kurang, jadi misalkan saya tambahkan 2 baris lagi, jadi br nya ada 30 nantinya ini kalian lakukannya dengan CSS bagian 1 bagian 2 bagian 3 ya, begitu untuk menambahkan anchor dan kalian juga bisa berpindah ke bagian lain di halaman lain contohnya di halaman 1 saya mau punya href lagi ini saya tulis, sekarang saya tulis ini ke halaman 3 bagian 3 jadi yang perlu saya tulis disini adalah halaman3.html tapi saya mau pindahnya ke bagian 3 jadi itu bisa ya kalau saya klik kanan, open Kalau saya klik di sini, dia ke halaman 2. Kalau saya klik halaman 3, langsung ke bagian 3. Itu tadi mengenai page anchor ya. Nah, selanjutnya yang akan kita coba adalah begini.
Ini adalah halaman 1. Pada saat saya klik di sini, Itu langsung pindah ke halaman 2 Tapi di window yang sama Atau di tab yang sama Kadang-kadang kita ingin pada saat kita klik Sebuah link, itu membuka tab baru Mungkin kalian pernah mengalami itu ya Nah untuk melakukan itu Kita harus harus menambahkan sebuah atribut ini adalah atribut yang harus kita gunakan yaitu target value nya ada 4 yang bisa kita pilih, underscore self itu untuk membuka link di halaman yang sama sedangkan underscore blank itu untuk membuka di tab baru untuk parent dan top ini gak akan saya bahas, karena ini berhubungan dengan frame kita belum belajar mengenai frame jadi dua ini dulu lah kalau kalian tidak tuliskan targetnya artinya yang dipanggil adalah underscore self Tapi kalau ingin membuka tab baru Yang dipanggil adalah underscore blank Kita coba Untuk halaman 1.html Begitu saya klik disini Saya pengennya membuka tab baru Jadi saya tambahkan disini target Underscore blank Seperti itu ya saya refresh, saya klik kalian bisa lihat dibuka di tab baru jadi cara penggunaan target dan yang terakhir bagaimana kita menghubungkan hyperlink dengan image Jadi nanti kalian bisa saja hyperlinknya itu bukan teks tapi image Nah tapi karena kita belum belajar tentang image Ini saya simpan dulu untuk video selanjutnya Jadi sampai sini dulu Terima kasih atas perhatiannya Saya Sandika Gali Sampai jumpa lagi