• Trang chủ
• Hướng dẫn HTML
• Hình ảnh HTML

Hình ảnh HTML

Trong hướng dẫn này, bạn sẽ học cách đưa hình ảnh vào tài liệu HTML.

Chèn hình ảnh vào trang web

Hình ảnh nâng cao giao diện trực quan của các trang web bằng cách làm cho chúng trở nên thú vị và nhiều màu sắc hơn.

Các thẻ <img> được sử dụng để chèn hình ảnh trong tài liệu HTML. Nó là một phần tử rỗng và chỉ chứa các thuộc tính. Cú pháp của thẻ <img> như sau:

src="url"alt="some_text">

Ví dụ sau đây chèn ba hình ảnh trên trang web:

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

Mỗi hình ảnh phải mang ít nhất hai thuộc tính: thuộc tính src và thuộc tính alt.

Thuộc tính src cho trình duyệt biết nơi để tìm hình ảnh. Giá trị của nó là URL của tệp hình ảnh.

Trong khi đó, thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, nếu nó không có sẵn hoặc không thể hiển thị vì lý do nào đó. Giá trị của nó phải là một sự thay thế có ý nghĩa cho hình ảnh.

Đặt chiều rộng và chiều cao của hình ảnh

Các thuộc tính width và height được sử dụng để xác định chiều rộng và chiều cao của một hình ảnh.

Giá trị của các thuộc tính này được diễn giải bằng pixel theo mặc định.

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

Bạn cũng có thể sử dụng thuộc tính style để chỉ định chiều rộng và chiều cao cho hình ảnh. Nó ngăn các trang định kiểu vô tình thay đổi kích thước hình ảnh, vì kiểu nội tuyến có mức độ ưu tiên cao nhất.

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

Sử dụng phần tử picture trong HTML5

Đôi khi, việc tăng hoặc giảm tỷ lệ hình ảnh để phù hợp với các thiết bị (hoặc kích thước màn hình) khác nhau không hoạt động như mong đợi. Ngoài ra, việc giảm kích thước hình ảnh bằng thuộc tính width và height hoặc thuộc tính không làm giảm kích thước tệp gốc. Để giải quyết những vấn đề này, HTML5 đã giới thiệu thẻ <picture> cho phép bạn xác định nhiều phiên bản của hình ảnh để nhắm mục tiêu các loại thiết bị khác nhau.

Phần tử <picture> chứa không hoặc nhiều phần tử <source>, mỗi phần tử đề cập đến nguồn hình ảnh khác nhau và một thẻ <img> ở cuối. Ngoài ra, mỗi phần tử <source> có thuộc tính media chỉ định điều kiện phương tiện (tương tự như truy vấn phương tiện) được trình duyệt sử dụng để xác định thời điểm nên sử dụng một nguồn cụ thể. Hãy thử một ví dụ:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>

Làm việc với Bản đồ hình ảnh (Image Maps)

Bản đồ hình ảnh cho phép bạn xác định các điểm phát sóng trên một hình ảnh hoạt động giống như một siêu kết nối .

Ý tưởng cơ bản đằng sau việc tạo bản đồ hình ảnh là cung cấp một cách dễ dàng để liên kết các phần khác nhau của hình ảnh mà không cần chia thành các tệp hình ảnh riêng biệt. Ví dụ: một bản đồ thế giới có thể có siêu liên kết đến từng quốc gia để cung cấp thêm thông tin về quốc gia đó.

Hãy thử một ví dụ đơn giản để hiểu cách nó thực sự hoạt động:

<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

Thuộc tính name của thẻ <map> được sử dụng để tham khảo bản đồ từ thẻ <img> sử dụng thuộc tính usemap của nó. Thẻ <area> được sử dụng bên trong <map> là yếu tố để xác định các lĩnh vực có thể click vào một hình ảnh. Bạn có thể xác định bất kỳ số lượng khu vực có thể nhấp nào trong một hình ảnh.