Pautan Imej dalam HTML

Pautan Imej Dalam HTML terdapat dalam hampir semua halaman kerana ia membantu kami menavigasi dari satu halaman ke halaman yang lain di tapak web. Gabungan yang popular ialah menggunakan teg sauh HTML dengan teg img HTML . Dengan gabungan ini, kami boleh membenarkan pergerakan pengguna dari satu halaman ke halaman lain dengan mengklik pada imej. Sebelum kita mendalami topik ini dengan lebih lanjut, mari kita fahami cara kerja dan pemaparan elemen utama dan imej secara individu dan kemudian menggabungkannya untuk mencapai imej terpaut.

Tag Sauh HTML

Teg HTML Anchor digunakan untuk membuat hiperpautan HTML ke halaman web lain atau kandungan multimedia yang dihoskan di web. Mari rujuk sintaks di bawah untuk memahami cara tag anchor berfungsi dan atribut asasnya

Klik di sini!!

Dalam contoh di atas, atribut "href" menentukan URL halaman web yang kami ingin ubah hala pengguna sambil mengklik pada teks "Klik di sini!!".

Mari kita lihat kod lengkap di bawah :

Output 

–>

Dengan contoh di atas, anda akan dapat membuat pemerhatian berikut

1. Pautan yang tidak dilawati akan kelihatan bergaris bawah dan dalam warna biru. Untuk, cth. Ini adalah Pautan yang belum dilawati
2. Pautan yang dilawati akan kelihatan bergaris bawah dan dalam warna ungu. Untuk, cth. Ini ialah Pautan yang telah dilawati
3. Pautan aktif kelihatan bergaris bawah dan dalam warna merah. Untuk, cth. Ini adalah Pautan aktif

Tag Imej HTML

Semasa melayari internet, saya pasti anda pernah terjumpa beberapa halaman web yang mempunyai pelbagai bentuk multimedia yang disertakan di dalamnya. Terutamanya imej adalah satu bentuk multimedia yang popular yang boleh didapati di hampir semua halaman web dan laman web interaktif hari ini. Marilah kita memahami teg imej dan pelaksanaannya dalam HTML dengan contoh di bawah:

Sintaks

<img src="/static/imghwm/default1.png" data-src="smiley.gif" class="lazy" alt="Smiley face"    style="max-width:90%"  style="max-width:90%">

Mari kita fahami cara setiap atribut dalam teg img berfungsi:

1. src: Atribut src mentakrifkan laluan fail imej yang kami cuba muatkan dengan teg ini. Ia boleh dipautkan kepada imej yang dihoskan di web dengan format seperti example.com/images/dummy.png atau fail imej yang dihoskan secara setempat pada pelayan yang sama dengan halaman web.
2. alt: Atribut alt mentakrifkan teks dan perihalan imej yang ingin kami paparkan sekiranya imej gagal dimuatkan disebabkan sambungan rangkaian atau sebarang isu lain.
3. Lebar dan tinggi: Lebar dan tinggi kedua-dua atribut menentukan lebar dan tinggi imej yang ingin kami paparkan pada halaman web. Jika tidak, imej akan berfungsi dengan ketinggian dan lebar 100% secara lalai.

Sekarang mari kita lihat kod HTML lengkap yang diperlukan untuk memuatkan imej pada halaman web. Simpan imej berikut dengan nama "sunset.png" dalam folder yang dipanggil "image_test" dalam pemacu setempat anda.

Kini dalam folder yang sama, mari buat fail HTML bernama sunset.html dengan kod HTML berikut :

Sekarang pergi ke penyemak imbas pada mesin anda dan taip laluan fail .html. Fail saya disimpan dalam pemacu D, jadi laluan untuk saya ialah

D:/image_test/sunset.html

Dan kini kami dapat melihat bahawa halaman HTML yang diberikan telah memuatkan imej matahari terbenam pada penyemak imbas kami. Dengan bantuan CSS dan

tag, kami juga boleh memaparkan teks mengikut keperluan kami di sekeliling imej. Kedua-dua teg anchor dan img serasi dengan semua penyemak imbas seperti Google Chrome, Safari, Microsoft Edge, Firefox dan Internet Explorer.

Imej Terpaut dalam HTML

Sekarang kita telah memahami dengan contoh cara teg sauh dan teg imej berfungsi secara individu, marilah kita memahami cara kita boleh menggabungkan kedua-dua fungsi untuk mencapai senario di mana kami ingin pengguna dialihkan ke halaman web baharu dengan klik sesuatu imej. Untuk menjadikan imej boleh diklik dan mengubah hala pengguna ke halaman web lain, kami hanya perlu menyarangkan imej dalam teg sauh. Dalam contoh di bawah, kami akan cuba untuk mendapatkan 3 enjin carian web teratas yang digunakan di seluruh dunia. Dalam senarai kami, kami akan menunjukkan logo 3 enjin carian, dan dengan mengklik mana-mana logo, pengguna akan dialihkan ke halaman enjin carian masing-masing. Mari kita cipta folder bernama "ujian ubah hala", dan dalam folder yang sama, mari simpan imej di bawah

1. Google

2. Yahoo

3. Bing

Kini kami akan mencipta .html dengan nama imageredirection.html dalam fail yang sama. imageredirection.html akan mengandungi kod berikut.

Sekarang kita perlu mengakses halaman HTML dari penyemak imbas, yang mana saya akan menaip laluan tempatan saya "D:/redirectiontest/ imageredirection.html". penyemak imbas kemudiannya akan memaparkan fail HTML untuk menjana hasil berikut:

–>

Pengguna akan dapat menavigasi ke enjin carian masing-masing dengan mengklik logo mereka. Daripada contoh di atas, kita dapat melihat bahawa HTML ialah bahasa yang mudah dan fleksibel yang membolehkan kita menggabungkan berbilang tag bersama-sama dan mencapai fungsi yang kompleks seperti ini. Gabungan menggunakan teg img dan anchor ialah gabungan yang popular.Dengan pengekodan HTML tambahan, kami juga boleh menambah elemen HTML yang berbeza seperti memaparkan imej terpaut dalam senarai tersusun atau tidak tersusun menggunakan

atau

. Fleksibiliti dan kesederhanaan melampau yang disediakan HTML dengan setiap versi yang dikeluarkan membantu pereka UI dan UX mereka bentuk halaman web interaktif dan intuitif yang kami lihat semasa menyemak imbas internet untuk aktiviti seharian.

Artikel Disyorkan

Ini telah menjadi panduan kepada Pautan Imej dalam HTML. Di sini kita membincangkan Pelbagai Jenis Tag HTML Bersama-sama dengan Sintaks. Anda juga boleh membaca artikel cadangan kami yang lain untuk mengetahui lebih lanjut –

1. Atribut HTML
2. Teg Format HTML
3. Teg Imej HTML
4. Bingkai HTML

Atas ialah kandungan terperinci Pautan Imej dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!