Hình ảnh img trong HTML

Nhật Minh

Chỉnh kích thước ảnh trong HTML như thế nào? Bài viết dưới đây sẽ hướng dẫn bạn chi tiết cách chỉnh kích thước ảnh HTML.

Muốn làm được việc này, nhất định bạn phải biết cách dùng thẻ img trong HTML. Nó xuất hiện khá phổ biến ở mọi trang web hiện tại.

Khi truy cập trang web, bạn sẽ thường xuyên thấy rất nhiều hình ảnh đủ mọi kích thước và vị trí trên trang. Hình ảnh trong trang web HTML sẽ giúp nội dung phong phú hơn cũng như tăng tính thẩm mỹ cho trang.

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

Trong HTML, ảnh được định nghĩa bằng thẻ <img>

Thẻ <tag> là thẻ rỗng, chỉ chứa 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 dùng để bổ sung văn bản mô tả cho hình ảnh. Nếu vì lý do gì đó mà người dùng không thể xem được ảnh (do mạng yếu, lỗi thuộc tính src hoặc dùng công cụ đọc màn hình).

Giá trị của thuộc tính alt là đoạn mô tả hình ảnh.

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

Nếu trình duyệt không thể tìm được ảnh, nó sẽ hiển thị giá trị thuộc tính alt.

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

Dùng thuộc tính style để xác định chiều cao và chiều rộng của hình ảnh.

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

Ngoài ra bạn có thể dùng thuộc tính width và height.

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

Thuộc tính width và height luôn định nghĩa chiều rộng và chiều cao của ảnh bằng pixel.

Lưu ý: Hãy luôn chỉ định kích thước ảnh, nếu không, trang web có thể khó tải ảnh.

Width, Height hay Style?

Thuộc tính width, height và style đều hợp lệ trong HTML5. Dù vậy, nên 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 ảnh trong cùng thư mục với trang. Nếu lưu trữ ảnh ở 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 ở 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 hình ả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ó thể 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

Để dùng hình ảnh làm link, hãy đưa thẻ <img> vào 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 ý: border:0; được thêm vào để ngăn IE9 (và trở về trước) hiển thị đường viền xung quanh ảnh (khi ảnh là link).

Hình ảnh nổi

Đặc tính float trong CSS dùng để làm ảnh nổi về bên phải hoặc bên trái 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ề bên phải 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ề bên trái văn bản.</p>

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

Thẻ <tag> được dùng để định nghĩa image-map, hình ảnh có các vùng mà khi click vào sẽ có tác động gì đó, tùy ý bạn đặt. Ví dụ, với hình ảnh sau, chúng ta sẽ đặt các vùng click tại chỗ máy tính, điện thoại và cốc cà phê:

Workplace

Đây là code của file .htm đầy đủ, bạn có thể copy vào notepad, lưu thành file .htm và chạy thử trên máy.

<!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 để đi đến trang mới và đọc nhiều hơn về topic:</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ẻ <tag> gắn tới thuộc tính usemap của thẻ <img> tạo ra mối quan hệ giữa hình ảnh và bản đồ. Phần tử <map> gồm các thẻ <area> định nghĩa những vùng có thể click vào được trong image-map.

Hình ảnh nền

Để thêm hình nền trên phần tử HTML, dùng đặc tính CSS background-image.

Thêm hình nền cho trang, dùng đặ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 nền trên đoạn văn trong HTML, dùng đặc tính CSS background-image.

Thêm hình nền cho trang, dùng đặc tính background-image trên phần tử P.

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

Phần tử <picture>

HTML5 có thêm phần tử <picture> để thêm sự linh hoạt khi xác định nguồn ảnh.

Phần tử <picture> gồm số các phần tử <source>, mỗi phần tử tham chiếu tới các nguồn ảnh khác nhau. Bằng cách này trình duyệt sẽ chọn ảnh hợp với cách xem và/hoặc thiết bị hiện tại nhất.

Mỗi phần tử <source> có các thuộc tính mô tả khi nào thì hợp ảnh nào nhất. Trình duyệt sẽ dùng phần tử <source> đầu tiên hợp với giá trị thuộc tính, bỏ qua các phần tử <source> sau.

Hiển thị ảnh hoa hồng nếu khung nhìn tối thiểu là 650px và ảnh hoa trắng nếu 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 dùng phần tử <img> làm phần tử con cuối cùng trong phần tử <picture>. Phần tử <img> được các trình duyệt không hỗ trợ phần tử <picture> sử dụng, hoặc nếu không thẻ <source> nào phù hợp.

Đọc màn hình HTML

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

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

Nhắc tới chú thích, bạn có nhiều cách có thể thêm chú thích đi kèm với hình ảnh. Không có gì ngăn bạn làm việc này bởi nó làm việc đó rất dễ dàng trong HTML.

Ví dụ:

<div class="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" />

  <p>Khủng long T-Rex trưng bày ở bảo tàng đại học Manchester.</p>
</div>

Thế là xong. Nó chứa nội dung bạn cần và có thể tạo kiểu bằng CSS. Thế nhưng có một vấn đề ở đây là không có liên kết hình ảnh với chú thích về mặt ngữ nghĩa. Điều đó có thể gây ra vấn đề về đọc màn hình. Ví dụ, khi có 50 hình ảnh và chú thích, chú thích nào sẽ đi kèm với ảnh?

Một giải pháp tốt hơn là dùng các thành phần <figure> và <figcaption> trong HTML. Chúng được tạo cho mục đích này. Code mẫu như sau:

<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>
   T-Rex trưng bày ở trường đại học Manchester.  </figcaption>
</figure>

Thứ Năm, 06/04/2023 17:02

3,4 ★ 19 👨 79.741