Thêm chú thích HTML vào hình ảnh web trong 9 bước dễ dàng
Hình ảnh thêm cuộc sống vào các trang web của bạn và thu hút sự chú ý của người xem. Phụ đề cung cấp thêm thông tin về hình ảnh trên web của bạn, nhưng chúng có thể khó thêm vào các trang web không có kỹ năng HTML và CSS nâng cao. Dưới đây là một phương pháp đáng tin cậy để thêm chú thích đơn giản nhưng hấp dẫn vào hình ảnh ở lại với hình ảnh bất cứ nơi nào bạn di chuyển nó trên trang web.
9 bước cho một chú thích hình ảnh HTML
Thêm chú thích vào một hình ảnh và di chuyển chúng lại với nhau bất cứ nơi nào bạn muốn:
- Thêm hình ảnh vào trang web của bạn.
- Trong HTML cho trang web của bạn, hãy đặt thẻ div xung quanh hình ảnh:
div> - Thêm thuộc tính kiểu vào thẻ div:
style = "" >div> - Đặt chiều rộng của div thành cùng chiều rộng với hình ảnh, với thuộc tính chiều rộng :
width: chiều rộng hình ảnh px; ">div> - Đối với chú thích hơi nhỏ hơn văn bản xung quanh, hãy thêm thuộc tính kích thước phông chữ vào kiểu div:
kích thước phông chữ: 80%; ">div> - Phụ đề trông đẹp nhất nếu chúng được căn giữa bên dưới hình ảnh, vì vậy hãy thêm thuộc tính căn chỉnh văn bản vào thuộc tính style:
text-align: center; "> < img src = "URL" alt = "văn bản thay thế" width = "width" height = "height" /> div>- Cuối cùng, thêm một khoảng trống nhỏ giữa hình ảnh và chú thích, bằng cách thêm thuộc tính style vào hình ảnh với thuộc tính style padding-bottom :
style =" padding-bottom: 0.5em; " /> div> - Sau đó thêm chú thích văn bản ngay bên dưới hình ảnh:
Đây là chú thích của tôi div> Tải trang web lên máy chủ của bạn và kiểm tra nó trong trình duyệt.
Mẹo giới thiệu
- Chiều rộng : Kích thước CSS có thể bằng nhiều phép đo khác nhau, vì vậy bạn thường phải bao gồm loại đo lường. Ví dụ: chiều rộng: 100 px ; Tuy nhiên, kích thước hình ảnh HTML luôn bằng pixel, vì vậy bạn để nguyên đo lường. width = "100"
- Nếu bạn thực hiện chiều rộng của div rộng hơn chiều rộng hình ảnh, chú thích có thể xuất hiện bên cạnh hình ảnh. Nếu đây là nội dung bạn muốn, hãy thêm thẻ
ngay trước chú thích và sau thẻ hình ảnh.
- Thêm thuộc tính kiểu vào thẻ div: