Computer >> Máy Tính >  >> Lập trình >> HTML

Cách tạo liên kết hình ảnh HTML

Hình ảnh là thành phần phổ biến của bất kỳ trang web nào. Chúng cũng là một cách tuyệt vời để tạo liên kết đến một trang khác. Bằng cách sử dụng kết hợp các thẻ liên kết với thuộc tính href và các thẻ hình ảnh, chúng ta có thể tạo một hình ảnh hoạt động như một liên kết giữa hai trang. Bạn có thể thực hiện điều này bằng cách làm theo các bước bên dưới:

  1. Tạo một phần tử div. Điều này sẽ giữ yếu tố hình ảnh của chúng tôi, thẻ liên kết của chúng tôi và bất kỳ thứ gì khác mà chúng tôi có thể muốn sử dụng để mô tả liên kết.
  2. Tiếp theo, tạo một thẻ liên kết. Các thẻ có tham chiếu siêu văn bản (href’s) trỏ liên kết đến một trang khác. Đặt href thành bất kỳ trang web hoặc tệp nào bạn muốn liên kết của mình truy cập.
  3. Ở giữa thẻ mở và đóng, hãy tạo một thẻ . Hãy nhớ rằng thẻ hình ảnh tự đóng. Thêm thuộc tính có tên src điều đó sẽ trỏ đến url hoặc đường dẫn đến hình ảnh bạn đang sử dụng cho liên kết của mình.
  4. Tạo thứ gì đó sẽ mô tả hình ảnh để người dùng biết rằng nó có thể nhấp được. Đây có thể là thẻ , thẻ
    , phần tử

    , thẻ

    - bất cứ thứ gì bạn muốn.

Một mẫu làm việc nằm trong trình chỉnh sửa mã bên dưới. Chắc chắn dành một chút thời gian để chơi với nó! 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Link</title>
   <style>
       div {
           width: 500px;
           display: flex;
           flex-flow: column wrap;
       }
       img {
           width: 100%;
       }
       caption {
           width: 100%;
           height: 50px;
       }
   </style>
</head>
<body>
   <div>
       <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer">
           <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge"  refer/>
       </a>
       <caption>
           An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge.
       </caption>
 
   </div>
</body>
</html>

Một lưu ý cuối cùng:Bạn nên đặt một <a> chỉ xung quanh chú thích - vì đó là những gì liên kết đang đề cập đến. Người dùng đã kỳ vọng rằng nếu họ nhấp vào ảnh, một tab mới sẽ mở ra với đích liên kết (đây là những gì cú pháp target =”_ blank” đang thực hiện). Vì vậy, hãy giữ <a> gắn thẻ xung quanh liên kết và để lại văn bản để mô tả hình ảnh - hoặc đặt <a> gắn thẻ xung quanh cả văn bản và <img> . Cả hai cách đều là những lựa chọn khả thi.