Cách chèn ảnh vào HTML

Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif (hình động), vào trang web.

Để chèn hình ảnh vào trang web, ta sử dụng cú pháp sau:

Trong đó, đường dẫn đến tập tin hình ảnh có thể được xác định bằng đường dẫn tuyệt đối hoặc đường dẫn tương đối.

Ví dụ

Thiết lập kích thước cho hình ảnh

Nếu khi ta chèn hình vào không cung cấp thuộc tính chiều cao và chiều rộng thì hình ảnh chèn vào sẽ hiện ra đúng với kích thước thực của nó, tuy nhiên trong một số trường hợp hình ảnh sẽ bị tràn, do đó ta cần thiết lập chiều rộng và chiều cao cho nó thì khi hiển thị ra màn hình, nó sẽ hiển thị với kích thước mặc định.

Một số chú ý:

• Khi thay đổi độ rộng chiều cao và độ rộng cần thay đổi tỉ lệ với hinh thực tránh hình ảnh bị méo.
• Nên sử dụng công cụ thiết kế đúng với vị trí chèn hình vì nếu hình lớn(kích thước lớn) thay đổi lại nhỏ khi đó tốc độ tải trang chậm.
• Nếu kích thước thực của hình quá nhỏ khi chèn kéo rộng ra sẽ dẫn đến hình ảnh không sắc nét.

Nếu bạn muốn hiển thị một tấm hình với kích thước khác thì sử dụng cú pháp sau:

Ví dụ

Trong trường hợp thiết lập kích thước hiển thị cho hình ảnh, bạn chỉ xác định mỗi thuộc tính width (hoặc height) thì thuộc tính còn lại sẽ tự động được xác định dựa theo tỷ lệ của tấm hình.

Ví dụ

Tấm hình thứ nhất sẽ tự xác định thuộc tính height. Tấm hình thứ hai sẽ tự xác định thuộc tính width.

Thuộc tính alt

Thuộc tính alt dùng để hiển thị một đoạn văn bản trong trường hợp trang web load tấm hình thất bại (hoặc do đường dẫn đến tấm hình không tồn tại). Đây là thuộc tính quan trong trong điều kiện chuẩn SEO

Ví dụ

Dùng hình ảnh làm đại diện cho liên kết

Để dùng hình ảnh làm đại diện cho liên kết, ta đặt thẻ bên trong cặp thẻ

Ví dụ

Xác định vị trí của tấm hình

Sử dụng thuộc tính float CSS để đẩy tấm hình sang bên trái hoặc bên phải đoạn văn bản.

Ví dụ

Ngoài cách trên, ta cũng có thể dùng cặp thẻ

với thuộc tính align=left|center|right bao quanh thẻ để xác định vị trí tấm hình ở bên trái | giữa | hoặc bên phải.

Ví dụ