Hình ảnh HTML
Hình ảnh có thể cải thiện thiết kế và sự xuất hiện của một trang web.
Cú pháp hình ảnh HTML
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 trang web về mặt kỹ thuật; hình ảnh được liên kết đến các trang web. Thẻ <img> tạo vùng lưu giữ cho hình ảnh được tham chiếu.
Thẻ <img> trống, chỉ chứa các thuộc tính và không có thẻ đóng.
Thẻ <img> có hai thuộc tính bắt buộc:
- src - Chỉ định đường dẫn đến hình ảnh
- alt - Chỉ định văn bản thay thế cho hình ảnh
Cú pháp
<img src=" url " alt=" alternatetext ">
Thuộc tính src
Thuộc tính src bắt buộc chỉ định đường dẫn (URL) tới hình ảnh.
Lưu ý: Khi một trang web tải, tại thời điểm đó, 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í so với 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 alt được hiển thị nếu trình duyệt không tìm thấy hình ảnh.
Thuộc tính alt
Thuộc tính 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ó (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 thuộc tính alt sẽ mô tả hình ảnh:
Nếu trình duyệt không tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt :
Mẹo: Trình đọc màn hình là một chương trình phần mềm đọc mã HTML và cho phép người dùng "nghe" nội dung. Trình đọc màn hình rất hữu ích cho những người khiếm thị hoặc khuyết tật học tập.
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="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Hãy tự mình thử » Ngoài ra, bạn có thể sử dụng thuộc tính width và height :
Thuộc tính width và height luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.
Lưu ý: Luôn chỉ định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang web có thể nhấp nháy khi tải hình ảnh.
Chiều rộng và chiều cao hay kiểu dáng?
Các thuộc tính 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 thuộc tính style . Nó ngăn các bảng đị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> Hãy tự mình thử »Hình ảnh trong Thư mục Khác
Nếu bạn có hình ảnh của mình trong thư mục con, bạn phải đưa tên thư mục vào thuộc tính src :
Ví dụ
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Hãy tự mình thử »Hình ảnh trên Máy chủ/Trang web khác
Một số trang web trỏ đến một hình ảnh trên một máy chủ khác.
Để trỏ đến hình ảnh trên máy chủ khác, bạn phải chỉ định URL tuyệt đối (đầy đủ) trong thuộc tính src :
Ví dụ
<img src="https://www.example.com.vn/images/w3schools_green.jpg" alt="W3Schools.com">
Hãy tự mình thử »Lưu ý về hình ảnh bên ngoài: Hình ảnh bên ngoài có thể 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ị loại bỏ hoặc thay đổi.
Hình ảnh hoạt hình
HTML cho phép ảnh GIF động:
Ví dụ
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Hãy tự mình thử »Hình ảnh dưới dạng liên kết
Để sử dụng hình ảnh làm liên kết, hãy đặt thẻ <img> bên trong thẻ <a> :
Ví dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Hãy tự mình thử »Hình ảnh nổi
Sử dụng thuộc tính CSS float để cho hình ảnh nổi sang bên phải hoặc bên trái của văn bản:
Ví dụ
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p> Hãy tự mình thử » Mẹo: Để tìm hiểu thêm về CSS Float, hãy đọc Hướng dẫn CSS Float của chúng tôi.
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):
| Abbreviation | File Format | File Extension |
|---|---|---|
| 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 |
Tóm tắt chương
- Sử dụng phần tử HTML
<img>để xác định hình ảnh - Sử dụng thuộc tính
srccủa HTML để xác định URL của hình ảnh - Sử dụng thuộc tính
altHTML để xác định văn bản thay thế cho hình ảnh nếu nó không thể hiển thị - Sử dụng thuộc tính
widthvàheightHTML hoặc thuộc tínhwidthvàheightCSS để xác định kích thước của hình ảnh - Sử dụng thuộc tính CSS
floatđể hình ảnh nổi sang trái hoặc sang phải
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.
Bài tập HTML
Thẻ hình ảnh HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
Video: Hình ảnh HTML
