HTML Hình Ảnh

Hình ảnh sẽ giúp trang web của bạn trông sinh động hơn.

Học HTML

Hình Ảnh trong HTML

Để tạo hình ảnh trong HTML chúng ta sử dụng thẻ <img>.

Cú pháp đơn giản nhất để tạo hình ảnh như sau:

<img src="image_url" alt="alt_text">

Trong đó:

  • Giá trị của thuộc tính src quy định đường dẫn của hình ảnh.
  • Giá trị của thuộc tính alt mô tả tóm tắt cho phần nội dung của hình ảnh và sẽ được trình duyệt hiển thị nếu không tải được ảnh từ đường dẫn quy định trong thuộc tính src.

Ví dụ :

<img src="https://www.codehub.vn/img/logo.png" alt="Logo CodeHub.vn">

Chạy Thử

Cú pháp đầy đủ hơn của thẻ <img> như sau:

<img src="image_url" alt="alt_text" title="title_text" width="..." height="...">

Chúng ta sẽ tìm hiểu chi tiết từng thuộc tính ở các phần ngay sau đây.

Thuộc Tính src

Giá trị của thuộc tính src có thể là một đường dẫn tương đối hoặc tuyệt đối.

Nếu trang web hiện tại có địa chỉ url bắt đầu bằng https://www.codehub.vn thì khi tham chiếu tới ảnh cũng bắt đầu với cùng địa chỉ URL như trên thì chúng có thể dùng địa chỉ tương đối như sau:

<img src="/img/logo.png" alt="Logo CodeHub.vn">

Chạy Thử

Ngoài ra, chúng ta cũng hoàn toàn có thể tham chiếu tới ảnh trên website khác:

<img src="https://i.imgur.com/U704hHY.png" alt="Học HTML trên CodeHub.vn">

Chạy Thử

Thuộc Tính alt

Thuộc tính alt cung cấp một mô tả tóm tắt cho phần nội dung của hình ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" alt="Học HTML">

Chạy Thử

Giá trị của thuộc tính alt sẽ được trình duyệt hiển thị nếu không tải được ảnh từ đường dẫn quy định trong thuộc tính src:

<img src="https://www.codehub.vn/img/learn_xxx.png" alt="Học HTML">

Chạy Thử

Thuộc tính alt giúp các bộ máy tìm kiếm như Google, Bing... có thể biết xác định được ý nghĩa của hình ảnh khi chúng không thể hiểu được nội dung hình ảnh như con người. Ngoài ra với các thiết bị dành cho người khiếm thị cũng sử dụng giá trị của thuộc tính này để giúp người dùng biết được nội dung của hình ảnh.

Thuộc Tính title

Thuộc tính title tương tự như alt dùng để cung cấp mô tả cho phần nội dung hình ảnh. Nếu bạn rê chuột lên ảnh trình duyệt sẽ hiển thị một hộp thoại tooltip nhỏ với nội dung là giá trị của thuộc tính này.

<img src="https://www.codehub.vn/img/learn_html_css.png" alt="Học HTML" title="Học HTML">

Chạy Thử

Thuộc tính title ít được sử dụng hơn thuộc tính alt vì nó không có nhiều tác dụng hữu ích như alt.

Thuộc Tính width

Thuộc tính width dùng để thiết lập chiều rộng của ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" width="100px">

Chạy Thử

Ngoài đơn vị là pixcel (px) như ở trên bạn có thể sử dụng đơn vị % để tạo chiều rộng của ảnh tương đối với độ rộng của phần tử bao ngoài hình ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" width="50%">

Chạy Thử

Ảnh trên sẽ hiển thị trên trang với 50% kích thước chiều rộng của phần tử chứa phần tử hình ảnh (hay phần tử body).

Đơn vị mặc định sử dụng cho giá trị của thuộc tính này là px và bạn có thể bỏ qua nếu muốn:

<img src="https://www.codehub.vn/img/learn_html_css.png" width="100">

Chạy Thử

Giá trị mặc định của thuộc tính widthauto ứng với 100% chiều rộng của ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" width="auto">

Chạy Thử

Thuộc Tính height

Thuộc tính height dùng để thiết lập chiều cao của ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" height="100px">

Chạy Thử

Ngoài đơn vị là pixcel (px) như ở trên bạn có thể sử dụng đơn vị % để tạo chiều cao của ảnh tương đối với chiều cao của phần tử bao ngoài hình ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" height="50%">

Chạy Thử

Ảnh trên sẽ hiển thị trên trang với 50% kích thước chiều cao của phần tử chứa phần tử hình ảnh (hay phần tử body).

Đơn vị mặc định sử dụng cho giá trị của thuộc tính này là px và bạn có thể bỏ qua nếu muốn:

<img src="https://www.codehub.vn/img/learn_html_css.png" height="100">

Chạy Thử

Giá trị mặc định của thuộc tính heightauto ứng với 100% chiều cao của ảnh:

<img src="https://www.codehub.vn/img/learn_html_css.png" height="auto">

Chạy Thử

Kết Hợp Thuộc Tính Các Thuộc Tính

Bạn có thể kết hợp nhiều thuộc tính lại với nhau:

<img src="https://www.codehub.vn/img/learn_html_css.png" alt="Học HTML" width="100" height="100">

Chạy Thử

Sử Dụng style thay widthheight

Bạn có thể sử dụng thuộc tính style để quy định chiều rộng và chiều cao của ảnh thay vì widthheight:

<img src="https://www.codehub.vn/img/learn_html_css.png" style="width: 50%; height: 50%;">

Chạy Thử

1 Bình Luận

NGUYEN BACH NGUYEN BACH

bachacbjh

Content must not be empty

Related Tutorial