Cú pháp hình ảnh trong HTML
Thẻ <img> trong HTML được sử dụng để nhúng hình ảnh vào một trang web.
Các thẻ <img> là thẻ trống, nó chỉ chứa các thuộc tính, và không có một thẻ đóng.
Các thẻ <img> có hai thuộc tính cần thiết:
- src – Chỉ định đường dẫn đến hình ảnh
- alt – Chỉ định văn bản thay thế cho hình ảnh
| <img src=”url ảnh“ alt=”Mô tả ảnh“> |
Thuộc tính src
srcThuộc tính bắt buộc chỉ định đường dẫn (URL) đến hình ảnh.
Lưu ý: Khi một trang web tải; tại thời điểm đó, chính trình duyệt lấy hình ảnh từ máy chủ web và chèn nó vào trang. Do đó, hãy đảm bảo rằng hình ảnh thực sự ở cùng một vị trí liên quan đến trang web, nếu không khách truy cập của bạn sẽ nhận được một biểu tượng liên kết bị hỏng. Biểu tượng liên kết bị hỏng và altvăn bản được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.
Ví dụ:
| <img src=”img_VN.jpg” alt=”Flowers in VN”> |
Thuộc tính alt
alt là thuộc tính bắt buộc cung cấp văn bản thay thế cho hình ảnh, nếu người dùng vì lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Giá trị của alt thuộc tính phải mô tả hình ảnh:
| <img src=”url ảnh“ alt=”Mô tả ảnh“> |
Nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của alt thuộc tính.
Kích thước hình ảnh – Chiều rộng và Chiều cao
Bạn có thể sử dụng thuộc tính style để chỉ định chiều rộng và chiều cao của hình ảnh.
Ví dụ:
| <img src=”anh.jpg” alt=”HTML cơ bản” style=”width:500px;height:600px;”> |
Ngoài ra, bạn có thể sử dụng các thuộc tính width và height
Ví dụ:
| <img src=”anh.jpg” alt=”HTML cơ bản=”500″ height=”600″> |
Các width và heightcác thuộc tính luôn luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.
