Hình ảnh HTML

Bạn có thể hiển thị ảnh trong tài liệu bằng HTML.

Ví dụ

Chèn ảnh
Ví dụ này minh họa cách hiển thị ảnh trên trang web.
Chèn ảnh từ vị trí khác nhau
Ví dụ này minh họa cách hiển thị ảnh từ thư mục khác hoặc máy chủ khác trên trang web.

(Bạn có thể tìm thấy nhiều ví dụ hơn ở cuối trang.)

Thẻ ảnh (<img>) và thuộc tính nguồn (Src)

Trong HTML, ảnh được định nghĩa bởi thẻ <img>.

<img> là thẻ rỗng, có nghĩa là nó chỉ chứa thuộc tính và không có thẻ đóng.

Để hiển thị ảnh trên trang, bạn cần sử dụng thuộc tính nguồn (src). src có nghĩa là "nguồn". Giá trị của thuộc tính nguồn là địa chỉ URL của ảnh.

Cú pháp định nghĩa ảnh là:

<img src="url" />

URL chỉ vị trí lưu trữ ảnh. Nếu ảnh có tên "boat.gif" nằm trong thư mục "images" của www.codew3c.com, thì URL của nó là http://www.codew3c.com/images/boat.gif.

Trình duyệt sẽ hiển thị ảnh trong văn bản tại nơi thẻ ảnh xuất hiện. Nếu bạn đặt thẻ ảnh giữa hai đoạn văn, trình duyệt sẽ hiển thị đoạn văn đầu tiên trước, sau đó là ảnh, và cuối cùng là đoạn văn thứ hai.

Thay thế thuộc tính (Alt)

Thuộc tính alt dùng để xác định một chuỗi văn bản thay thế sẵn sàng. Giá trị của thuộc tính văn bản thay thế là do người dùng định nghĩa.

<img src="boat.gif" alt="Big Boat">

Khi trình duyệt không thể tải hình ảnh, thuộc tính văn bản thay thế sẽ thông báo cho người đọc thông tin đã mất. Lúc này, trình duyệt sẽ hiển thị văn bản thay thế này thay vì hình ảnh. Thói quen thêm thuộc tính văn bản thay thế cho tất cả các hình ảnh trên trang web là một điều tốt, điều này giúp hiển thị thông tin tốt hơn và rất hữu ích cho những người sử dụng trình duyệt văn bản.

Lưu ý cơ bản - Cách làm hữu ích:

Nếu một tệp HTML chứa mười hình ảnh, để hiển thị trang này một cách chính xác, cần phải tải mười một tệp. Tải hình ảnh cần thời gian, vì vậy gợi ý của chúng tôi là: Sử dụng hình ảnh một cách thận trọng.

Thử nghiệm thêm

Hình ảnh nền
Ví dụ này minh họa cách thêm hình ảnh làm nền trang HTML.
Sắp xếp hình ảnh
Ví dụ này minh họa cách sắp xếp hình ảnh trong văn bản.
Hình ảnh trôi
Ví dụ này minh họa cách làm cho hình ảnh trôi qua bên trái hoặc phải của đoạn văn.
Điều chỉnh kích thước hình ảnh
Ví dụ này minh họa cách điều chỉnh kích thước hình ảnh.
Hiển thị văn bản thay thế cho hình ảnh
Ví dụ này minh họa cách hiển thị văn bản thay thế cho hình ảnh. Khi trình duyệt không thể tải hình ảnh, thuộc tính văn bản thay thế sẽ thông báo cho người đọc thông tin đã mất. Thói quen thêm thuộc tính văn bản thay thế cho tất cả các hình ảnh trên trang web là một điều tốt.
Tạo liên kết hình ảnh
Ví dụ này minh họa cách sử dụng hình ảnh như một liên kết.
Tạo bản đồ hình ảnh
Ví dụ này hiển thị cách tạo bản đồ hình ảnh có khu vực có thể nhấp chuột. Mỗi khu vực là một liên kết超级链接.
Chuyển đổi hình ảnh thành bản đồ hình ảnh
Ví dụ này hiển thị cách đặt một hình ảnh thông thường thành bản đồ hình ảnh.

Thẻ hình ảnh

Thẻ Mô tả
<img> Định nghĩa hình ảnh.
<map> Định nghĩa bản đồ hình ảnh.
<area> Định nghĩa khu vực có thể nhấp chuột trong bản đồ hình ảnh.