Situs web tidak seperti media komunikasi apa pun yang datang sebelum mereka. Salah satu hal utama yang membuat situs web berbeda dari format media sebelumnya seperti cetak, radio, dan bahkan televisi adalah konsep " hyperlink ".
Hyperlink, yang juga biasa dikenal sebagai "tautan", adalah apa yang membuat Web begitu dinamis. Tidak seperti publikasi tercetak yang dapat merujuk artikel lain atau sumber lain, situs web dapat menggunakan tautan ini untuk benar-benar mengirim pengunjung ke laman dan sumber daya lain tersebut. Tidak ada media penyiaran lain yang bisa melakukan ini. Anda dapat mendengar iklan di radio atau tampilan di TV, tetapi tidak ada hyperlink yang dapat membawa Anda ke perusahaan di iklan tersebut dengan cara yang mudah dilakukan oleh situs web. Tautan adalah alat komunikasi dan interaksi yang luar biasa!
Seringkali, tautan yang ditemukan di situs web adalah konten teks yang mengarahkan pengunjung ke laman lain dari situs yang sama. Navigasi situs web adalah salah satu contoh tautan teks dalam praktik tetapi tautan tidak perlu berbasis teks. Anda juga dapat dengan mudah menautkan gambar di situs web Anda. Mari kita lihat bagaimana hal ini dilakukan, diikuti oleh beberapa contoh di mana Anda ingin menggunakan hyperlink berbasis gambar.
Cara Menghubungkan Gambar
Hal pertama yang perlu Anda lakukan adalah menempatkan gambar itu sendiri di dokumen HTML Anda. Penggunaan umum tautan berbasis gambar adalah grafik logo situs yang kemudian ditautkan kembali ke beranda situs. Dalam kode contoh kami di bawah ini, file yang kami gunakan adalah SVG untuk logo kami. Ini adalah pilihan yang baik karena memungkinkan gambar kami diskalakan untuk resolusi yang berbeda, sambil mempertahankan kualitas gambar dan ukuran file keseluruhan kecil.
Begini cara Anda menempatkan gambar Anda di dokumen HTML:
Di sekitar tag gambar, Anda sekarang akan menambahkan tautan tautan, membuka elemen tautan sebelum gambar dan menutup jangkar setelah gambar. Ini mirip dengan bagaimana Anda akan menautkan teks, hanya alih-alih membungkus kata yang ingin Anda jadikan tautan dengan tag anchor, Anda membungkus gambar. Dalam contoh kami di bawah ini, kami menautkan kembali ke beranda situs kami, yang merupakan "index.html".
Saat menambahkan HTML ini ke halaman Anda, jangan taruh spasi di antara tag anchor dan tag gambar. Jika Anda melakukannya, beberapa browser akan menambahkan sedikit tanda centang di samping gambar, yang akan terlihat aneh.
Gambar logo sekarang juga akan bertindak sebagai tombol homepage, yang cukup banyak standar web hari ini. Perhatikan bahwa kami tidak menyertakan gaya visual apa pun, seperti lebar dan tinggi gambar, di markup HTML kami. Kami akan membiarkan gaya visual ini ke CSS dan menjaga pemisahan struktur HTML dan gaya CSS yang bersih.
Setelah Anda mendapatkan CSS, gaya yang Anda tulis untuk menargetkan grafik logo ini dapat mencakup ukuran gambar, termasuk gaya responsif untuk gambar ramah multi-perangkat serta visual apa pun yang ingin Anda tambahkan ke gambar / tautan, seperti perbatasan atau CSS jatuhkan bayangan. Anda juga dapat memberikan gambar atau menautkan atribut kelas jika Anda membutuhkan "kait" tambahan untuk digunakan dengan gaya CSS Anda.
Gunakan Kasus untuk Tautan Gambar
Jadi menambahkan tautan gambar cukup mudah. Seperti yang baru saja kita lihat, yang harus Anda lakukan hanyalah membungkus gambar dengan label anchor yang sesuai. Pertanyaan Anda berikutnya mungkin adalah "kapan Anda benar-benar melakukan ini dalam praktik di samping contoh tautan logo / homepage yang disebutkan di atas?"
Berikut beberapa pemikiran:
- Gambar thumbnail di galeri yang menautkan ke versi lebih besar dari gambar tersebut.
- Gambar yang digunakan sendiri untuk mewakili konten, seperti foto produk untuk situs web e-commerce.
- Gambar pemikat yang merupakan bagian dari konten lain, seperti artikel blog atau siaran pers, yang memikat orang untuk memperhatikan bahwa konten memberi mereka area target untuk diketuk atau klik untuk membaca artikel lengkap.
- Ikon gambar yang digunakan sebagai tombol untuk terhubung ke fungsi atau halaman tertentu di dalam situs.
- Tautan media sosial yang menggunakan logo yang dapat dikenali dari berbagai situs media sosial yang penting bagi situs atau perusahaan tersebut.
- Gambar digunakan sebagai tombol untuk fungsi tertentu, seperti pengiriman formulir (catatan praktik terbaik - dari perspektif kinerja situs web, tombol yang ditata murni dengan CSS adalah pilihan yang lebih baik daripada tombol gambar).
Pengingat Saat Menggunakan Gambar
Gambar dapat memainkan peran penting dalam kesuksesan situs web. Salah satu contoh yang disebutkan di atas menggunakan gambar di samping konten lain untuk menarik perhatian pada konten tersebut dan membuat orang-orang membacanya.
Saat menggunakan gambar, Anda harus berhati-hati dalam memilih gambar yang tepat untuk kebutuhan Anda , ini termasuk subjek gambar yang benar, format, dan juga memastikan bahwa setiap gambar yang Anda gunakan di situs web Anda dioptimalkan dengan tepat untuk pengiriman situs web . Ini mungkin tampak seperti banyak pekerjaan hanya untuk menambahkan gambar, tetapi hasilnya sangat berharga! Gambar benar-benar dapat menambahkan begitu banyak kesuksesan situs.
Jangan ragu-ragu untuk menggunakan gambar yang sesuai di situs Anda, dan tautkan gambar-gambar tersebut ketika diperlukan untuk menambahkan beberapa konten interaktif ke Anda, tetapi juga perhatikan praktik terbaik gambar ini dan gunakan grafik / tautan ini dengan benar dan bertanggung jawab dalam pekerjaan desain web Anda.