Apa jadinya web tanpa ada link? Show
Kamu bisa bayangkan gak? Pengunjung harus mengetik sendiri alamat URL dari web yang ingin dia buka. Misalkan: Ia ingin membuka halaman about, maka harus mengetik:
Lalu ia ingin beralih ke halaman Contact, maka harus mengetik lagi:
Ribet! 😫 Karena itu, kita membutuhkan link. Nah, pada tutorial ini.. ..kita akan belajar cara membuat link di HTML. Mari kita mulai! Apa itu Link di HTML?Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan. Tidak hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll. Nanti kita akan bahas ini lebih dalam.. Nah! sekarang, bagaimana cara membuat link di HTML? Silahkan lanjutkan membaca: Cara Membuat Link di HTMLLink pada HTML dapa dibuat dengan tag Bentuk sederhananya seperti ini: Contoh:
Hasilnya: Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser. Tentu saja ini bisa kita ubah-ubah sesusi selera. Nanti kita akan bahas caranya ya.. Nah sekarang coba klik link tersbut! Lha! Kok erorr? Link yang kita buat ini akan membuka halaman Untuk mengatasi ini, kita harus membuat
file Isi file
Nah, sekarng mari kita coba lagi: Yap! Halaman Tapi tunggu dulu.. Mengapa alamat URL pada
atribut
Bukannya harus alamat URL lengkap yang pakai Ini karena link yang kita buat adalah internal link dan juga file Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML. Jenis-jenis Link pada HTMLBerdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:
Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain. Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain. Misalnya seperti: membuka halaman facebook, membuka chat whatsapp, membuka youtube, dan sebagainya. Intinya: Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu sendiri maka itu internal. Biar lebih jelas, mari kita coba membuatnya di HTML: 1. Contoh Internal LinkBuatlah file baru bernama
Kemudian
buat lagi file baru bernama
Terakhir, buat file
Pastikan semua file ini disimpan dalam satu folder. Setelah itu, coba buka Maka hasilnya: 2. Contoh Eksternal LinkCara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaanya terletak pada alamt URL yang diberikan. Sebagai contoh.. ini adalah eksternal link yang menuju halaman facebook:
Hasilnya: Facebook Patani Kode Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/petanikode. Contoh lain lagi: Link CTA (call to action) untuk whatsapp.
Hasilnya: Chat dengan Saya Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut eksternal link, karena ia akan membuka halaman whatsapp. Oh iya, di sana kita berikan parameter berupa nomer hp dan juga teks. Nah, biar lengkap.. kita akan coba tambahkan eksternal link pada file Silahkan
buka file
Hasilnya: Tes buka link Facebook: Tes buka link whatsapp: Sudah paham tentang eksternal link? Oke, sekarang lanjut belajar atribut: Atribut-atribut untuk LinkSelain atribut Menggunakan Atribut targetAtribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:
Contoh:
Hasilnya: Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame. Buatlah file baru bernama
Hasilnya: Menggunakan Atribut titleAtribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp. Contoh:
Hasilnya: Live Demo: Untuk lebih lengkapnya, silahkan buka: About us Cara Mengubah Warna Link di HTMLWarna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background). Caranya: Tambahkan atribut Contoh:
Hasilnya: Fungsi Menarik Lainnya dari LinkSeperti yang saya bilang sebelumnya.. link tidak hanya digunakan untuk menghubungkan halaman web saja. Ia juga bisa digunakan untuk beberapa fungsi tertentu seperti: Membuat Link BuntuLink buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja. Cara membuatnya: Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut Contoh:
Hasilnya: Perhatikan! Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL sebenarnya adalah anchor (jangkar). Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika hanya diisi pagar saja, maka ia tidak akan kemana-mana. Membuat Link AnchorLink anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor. Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar ( Contoh:
Hasilnya: Kalau kita perhatikan, di sana kita menggunakan
Sedangkan elemen
yang memiliki Mengapa link anchor ini bisa menuju ke atas? Ini karena browser sudah paham, jika ada link anchor yang menuju ke Membuat Link untuk Memanggil Fungsi JavascriptLink dapat juga digunakan untuk memanggil fungsi Javascript. Pemanggilan fungsi Javascript
biasanya dilakukan dengan atribut even seperti Contoh:
Hasilnya: Sebenarnya hampir semua elemen bisa menjalankan fungsi Javascript dengan atribut event. Nah, khusus untuk link. Dia bisa juga menjalankan fungsi Javascript melalui atribut Contoh:
Hasilnya akan sama seperti contoh sebelemnya. Membuat Link dengan GambarMembuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat mudah, kita hanya pelu membungkus tag Contoh:
Hasilnya: Semua area gambar akan menjadi link dan jika kita klik, maka akan dibawa ke halaman yang akan dituju oleh link tersebut. Membuat Link untuk Download FileLink kadang juga digunakan sebagai link untuk download file. Cara membuatnya sangat mudah, kita hanya perlu memasukan alamat URL dari file yang akan didownload. Contoh:
Hasilnya: Pada contoh di atas, kita menuliskan langsung nama filenya. Ini karena HTML Lalu, bagaimana kalau filenya berada di tempat lain? Gampang.. tinggal ganti saja URL-nya. Contoh:
Membuat Link untuk Mengirim EmailLink kadang juga digunakan untuk mengirim email. Cara membuatnya: Ubah URL tujuan dari link dengan Contoh:
Hasilnya: Jika kamu membukanya di Google Chrome, maka ia akan membuka Gmail. Tapi jika dibuka di Firefox, ia akan memilih aplikasi email yang tersedia di komputer. Apa Selanjutnya?Waah.. selain menghubungkan halaman, ternyata ada begitu banyak fungsi lain dari link. Intinya: Kamu hanya perlu mengingat cara membuat link dan jenis-jenisnya. Karena ini adalah basic yang akan terus terpakai dalam membuat web. Oke, Selanjutnya.. silahkan pelajari tentang:
Index HTML buat apa?Index. html merupakan sebuah file yang menjadi indeks dari sebuah website. File ini akan otomatis terbuka saat pengguna membuka website dengan cara memanggil nama domain website tersebut.
Bagaimana cara menggunakan HTML?Cara Membuat Halaman Web Sederhana dengan HTML. Buka editor teks. ... . Atur jenis dokumen untuk HTML. ... . Tambahkan tab judul untuk halaman web kamu. ... . Ketik di bawah tag "Head" yang tertutup. ... . Selanjutnya membuat judul halaman. ... . Tambahkan judul tambahan jika kamu mau. ... . Membuat paragraf. ... . Mengubah warna teks.. Apa yang bisa anda lakukan dengan HTML?HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.
Apa itu index php?File index. php adalah file dasar untuk mengelola tampilan website pada CodeIgniter. Secara default, file index. php akan otomatis ditambahkan ketika Anda mengakses URL website.
|