Sepanjang kursus ini, kita masih membahas hanya bagian Markup Language dari HTML. Pada kesempatan ini kita akan membahas mengenai Hypertext-nya. Hypertext adalah tulisan pada dokumen HTML yang apabila kita klik, akan mengantarkan kita ke dokumen lainnya. Karena fungsinya adalah untuk menghubungkan antar dokumen, hypertext ini dikenal juga dengan nama hyperlink, atau lebih singkat disebut link saja.

Untuk membuat link, kita menggunakan tag anchor. Bisa dilihat contohnya seperti di layar. Elemen yang kita gunakan adalah huruf a, singkatan dari Anchor. Sedangkan Attribute yang harus kita gunakan adalah href, yang kita isikan dengan URL atau alamat dokumen yang akan dituju apabila link tersebut diklik oleh pengguna. Pada contoh ini kita menggunakan absolute URL, yaitu alamat dokumen yang kita tulis secara lengkap. URL mesti kita tuliskan lengkap dengan protokol yang digunakan yaitu http atau https. Perbedaan http dengan https adalah https menggunakan protokol tambahan secure, semua komunikasi antara browser dan server akan menggunakan enkripsi, sehingga lebih susah untuk diretas oleh pihak luar.

Baik protokol http maupun protokol https akan diikuti dengan tanda titik dua, dan dua buah garis miring. Setelah itu barulah diikuti dengan nama domain. Dalam contoh ini domain yang hendak kita akses adalah developer.mozilla.org.

Yang diapit oleh anchor tag akan menjadi hypertext, yaitu text yang kalau kita klik akan mengantarkan kita ke alamat yang dituliskan dalam attribute href. Dalam contoh ini hypertextnya adalah Mozilla Developer Network.

Sekarang kita kembali ke kode HTML kita untuk praktek cara membuat link. Kita menggunakan file Alice dari latihan pertama kita. Tambahkan paragraph baru dibawah tag HR. Lalu kita tambahkan konten Klik Disini untuk Menuju ke Situs. Dan kita tambahkan tag Anchor. Nah, untuk mengisikan absolute URL, apabila kita menghafalkan alamatnya kita bisa mengetikan langsung di dalam href.

Namun apabila belum hafal, kita bisa mengambil URL dari browser. Misalkan ke cari di Google dengan kata kunci MDN. Lalu di hasil pencariannya, kita bisa klik kanan pada MDN Web Documents dan pilih Copy Link Address. Hasilnya bisa kita paste ke dalam href. Atau bisa juga dengan cara kita klik dahulu link pada hasil pencarian Google sehingga browser menuju ke halaman MDN. Lalu kita klik ke URL di bagian atas browser dan menekan tombol Ctrl+C. Kita bisa paste ke kode HTML, hasilnya tetap sama ya.

Kemudian di dalam tag Anchor, kita masukan hypertext, misalnya Mozilla Developer Network. Kita lihat hasilnya di browser. Sekarang kita sudah memiliki sebuah link, dengan tulisan Mozilla Developer Network. Bisa kita lihat warna tulisan link secara otomatis berubah menjadi warna biru atau ungu, disertai dengan garis bawah. Warna biru berarti link tersebut masih belum pernah kita kunjungi sebelumnya, sedangkan warna ungu berarti link sudah pernah kita kunjungi. Dalam contoh ini warna link adalah ungu karena kita sudah pernah mengunjungi situs MDN. Dan apabila link tersebut kita klik, maka browser akan membawa kita ke situs MDN.

Bisa diperhatikan disini bahwa yang menjadi Hypertext hanya tulisan Mozilla Developer Network saja, sedangkan kalimat awalnya Klik Disini tidak bisa diklik. Apabila kita ingin agar seluruh kalimat menjadi link, maka kita bisa memindahkan tag pembuka anchor menjadi ke awal kalimat seperti ini. Sekarang seluruh kalimat sudah menjadi link.

Selanjutnya kita akan mempelajari mengenai cara membuat link menggunakan relative URL. Yang pertama kali harus kita perhatikan adalah current folder atau current directory yang sedang diakses oleh browser. Hal ini bisa kita lihat dari URL yang berada dibagian atas browser. Kebetulan sistem yang sedang saya gunakan adalah Windows. Bagi yang sedang menggunakan MacOS, Linux atau sistem operasi lainnya, maka struktur directorynya akan berbeda. Namun konsep dari relative URL ini tetap sama ya, kita tetap memperhatikan current folder atau current directory yang sedang diakses oleh browser. Dari URL, kita bisa melihat bahwa browser saya sedang mengakses drive D, dan kemudian nama foldernya adalah LatihanHTML.

Sekarang saya buka Windows Explorer dan melihat isi dari folder LatihanHTML. Kita bisa lihat isinya ada folder gambar, file alice.html yang sedang kita akses sekarang, dan file special.html dari pelajaran sebelumnya. Kita akan membuat link untuk menuju ke special.html.

Kita buat paragraph baru lagi. Dan kita buat tag anchor. Kali ini isi dari attribute hrefnya lebih sederhana, yaitu kita cukup hanya menyebutkan nama filenya saja special.html. Dan untuk hypertextnya kita isikan dengan Halaman Spesial. Kita lihat hasilnya. Disini browser sudah ada link kedua, yang kalau kita klik akan membawa kita ke halaman special.

Sekarang kita buka kode special.html. Dan dibawah gambar, kita tambahkan paragraph baru yang isinya link untuk kembali ke alice.html. Kita tes di browser. Sekarang kita sudah bisa berpindah bolak balik dari halaman Alice ke halaman Special.

Perlu diingat disini bahwa kita berhasil membuat link antara halaman Alice dan Special karena keduanya berada pada folder yang sama, yaitu folder LatihanHTML. Sekarang kita buka folder tersebut, dan kita pindahkan file special.html ke dalam folder gambar. Dan kita coba di browser. Sekarang link sudah tidak bisa menuju ke halama special lagi. Karena kita lihat pada URL, browser mencari file special.html pada foler LatihanHTML, sedangkan file tersebut sudah kita pindahkan ke folder gambar.

Untuk memperbaiki link ini, maka kita menuju ke kode alice.html. Lalu di dalam attribute href, kita tambahkan folder gambar, dan diikuti dengan garis miring. Dan kita coba kembali di browser. Link sudah berhasil menuju ke halaman special. Kita bisa lihat dari URL browser, bahwa browser mencari halaman special pada drive D, folder LatihanHTML, diikuti lagi folder gambar.

Namun kalau kita perhatikan lagi, halaman spesial ini ada yang berubah ya. Yang pertama gambarnya sudah tidak muncul. Dan kemudian link untuk kembali ke halaman Alice sudah tidak bisa digunakan. Kalau kita klik ke link tersebut, maka kita bisa melihat bahwa browser mencari halaman Alice pada folder gambar, sedangkan halaman Alice berada pada folder LatihanHTML yang merupakan parent dari folder Gambar.

Untuk memperbaikinya, kita kembali ke kode special. Kita harus tutup dahulu kode special yang sudah terbuka di Atom kita, karena kode ini masih merujuk ke folder LatihanHTML. Kita buka folder Gambar dari Windows Explorer. Dan kita buka file special.html menggunakan Atom. Pertama kita perbaiki dahulu bagian link. Berhubung halaman Alice berada pada folder parent, maka kita tambahkan folder parent di sebelum nama filenya. Di dalam sistem, folder parent dilambangkan dengan dua buah titik. Jadi kita tambahkan dua buah titik, diikuti dengan garis miring, setelah itu barulah nama file alice.html.

Sedangkan untuk tag image, kita lihat bahwa browser diminta untuk mencari gambar di dalam folder gambar. Sedangkan sekarang kita sedang berada di dalam folder gambar. Oleh karena itu, untuk memperbaikinya kita tinggal menghapus nama foldernya. Kita refresh kembali browser. Dan sekarang kedua link sudah berfungsi dengan benar.

Kita juga bisa menggunakan List seperti yang kita pelajari sebelumnya untuk menampilkan link. Sebagai contoh kita buka kembali kode Alice.html. Setelah tag HR, kita tambahkan Header 3 dengan konten Daftar Link.

Lalu kita buat UL. Dan masing-masing paragraph link yang kita buat tadi kita ganti menjadi List Item. Dan begini hasilnya di browser.

Selanjutnya kita akan belajar cara membuat link ke elemen pada halaman yang sama. Kita lihat konten dari halaman Alice ini terdiri dari 4 buah paragraph ya. Nah, kita akan menambahkan link untuk menuju ke paragraph pertama, kedua, ketiga dan keempat.

Caranya bagaimana? Pertama kita tambahkan dahulu List Item baru. Lalu kita buat tag anchor, dan href kita isikan dengan hash paragraph1. Dan sebagai kontennya kita isikan dengan Paragraph Pertama.

Kemudian kita pergi menuju tag P pada paragraph pertama. Dan kita tambahkan satu buah attribute baru yaitu ID. Isi dari ID ini harus sama persis dengan isi dari attribute href pada tag anchor yang barusan kita buat, yaitu paragraph1, tanpa tanda hash ya. Jadi nantinya kalau link Paragraph Pertama diklik, maka browser akan membawa kita ke paragraph pertama. Agar hasil dari link ini dapat lebih kelihatan, kita tambahkan dahulu jarak antar kontennya ya. Jadi setelah list Daftar Link, kita tambahkan dahulu tag BR sebanyak 10 buah. Dan kemudian kita copy juga di setiap akhir paragraph.

Kita lihat hasilnya di browser. Link paragraph pertama masih berwarna biru ya, karena link ini masih belum pernah kita klik. Sekarang kita coba klik. Dan browser pun akan menggeser konten, hingga bagian paragraph pertama berada langsung di bagian paling atas layar. Kita bisa lihat bahwa terjadi perubahan pada URL browser, yang tadinya hanya sampai ke alice.html, sekarang sudah ditambahkan lagi hash paragraph1.

Nah, sekarang tugas untuk pelajaran ini. Coba Anda tambahkan link untuk ke paragraph kedua, ketiga dan keempat. Pause dahulu video ini dan silahkan mencoba terlebih dahulu. Nanti saya akan kembali untuk menjelaskan solusinya.

Oke, kita akan membahas mengenai cara menambahkan link untuk ke paragraph kedua, ketiga dan keempat.

Pertama kita copy dahulu list item Paragraph Pertama, dan kita paste ke bagian bawahnya sebanyak 3 kali. Lalu kita ubah isi hash dan hypertextnya menjadi paragraph kedua, ketiga dan keempat.

Lalu kita pergi menuju paragraph kedua dan tambahkan attribute ID=”paragraph2”. Dan kita lakukan hal yang sama untuk paragraph berikutnya.

Kita coba hasilnya di browser. Sudah berfungsi dengan benar ya.

Selanjutnya pada bagian paling bawah konten, kita akan tambahkan link Kembali ke Atas. Kita kembali ke kode HTML dan menuju ke bagian sebelum tag penutup body. Kita tambahkan paragraph, tag anchor, dan isi dari href kita biarkan hanya tanda hash saja. Artinya kalau link ini diklik, maka browser akan kembali ke bagian paling atas dari halaman ini. Kita tambahkan hypertext Kembali ke Atas. Jadi kalau kita cobakan di browser dan kita menuju ke paling bawah, maka ada link untuk Kembali ke Atas.

Link pada tag Anchor juga bisa kita gunakan untuk mengirimkan email. Sebagai contoh, kita tambahkan list item baru. Dan kemudian kita buat tag anchor baru. Protokol yang digunakan untuk email adalah mailto, diikuti dengan tanda titik dua, dan alamat email kita. Sebagai contoh saya tuliskan mailto:david@skysensolution.com. Dan sebagai hypertextnya saya tuliskan Email Saya.

Kita lihat hasilnya ya. Kita coba klik link Email Saya. Maka browser akan membuka email client yang digunakan pada komputer ini, dan langsung menambahkan email baru dengan alamat tujuan david@skysensolution.com. Bisa dilihat disini, kebetulan komputer saya menggunakan Outlook. Jadi browser akan secara otomatis membukakan alamat ini, dan bisa kita lihat pada bagian To sudah secara otomatis ditambahkan alamat tujuan email.

Dan yang terakhir kita bahas dalam video ini adalah cara membuat link untuk chat melalui Whatsapp. Caranya tetap sama seperti cara menambahkan tag anchor sebelumnya. Hanya saja protokol yang digunakan adalah https://wa.me/ diikuti dengan nomor Whatsapp kita. Sebagai contoh kita tambahkan List Item baru, dan kita buat link untuk Whatsapp ke nomor 6282298887793. Ingat ya, bagian paling depan dari nomor telepon adalah kode negaranya, dan kode negara Indonesia adalah 62. Dan apabila link ini diklik, maka browser akan membuka aplikasi WhatsApp dan membuka halaman chatting dengan nomor tersebut.

Ada contoh penggunaan tertentu yang menginginkan agar link dibuka pada tab baru, agar pengguna tidak meninggalkan halaman yang sekarang. Untuk membuat link seperti ini, kita tinggal menambahkan attribute target=”_blank”. Kita coba tambahkan attribute ini pada link MDN. Dan kita coba hasilnya. Bisa kita lihat disini bahwa browser akan membuka link tersebut pada tab baru. Sedangkan tab halaman Alice masih tetap ada, sehingga masih bisa diakses oleh pengguna.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.