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

Doãn Huynh

Member
19/05/2026
191
0
16
Khi soạn thảo HTML, để chèn link vào một hình ảnh. Bạn dùng mã code sau:

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


Mã:
<a href="https://link cần chèn">  <img src="https://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ả).
Mã:
 alt="mô tả">
2. Kích thước hiển thị ảnh:
Mã:
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.
Mã:
target="_blank"
4. Thuộc tính rel="option"
Mã:
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:
Mã:
<a href="https://hocdu.com/">
  <img src="https://sharevina.com/styles/default/xenforo/logo.png"
  alt="hoc du"  width="640" height="360"
  target="_blank"  rel="noopener nofollow external">
</a>

Code tối giản:
Mã:
<a href="https://link cần chèn">Văn bản</a>

Code đầy đủ thuộc tính + chú thích:
Mã:
<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://hocdu.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:
Mã:
<a style="font-size: 14px; color: #FFFFFF; font-style: italic; font-weight: bold; background-color: 000000; text-decoration: underline"
href="https://sharevina.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é.
 

Đính kèm

  • huong-dan-html-chen-link-vao-hinh-anh-va-van-ban-simihub-cavip-1.png
    huong-dan-html-chen-link-vao-hinh-anh-va-van-ban-simihub-cavip-1.png
    106.1 KB · Lượt xem: 10
Sửa lần cuối bởi điều hành viên:
  AdBlock Detected
Ôi bạn ơi! có thể tắt Plug-in chặn quảng cáo giúp mình không? Như vậy web mình mới sống thọ được. ❤️❤️❤️