Hình ảnh trong HTML: Cách chỉnh kích thước ảnh và thêm chú thích

Prev Article Next Article

Trong cuộc sống hiện đại ngày nay, việc sử dụng hình ảnh để tăng cường trải nghiệm của người dùng trên trang web đã trở thành một yếu tố quan trọng. Trong bài viết này, chúng ta sẽ khám phá về cách thêm ảnh vào trang web bằng cách sử dụng các thẻ hợp lệ trong HTML và cách chỉnh kích thước ảnh để phù hợp với trang web của bạn.

Contents

1 Cú pháp hình ảnh trong HTML

Cú pháp hình ảnh trong HTML

Trong HTML, chúng ta sử dụng thẻ <img> để định nghĩa một ảnh. Thẻ <img> là một thẻ rỗng, có thể chứa các thuộc tính và không có thẻ đóng. Thuộc tính src xác định URL (địa chỉ web) của hình ảnh.

<img src="url">

Thuộc tính alt

Thuộc tính alt được sử dụng để cung cấp mô tả cho hình ảnh. Nếu người dùng không thể xem được ảnh vì lý do nào đó (như mạng yếu, lỗi trong thuộc tính src hoặc sử dụng công cụ đọc màn hình), giá trị của thuộc tính alt sẽ được hiển thị.

<img src="img_quantrimang.jpg" alt="Trang web Quản trị mạng">

Lưu ý: Thuộc tính alt là bắt buộc. Trang web sẽ không hợp lệ nếu hình ảnh không có thuộc tính này.

Kích thước hình ảnh – chiều rộng và chiều cao

Để chỉnh kích thước của ảnh trong HTML, chúng ta có thể sử dụng thuộc tính style hoặc thuộc tính width và height. Thuộc tính style cho phép chúng ta xác định chiều rộng và chiều cao của ảnh bằng pixel.

<img src="congnghe.jpg" alt="Trang web công nghệ" style="width:500px;height:600px;">

Hoặc, chúng ta có thể sử dụng thuộc tính width và height để chỉ định kích thước của ảnh.

<img src="congnghe.jpg" alt="Trang web công nghệ" width="500" height="600">

Lưu ý: Luôn luôn chỉ định kích thước ảnh. Nếu không, trang web có thể tải ảnh với tốc độ chậm.

Width, Height hoặc Style?

Trong HTML5, chúng ta có thể sử dụng cả thuộc tính width, height và style để chỉnh kích thước ảnh. Tuy nhiên, nên sử dụng thuộc tính style vì nó giúp ngăn tập tin định dạng (Style Sheet) thay đổi kích thước của ảnh.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>

Hình ảnh nằm trong thư mục khác

Nếu không được chỉ định cụ thể, trình duyệt sẽ tìm kiếm ảnh trong cùng một thư mục với trang web hiện tại. Nếu ảnh được lưu trong một thư mục con, bạn phải đưa tên thư mục vào thuộc tính src.

<img src="/photos/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Hình ảnh nằm trên máy chủ khác

Một số trang web lưu trữ ảnh trên máy chủ riêng. Thực tế, bạn có thể truy cập ảnh từ bất kỳ địa chỉ web nào trên thế giới.

<img src="https://www.quantrimang.com/hinhanh/quantrimang_html.jpg" alt="Quantrimang.com">

Hình ảnh động

HTML cũng cho phép hiển thị ảnh động (GIF).

<img src="laptrinh.gif" alt="Máy tính" style="width:48px;height:48px;">

Hình ảnh đóng vai trò là đường dẫn

Để sử dụng một hình ảnh làm liên kết, chúng ta có thể đặt thẻ <img> bên trong thẻ <a>.

<a href="default.asp">
  <img src="hihi.gif" alt="Hướng dẫn HTML" style="width:42px;height:42px;border:0;">
</a>

Lưu ý: Chúng ta thêm border:0; để ngăn IE9 (và các phiên bản trước đó) hiển thị đường viền xung quanh ảnh khi ảnh là liên kết.

Hình ảnh nổi

Thuộc tính float trong CSS được sử dụng để tạo hiệu ứng hình ảnh nổi, có thể nổi về phía bên trái hoặc phải của văn bản.

<p>
  <img src="hihi.gif" alt="Mặt cười" style="float:right;width:42px;height:42px;">
  Hình ảnh này sẽ nổi về phía bên phải của văn bản.
</p>
<p>
  <img src="hihi.gif" alt="Mặt cười" style="float:left;width:42px;height:42px;">
  Hình ảnh này sẽ nổi về phía bên trái của văn bản.
</p>

Tạo bản đồ bằng hình ảnh Image Map

Thẻ <map> trong HTML được sử dụng để định nghĩa một “bản đồ” của hình ảnh, trong đó các vùng click có thể thực hiện một tác vụ nào đó. Với hình ảnh mà chúng ta sẽ xem xét dưới đây, chúng ta có thể đặt các vùng click tại máy tính, điện thoại và cốc cà phê.

Dưới đây là mã HTML đầy đủ, bạn có thể copy vào Notepad, lưu thành file .html và chạy thử trên máy tính của bạn.

<!DOCTYPE html>
<html>
<body>
<h2>Quantrimang.com</h2>
<p>Click vào máy tính, điện thoại hoặc cốc cà phê trong ảnh để chuyển đến trang mới và đọc thêm về chủ đề:</p>
<img src="https://img.quantrimang.com/photos/image/2018/05/25/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://quantrimang.com/cong-nghe">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://quantrimang.com/ios">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://quantrimang.com/cuoc-song">
</map>
</body>
</html>

Thuộc tính name của thẻ <map> được gắn với thuộc tính usemap của thẻ <img>, tạo mối quan hệ giữa hình ảnh và bản đồ. Phần tử <map> bao gồm các thẻ <area> định nghĩa các vùng click trong bản đồ ảnh.

Hình ảnh nền

Để thêm hình ảnh nền cho một phần tử HTML, chúng ta có thể sử dụng thuộc tính CSS background-image.

Để thêm hình ảnh nền cho toàn bộ trang, chúng ta sử dụng thuộc tính background-image trên phần tử body.

<body style="background-image:url('bautroi.jpg')">
  <h2>Hình nền</h2>
</body>

Để thêm hình ảnh nền cho một đoạn văn trong HTML, chúng ta cũng sử dụng thuộc tính CSS background-image.

<body>
  <p style="background-image:url('bautroi.jpg')"> ... </p>
</body>

Phần tử `<picture>`

HTML5 giới thiệu phần tử <picture> để tạo sự linh hoạt khi xác định nguồn ảnh.

Phần tử <picture> bao gồm một số phần tử <source>, mỗi phần tử sẽ tham chiếu tới một nguồn ảnh khác nhau. Như vậy, trình duyệt sẽ chọn nguồn ảnh phù hợp với kích thước và thiết bị hiện tại.

Mỗi phần tử <source> có các thuộc tính xác định khi nào một nguồn ảnh được coi là phù hợp nhất. Trình duyệt sẽ sử dụng phần tử <source> đầu tiên phù hợp và bỏ qua các phần tử <source> sau đó.

Ví dụ dưới đây hiển thị ảnh hoa hồng khi khung nhìn có kích thước tối thiểu là 650px và ảnh hoa trắng khi khung nhìn có kích thước tối thiểu là 465px.

<picture>
  <source media="(min-width: 650px)" srcset="hoa-hồng.jpg">
  <source media="(min-width: 465px)" srcset="hoa-trắng.jpg">
  <img src="hoa-xanh.jpg" alt="Flowers" style="width:auto;">
</picture>

Lưu ý: Luôn luôn sử dụng phần tử <img> làm phần tử con cuối cùng của phần tử <picture>. Phần tử <img> sẽ được sử dụng khi trình duyệt không hỗ trợ phần tử <picture> hoặc không có phần tử <source> phù hợp.

Đọc màn hình HTML

Công cụ đọc màn hình là một phần mềm đọc mã HTML, chuyển đổi văn bản thành giọng nói, giúp người dùng “nghe” được nội dung. Công cụ đọc màn hình rất hữu ích cho những người có khuyết tật thị giác.

Chú thích ảnh kèm số

Khi thêm chú thích vào hình ảnh, chúng ta có nhiều cách khác nhau để làm điều này. Tuy nhiên, một giải pháp tốt hơn là sử dụng các phần tử <figure> và <figcaption> trong HTML. Chúng được tạo ra để phục vụ mục đích này.

<figure>
  <img src="images/dinosaur.jpg" alt="Đầu và thân của bộ xương khủng long; nó có một cái đầu lớn với những chiếc răng dài sắc nhọn" width="400" height="341" />
  <figcaption>
    Khủng long T-Rex trưng bày tại bảo tàng đại học Manchester.
  </figcaption>
</figure>

Trên đây là những cách thêm và tuỳ chỉnh hình ảnh trong HTML. Sử dụng các thuộc tính mạnh mẽ của thẻ <img> để tạo ra trang web thú vị và chất lượng. Hiện nay, thay vì thêm trực tiếp ảnh vào trang web, chúng ta liên kết ảnh với trang web bằng thẻ <img>, điều này tiện lợi và không gian của trang web đủ lớn để chứa ảnh kích thước lớn.

Đừng quên nhớ các thuộc tính quan trọng của thẻ <img>:

src xác định đường dẫn tới ảnh.
alt chứa nội dung thay thế cho ảnh.
crossorigin được sử dụng để nhập ảnh từ các trang web khác, cho phép truy cập nhiều nguồn gốc hơn trong canvas.
height xác định chiều cao của ảnh.
width xác định chiều rộng của ảnh.
ismap chỉ định rằng một ảnh là một bản đồ ảnh trên máy chủ.
loading được sử dụng để chỉ định xem trình duyệt có nên trì hoãn việc tải ảnh cho đến khi đáp ứng một số điều kiện hay tải ảnh ngay lập tức.