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

Doãn Huynh

Member
3 Tháng mười hai 2021
142
11
18

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:

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://hocdu.com/styles/default/xenforo/hd-logo-96.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:
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://hocdu.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é.
 
Chỉnh sửa lần cuối: