Thẻ là một thẻ HTML được sử dụng để chèn ảnh vào trang web. Nó là một thẻ rỗng, có nghĩa là không có thẻ đóng tương ứng, và chỉ chứa các thuộc tính để cung cấp thông tin về ảnh như đường dẫn và mô tả. Trong bài viết này Stringee sẽ cùng bạn tìm hiểu về thẻ này cũng như cách chèn ảnh trong HTML.

1. Cách chèn ảnh vào HTML với thẻ IMG

Để chèn ảnh vào trang web của bạn bằng HTML, bạn cần sử dụng thẻ và cung cấp đường dẫn (URL) tới tệp ảnh. Lưu ý:

• Đảm bảo rằng bạn đã có tệp ảnh trên máy tính hoặc một đường dẫn URL tới tệp ảnh trên Internet.
• Tạo một thẻ trong mã HTML của bạn. Thẻ này sẽ là nơi chứa ảnh.

Dưới đây là cú pháp để chèn một ảnh vào HTML:

<img src="duong_dan_anh.jpg" alt="Mô tả ảnh">

• Trong đó, thuộc tính src chứa đường dẫn tới tệp ảnh. Nếu tệp ảnh nằm trong cùng thư mục với tệp HTML của bạn, bạn chỉ cần cung cấp tên tệp ảnh. Nếu ảnh nằm ở một thư mục khác, bạn cần cung cấp đường dẫn tương đối hoặc đường dẫn tuyệt đối.
• Thuộc tính alt là văn bản mô tả ảnh, nó sẽ hiển thị khi không thể tải được hoặc khi người dùng di chuột qua ảnh. Đây là một yếu tố quan trọng cho truy cập và tối ưu hóa SEO.

>>> Xem thêm bài viết về HTML:

- Các cách phổ biến để nhúng CSS vào HTML

- Thẻ a trong HTML

2. Các thuộc tính của thẻ IMG

• src: Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web Ví dụ:

<img src="duong_dan_anh.jpg">

• alt: Xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác Ví dụ:

<img src="duong_dan_anh.jpg" alt="Mô tả ảnh">

• border: Xác định độ dày của đường viền bao xung quanh tấm hình Ví dụ:

<img src="duong_dan_anh.jpg" alt="Hình sẽ có đường viền dày 10px" border="10">

• width: Thiết lập chiều rộng cho tấm hình Ví dụ:

<img src="duong_dan_anh.jpg" alt="Hình có chiều rộng 300px" width="300px">

• height: Thiết lập chiều cao cho tấm hình Ví dụ:

<img src="duong_dan_anh.jpg" alt="Hình có chiều cao 200px" height="200px">

• vspace: Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình Ví dụ:

<img src="duong_dan_anh.jpg" alt="Hình có lề trên và lề dưới là 100px" vspace="100">

• hspace: Xác định khoảng cách lề bên trái và lề bên phải của tấm hình Ví dụ:

<img src="duong_dan_anh.jpg" alt="hình có lề trái và lề phải là 100px" hspace="100">

• align: Xác định vị trí của tấm hình so với các văn bản xung quanh Ví dụ:

<img src="duong_dan_anh.jpg" alt="Hình được đẩy sang bên phía tay trái" align="left">

• usemap: Xác định một "bản đồ hệ thống tọa độ của các vùng" để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ &

>>> Xem thêm bài viết:
- Node.js là gì? Kiến thức tổng quan từ A-Z về Node.js

- Giải thích về Asynchronous trong JavaScript và cách thức hoạt động

- NestJS là gì? Tính năng hữu ích của NestJS đối với lập trình viên

3. Những lưu ý khi sử dụng thẻ IMG

• Thẻ img luôn thi 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 load ảnh quá lâu, tốn lưu lượng của người sử dụng.

Tổng kết

Chúng ta đã tìm hiểu xong về thẻ IMG và cách sử dụng thẻ IMG trong HTML. Hiện nay trong hầu hết các bài viết, ngoài 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 ảnh vào website là một kỹ năng không thể thiếu ở lập trình viên website.

Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.