Hướng dẫn HTML: chèn link vào Hình Ảnh và Văn Bản

[Doãn Huynh]

1. Chèn link vào hình ảnh.​

Khi soạn thảo HTML, để chèn link vào một hình ảnh. Bạn dùng mã code sau:

<a href="link cần chèn">  <img src="link hình ảnh.png"></a>

Một số thuộc tính bạn có thể thêm nếu muốn:
1. Tên hình ảnh (mô tả).

 alt="mô tả">

2. Kích thước hiển thị ảnh:

width="chiều rộng" height="chiều cao"

Thông thường chỉ cần thêm thông số chiều rộng hoặc chiều cao, chiều còn lại sẽ được tự động scale.
3. Mở link trong tab mới.

target="_blank"

4. Thuộc tính rel="option"

rel="external" //Chỉ định rằng trang đích là một trang web bên ngoài.
rel="nofollow" //Yêu cầu bot tìm kiếm không theo dõi liên kết đích.
rel="noopener" //Chỉ định trang đích không được phép truy cập cửa sổ hiện tại.

Một ví dụ về dòng code đầy đủ thuộc tính:

<a href="Simihub.com/">
  <img src="https://simihub.com/styles/default/xenforo/logo.png"
  alt="hoc du"  width="640" height="360"
  target="_blank"  rel="noopener nofollow external">
</a>

1. Chèn link vào văn bản.​

Code tối giản:

<a href="link cần chèn">Văn bản</a>

Code đầy đủ thuộc tính + chú thích:

<a
style=""                        // Các thuộc tính sẽ áp dụng cho văn bản.
font-size: 14px;                // Kích thước font chữ.
color: #FFFFFF;                    // Màu chữ.
font-style: italic;                // In Nghiêng.
font-weight: bold;                // In đậm.
background-color: 000000;        // Màu nền văn bản.
text-decoration: underline;        // Gạch chân văn bản.
href="https://simihub.com/"        // Link cần chèn
title="Link trang chủ"            // Tên (không quan trọng)
>
Truy cập trang chủ tại đây        // Văn bản cần chèn link.
</a>

Code hoàn thiện sẽ trông như thế này:

<a style="font-size: 14px; color: #FFFFFF; font-style: italic; font-weight: bold; background-color: 000000; text-decoration: underline"
href="https://simihub.com/" title="Link trang chủ">Truy cập trang chủ tại đây</a>

Cảm ơn bạn đã theo dõi bài viết. Nếu thấy hữu ích, hãy like, share ủng hộ mình nhé.
Đăng ký thành viên để đóng góp kinh nghiệm bản thân với cộng đồng nhé.

 

[KhanhLinh]

Để ảnh có link hiển thị đẹp và thân thiện hơn, các bạn nên thêm thuộc tính CSS cursor: pointer; và thuộc tính alt cho ảnh để tối ưu SEO nhé.

 

[chaewongreco612]

Trong trường hợp làm card sản phẩm thì có thể dùng thẻ <a> bao bọc toàn bộ thẻ <div> hoặc dùng pseudo-element ::after để link phủ kín cả khối.

 

[chaewonlin360]

Bài viết căn bản nhưng giải thích cú pháp thẻ <a> và thuộc tính href rất trực quan, cực kỳ dễ hiểu cho người mới bắt đầu học HTML.

 

[LanLan]

Khi chèn link dẫn sang website bên ngoài thì nên thêm thuộc tính target='_blank' và rel='noopener noreferrer' để tăng bảo mật đúng không bạn?