1. Apa itu link?
Link adalah sebuah koneksi dari sebuah sumber web ke sumber lainnya, itu menurut spesifikasinya dengan kata lain jika tidak ada hyperlink maka tidak akan ada juga yang disebut dengan web, jadi komponen link ini adalah komponen yang sangat penting dalam sebuah web.
Link pada html dibuat dengan menggunakan tag <a></a> atau singkatan dari anchor, jadi kenapa disebut anchor karena anchor itu yang artinya jangkar analoginya jangkar itu pasti terhubung pada kapal sama seperti hyperlink pasti terhubung kepada sumber, Bagaimana membuatnya? Mari kita buka sublime text seperti biasa kita sudah membuat folder latihan6 dan di dalamnya terdapat file halaman1.html, Didalamnya htmlnya terdapat paragraf seperti ini,
Contoh Saya mempunyai paragraf yang berisi : "Klik disini untuk mengetehaui informasi lebih lanjut". Yang nantinya Kata disini akan saya jadikan link sehingga kita bisa klik untuk terhubung ke halaman lain kita kasih <a> sebelum kata disini dan sesudanyah kita kasih</a> dan kita membutuhkan satu atribut yaitu href="",
Di dalam herf kita bisa munuliskan sumbernya nah yang kita tuliskan di dalam herf ada beberapa jenis, yaitu:
1. External link
External link atau link ke website lain kita coba kita akan terhubung ke google kita harus menuliskan http://www.google.com
Lalu kita lihat di browser klik kanan open in browser, sekarang kalaian lihat kata disini berubah menjadi warna ungu atau biru dan bergaris bawah, Apa perbedaan warna biru atau ungu kalau ungu itu berarti kita sudah pernah membuka halaman web tersebut, kalau masih belum membukanya sama selkali web browser kita warnanya akan menjadi biru terang,
Lalu saya kilk kata disini maka akan mengarah ke google kalau kita memiliki internet
2. Internal link
kita coba membuat file baru halaman2.html disini saya membuat tag <h3> seperti ini,
lalu kembali lagi ke halaman1 kita ganti hrefnya dengan file yang saya tuju halaman2.html
Kita tidak perlu menuliskan http karena kita berada di satu folder yang sama dan ini satu domain kalau kita lihat hasilnya kembali kebrowser lalu refresh lalu klik kata disini kita akan mengarah ke halaman2.
kalau kita ingin kembali ke halaman1 kita tambahkan <a> di file halaman2 seperti berikut,
herfnya kita isi halaman1.html, lalu tulisannya Back halaman 1
3. Relative url
apa maksud relative url itu contohnya begini kita masuk ke folder latihan6 lalu kita bikin satu folder lagi di dalam latihan6 dengan nama admin dan simpan file halaman2.html ke dalam folder admin.
lalu kita kembali ke browser, lalu kita klik kata disini akan terjadi error karena sekarang kalau lihat ke sublime textnya dia akan mengarah ke halaman2.html sedangkan halaman2 berada di dalam folder admin jadi supaya bisa berjalan dengan normal kita harus menambahkan nama foldernya seperti ini,
dibacanya seperti ini masuk dulu ke folder latihan6 cari folder admin lalu cari halaman2.html, sekarang halaman2 mau kembali ke halaman1 akan terjadi error juga, kenapa? karena sekarang halama2 berada difolder admin kalau saya tulis herfnya halaman1.html artinya dia akan cari di folder yang sama dan halaman1.html tidak berada di folder yang sama tapi berada di satu folder diatasnya nah untuk itu kita harus tambahkan (../) di dalam herfnya,
Ini artinya naik satu folder diatasnya lalu cari halaman1.html maka tidak akan terjadi error
4. Page anchor
Page anchor atau yang disebut bagian tertentu dari sebuah halaman jadi bukan hanya kita masuk ke sebuah halaman tapi kita akan pindah ke bagian tertentu dari sebuah halaman.
jadi saya akan kembalikan seperti semula gak ada folder admin kita, kita akan membuat file baru yang namenya halaman3.html kita beri <h1> kita akan membuat artikel sembarang contohnya seperti ini,
kalau tidak usah bingung apa itu lorem ipsum.... itu adalah kata-kata percobaan untuk melihat sebuah paragraf apakah sebuah paragraf itu akan tampil akan sepeti yang kita inginkan atau tidak nanti sublime text akan mudah untuk membuat ini, kita membat satu bagian lagi kita buat <h2>Subjudul2</h2> lalu kita buat paragraf di bawahnya kita buat tag <p> lalu kita tuliskan di tengahnya lorem lalu tekan tab
Lalu kita membuat daftar list <ul> lalu <li> kita kasih tag <a> list pertama ke subjudul1, kedua ke subjudul2 seperti ini,
kalau kita lihat hasilnya seperti ini,
Misalnya kalau kita mengeklik listpertama maka akan mengarah ke subjudul1, kalau kita klik list yang kedua maka akan mengarh ke subjudul2
Lalu apa yang kita lakukan? kita harus memberikan penanda pada tiap-tiap bagian atau anchornya yang ingin kita pindah, lalu untuk <h2> kita beri id="", seperti berikut,
Lalu kita isi href list tersebut dengan [#(id)] seperti berikut,
Kita coba lihat hasilnya kalau kita klik list pertama akan,
kalau kita klik list kedua akan,
Jadi itu adalah hyperlink yang di miliki html kalian bisa coba-coba kalian bisa bereksperimen.
Sekian bersama saya lumbungweb disini kita bisa belajar coding tak perlu khawatir sedikit-sedikit yang penting bisa buat website. Kalau kalian ingin mempunyai web tapi tidak tahu ngoding tak perlu susah kalian bisa kunjungi Sepsialis Web
Di dalam herf kita bisa munuliskan sumbernya nah yang kita tuliskan di dalam herf ada beberapa jenis, yaitu:
1. External link
External link atau link ke website lain kita coba kita akan terhubung ke google kita harus menuliskan http://www.google.com
Lalu saya kilk kata disini maka akan mengarah ke google kalau kita memiliki internet
2. Internal link
kita coba membuat file baru halaman2.html disini saya membuat tag <h3> seperti ini,
Kita tidak perlu menuliskan http karena kita berada di satu folder yang sama dan ini satu domain kalau kita lihat hasilnya kembali kebrowser lalu refresh lalu klik kata disini kita akan mengarah ke halaman2.
kalau kita ingin kembali ke halaman1 kita tambahkan <a> di file halaman2 seperti berikut,
3. Relative url
apa maksud relative url itu contohnya begini kita masuk ke folder latihan6 lalu kita bikin satu folder lagi di dalam latihan6 dengan nama admin dan simpan file halaman2.html ke dalam folder admin.
lalu kita kembali ke browser, lalu kita klik kata disini akan terjadi error karena sekarang kalau lihat ke sublime textnya dia akan mengarah ke halaman2.html sedangkan halaman2 berada di dalam folder admin jadi supaya bisa berjalan dengan normal kita harus menambahkan nama foldernya seperti ini,
dibacanya seperti ini masuk dulu ke folder latihan6 cari folder admin lalu cari halaman2.html, sekarang halaman2 mau kembali ke halaman1 akan terjadi error juga, kenapa? karena sekarang halama2 berada difolder admin kalau saya tulis herfnya halaman1.html artinya dia akan cari di folder yang sama dan halaman1.html tidak berada di folder yang sama tapi berada di satu folder diatasnya nah untuk itu kita harus tambahkan (../) di dalam herfnya,
4. Page anchor
Page anchor atau yang disebut bagian tertentu dari sebuah halaman jadi bukan hanya kita masuk ke sebuah halaman tapi kita akan pindah ke bagian tertentu dari sebuah halaman.
jadi saya akan kembalikan seperti semula gak ada folder admin kita, kita akan membuat file baru yang namenya halaman3.html kita beri <h1> kita akan membuat artikel sembarang contohnya seperti ini,
kalau tidak usah bingung apa itu lorem ipsum.... itu adalah kata-kata percobaan untuk melihat sebuah paragraf apakah sebuah paragraf itu akan tampil akan sepeti yang kita inginkan atau tidak nanti sublime text akan mudah untuk membuat ini, kita membat satu bagian lagi kita buat <h2>Subjudul2</h2> lalu kita buat paragraf di bawahnya kita buat tag <p> lalu kita tuliskan di tengahnya lorem lalu tekan tab
Lalu kita membuat daftar list <ul> lalu <li> kita kasih tag <a> list pertama ke subjudul1, kedua ke subjudul2 seperti ini,
kalau kita lihat hasilnya seperti ini,
Misalnya kalau kita mengeklik listpertama maka akan mengarah ke subjudul1, kalau kita klik list yang kedua maka akan mengarh ke subjudul2
Lalu apa yang kita lakukan? kita harus memberikan penanda pada tiap-tiap bagian atau anchornya yang ingin kita pindah, lalu untuk <h2> kita beri id="", seperti berikut,
Lalu kita isi href list tersebut dengan [#(id)] seperti berikut,
Kita coba lihat hasilnya kalau kita klik list pertama akan,
kalau kita klik list kedua akan,
Jadi itu adalah hyperlink yang di miliki html kalian bisa coba-coba kalian bisa bereksperimen.
Sekian bersama saya lumbungweb disini kita bisa belajar coding tak perlu khawatir sedikit-sedikit yang penting bisa buat website. Kalau kalian ingin mempunyai web tapi tidak tahu ngoding tak perlu susah kalian bisa kunjungi Sepsialis Web
~♧Semoga membantu kalian semua :) ♧~
Hello, my name is Heri. I'm a 18 year old. 
0 komentar:
Posting Komentar