Tìm hiểu thẻ IMG HTML

Hình ảnh được xem là một trong những yếu tố quan trọng mà hầu như bất cứ trang web nào cũng phải có vì nó giúp website sinh động và hấp dẫn hơn. Hôm nay chúng ta sẽ đi vào tìm hiểu thẻ <img> (hình ảnh) cho phép chúng ta thêm hình ảnh vào trang web của mình nhé.

Cấu Trúc Của Thẻ <img>

Đây là cấu trúc cơ bản của thẻ <img>:

<img src="url" alt="Mô tả ảnh" />

Bạn sẽ thấy rằng, thẻ img này sẽ giống như thẻ <a> (anchor) mà chúng ta đã học ở bài trước, thành phần chính của thẻ <img> được dùng để hiển thị hình ảnh là thuộc tính src.

src (source): Thuộc tính này cho trình duyệt biết vị trí (đường dẫn) của hình ảnh mà bạn muốn hiển thị. Giá trị của thuộc tính src là đường dẫn đến hình ảnh.

• Đường dẫn tương đối (Relative path): Dùng để chỉ các hình ảnh nằm trong cùng thư mục hoặc các thư mục con của trang web.
• Đường dẫn tuyệt đối (Absolute path): Dùng để chỉ các hình ảnh nằm trên một website khác.

Một điểm quan trọng mà bạn có thể thấy ở thẻ này là nó  không có thẻ đóng (self-closing tag) hay còn được gọi là “void element“.  Vì thẻ <img> không chứa nội dung bên trong và nó sẽ chỉ sử dụng các thuộc tính (attributes) để xác định hình ảnh nào sẽ được hiển thị và cách thức hiển thị như thế nào.

Ví Dụ Về Thẻ <img>

Dưới đây là một ví dụ về thẻ <img> với thuộc tính src là hình ảnh logo của Niềm Vui Lập Trình nhé:

See the Pen
Thẻ hình ảnh HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Một thuộc tính khác của thẻ <img> mà bạn nên luôn luôn sử dụng là thuộc tính alt (Alternative Text Description). Nó cung cấp một đoạn mô tả thay thế cho hình ảnh của chúng ta trên trang web. Tại sao lại phải sử dụng thuộc tính này làm gì nhỉ?

Đoạn văn bản Alt của hình ảnh sẽ được hiển thị trong trường hợp hình ảnh không thể tải được (ví dụ: do đường dẫn bị sai, kết nối mạng chậm…).

Ngoài ra, thuộc tính alt còn có vai trò quan trọng trong việc cải thiện khả năng tiếp cận (accessibility) của website. Các trình đọc màn hình (screen readers) sẽ sử dụng nội dung của thuộc tính alt để mô tả hình ảnh cho những người khiếm thị. Do đó bạn hãy nhớ mô tả hình ảnh bằng thẻ alt nhé.

Các thuộc tính khác

Ngoài src và alt, thẻ <img> còn có một số thuộc tính khác, cho phép bạn tùy chỉnh cách hiển thị hình ảnh:

• width: Chiều rộng của hình ảnh (đơn vị: pixel).
• height: Chiều cao của hình ảnh (đơn vị: pixel).
• title: Hiển thị một đoạn văn bản khi người dùng di chuột qua hình ảnh.
• loading: Chỉ định cách trình duyệt tải hình ảnh (ví dụ: lazy để tải hình ảnh khi chúng xuất hiện trong khung nhìn).

Ví Dụ Thực Tế

Để giúp bạn dễ hình dung hơn, chúng ta hãy xem một ví dụ về nội dung và hình ảnh các danh lam thắng cảnh Việt Nam nhé:

See the Pen
Ví dụ hình ảnh HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Giải thích:

• Trong ví dụ này, chúng ta tạo một trang web đơn giản giới thiệu về danh lam thắng cảnh Việt Nam.
• Chúng ta sử dụng thẻ <img> để hiển thị hình ảnh của các danh lam nổi tiếng nhưVịnh Hạ Long, Chùa Một Cột hay Hoa Sen.

Lưu ý:

• Bạn có thể thay đổi kích thước của hình ảnh bằng cách điều chỉnh các thuộc tính width và height.
• Hãy nhớ thêm thuộc tính alt để mô tả hình ảnh một cách rõ ràng.

Mẹo và Lưu Ý Khi Sử Dụng Thẻ <img>

Chọn định dạng ảnh phù hợp:

• JPEG: Phù hợp cho ảnh có nhiều màu sắc và chi tiết, như ảnh chụp phong cảnh hoặc chân dung.
• PNG: Phù hợp cho ảnh có độ trong suốt hoặc ảnh có ít màu sắc, như logo hoặc biểu tượng.
• GIF: Phù hợp cho ảnh động hoặc ảnh có ít màu sắc.

Tối ưu hóa kích thước ảnh: Kích thước ảnh quá lớn có thể làm chậm tốc độ tải trang web. Hãy sử dụng các công cụ nén ảnh để giảm kích thước ảnh mà không làm giảm chất lượng quá nhiều.

Bạn có thể sử dụng các công cụ trực tuyến để tạo ảnh thumbnail (ảnh thu nhỏ) cho website của mình.

Nếu bạn muốn tạo hiệu ứng đặc biệt cho hình ảnh (ví dụ: hiệu ứng hover, hiệu ứng lightbox…), bạn có thể sử dụng CSS hoặc JavaScript nhé.

Kết Luận

Trong bài học này, chúng ta đã tìm hiểu cách sử dụng thẻ <img> để thêm hình ảnh vào trang web.Hy vọng rằng bạn đã nắm vững kiến thức và có thể áp dụng nó vào các dự án thực tế của bạn. Chúc bạn thành công nhé!