Thẻ img trong HTML

Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới đây để tìm hiểu chi tiết 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.

the img trong html hoc html

Thẻ img trong HTML
 

Mục Lục bài viết:
1. Thẻ img trong HTML

    1.1. Thuộc tính alt
    1.2. Thay đổi kích thước hình ảnh trong HTML
    1.3. Sử dụng thuộc tính width, height hay style?
    1.4. Lưu trữ hình ảnh trong thư mục khác
    1.5. Lưu trữ hình ảnh trên máy chủ khác
    1.6. Ảnh động GIF trong HTML
    1.7. Sử dụng hình ảnh làm link (liên kết)
    1.8. Điều chỉnh vị trí hình ảnh trong HTML
    1.9. Image Map trong HTML
    1.10. Ảnh nền cho phần tử HTML
    1.11. Phần tử picture trong HTML
2. Tổng kết

    2.1. 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:

the img trong html

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:

the img trong html 2

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

the img trong html 3

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:

the img trong html 4

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

the img trong html 5

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:

the img trong html 6

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

the img trong html 7

Ngoài ra chúng ta cũng có thể sử dụng các thuộc tính widthheight.
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:

the img trong html 8

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

the img trong html 9

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:

the img trong html 10

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

the img trong html 11

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:

the img trong html 12

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

the img trong html 13

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:

the img trong html 14

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

the img trong html 15

 

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:

the img trong html 16

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

the img trong html 17

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:

the img trong html 18

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

the img trong html 19

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:

the img trong html 20

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

the img trong html 21

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:

the img trong html 22

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

the img trong html 23

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:

the img trong html 24

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

the img trong html 25

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:

the img trong html 26

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

the img trong html 27

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:

the img trong html 28

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

the img trong html 29

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 height trong HTML để chỉ định kích thước hình ảnh.
- Sử dụng thuộc tính width 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:

the img trong html 30

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

Tác giả: An Nguy     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Đường dẫn file trong HTML, link Ảnh tuyệt đối và tương đối
Biểu tượng trong HTML
Học bảng (table) trong HTML
Tìm hiểu các phần tử trong HTML
Danh sách các thuộc tính trong HTML
Từ khoá liên quan:

Thẻ img trong HTML

, HTML, link trong HTML,

SOFT LIÊN QUAN
  • Copy HTML

    Sao chép mã nguồn HTML

    Rất ít người trong chúng ta còn xa lạ HTML, đây là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên hoặc diễn tả một trang web. Ví dụ như chỉ cần một đoạn thông tin trong bất kỳ trang web nào đó là bạn đã có thể tra ra ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá