Một trang web hiện đại không thể thiếu hình ảnh. Trong HTML, thẻ <img> được dùng để hiển thị hình ảnh trực tiếp lên trang web.
1. Cú pháp thẻ <img>
<img src="duong_dan_anh" alt="mieu ta anh">
Đặc điểm:
- Thẻ
<img>là thẻ đơn, không cần đóng thẻ. - Có hai thuộc tính quan trọng:
src: (source) đường dẫn đến tệp hình ảnh.alt: (alternative text) mô tả ảnh khi ảnh không hiển thị được (hoặc dùng cho trình đọc màn hình).
2. Ví dụ hiển thị hình ảnh
a) Hình ảnh từ tệp nội bộ
<img src="cat.jpg" alt="Hình con mèo" width="300">
Giả sử file cat.jpg nằm cùng thư mục với file HTML.
b) Hình ảnh từ đường dẫn ngoài
<img src="https://example.com/logo.png" alt="Logo công ty">
3. Các thuộc tính thường dùng
| Thuộc tính | Mô tả |
|---|---|
src | Đường dẫn hình ảnh |
alt | Mô tả hình ảnh |
width | Chiều rộng ảnh (đơn vị px hoặc %) |
height | Chiều cao ảnh |
title | Hiển thị chú thích khi rê chuột vào ảnh |
Lưu ý: Nên chỉ dùng width hoặc height, không nên cố định cả hai nếu không muốn ảnh bị méo.
4. Thực hành
Tạo một file hinhanh.html và dán nội dung sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hiển thị hình ảnh</title>
</head>
<body>
<h1>Ảnh minh họa</h1>
<p>Hình ảnh từ file nội bộ:</p>
<img src="meo.jpg" alt="Ảnh con mèo dễ thương" width="300">
<p>Hình ảnh từ link ngoài:</p>
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="Cô gái đang ngồi" width="300">
</body>
</html>
Ghi chú: Đặt một tệp ảnh tên meo.jpg cùng thư mục nếu muốn hiển thị ảnh nội bộ.
5. Ghi nhớ
- Dùng
altđể tăng khả năng truy cập và SEO. - Không được thiếu
src, nếu không ảnh sẽ không hiển thị. - Có thể điều chỉnh kích thước bằng
width,height.
Thảo luận