Bài 6: Chèn hình ảnh vào trang web với thẻ img trong HTML

5175

Chào các bạn,

Sau thẻ a để chèn liên kết vào trang web, thẻ tiếp theo mình muốn giới thiệu tới các bạn đó là thẻ img – thẻ sử dụng để chèn hình ảnh vào trang web.

I. Chèn hình ảnh với thẻ img

Thẻ img trong HTML có cấu trúc như sau:

<img src="https://phambinh.net/wp-content/uploads/2019/07/phambinh_logo.png" />

Một thuộc tính rất quan trọng luôn đi kèm với thẻ img đó là thuộc tính src, giá trị của thuộc tính này chính là liên kết tới file ảnh bạn muốn chèn lên trang web. Trong ví dụ trên, hình ảnh mình muốn chèn chính là file logo của phambinh.net.

Dưới đây là kết quả hiển thị của đoạn code trên.

II. Một số thuộc tính thường dùng với thẻ img

Ngoài thuộc tính bắt buộc src ra, thì thẻ img còn có một số thuộc tính tùy chọn khác mà mình sẽ liệt kê trong bảng dưới đây.

Thuộc tínhGiá trịMô tả
altMô tả về hình ảnhMô tả về hình ảnh, trong trường hợp ảnh không hiển thị được thì trình duyệt sẽ hiển thị nội dung này thay cho bức ảnh.
Thẻ này có giá trị đặc biệt cho làm SEO.
heightpixelsChỉnh chiều cao hiển thị của ảnh
widthpixelsChỉnh chiều rộng hiển thị của ảnh

III. Tổng kết

Bên cạnh nội dung văn bản, thì hình ảnh cũng là một dạng nội dung phổ biến trên web. Vì thế thao tác chèn hình ảnh vào website cũng được sử dụng nhiều và đang trở thành xu hướng.

Có 2 điều khi chèn ảnh lên website mà bạn cần lưu ý:

  • Thẻ img luôn đi kèm với thuộc tính alt để tối ưu hóa công cụ tìm kiếm tốt hơn.
  • Kích thước của ảnh không nên quá lớn, không nên vượt quá 500KB/ảnh để tránh trường hợp ảnh load quá lâu, tốn lưu lượng của người sử dụng.

Bài viết tới đây là kết thúc. Hẹn gặp lại bạn trong bài viết kế tiếp.

BÀI VIẾT LIÊN QUANXEM THÊM