Khám phá Thẻ img trong HTML

Sau khi đã tìm hiểu về link trong HTML, bây giờ chúng ta sẽ tiếp tục khám phá thẻ img trong HTML.

Tìm hiểu về Thẻ img trong HTML
 

1. Tìm hiểu Thẻ img trong HTML

Thẻ img trong HTML dùng để chèn hình ảnh. Đây là thẻ không có thẻ đóng, chứa các thuộc tính như src để chỉ đường dẫn đến hình ảnh.

1.1 Hiểu rõ Thuộc tính alt

Thuộc tính alt trong HTML dùng để đặt văn bản thay thế cho hình ảnh khi nó không thể hiển thị được, chẳng hạn do lỗi đường dẫn hay sử dụng trình đọc màn hình. Văn bản alt mô tả nội dung của hình ảnh.
Ví dụ minh họa: Xem ví dụ về thuộc tính alt trong HTML dưới đây:

Hình ảnh dưới đây cho thấy cách thức hoạt động của thuộc tính alt khi được áp dụng:

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.
Ví dụ minh họa: Dưới đây là cách trình duyệt hiển thị văn bản alt khi hình ảnh không được tải:

Dưới đây là hình ảnh minh họa cho kết quả thu được:

Ghi chú:

Thuộc tính alt là yếu tố không thể thiếu trong thẻ img. Nếu bỏ qua, trang web sẽ báo lỗi do thiếu thuộc tính này.

1.2 Điều chỉnh kích thước ảnh trong HTML

Sử dụng thuộc tính style giúp điều chỉnh chiều rộng và chiều cao của hình ảnh.
Ví dụ minh họa: Xem cách sử dụng thuộc tính style để thay đổi kích thước hình ảnh trong HTML qua ví dụ sau:

Dưới đây là hình ảnh minh họa cho kết quả:

Bên cạnh đó, việc áp dụng thuộc tính width và height cũng rất hữu ích.
Ví dụ minh họa: Đây là cách sử dụng width và height để thiết lập kích thước của hình ảnh trong HTML:

Dưới đây là ví dụ về kết quả khi áp dụng width và height:

Ghi chú:
- Trong HTML, width và height đều được tính bằng pixel.
- Cần phải xác định rõ ràng chiều rộng và chiều cao cho hình ảnh để tránh lỗi hiển thị trên trang web.

1.3 Chọn thuộc tính width, height hay style?

Trong HTML, bạn có thể dùng thuộc tính width, height hoặc style. Mytour gợi ý 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.
Ví dụ minh họa: Cách bảng styles sheet có thể thay đổi kích cỡ ảnh trong HTML:

Dưới đây là hình ảnh minh họa kết quả sau khi áp dụng:

1.4 Cách 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, cần chỉ định đường dẫn trong thuộc tính src.
Ví dụ: Hướng dẫn cách lưu trữ hình ảnh trong thư mục con trong HTML:

Dưới đây là minh họa cho kết quả thực hiện:

1.5 Lưu trữ hình ảnh trên máy chủ từ xa

Hình ảnh có thể được lưu trữ trên máy chủ khác và truy cập qua URL.
Ví dụ: Minh họa việc lấy hình ảnh từ máy chủ từ xa:

Hình ảnh sau khi được lưu trữ và truy cập từ máy chủ khác như sau:

1.6 Tích hợp ảnh động GIF

Hỗ trợ ảnh GIF động trong HTML.
Ví dụ: Minh họa sử dụng ảnh GIF động:

Minh họa kết quả ảnh GIF động như sau:

1.7 Biến hình ảnh thành liên kết trong HTML

1.7 Hóa hình ảnh thành liên kết

Thể hiện hình ảnh làm liên kết trong HTML.
Ví dụ: Hình ảnh dùng làm liên kết:

Ghi chú: Sử dụng border:0; để loại bỏ viền trên IE9 và các phiên bản cũ hơn.

1.8 Tinh chỉnh vị trí hình ảnh

1.8 Vị trí hình ảnh với float

Hiển thị hình ảnh nổi bên trái hoặc phải của văn bản.
Ví dụ: Cách bố trí hình ảnh với float:

1.9 Tạo Image Map

Sử dụng thẻ map để tạo hình ảnh với các khu vực click được.
Ví dụ: Minh họa Image Map:

Hiển thị cách liên kết thẻ map với img qua thuộc tính name và usemap.

Thẻ map kết hợp với các thẻ area tạo nên các khu vực click được trên hình ảnh.

1.10 Ả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.

Ví dụ 1: Áp dụng ảnh nền cho toàn trang bằng cách sử dụng thuộc tính background-image trong thẻ BODY.

Hiển thị kết quả của việc thêm ảnh nền cho toàn trang web.

Ví dụ 2: Đặt ảnh nền cho một đoạn văn bản cụ thể bằng cách sử dụng thuộc tính background-image trong thẻ P.

Hiển thị kết quả của việc thêm ảnh nền cho một đoạn văn bản.

1.11 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 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. Ví dụ dưới đây minh họa cách dùng picture trong HTML:

Dưới đây là 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.

2. 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.

2.1 Thẻ img trong HTML

Bảng liệt kê các thẻ img trong HTML:

Bạn vừa tìm hiểu về thẻ img trong HTML qua bài viết của Mytour. Mọi thắc mắc hoặc câu hỏi, xin mời bạn đóng góp ý kiế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.