Thẻ Thể Hiện Hình Ảnh Trong HTML

Đối với một website, bên cạnh nội dung hấp dẫn thì hình ảnh để minh họa cho nội dung đó cũng là một thành phần không thể thiếu nhất là đối với các website thương mại điện tử, phim,... Những hình ảnh sẽ tăng tính thẩm mỹ cho trang, góp phần thu hút khách hàng. Hình ảnh trong website có vai trò quan trọng như thế vậy làm thế nào để thể hiện hình ảnh lên một trang web? Việc thể hiện chúng có khó không? Chúng ta cùng tìm hiểu trong bài viết này nhé!

1. Cấu trúc thẻ thể hiện hình ảnh trong HTML

Cú pháp của thẻ thể hiện hình ảnh trong HTML

Bên cạnh thuộc tính src, ta cũng có thể kết hợp các thuộc tính khác trong thẻ img như:

width: Qui định độ rộng của ảnh
height: Qui định chiều cao của ảnh
alt: Mô tả thông tin chi tiết cho 1 ảnh ( Được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác)
title: Hiển thị nội dung tấm ảnh khi người dùng di chuyển con trỏ vào.

Ngoài ra còn các thuộc tính khác như border, hspace, vspace, align. Tuy nhiên các thuộc tính này hiện không còn được hỗ trợ trong phiên bản HTML5.

Ví dụ:

<html>
<head>
	<title>Thẻ Thể Hiện Hình Ảnh Trong HTML</title>
	<meta charset="utf-8">
</head>
<body>
	<img src="https://bitly.com.vn/ljllxn" width="300px" height="" alt="Logo Suntech" title="Suntech.edu.vn" />
</body>
</html>

Kết quả:

Một hình ảnh được hiển thị trên trình duyệt với kích thước chiều rộng là 300px. Thông thường để không làm méo ảnh thì chúng ta chỉ sét chiều rộng hoặc chiều cao của ảnh mà không sét cả 2. Khi sét chiều rộng hoặc chiều cao thì chiều còn lại tự động được căn chỉnh sao cho kích thước ảnh tỉ lệ với ảnh gốc mà không làm ảnh bị méo,...

2. Quy tắc để tạo hình ảnh

Để hình ảnh trên website của bạn có chất lượng cao, tốc độ load ảnh nhanh,... thì bạn nên tuân thủ một số nguyên tắc sau đây:

Lưu hình ảnh đúng định dạng

Các trang web chủ yếu sử dụng hình ảnh ở định dạng jpeg, gif hoặc png. Nếu bạn chọn sai định dạng hình ảnh thì hình ảnh của bạn có thể không sắc nét như mong muốn và có thể khiến trang web tải chậm hơn.

Lưu hình ảnh với kích thước phù hợp

Bạn nên chỉnh sửa hình ảnh cho phù hợp với kích thước mà bạn dự định sẽ hiển thị trên trang web. Nếu hình ảnh nhỏ hơn chiều rộng hoặc chiều cao mà bạn dự tính, hình ảnh có thể bị bóp méo và kéo dài. Nếu hình ảnh lớn hơn chiều rộng và chiều cao nếu bạn dự tính, hình ảnh sẽ hiển thị lâu hơn trên trang.

Sử dụng độ phân giải thích hợp

Màn hình máy tính được tạo thành từ các điểm được gọi là pixel. Hình ảnh được sử dụng trên web cũng được tạo thành từ điểm vô cùng nhỏ đó. Độ phân giải đề cập đến số điểm trên mỗi inch và hầu hết các màn hình máy tính chỉ hiển thị các trang web ở 72 pixel trên inch. Vì vậy, lưu hình ảnh ở độ phân giải cao hơn dẫn đến hình ảnh lớn hơn mức cần thiết và mất nhiều thời gian để tải xuống hơn.

3. Chú thích hình ảnh với figure và figurecaption

Trên các website mỗi hình ảnh thường đi kèm với một chú thích. HTML5 đã giới thiệu thẻ <figure> để chứa hình ảnh và chú thích của chúng để cả hai được liên kết với nhau. Bạn có thể có nhiều hình ảnh bên trong phần tử <figure> miễn là tất cả chúng đều có cùng chú thích. Để chú thích cho một hình ảnh ta dùng thẻ <figcaption> bên trong <figure>. Trước khi các phần tử này được tạo, không có cách nào để liên kết phần tử <img> với chú thích của nó.

<html>
<head>
	<title>Thẻ Thể Hiện Hình Ảnh Trong HTML</title>
	<meta charset="utf-8">
</head>
<body>
	<figure>	
		<img src="https://bitly.com.vn/ljllxn" alt="Logo Suntech" />
		<br/>
		<figurecaption>
			Logo SUNTECH gồm 2 gam màu chủ đạo cam và tím.
		</figurecaption>		
	</figure>
</body>
</html>

Kết quả:

Một chú thích được tạo ra bên dưới hình ảnh

Vậy là bài học về thẻ để hiển thị hình ảnh lên website đã kết thúc. Để giúp các bạn dễ dàng tiếp cận hơn với bài học Suntech đã xây dựng video hướng dẫn, bạn có thể tham khảo tại đây. Bạn có thể đặt câu hỏi trao đổi về bài học, góp phần cho sự phát triển của cộng đồng lập trình tại Group Facebook. Chúc các bạn học tốt!