Images trong HTML
Hình ảnh giúp cho trang web của chúng ta trở nên đẹp mắt hơn, gần gủi và thân thiện với người dùng.
HTML Images - Cú pháp
Thẻ HTML <img> được sử dụng để nhúng một hình ảnh vào một trang web.
Về mặt kỹ thuật, hình ảnh không được chèn vào nội dung của một trang web, mà hình ảnh được liên kết với các nội dung của trang web. Thẻ <img> tạo ra một không gian lưu trữ tham chiếu url cho hình ảnh đó.
Thẻ <img> là một thẻ rỗng, vì nó chỉ chứa các thuộc tính, và không có thẻ đóng.
<img src="url hình ảnh" alt="miêu tả cho hình ảnh">
Thẻ <img> có 2 thuộc tính quan trọng nhất
- src - Chỉ định đường dẫn đến hình ảnh
- alt - Chỉ định văn bản thay thế cho hình ảnh (xuất hiện khi hình ảnh bị lỗi)
Thuộc tính src
Thuộc tính <src> là bắt buộc, nó chỉ định đường dẫn (URL) đến hình ảnh.
Khi một trang web tải, tại thời điểm đó, chính trình duyệt sẽ 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ự tồn tại ở vị trí lưu trữ trong đường dẫn ở trang web, nếu không khách truy cập của bạn sẽ nhận được biểu tượng liên kết bị hỏng. Biểu tượng liên kết bị hỏng và thuộc tính
altsẽ được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh
Thuộc tính alt
Thuộc tính alt nên được sử dụng để cung cấp văn bản chú thích thay thế cho hình ảnh, nếu người dùng vì lý do nào đó không thể xem nó (vì kết nối chậm, lỗi trong thuộc tính src hoặc lỗi trình duyệt không hiển thị hình ả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 thuộc tính alt.
Kích thước hình ảnh - chiều rộng, chiều cao
Chúng ta có thể sử dụng thuộc tính style để chỉ định chiều rộng, chiều cao cho hình ảnh.
Ngoài ra, chúng ta có thể sử dụng thuộc tính width và height của thẻ <img> để xác định chiều rộng, chiều cao cho hình ảnh.
Bạn phải luôn xác định chiều rộng, chiều cao cho hình ảnh, nếu chiều rộng và chiều cao không được chỉ định, hình ảnh có thể bị nhấp nháy khi trình duyệt tải trang web
Nên sử dụng thuộc tính width, height hay style?
Các thuộc tính width, height và style đều hợp lệ trong HTML. Tuy nhiên, chúng ta nên sử dụng thuộc tính style để tránh xảy raa trường hợp trình duyệt thể hiện hình ảnh không theo chúng ta mong muốn.
Ví dụ
<style> /* Thuộc tính width: 100% áp dụng cho mọi thẻ img: */ img { width: 100%; } </style> <img src="html.gif" alt="HTML Icon" width="128" height="128"> <img src="html.gif" alt="HTML Icon" style="width:128px;height:128px;">
Hình ảnh động
Chúng ta có thể sử dụng hình ảnh động cho thẻ HTML
Images Floating
Sử dụng thuộc tính CSS float để tùy chỉnh bố cục của hình ảnh sang phải hoặc sang trái của văn bản.
Ví dụ
<p><img src="HTML.gif" alt="HTML" style="float:right;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p> <p><img src="HTML.gif" alt="HTML" style="float:left;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p>
Các định dạng hình ảnh phổ biến
Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera):
| Viết tắt | Định dạng file | Phần mở rộng |
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Lưu ý
Việc tải hình ảnh lớn sẽ mất thời gian và có thể làm chậm trang web của bạn. Sử dụng hình ảnh một cách cẩn thận.