Chèn ảnh vào HTML với thẻ img

Để nhúng ảnh vào HTML ta dùng thẻ <img> với các thuộc tính src là đường dẫn ảnh, alt là đoạn text thay thế, width, height để xác định chiều rộng và chiều cao của ảnh.

Cú pháp thẻ

• Thẻ <img> dùng để nhúng hình ảnh vào trang web.
• Thẻ <img> tạo một không gian trống cho hình ảnh được tham chiếu.
• Thẻ <img> là phần tử rỗng nên nó không có phần nội dung và phần đóng thẻ.
• Thẻ <img> có hai thuộc tính bắt buộc: src chỉ định đường dẫn đến ảnh , alt chỉ định đoạn text thay thế nếu ảnh không hiển thị được.

Cú pháp:

<img src="url" alt="Text thay thế" />

ví dụ: 

<img src="http://yesmy.net/logos/html-logo-1686836363.svg" alt="HTML 5 Logo" />

Thuộc tính src

Thuộc tính src là thuộc tính bắt buộc, nó chỉ định đường dẫn (url) đến ảnh. Đường dẫn này có thể là đường dẫn tuyệt đối, tương đối, hoặc đến file ảnh cục bộ trên máy tính.

Chú ý:

Tại thời điểm trang web được tải, trình duyệt sẽ lấy hình ảnh tử máy chủ thông qua đường dẫn được khai báo trong thuộc tính src và chèn nó vào trang. Do đó, nếu ảnh trên server bị hỏng, hoặc đường dẫn đến một ảnh không tồn tại thì người truy cập trang web sẽ nhận được một biểu tượng ảnh bị lỗi. 

Thuộc tính alt

Thuộc tính alt bắt buộc, nó chỉ định một đoạn text thay thế cho hình ảnh, nếu vì một lý do gì đó mà trình duyệt không thể hiển thị được ảnh thì giá trị của thuộc tính alt sẽ được hiển thị

Ví dụ:

<img src="beautiful.jpg" alt="Cô gái này rất đẹp" />

Kích thước ảnh

Bạn có thể sử dụng thuộc tính style để chỉ định kích thước của một ảnh.

VD:

<img src="beautiful.jpg" alt="Cô gái này rất đẹp" style="width:50px; height:60px;" />

Ngoài ra, bạn cũng có thể sử dụng thuộc tính width và height để chỉ định kích thước ảnh với đơn vị là px hoặc %.

VD:

<img src="beautiful.jpg" alt="Cô gái này rất đẹp" width="50px" height="30px" />
<img src="beautiful.jpg" alt="Cô gái này rất đẹp" width="50%" height="30%" />

Chú ý:

Nên chỉ định kích thước hình ảnh. Nếu hình ảnh không được chỉ định kích thước thì sẽ có hiện tượng nhấp nháy trong hinh tải hình ảnh.

Những định dạng hình ảnh phổ biến

Dưới đây là những định dạng hình ảnh phổ biến dùng cho website:

Tổng kết:

• Thẻ <img> dùng để chèn một ảnh vào trang web.
• Thuộc tính src chỉ định đến đường dẫn ảnh
• Thuộc tính alt chỉ định một đoạn text thay thế khi ảnh không hiển thị được.
• width, height hoặc sử dụng CSS để chỉ định kích thước ảnh.