Ví dụ về Images trong HTML
<img src="images/blog/lap-trinh-web.jpg" >
Cú pháp
Thẻ HTML <img> được sử dụng để nhúng hình ảnh vào trang web.
Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với các trang web.
Thẻ <img> tạo không gian lưu giữ cho hình ảnh được tham chiếu.
Thẻ <img> là một empty tag, nó chỉ chứa các thuộc tính và không có thẻ đóng. Thẻ <img> có hai attribute bắt buộc:
src- Chỉ định đường dẫn đến hình ảnhalt- Chỉ định văn bản thay thế cho hình ảnh
HTML Images - src Attribute
Attribute src 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 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ự ở 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 biểu tượng liên kết bị hỏng. Biểu tượng liên kết bị hỏng và văn bản thay thế được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.
<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" >
HTML Images - alt Attribute
Attribute alt 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ó (vì 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 thuộc tính alt nên là mô tả hình ảnh:
<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" >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:
Image Size - Width và Height
Bạn có thể sử dụng attribute style để chỉ định chiều rộng và chiều cao của hình ảnh.
<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" style="width:500px;height:600px;">Ngoài ra, bạn có thể sử dụng các attributte width và height:
<img alt="lap trinh web" src="images/blog/lap-trinh-web.jpg" width="500" height="600">Attributte width và height luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.
Nên chọn Width và Height, hay Style?
Các attribute width, height và style đều hợp lệ trong HTML. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng attribute style. Nó ngăn các trang định kiểu thay đổi kích thước của hình ảnh:
Ví dụ
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>
Images trong thư mục khác
Nếu bạn có hình ảnh của mình trong một thư mục con, bạn phải khai báo rõ tên thư mục trong attribute src:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images ở một server hoặc website khác
Một số trang web trỏ đến một hình ảnh trên một server khác. Để trỏ đến một hình ảnh trên một server khác, bạn phải chỉ định một Absolute URL trong thuộc tính src:
<img src="https://truonghoclaptrinh.com/images/logo%20beready%20academy.png" alt="logo beready academy">Lưu ý về hình ảnh bên ngoài: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; chúng có thể đột ngột bị xóa hoặc thay đổi.
Image Floating
Sử dụng thuộc tính float của CSS để cho hình ảnh nổi sang phải hoặc sang trái của văn bản:
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> Hình ảnh trôi về bên phải của văn bản</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> Hình ảnh trôi về bên trái của văn bản</p>