Hình ảnh HTML
Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web.
Thí dụ
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Thí dụ
<img src="img_girl.jpg"
alt="Girl in a jacket">
Thí dụ
<img src="img_chania.jpg"
alt="Flowers in Chania">
Cú pháp hình ảnh HTML
Thẻ HTML <img>được sử dụng để nhúng một hình ảnh vào một 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>trống, nó 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 bắt buộc srcchỉ đị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à altvăn bản được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.
Thí dụ
<img src="img_chania.jpg" alt="Flowers
in Chania">
Thuộc tính alt
Thuộc tính bắt buộc altcung 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 altthuộc tính phải mô tả hình ảnh:
Thí dụ
<img src="img_chania.jpg" alt="Flowers
in Chania">
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:
Thí dụ
<img src="wrongname.gif" alt="Flowers
in Chania">
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 về khả năng 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 stylethuộc tính để chỉ định chiều rộng và chiều cao của hình ảnh.
Thí dụ
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Ngoài ra, bạn có thể sử dụng các thuộc tính widthvà height:
Thí dụ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Thuộc tính widthvà heightluô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 trong khi tải hình ảnh.
Chiều rộng và Chiều cao, hoặc Phong cách?
Các thuộc tính width, heightvà styleđều hợp lệ trong HTML.
Tuy nhiên, chúng tôi khuyên bạn nên sử dụng stylethuộc tính. Nó ngăn các trang định kiểu thay đổi kích thước của hình ảnh:
Thí 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ình ảnh trong một 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 bao gồm tên thư mục trong srcthuộc tính:
Thí dụ
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
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 một hình ảnh trên một máy chủ khác, bạn phải chỉ định một URL tuyệt đối (đầy đủ) trong srcthuộc tính:
Thí dụ
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
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; nó có thể đột ngột bị xóa hoặc thay đổi.
Hình ảnh động
HTML cho phép các GIF động:
Thí dụ
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
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 <img>thẻ bên trong <a>
thẻ:
Thí dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Hình ảnh nổi
Sử dụng thuộc tính CSS floatđể cho hình ảnh nổi sang phải hoặc sang trái của văn bản:
Thí 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>
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 chung
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 HTML
srcđể xác định URL của hình ảnh - Sử dụng thuộc tính HTML
altđể xác định văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị - Sử dụng HTML
widthvàheightthuộc tính hoặc CSSwidthvàheightthuộc tính để xác định kích thước của hình ảnh - Sử dụng thuộc tính CSS
floatđể cho 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 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 .