Hướng dẫn thẻ img trong HTML

Table of Contents

1. Introduction
2. Đặt hình ảnh từ địa chỉ URL
3. Sử dụng hình ảnh lưu cục bộ
4. Cách thiết lập kích thước cho hình ảnh
5. Tính năng của thẻ <img>
6. Tối ưu hóa hình ảnh cho công cụ tìm kiếm
7. Sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh
8. Tải hình ảnh từ tài nguyên mạng về
9. Tổng kết

Đặt hình ảnh từ địa chỉ URL

Khi xây dựng một trang web, việc chèn hình ảnh là một phần quan trọng để tạo ra trải nghiệm hấp dẫn và thú vị cho người dùng. Trong HTML, ta sử dụng thẻ <img> để chèn hình ảnh vào trang web.

Để đặt hình ảnh từ địa chỉ URL, ta sử dụng thuộc tính src của thẻ <img>. Đường link hình ảnh có thể được lấy từ trang web bất kỳ hoặc từ một địa chỉ trực tuyến.

Ví dụ:

<img src="https://example.com/image.jpg" alt="Mô tả của hình ảnh">

Trong ví dụ trên, ta đặt đường link hình ảnh vào thuộc tính src và sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh.

Sử dụng hình ảnh lưu cục bộ

Ngoài việc sử dụng hình ảnh từ địa chỉ URL, chúng ta cũng có thể sử dụng hình ảnh đã lưu trữ cục bộ trên máy tính của mình. Để sử dụng hình ảnh cục bộ, ta cần đưa đường dẫn tới hình ảnh vào thuộc tính src của thẻ <img>.

Để làm điều này, ta cần lưu hình ảnh vào một thư mục trong dự án của mình. Chúng ta có thể tạo một thư mục có tên là "img" và đặt hình ảnh vào đó. Sau đó, ta có thể đưa đường dẫn tới hình ảnh lưu cục bộ vào thuộc tính src của thẻ <img>.

Ví dụ:

<img src="img/image.jpg" alt="Mô tả của hình ảnh">

Trong ví dụ trên, ta đặt hình ảnh vào thư mục "img" và đưa đường dẫn hình ảnh vào thuộc tính src.

Cách thiết lập kích thước cho hình ảnh

Để thiết lập kích thước cho hình ảnh, chúng ta có thể sử dụng Hai thuộc tính là width và Height của thẻ <img>. Nhưng chúng tôi khuyến khích chỉ định một trong hai thuộc tính này để tránh việc méo hình ảnh.

Ví dụ:

<img src="https://example.com/image.jpg" alt="Mô tả của hình ảnh" width="300" height="200">

Trong ví dụ trên, ta đã thiết lập kích thước cho hình ảnh là 300 pixel chiều rộng và 200 pixel chiều cao. Khi chỉ định một trong hai thuộc tính width và height, trình duyệt sẽ tự động căn chỉnh kích thước hình ảnh để không làm méo hình ảnh.

Tính năng của thẻ <img>

Thẻ <img> trong HTML cung cấp một số tính năng quan trọng giúp đảm bảo trải nghiệm người dùng tốt nhất. Dưới đây là một số tính năng quan trọng của thẻ <img>:

1. Tạo trải nghiệm hấp dẫn: Sử dụng hình ảnh phù hợp để tạo ra trải nghiệm hấp dẫn và thu hút người dùng.

2. Cung cấp mô tả cho hình ảnh: Sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh, giúp người dùng biết nội dung hình ảnh khi hình ảnh không thể hiển thị.

3. Hỗ trợ cho công cụ tìm kiếm: Một thuộc tính alt được cung cấp cho hình ảnh để trình đọc màn hình và các công cụ tìm kiếm có thể hiểu nội dung của hình ảnh.

4. Cắt tỉ lệ hình ảnh: Sử dụng thuộc tính width hoặc height để cắt tỉ lệ hình ảnh và đảm bảo rằng hình ảnh không bị méo.

5. Tối ưu hóa kích thước của hình ảnh: Sử dụng kích thước hình ảnh phù hợp để giảm thời gian tải trang và cải thiện hiệu suất trang web.

Tối ưu hóa hình ảnh cho công cụ tìm kiếm

Khi tạo và chèn hình ảnh vào trang web, việc tối ưu hóa cho công cụ tìm kiếm là rất quan trọng. Các công cụ tìm kiếm không thể nhìn thấy hình ảnh như con người, vì vậy chúng cần một số thông tin bổ sung để hiểu hình ảnh đó là gì.

Một cách để tối ưu hóa hình ảnh cho công cụ tìm kiếm là sử dụng thuộc tính alt và chuẩn bị một mô tả ngắn gọn và chính xác cho hình ảnh. Mô tả này nên mô tả sự nội dung và ý nghĩa của hình ảnh.

Ví dụ:

<img src="https://example.com/image.jpg" alt="Hình ảnh về căn hộ sang trọng">

Trong ví dụ trên, ta đã sử dụng thuộc tính alt để cung cấp mô tả căn hộ sang trọng cho hình ảnh. Điều này giúp công cụ tìm kiếm hiểu và xếp hạng nội dung của trang web.

Sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh

Thuộc tính alt trong thẻ <img> được sử dụng để cung cấp một mô tả cho hình ảnh. Mô tả này sẽ được hiển thị khi hình ảnh không thể hiển thị, hoặc khi người dùng sử dụng trình đọc màn hình để truy cập trang web.

Sử dụng thuộc tính alt là một yêu cầu của việc tuân thủ WCAG 2.0 để đảm bảo truy cập đầy đủ và bình đẳng cho người dùng có khuyết tật.

Ví dụ:

<img src="https://example.com/image.jpg" alt="Hình ảnh mô tả một con chó">

Trong ví dụ trên, ta đã sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh - "Hình ảnh mô tả một con chó". Điều này giúp cho người dùng không thể nhìn thấy hình ảnh có thể hiểu nội dung của hình ảnh.

Tải hình ảnh từ tài nguyên mạng về

Ngoài việc sử dụng hình ảnh từ tài nguyên mạng, chúng ta cũng có thể tải hình ảnh từ tài nguyên mạng về máy tính để sử dụng. Để làm điều này, ta cần tìm và lưu hình ảnh từ tài nguyên mạng về máy tính. Sau đó, ta có thể sử dụng hình ảnh đã tải về bằng đường dẫn cục bộ của nó.

Ví dụ:

1. Tìm kiếm và tải về hình ảnh từ tài nguyên mạng.
2. Lưu hình ảnh vào thư mục trong dự án.
3. Sử dụng đường dẫn cục bộ của hình ảnh trong thuộc tính src của thẻ <img>.

Trong ví dụ trên, ta đã lưu hình ảnh vào thư mục "img" trong dự án và sử dụng đường dẫn cục bộ của hình ảnh trong thuộc tính src.

Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu cách sử dụng thẻ <img> để chèn hình ảnh vào trang web. Chúng ta đã biết cách đặt hình ảnh từ địa chỉ URL và sử dụng hình ảnh lưu cục bộ. Chúng ta cũng đã tìm hiểu cách thiết lập kích thước cho hình ảnh và tối ưu hóa hình ảnh cho công cụ tìm kiếm. Cuối cùng, chúng ta đã sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh và tải hình ảnh từ tài nguyên mạng về để sử dụng trong trang web của chúng ta.

Hy vọng rằng bài viết đã giúp các bạn hiểu rõ hơn về cách sử dụng hình ảnh trong lập trình web và áp dụng nó vào trang web của mình. Hãy thực hành và tạo ra những trang web đẹp với hình ảnh hấp dẫn!