Bạn đã biết về link trong HTML, nhưng giờ hãy cùng khám phá thẻ img trong HTML để biết thêm về việc chèn hình ảnh vào trang web.
Tìm hiểu Thẻ img trong HTML
Thẻ img trong HTML được sử dụng để chèn hình ảnh vào trang web. Đây là một thẻ không có thẻ đóng, và chứa các thuộc tính như src để chỉ đường dẫn đến hình ảnh.
Hiểu rõ Thuộc tính alt
Thuộc tính alt trong HTML được sử dụng để đặt văn bản thay thế cho hình ảnh khi nó không thể hiển thị được. Với thuộc tính này, bạn có thể mô tả nội dung của hình ảnh.
Hình ảnh minh họa về cách thức hoạt động của thuộc tính alt
Trong trường hợp hình ảnh không hiển thị, trình duyệt sẽ thay thế bằng văn bản alt. Thuộc tính alt là yếu tố không thể thiếu trong thẻ img, vì nếu bỏ qua, trang web sẽ báo lỗi do thiếu thuộc tính này.
Điều chỉnh kích thước ảnh trong HTML
Bạn có thể sử dụng thuộc tính style để điều chỉnh chiều rộng và chiều cao của hình ảnh. Việc áp dụng thuộc tính width và height cũng rất hữu ích.
Hình ảnh minh họa về kết quả thu được sau khi sử dụng thuộc tính style để thay đổi kích thước hình ảnh
Ví dụ về kết quả khi áp dụng thuộc tính width và height
Trong HTML, việc xác định rõ ràng chiều rộng và chiều cao cho hình ảnh là cần thiết để tránh lỗi hiển thị trên trang web.
Chọn thuộc tính width, height hay style?
Trong HTML, bạn có thể sử dụng thuộc tính width, height hoặc style để điều chỉnh kích thước của hình ảnh. Mytour gợi ý sử dụng style để tránh việc bảng styles sheet làm thay đổi kích thước ảnh không mong muốn.
Hình ảnh minh họa về cách bảng styles sheet có thể thay đổi kích cỡ ảnh
Lưu trữ hình ảnh trong thư mục khác
Mặc định, trình duyệt sẽ tìm hình ảnh trong thư mục chứa trang web. Để lưu hình ảnh trong thư mục con, bạn cần chỉ định đường dẫn trong thuộc tính src.
Hình ảnh minh họa cho kết quả thực hiện khi lưu trữ hình ảnh trong thư mục con
Lưu trữ hình ảnh trên máy chủ từ xa
Bạn cũng có thể lưu trữ hình ảnh trên máy chủ khác và truy cập qua URL.
Hình ảnh sau khi được lưu trữ và truy cập từ máy chủ khác
Tích hợp ảnh động GIF
HTML hỗ trợ ảnh GIF động.
Minh họa kết quả ảnh GIF động
Biến hình ảnh thành liên kết trong HTML
Bạn cũng có thể thể hiện hình ảnh dưới dạng liên kết trong HTML.
Hình ảnh dùng làm liên kết
Tinh chỉnh vị trí hình ảnh
Bạn có thể sử dụng thuộc tính float để hiển thị hình ảnh ở bên trái hoặc phải của văn bản.
Hình ảnh minh họa cách bố trí hình ảnh với float
Tạo Image Map
HTML hỗ trợ tạo hình ảnh với các khu vực click được.
Hiển thị cách liên kết thẻ map với img qua thuộc tính name và usemap
Ảnh nền cho phần tử HTML
Sử dụng CSS và thuộc tính background-image để thêm ảnh nền cho các phần tử HTML.
Áp dụng ảnh nền cho toàn trang
Hiển thị kết quả của việc thêm ảnh nền cho toàn trang web
Đặt ảnh nền cho một đoạn văn bản cụ thể
Hiển thị kết quả của việc thêm ảnh nền cho một đoạn văn bản
Phần tử picture trong HTML
HTML5 giới thiệu phần tử picture để tăng cường sự linh hoạt trong việc chỉ định hình ảnh. Phần tử picture này bao gồm nhiều phần tử source, mỗi phần tử liên kết với một nguồn ảnh khác. Trình duyệt sẽ chọn ảnh tối ưu nhất dựa trên các thuộc tính của source. Phần tử source đầu tiên phù hợp sẽ được sử dụng, còn lại sẽ bị bỏ qua.
Kết quả khi sử dụng phần tử picture
Lưu ý: Phần tử con cuối cùng trong picture phải là img. Nếu trình duyệt không hỗ trợ picture hoặc không tìm thấy source phù hợp, phần tử img sẽ được sử dụng.
Tổng kết
- Phần tử img: dùng để thêm hình ảnh.
- Thuộc tính src: xác định URL hình ảnh.
- Thuộc tính alt: mô tả hình ảnh khi không hiển thị.
- Thuộc tính width và height (HTML): quy định kích thước hình ảnh.
- Thuộc tính width và height (CSS): định kích thước hình ảnh.
- Thuộc tính float: điều chỉnh vị trí hình ảnh.
- Phần tử map: dùng cho image-map.
- Phần tử area: xác định khu vực clickable trong image-map.
- Thuộc tính usemap của img: liên kết với image-map.
- Phần tử picture: hiển thị hình ảnh phù hợp trên các thiết bị khác nhau.
Thông qua bài viết này, bạn đã cùng Mytour tìm hiểu chi tiết về thẻ img trong HTML. Nếu có bất kỳ thắc mắc hay câu hỏi nào, hãy để lại ý kiến của bạn trong phần bình luận dưới bài. Chúng tôi sẽ tiếp tục hướng dẫn về bảng trong HTML trong những bài viết sắp tới.
