HTML Image

Thẻ <img> là một phần tử trong HTML, nó được dùng để hiển thị hình ảnh cho trang web.

Sử dụng hình ảnh image để mô tả trực quan và làm cho giao diện trang web đẹp và sinh động hơn.

Các định dạng hình ảnh thường dùng trong trang web như: png, jpg, jpeg, gif, ico, svg...

Cú pháp của thẻ <img> trong HTML:

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

Giải thích:

src: là thuộc tính quan trọng của thẻ img, nó chỉ định đường dẫn (url) tới hình ảnh cần hiển thị.

alt: là một thuộc tính của thẻ img, nó dùng để hiển thị dưới dạng giống như tên của hình ảnh,

Ví dụ

<img src="logo-ihoclaptrinh.png" alt="ihoclaptrinh.com" width="250" height="50">

Cách sử dụng thẻ <img> trong HTML

Sau đây là một số cách để load và hiển thị hình ảnh cho trang web.

Load và hiển thị hình ảnh trong cùng một thư mục Folder.

Ví dụ

<img src="logo-ihoclaptrinh.png" alt="ihoclaptrinh.com" width="250" height="50">

Load và hiển thị hình ảnh khác thư mục Folder.

Ví dụ

<img src="/images/thumbs/logo-ihoclaptrinh.png" alt="ihoclaptrinh.com" width="250" height="50">

Load và hiển thị hình ảnh từ một trang website khác.

Ví dụ

<img alt="ihoclaptrinh.com" src="https://www.ihoclaptrinh.com/images/thumbs/0000095_logo-ihoclaptrinh.png" width="250" height="50">

Load và hiển thị hình ảnh sử dụng thuộc tính style.

Ví dụ

<img src="logo-ihoclaptrinh.png" alt="ihoclaptrinh.com" style="width:250px; height:50px" >

Hiển thị hình ảnh như một link.

Bạn có thể sử dụng hình ảnh để làm link liên kết bằng cách đưa thẻ <img> vào bên trong thẻ <a>

Ví dụ

<a href="https://ihoclaptrinh.com" >
<img src="logo-ihoclaptrinh.png" alt="ihoclaptrinh.com" style="width:250px; height:50px" >
</a>