Hình ảnh trong HTML5

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

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.

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:

<img src="url" alt="some_text">

Ví dụ sau đây chèn ba hình ảnh vào 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 có ít nhất hai thuộc tính là src và alt trong đó:

• Thuộc tính src cho trình duyệt nơi để tìm hình ảnh. Giá trị của nó là URL của file hình ảnh.
• Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, nếu hình ảnh không có sẵn hoặc không thể hiển thị vì lý do nào đó. Giá trị của thuộc tính alt sẽ hiển thị thay thế cho hình ảnh.

Lưu ý: Giống như <br>, phần tử  <img> cũng là một phần tử trống và không có thẻ đóng. Tuy nhiên, trong XHTML nó phải tự đóng bằng “/>” ở cuối.

Mẹo: Thuộc tính alt bắt buộc cung cấp văn bản mô tả thay thế cho hình ảnh nếu người dùng vì lý do nào đó không thể xem hình ảnh do kết nối chậm, hình ảnh không có sẵn tại URL được chỉ định hoặc nếu người dùng sử dụng trình đọc màn hình hoặc trình duyệt không có đồ họa.

Thiết lập 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 style trong file CSS vô tình thay đổi kích thước hình ảnh, vì style CSS 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;">

Lưu ý: Bạn nên chỉ định cả thuộc tính width và height cho hình ảnh, để trình duyệt có thể phân bổ không gian cho hình ảnh trước khi tải xuống. Nếu không, việc tải hình ảnh có thể gây ra sự biến dạng hoặc nhấp nháy trong bố cục trang web của bạn.

Sử dụng phần tử ảnh 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 không làm giảm kích thước file gốc.

Để giải quyết những vấn đề này, HTML5 đã giới thiệu thẻ <picture> cho phép bạn định nghĩa 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ử <source> tham chiếu đến những hình ảnh khác nhau và một phần tử <img> ở cuối.

Ngoài ra, mỗi phần tử <source> có thuộc tính media chỉ định điều kiện để trình duyệt xác định khi nào nên sử dụng hình nào. 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ưu ý: Trình duyệt sẽ đánh giá từng phần tử <source> con và chọn phần tử phù hợp nhất trong số chúng; nếu không tìm thấy kết quả phù hợp nào, URL của thuộc tính src của phần tử <img> sẽ được sử dụng. Ngoài ra, phần tử <img> phải được chỉ định là phần tử con cuối cùng của phần tử <picture>.

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

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

Ý 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 file hình ảnh riêng biệt. Ví dụ: một bản đồ thế giới có thể có 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 của nó thuộc tính usemap. Các thẻ <area> được sử dụng bên trong thẻ <map> để định nghĩa các vùng có thể click vào một hình ảnh. Bạn có thể định nghĩa số lượng bất kỳ các vùng có thể nhấp nào trong một hình ảnh.

Lưu ý: Bản đồ hình ảnh không nên được sử dụng để điều hướng trang web. Chúng không thân thiện với công cụ tìm kiếm. Việc sử dụng bản đồ hình ảnh chỉ phù hợp với bản đồ địa lý.

Mẹo: Có nhiều công cụ trực tuyến có sẵn để tạo bản đồ hình ảnh. Một số trình chỉnh sửa nâng cao như Adobe Dreamweaver cũng cung cấp một bộ công cụ để dễ dàng tạo bản đồ hình ảnh.