HTML Cơ bản
HTML Nâng cao
Quảng cáo

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="urlalt="some_text">

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

Ví dụ

<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.

 

Ghi chú: Giống như <br>, thẻ <img> cũng là một phần tử trống và không có thẻ đóng. Tuy nhiên, trong XHTML nó tự đóng kết thúc bằng " />".

 

Mẹo: Thuộc tính alt bắt buộc cung cấp mô tả văn bản 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 .

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

Các thuộc tính width 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.

Ví dụ

<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.

Ví dụ

<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;">
 

Ghi chú: 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ổ phần lớn dung lượng 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ử 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 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ụ:

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>
 

Ghi chú: Trình duyệt sẽ đánh giá từng phần tử con <source> 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, thẻ <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 (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:

Ví dụ

<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.

 

Ghi chú: 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 hợp lệ bản đồ hình ảnh là 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.

Bài viết này đã giúp ích cho bạn?

Advertisements