Thẻ img trong HTML

Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về link trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thẻ img trong HTML.

Thẻ img trong HTML
 

1. Thẻ img trong HTML

Trong HTML, hình ảnh được chỉ định bằng thẻ img.
Thẻ img là thẻ trống, chỉ chứa thuộc tính và không có thẻ đóng.
Thuộc tính src chỉ định URL (địa chỉ trang web) của hình ảnh:

1.1 Thuộc tính alt

Thuộc tính alt chỉ định văn bản (text) thay thế cho hình ảnh trong trường hợp nếu hình ảnh không hiển thị (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Giá trị của thuộc tính alt sẽ mô tả hình ảnh.
Ví dụ 1: dưới đây là ví dụ về thuộc tính alt trong HTML:

Kết quả đầu ra trả về sau khi áp dụng thuộc tính alt có dạng như dưới đây:

Nếu không thể tìm thấy hình ảnh, trình duyệt sẽ hiển thị giá trị của thuộc tính alt.
Ví dụ 2: Ví dụ dưới đây minh họa cách trình duyệt hiển thị giá trị thuộc tính alt trong trường hợp không tìm thấy hình ảnh:

Kết quả đầu ra có dạng như dưới đây:

Lưu ý: Thuộc tính alt là bắt buộc Trang web sẽ hiển thị lỗi nếu không có thuộc tính này.

1.2 Thay đổi kích thước hình ảnh trong HTML

Chúng ta có thể sử dụng thuộc tính style để chỉ định chiều rộng và chiều cao của hình ảnh.
Ví dụ 1: trong ví dụ dưới đây chúng ta sử dụng thuộc tính style để chỉ định chiều rộng và chiều cao của hình ảnh trong HTML:

Kết quả đầu ra có dạng như dưới đây:

Ngoài ra chúng ta cũng có thể sử dụng các thuộc tính width và height.
Ví dụ 2: Trong ví dụ này chúng ta sử dụng các thuộc tính width và height để chỉ định chiều rộng và chiều cao của hình ảnh trong HTML:

Kết quả đầu ra có dạng như dưới đây:

Lưu ý:
- Các thuộc tính width và height trong HTML luôn chỉ định chiều rộng và chiều cao hình ảnh bằng đơn vị pixel.
- Chúng ta phải chỉ định chiều rộng và chiều cao hình ảnh. Nếu không chỉ định chiều rộng và chiều cao, trang web có thể bị lỗi khi tải hình ảnh.

1.3 Sử dụng thuộc tính width, height hay style?

Các thuộc tính width, height và style đều là các thuộc tính hợp lệ trong HTML.
Tuy nhiên Taimienphi.vn khuyến cáo bạn nên sử dụng thuộc tính style để ngăn styles sheet thay đổi kích thước hình ảnh.
Ví dụ: ví dụ dưới đây minh họa cách styles sheet thay đổi kích thước hình ảnh trong HTML:

Kết quả đầu ra có dạng như dưới đây:

1.4 Lưu trữ hình ảnh trong thư mục khác

Nếu không được chỉ định, trình duyệt sẽ tìm hình ảnh trong cùng thư mục với trang web.
Tuy nhiên để lưu trữ hình ảnh trong thư mục con, chúng ta phải thêm tên thư mục trong thuộc tính src.
Ví dụ: Ví dụ dưới đây minh họa cách lưu trữ hình ảnh trong thư mục con trong HTML:

Kết quả đầu ra có dạng như dưới đây:

1.5 Lưu trữ hình ảnh trên máy chủ khác

Một số trang web lưu trữ hình ảnh trên máy chủ hình ảnh. Tuy nhiên trong thực tế chúng ta có thể truy cập hình ảnh từ địa chỉ web bất kỳ.
Ví dụ: Trong ví dụ dưới đây hình ảnh được lưu trữ trên máy chủ khác:

Kết quả đầu ra có dạng như dưới đây:

1.6 Ảnh động GIF trong HTML

HTML cũng cho phép ảnh động GIF.
Ví dụ: Ví dụ dưới đây minh họa ảnh động GIF trong HTML:

Kết quả đầu ra có dạng như dưới đây:

1.7 Sử dụng hình ảnh làm link (liên kết)

Để sử dụng hình ảnh làm link (liên kết) trong HTML, chúng ta đặt thẻ img bên trong thẻ a.
Ví dụ: Trong ví dụ dưới đây minh họa cách sử dụng hình ảnh để làm link trong HTML:

Kết quả đầu ra có dạng như dưới đây:

Lưu ý: Chúng ta thêm border:0; để ngăn trình duyệt IE9 và các phiên bản trước đó không hiển thị viền xung quanh hinh ảnh.

1.8 Điều chỉnh vị trí hình ảnh trong HTML

Trong HTML, chúng ta sử dụng thuộc tính float để điều chỉnh vị trí hình ảnh ở bên phải hoặc bên trái văn bản (text).
Ví dụ: Trong ví dụ dưới đây chúng ta sẽ sử dụng thuộc tính float để điều chỉnh hình ảnh ở phía bên phải và phía bên trái văn bản:

Kết quả đầu ra có dạng như dưới đây:

1.9 Image Map trong HTML

Thẻ map được sử dụng để chỉ định image-map trong HTML. image-map là hình ảnh có các phần có thể click được.
Ví dụ: dưới đây là ví dụ về image map trong HTML:

Kết quả đầu ra có dạng như dưới đây:

Thuộc tính name của thẻ map được liên kết với thuộc tính usemap của thẻ img và tạo mối quan hệ giữa hình ảnh và map.
Phần tử map chứa một số thẻ area, được sử dụng để chỉ định các khu vực có thể click được trong image-map.

1.10 Ảnh nền cho phần tử HTML

Để thêm ảnh nền cho phần tử HTML, chúng ta sử dụng thuộc tính background-image trong CSS.

Ví dụ 1: Thêm ảnh nền trên trang web, chỉ định thuộc tính background-image trong phần tử BODY:

Kết quả đầu ra có dạng như dưới đây:

Ví dụ 2: Thêm ảnh nền trên đoạn văn bản, chỉ định thuộc tính background-image trong phần tử P:

Kết quả đầu ra có dạng như dưới đây:

1.11 Phần tử picture trong HTML

Trên HTML5 được bổ sung thêm phần tử picture để cải thiện mức độ linh hoạt khi chỉ định tài nguyên ảnh.
Phần tử picture chứa một số phần tử source, mỗi phần tử tham chiếu đến các nguồn hình ảnh khác nhau. Bằng cách này trình duyệt có thể lựa chọn hình ảnh phù hợp nhất với các chế độ xem và trên các thiết bị khác nhau.
Mỗi phần tử source có chứa các thuộc tính mô tả nếu hình ảnh được xem là phù hợp nhất.
Trình duyệt sẽ sử dụng phần tử source đầu tiên với các giá trị thuộc tính phù hợp và bỏ qua các phần tử source tiếp theo.
Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng phần tử picture trong HTYM:

Kết quả đầu ra khi áp dụng phần tử picture có dạng như dưới đây:

Lưu ý: Chúng ta phải chỉ định phần tử img là phần tử con cuối cùng của phần tử picture. Trình duyệt không hỗ trợ phần tử picture hoặc nếu không có thể source nào phù hợp sẽ sử dụng phần tử img.

2. Tổng kết

- Sử dụng phần tử img trong HTML để chỉ định hình ảnh.
- Sử dụng thuộc tính src trong HTML để chỉ định URL của hình ảnh.
- Sử dụng thuộc tính alt trong HTML để chỉ định văn bản thay thế hình ảnh trong trường hợp nếu hình ảnh không hiển thị.
- Sử dụng thuộc tính width và height trong HTML để chỉ định kích thước hình ảnh.
- Sử dụng thuộc tính width và height trong CSS để chỉ định kích thước hình ảnh.
- Sử dụng thuộc tính float trong HTML để điều chỉnh vị trí hình ảnh.
- Sử dụng phần tử map để chỉ định image-map.
- Sử dụng phần tử area để chỉ định khu vực có thể click được trong image-map.
- Sử dụng thuộc tính usemap của phần tử img trong HTML để trỏ đến image-map.
- Sử dụng phần tử picture để hiển thị các hình ảnh khác nhau trên các thiết bị khác nhau.

2.1 Thẻ img trong HTML

Dưới đây là bảng danh sách thẻ img trong HTML:

https://thuthuat.taimienphi.vn/the-img-trong-html-50617n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về thẻ img trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết để bạn có thể học HTML tốt hơn nhé. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về bảng trong HTML nhé.