Tạo chú thích cho ảnh trong html

Đặt hình ảnh – giả sử chiều rộng của nó là 140px – bên trong một liên kết:

<a><img src='image link' style='width: 140px'></a>

Tiếp theo, đặt chú thích bằng a và đặt cho nó chiều rộng nhỏ hơn hình ảnh của bạn, đồng thời căn giữa nó:

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Tiếp theo, trong thẻ liên kết, hãy tạo kiểu cho liên kết để nó không còn giống như một liên kết nữa. Bạn có thể cung cấp cho nó bất kỳ màu nào bạn muốn, nhưng chỉ cần loại bỏ bất kỳ trang trí văn bản nào mà các liên kết của bạn có thể mang.

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Tôi đã bao bọc
hình ảnh với chú thích của nó trong một liên kết để không văn bản nào có thể đẩy chú thích ra ngoài đường: Chú thích được gắn với ảnh bằng liên kết. Đây là một ví dụ: http://www.alphaeducational.com/p/okay.html

8 hữu ích 3 bình luận chia sẻ

Chú thích cho ảnh trong bài viết !

Dành cho các Blogger già của Chi họ và ai quan tâm

Qua theo dõi tôi thấy một số blogger già có vẻ hơi lúng túng trong việc ghi chú thích cho ảnh nên tôi viết bài này để các vị tham khảo và áp dụng.
Ta thường post ảnh lên bài đăng của Blog nhưng không kèm theo chú thích cho ảnh nên người đọc bài viết không biết được thông tin của tấm
ảnh.
Để chú thích cho ảnh có mấy cách làm sau đây:
1- Viết dưới bức ảnh sau khi chèn ảnh
Cách2- Viết trực tiếp dưới ảnh
Phương pháp này dễ thực hiện với các blogger già nhưng vị trí đặt chú thích cho ảnh có khi không theo ý của mình (như chú thích ảnh của Cậu Ngọc chẳng hạn lẽ ra đặt dưới ảnh thì đẹp hơn). 
Cách 2- Viết ttheo cách sửa
Code ảnh (Vị trí chữ sẽ chuẩn hơn)
2- Chèn chú thích khi rê chuột vào tấm ảnh
Phương pháp này không trực quan và mình phải có nhắc nhở độc giả để người ta rê chuột vào ảnh để xem chú thích
3- Viết trực tiếp chú thích lên ảnh
Phương pháp này rất trực quan và chuyên nghiệp hơn nhưng thực hiên hơi phức tạp hơn đối với các blogger già.
Nếu sử dụng được phương pháp này là tốt nhất !
Tôi xin giới thiệu qua cả 3 phương pháp để tùy khả năng của mình mà áp dụng
1- Viết dưới bức ảnh sau khi chèn ảnh
 Cách2- Viết trực tiếp dưới ảnh
Đầu tiên các vị hãy chèn ảnh cho bài viết ở chế độ bình thường ở chế độ “Viết”. Sau phải xuống hàng đánh chú thích cho ảnh và di chuyển chú thích đến nơi mong muốn (phía dưới, trên hay giữa ảnh..). Các
vị nên cho màu chữ chú thích khác màu với chữ của bài viiết cho đễ phân biệt giữa nội dung bài viết và chú thích của ảnh !

Tạo chú thích cho ảnh trong html

 Cách 2- Viết ttheo
cách sửa Code ảnh
Sau khi chèn ảnh theo cách bình thường xong, các vị vào chế độ HTML để viết chú thích cho ảnh bằng cách chỉnh sửa code ảnh.
Ví dụ tôi chèn ảnh Nhà hát Opera Sidney và tôi muốn chèn chú thích cho nó. Sau khi chèn tôi vào chế độ HTML và có code ảnh như hình dưới

Tạo chú thích cho ảnh trong html

Tôi
thay chữ separator ở code trên bằng chữ imgcaption và thêm thẻ cap có chú thích ảnh ở
giữa vào trước thẻ đóng
div

Tạo chú thích cho ảnh trong html

Và được kết quả như sau :

Tạo chú thích cho ảnh trong html

2- Chèn chú thích khi rê chuột vào tấm ảnh
– Các vị chèn ảnh như bình thường
– Bật
chế độ HTML và thêm dòng code sau đây ngay sau link ảnh

Tạo chú thích cho ảnh trong html

Ta có kết quả (khi ta rê chuột vào ảnh)

Tạo chú thích cho ảnh trong html

3- Viết trực tiếp chú thích lên ảnh
Ta dùng phần mềm chỉnh sửa ảnh PhotoScape (các vị có thể tải ở cuối bài đăng về rồi dùng WINRAR giải nén và chạy file PhotoScape.exe chứ không cần cài đặt).
Để viết chú thích vào
ảnh các vị hãy mở PhotoScape ra rồi chọn và đưa ảnh cần thêm chú thích vào vùng chỉnh sửa của PhotoScape.
Sau đấy làm thứ tự như các bước trong hình để tạo chú thích cho ảnh !

Tạo chú thích cho ảnh trong html

 Và đây là kết
quả

Tạo chú thích cho ảnh trong html

Tải PhotoScape về máy

Tạo chú thích cho ảnh trong html