Laman web tidak seperti mana-mana media komunikasi yang datang di hadapan mereka. Salah satu perkara utama yang menetapkan laman web selain daripada format media terdahulu seperti cetak, radio, dan juga televisyen adalah konsep " hyperlink ".
Hyperlink, juga biasanya dikenali sebagai "pautan", adalah apa yang menjadikan Web begitu dinamik. Tidak seperti penerbitan bercetak yang boleh merujuk artikel lain atau sumber lain, laman web boleh menggunakan pautan ini untuk benar-benar menghantar pengunjung ke halaman dan sumber lain. Tiada medium siaran lain boleh melakukan ini. Anda boleh mendengar iklan di radio atau melihat di TV, tetapi tidak ada hiperpautan yang boleh membawa anda ke syarikat dalam iklan tersebut dengan cara yang mudah dilakukan oleh tapak web. Pautan benar adalah alat komunikasi dan interaksi yang menakjubkan!
Sering kali, pautan yang terdapat di laman web adalah kandungan teks yang mengarahkan pelawat ke halaman lain laman web yang sama. Navigasi laman web adalah satu contoh pautan teks dalam praktik tetapi pautan tidak perlu berasaskan teks. Anda juga boleh dengan mudah menghubungkan imej di laman web anda. Mari lihat bagaimana ini dilakukan, diikuti oleh beberapa contoh di mana anda ingin menggunakan hiperpautan berasaskan imej.
Cara Pautan Imej
Perkara pertama yang perlu anda lakukan ialah meletakkan imej itu sendiri dalam dokumen HTML anda. Penggunaan umum dari pautan berasaskan imej ialah grafik grafik tapak yang kemudiannya dipautkan kembali ke laman utama laman web. Dalam kod contoh kami di bawah, fail yang kami gunakan ialah SVG untuk logo kami. Ini adalah pilihan yang baik kerana ia akan membolehkan imej kami skala untuk resolusi yang berbeza, sambil mengekalkan kualiti imej dan saiz fail keseluruhan yang kecil.
Inilah caranya anda meletakkan imej anda dalam dokumen HTML:
Sekitar tag imej, anda kini akan menambah pautan utama, membuka elemen utama sebelum imej dan menutup jangkar selepas imej. Ini sama dengan cara anda menghubungkan teks, bukan hanya membungkus kata-kata yang anda ingin menjadi pautan dengan tag anchor, anda membungkus imej. Dalam contoh di bawah, kami menghubungkan kembali ke laman utama tapak kami, iaitu "index.html".
Apabila menambah HTML ini ke halaman anda, jangan letakkan sebarang ruang antara tag anchor dan tag imej. Jika anda melakukannya, sesetengah pelayar akan menambah sedikit tanda kutip di sebelah imej, yang akan kelihatan ganjil.
Imej logo sekarang juga akan berfungsi sebagai butang laman utama, yang merupakan standard laman web hari ini. Perhatikan bahawa kami tidak memasukkan sebarang gaya visual, seperti lebar dan ketinggian imej, dalam markup HTML kami. Kami akan meninggalkan gaya visual ini ke CSS dan mengekalkan pemisahan bersih struktur HTML dan gaya CSS.
Sebaik sahaja anda sampai ke CSS, gaya yang anda tulis untuk menargetkan grafik grafik ini boleh termasuk saiz gambar, termasuk gaya responsif untuk imej mesra berbilang peranti serta sebarang visual yang anda ingin tambahkan ke imej / pautan, seperti sempadan atau CSS turun bayang-bayang. Anda juga boleh memberi imej atau pautan kepada atribut kelas jika anda memerlukan tambahan "cangkuk" untuk digunakan dengan gaya CSS anda.
Gunakan Kes untuk Pautan Imej
Jadi menambah pautan imej cukup mudah. Seperti yang baru kita lihat, semua yang perlu anda lakukan ialah membungkus imej dengan tag anjung yang sesuai. Soalan seterusnya anda mungkin "apabila anda benar-benar melakukannya dalam amalan selain contoh pautan logo / laman utama yang disebutkan di atas?"
Berikut adalah beberapa pemikiran:
- Imej-imej kecil di galeri yang menghubungkan ke versi lebih besar imej-imej tersebut.
- Imej yang digunakan bersendirian untuk mewakili kandungan, seperti gambar produk untuk laman web e-dagang.
- Imej penggoda yang merupakan sebahagian daripada kandungan lain, seperti artikel blog atau siaran akhbar, yang menarik minat orang untuk melihat bahawa kandungan memberi mereka kawasan sasaran untuk mengetuk atau mengklik untuk membaca artikel penuh.
- Imej ikon yang digunakan sebagai butang untuk menyambung ke fungsi atau halaman tertentu dalam laman web ini.
- Pautan media sosial yang menggunakan logo dikenali dari pelbagai laman media sosial yang penting untuk laman web atau syarikat itu.
- Imej yang digunakan sebagai butang untuk fungsi tertentu, seperti penyerahan borang (nota amalan terbaik - dari perspektif prestasi laman web, butang yang dipakai semata-mata dengan CSS adalah pilihan yang lebih baik daripada butang imej).
Peringatan Apabila Menggunakan Imej
Imej boleh memainkan peranan penting dalam kejayaan laman web. Salah satu contoh yang diberikan di atas disebut menggunakan imej bersama kandungan lain untuk menarik perhatian kandungan itu dan membuat orang membacanya.
Apabila menggunakan imej, anda mesti berhati-hati untuk memilih imej yang sesuai untuk keperluan anda , ini termasuk perkara subjek imej yang betul, format, dan juga memastikan bahawa mana-mana imej yang anda gunakan di laman web anda betul dioptimumkan untuk penghantaran laman web . Ini mungkin kelihatan seperti banyak kerja hanya untuk menambah imej, tetapi hasilnya bernilai! Imej benar-benar boleh menambah banyak kejayaan tapak.
Jangan teragak-agak untuk menggunakan imej yang sesuai di laman web anda, dan hubungkan imej tersebut apabila perlu menambahkan beberapa interaktif ke kandungan anda, tetapi juga berhati-hati dengan amalan terbaik imej ini dan gunakan grafik / pautan ini dengan betul dan bertanggungjawab dalam kerja reka bentuk web anda.