Hình ảnh
Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 23 trên 60.
Hình ảnh có thể giúp trang web của bạn hấp dẫn hơn, và bạn có thể dễ dàng thêm ảnh vào HTML bằng thẻ <img>. Thẻ <img> tự đóng, nghĩa là không cần thẻ đóng.
Để hiển thị hình ảnh, bạn cần dùng thuộc tính src. Thuộc tính này xác định vị trí của hình ảnh (URL hoặc đường dẫn tệp). Đây là một ví dụ:
<img src="https://coddy.tech/images/bit.svg" />Trong ví dụ này, trình duyệt sẽ tải và hiển thị hình ảnh từ URL https://coddy.tech/images/bit.svg.
Thẻ tự đóng, như <img>, dùng cho các phần tử không có nội dung bên trong, nên chúng không có thẻ đóng. Trong HTML5, dấu gạch chéo ở cuối là tùy chọn: <img src="bit.svg"> và <img src="bit.svg" /> đều hợp lệ. Khóa học này viết />.
Thử thách
DễThêm một hình ảnh vào tài liệu HTML, bạn có thể dùng URL trong ví dụ ở bài học hoặc bất kỳ URL nào khác.
Hãy đảm bảo bạn nhìn thấy hình ảnh!
Tự làm thử
<!DOCTYPE html>
<html>
<body>
<!-- Viết code ở đây -->
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức cơ bản
1Kiến thức cơ bản về HTML
HTML là gì?Cấu trúc cơ bản của HTMLThẻ và phần tửThẻ lồng nhau và thẻ đóngChú thích trong HTML2Văn bản và định dạng
Tiêu đềĐoạn vănNgắt dòngChữ đậm và chữ nghiêngLại chữ đậm và chữ nghiêngÔn tập: định dạng8Biểu mẫu và đầu vào phần 1
Kiến thức cơ bản về biểu mẫuÔ nhập văn bảnThuộc tính của ô nhậpTrường mật khẩuNhãn cho ô nhậpÔn tập: biểu mẫu cơ bản11Trang đăng ký sự kiện
Tổng quan dự ánPhần đầu trang
Phần thông tin sự kiệnBiểu mẫu đăng kýPhần chân trang3Làm việc với danh sách
Danh sách không có thứ tựDanh sách có thứ tựDanh sách lồng nhauÔn tập: danh sách9Biểu mẫu và đầu vào phần 2
Nút radioHộp kiểmDanh sách thả xuốngNútNút trong biểu mẫuÔn tập: biểu mẫu #1Ôn tập: biểu mẫu #2Tự luyện tập: Playground Web