Thêm liên kết vào hình ảnh html

Trong bài viết này, chúng ta sẽ xem cách biến hình ảnh HTML thành liên kết trang web trong HTML. Thuộc tính type HTML được sử dụng để tạo siêu liên kết đến các trang web, tệp, vị trí trên cùng một trang. Chúng ta có thể biến các phần tử như hình ảnh thành các liên kết bằng cách lồng chúng vào một phần tử . Nó định nghĩa một siêu liên kết được sử dụng để liên kết từ trang này sang trang khác. Nếu thẻ không có thuộc tính href thì nó sẽ chỉ là phần giữ chỗ cho siêu liên kết.

HTML là một ngôn ngữ được sử dụng trong thiết kế và phát triển web. Bằng cách sử dụng duy nhất html, chúng ta có thể tạo các trang web tĩnh. Việc căn chỉnh và thiết kế được thực hiện thông qua CSS. Giống như các ngôn ngữ lập trình khác, cũng có các mã/lệnh được gọi là thẻ. Các thẻ này được viết với dấu ngoặc nhọn

Chúng tôi có thể tìm thấy một số trang web mô-đun tích hợp tương tác chỉ sử dụng phương pháp kéo và thả, tất cả đều được tạo thành từ HTML. Chúng tôi có thể thêm nhiều mục trong html như văn bản, hình ảnh, video, v.v. Mỗi mục có một thẻ riêng được viết bên trong thân thẻ html. HTML có nhiều chức năng được áp dụng. Một trong số đó là một liên kết. Liên kết là một tính năng biến trang hiện tại thành một trang khác. Một liên kết đằng sau hình ảnh là chủ đề của ngày hôm nay sẽ được giải thích ở đây

Yếu tố cần thiết

Có hai công cụ cơ bản được sử dụng để triển khai mã HTML

  • Một trình soạn thảo văn bản
  • một trình duyệt

Một công cụ được sử dụng làm công cụ nhập liệu trong khi công cụ còn lại hoạt động như phần mềm đầu ra. Trong trình soạn thảo văn bản, chúng tôi viết mã để chạy trên phần mềm khác. Trình chỉnh sửa này hoạt động như một công cụ nhập liệu. Mặt khác, trình duyệt đóng vai trò là công cụ xuất. Nó là một nền tảng chạy mã HTML được viết trong trình chỉnh sửa

Vì chúng ta đang thực hiện tác vụ này trên Windows nên mặc định trình soạn thảo văn bản là notepad. Bạn có thể dùng sublime, notepad++, v.v. trong khi trình duyệt là internet explorer. Nhưng trong hướng dẫn của chúng tôi, chúng tôi sẽ sử dụng Google Chrome và notepad, có thể dễ dàng truy cập

Hướng dẫn sử dụng HTML

Nếu chúng ta muốn xây dựng khái niệm liên kết trong hình ảnh, trước tiên chúng ta cần hiểu hoạt động của HTML. Nội dung HTML được chia thành hai phần. Một là đầu và một là cơ thể. Phần đầu được viết trước. Trong phần đó, chúng tôi bao gồm tiêu đề của trang web. Phần chức năng được biết đến là phần nội dung của HTML. Bởi vì tất cả các thuộc tính của HTML được xác định ở đây

Tất cả các thẻ kể cả HTML đều có thẻ mở và thẻ đóng. Mã HTML được viết trong notepad được lưu trong cả tiện ích mở rộng của notepad và trình duyệt. Các. txt, được lưu dưới dạng mã, trong khi với HTML, nó được lưu cho trình duyệt. Tệp của trình soạn thảo văn bản phải được lưu với phần mở rộng HTML. Ví dụ, liên kết. html. sau đó, bạn sẽ thấy tệp được lưu với biểu tượng của trình duyệt hiện tại bạn đang sử dụng cho mục đích này

< html >

< đầu >< /head>

< cơ thể > …. < /cơ thể >

< /html >

Hình ảnh dưới đây là một mã mẫu của HTML. Trong phần đầu, chúng tôi đã thêm tên của tiêu đề của trang. Và trong phần nội dung, văn bản thuần túy được thêm vào

Thêm liên kết vào hình ảnh html

Tạo một siêu liên kết đơn giản

You might have observed the links on the websites in the form of text or the image. These are developed by using the hyperlinks in the HTML code. This is the feature of both the static and dynamic web pages. It has both opening and closing tags. is known as an anchor tag. The syntax is given below.

< a href=". " >

 

< /a >

Href là để tham khảo của trang. Ở đây, chúng tôi viết địa chỉ của trang web hoặc trang web cụ thể mà chúng tôi muốn truy cập bằng cách nhấp vào liên kết. Trong khi bên trong phần thân của thẻ neo, chúng tôi viết văn bản mà chúng tôi muốn liên kết. Chẳng hạn, chúng tôi đã sử dụng một số văn bản bên dưới

< a href = “< a href="https://linuxhint.com" >https. // linuxhint. com< /a >”>

Liên kết tuyệt vời của tôi

< /a >

Khi chúng tôi viết địa chỉ, bạn có thể thấy rằng địa chỉ đó được gạch chân tự động và màu của địa chỉ được thay đổi. Nó ngụ ý phân biệt giữa văn bản đơn giản và siêu liên kết. Trong khi đó bên trong cơ thể, chúng tôi đã sử dụng một câu đơn giản. Xem xét ví dụ trên ở trạng thái làm việc

Thêm liên kết vào hình ảnh html

Vì chúng tôi đã viết mã này trong notepad, bây giờ chúng tôi sẽ chạy nó để lấy đầu ra từ trình duyệt

Thêm liên kết vào hình ảnh html

Từ đầu ra, bạn có thể quan sát thấy văn bản chúng tôi đã thêm được gạch chân, điều này cho thấy đó là một liên kết. Khi chúng ta di con trỏ chuột đến liên kết, con trỏ được chuyển thành biểu tượng bàn tay

Thẻ hình ảnh trong HTML

Hình ảnh là nội dung cơ bản của HTML. Có một thẻ cụ thể được sử dụng. Thẻ hình ảnh hơi khác so với các thẻ khác. Vì nó không chứa các thẻ mở và đóng trong đó. Hình ảnh có thể được thêm trực tiếp từ hệ thống của bạn hoặc internet. Nguồn của hình ảnh được đề cập. Trong nguồn, bạn thêm vị trí/địa chỉ của hình ảnh, nó nằm trong bất kỳ thư mục nào hoặc được đặt trên bất kỳ trang web nào

< img src = “c. \users\USER\DESKTOP\ 13 . png”>

Here, image tag is

Thêm liên kết vào hình ảnh html

Xem đầu ra bên dưới

Thêm liên kết vào hình ảnh html

Hình ảnh và một liên kết

Liên kết một trang web với hình ảnh

Chắc hẳn bạn đã từng bắt gặp các trang web, đặc biệt là các trang web cửa hàng hay các trang web mua sắm trực tuyến. Có rất nhiều hình ảnh mở ra một trang khác khi nhấp vào. Chúng tôi thêm một liên kết cho hình ảnh hoặc liên kết hai trang thông qua một liên kết. Trang này có thể là trang tĩnh hoặc động. Chúng tôi cần hai thẻ mục trong đó. Một là thẻ hình ảnh và một là thẻ liên kết

< a href="https. //linuxhint. com" >

  < img src= " c. \users\USER\DESKTOP\13. png " >

< /a >

Mã hình ảnh được thêm vào bên trong thẻ liên kết vì chúng tôi muốn hình ảnh hoạt động như một liên kết. Dưới đây là mã HTML hoàn chỉnh

Thêm liên kết vào hình ảnh html

Bây giờ, chúng tôi sẽ thực thi mã này trong Google Chrome

Thêm liên kết vào hình ảnh html

Qua hình ảnh sẽ không giải thích chính xác được. Nhưng khi thực hành các bạn sẽ thấy khi rê chuột thì hình ảnh hiện bàn tay của con trỏ, hiện dưới dạng liên kết. Khi chúng tôi nhấp vào hình ảnh, nó sẽ mở vào trang web có địa chỉ được đề cập trong phần tham chiếu. Trang web dưới đây sẽ được mở

Thêm liên kết vào hình ảnh html

Liên kết một trang web tĩnh với hình ảnh

Nếu bạn sẵn sàng thêm trang web tĩnh vào mã, thì chỉ cần thay thế địa chỉ của trang web bằng trang hiện có trong hệ thống của bạn

< a href = “mẫu. html”>

Thêm liên kết vào hình ảnh html

Trong trình duyệt, bạn sẽ thấy rằng trang mẫu tĩnh được mở có địa chỉ được cung cấp bên trong thẻ

Thêm liên kết vào hình ảnh html

Thuộc tính Alt và Liên kết hình ảnh

Thuộc tính này giúp mô tả điều gì đó về hình ảnh. Điều này chỉ được hiển thị khi vì lý do nào đó, hình ảnh không được tải hoặc kết nối internet của bạn có thể chậm. Vì vậy, mô tả này được hiển thị để giúp người đọc biết điều gì đó về hình ảnh hoặc trang web

< img alt= “không có hình ảnh” src= “C:\users\USERS\DESKTOP\13 . png”>

Đây là thẻ. Thuộc tính Alt được viết bên trong thẻ img

 

Thêm liên kết vào hình ảnh html

Đầu ra được hiển thị bên dưới hiển thị văn bản thay thế cho hình ảnh

Thêm liên kết vào hình ảnh html

Phần kết luận

Trong bài viết này, chúng tôi đã sử dụng các thẻ đơn giản của cả liên kết và hình ảnh. Ngoài ra, chúng tôi sử dụng một hình ảnh làm liên kết với nhiều ví dụ. Có thể có nhiều cách để xây dựng khái niệm này. Chúng tôi đã đề cập đến một số ví dụ đơn giản trong hướng dẫn này

Làm cách nào để thêm siêu liên kết vào hình ảnh?

Hoặc làm theo hướng dẫn từng bước của chúng tôi để liên kết hình ảnh bằng HTML bên dưới. .
Bước 1. Chọn hình ảnh của bạn. Đầu tiên, tìm hình ảnh bạn muốn tạo liên kết. .
Bước 2. Tối ưu hóa kích thước và quy mô. .
Bước 3. Tải lên hình ảnh của bạn và lấy URL. .
Bước 4. Chỉ định URL đích của bạn. .
Bước 5. Tạo HTML của bạn. .
Bước 6. Dán mã của bạn nếu cần

Chúng tôi có thể liên kết một hình ảnh trong HTML không?

Ghi chú. Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác