Bagaimana cara mengklik dan membuka gambar dalam html?

Question

Pada artikel ini, saya akan menunjukkan cara menyarangkan tautan di dalam paragraf dan cara mengubah gambar menjadi tautan menggunakan contoh kode

Table of Contents Show

Cara menyarangkan tag jangkar di dalam tag paragraf
Cara mengubah gambar menjadi tautan
Bagaimana cara melihat gambar dalam HTML?
Bagaimana cara membuka JPEG dalam HTML?
Bagaimana cara menampilkan gambar dalam HTML dengan URL?
Bagaimana cara menjadikan gambar sebagai tombol dalam HTML?

Cara menyarangkan tag jangkar di dalam tag paragraf

Jika Anda ingin menyertakan tautan di dalam paragraf Anda, maka Anda dapat menumpuk tag jangkar di dalam tag paragraf

Dalam contoh pertama ini kita memiliki teks "I love freeCodeCamp"

<p>I love freeCodeCamp</p>

Jika saya ingin mengubah kata freeCodeCamp menjadi sebuah tautan, maka saya akan membungkusnya di dalam satu set tag jangkar

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

_

Kita juga dapat menambahkan atribut

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

_2 agar tautan tersebut terbuka di tab baru

<p>I love <a target="_blank" href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

Saat Anda mengarahkan mouse ke kata freeCodeCamp, Anda akan melihat bahwa itu adalah tautan yang sekarang dapat Anda klik yang akan mengarahkan Anda ke situs web

Tautan bersarang di dalam tag paragraf berguna saat Anda ingin mengarahkan pengguna ke informasi tambahan terkait konten utama di halaman

Dalam contoh berikutnya, saya memiliki paragraf yang berbicara tentang kursus yang tersedia di freeCodeCamp

<p>I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.</p>

_

Saya ingin mengubah kata freeCodeCamp terlebih dahulu menjadi tautan untuk mengarahkan orang ke situs web

<p>I started learning how to code using  <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed  their Responsive Web Design course. I am looking forward to starting the  JavaScript course soon.</p>

Sekarang saya akan menambahkan tautan lain untuk "Kursus Desain Web Responsif" yang akan mengarahkan orang ke kurikulum berbasis proyek

<p>I started learning how to code using  <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed  their  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the JavaScript course soon.</p>

_

Terakhir, saya akan menambahkan tautan untuk kursus JavaScript, yang akan mengarahkan pengguna ke kurikulum JavaScript

<p>I started learning how to code using <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed their <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/">JavaScript course</a> soon.</p>

Seperti inilah hasil akhirnya di browser web

Cara mengubah gambar menjadi tautan

Dalam HTML, kita dapat menggunakan elemen

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

_3 untuk menambahkan gambar pada halaman. Dalam contoh ini, kami menambahkan gambar lima kucing

<img  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"  alt="Five cats looking around a field."/>

Jika kita ingin menjadikan gambar itu sebagai tautan yang dapat diklik, maka kita dapat menempatkannya di dalam sekumpulan tag jangkar

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

Kita juga dapat menambahkan atribut

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

_2 agar tautan tersebut terbuka di tab baru

<a target="_blank" href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /></a>

Saat Anda mengarahkan mouse ke atas gambar, Anda akan melihat penunjuk kursor yang menunjukkan bahwa itu adalah tautan yang mengarahkan Anda ke artikel tentang kucing

Kesimpulan

Pada artikel ini kita belajar cara menyarangkan tag jangkar di dalam paragraf dan cara mengubah gambar menjadi tautan

Untuk menambahkan tautan di dalam paragraf, kita dapat membuat tag jangkar di dalam tag paragraf

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

_

Untuk mengubah gambar menjadi tautan, kita dapat menumpuk elemen

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

5 di dalam tag jangkar

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

Saya harap Anda menikmati artikel ini dan semoga sukses dalam perjalanan pemrograman Anda

Jessica Wilkins

Saya seorang musisi dan programmer

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara melihat gambar dalam HTML?

Untuk menampilkan gambar, Anda perlu menentukan URL gambar menggunakan atribut src, mengganti url dengan nama file gambar Anda . Ada beberapa cara yang bisa dilakukan. src="gambar. jpg" - nama file jika gambar berada di direktori yang sama dengan file html.

Bagaimana cara membuka JPEG dalam HTML?

Cukup tambahkan jpg"> , image dan file html Anda harus berada di direktori yang sama. Gambar bisa berada di direktori lain. Tidak harus sama.

Bagaimana cara menampilkan gambar dalam HTML dengan URL?

Untuk menyisipkan gambar dalam HTML, gunakan tag gambar dan sertakan atribut sumber dan alt. Seperti elemen HTML lainnya, Anda akan menambahkan gambar ke bagian tubuh file HTML Anda. Elemen gambar HTML adalah "elemen kosong", artinya tidak memiliki tag penutup