Cách chèn hình ảnh vào trang web 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, giống ví dụ bên dưới.

Cách chèn hình ảnh vào trang web

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

<img src="đường dẫn đến tập tin hình ảnh">

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 (nếu bạn chưa hiểu rõ khái niệm hai loại đường dẫn này thì vui lòng xem lại bài Liên kết, đường dẫn tuyệt đối, đường dẫn tương đối)

<img src="http://code24h.com/public/home/img_demo/h1.jpg">
<img src="/pictures/picfullsizes/2018/08/18/seh1534563230.gif">

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

Mỗi tấm hình có một chiều rộng và chiều cao mặc định (tính theo đơn vị pixel). Nếu ta không 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.

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

<img src="đường dẫn đến tập tin hình ảnh" awidth="chiều rộng" height="chiều cao">

Trong đó, chiều rộng và chiều cao có thể được xác định theo đơn vị:

• px (pixel)
hoặc
• % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử <p> có chiều rộng là 800px, bạn đặt thẻ <img awidth="50%"> vào bên trong phần tử <p>, thì khi hiển thị ra màn hình, tấm hình sẽ hiển thị với kích thước có chiều rộng là 400px)

<img src="../public/home/img_demo/h1.jpg">
<img src="../public/home/img_demo/h1.jpg" awidth="60px" height="60px">
<img src="../public/home/img_demo/h1.jpg" awidth="100%" height="40px">
<img src="../public/home/img_demo/h1.jpg" awidth="50%" height="100px">

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

<img src="../public/home/img_demo/h1.jpg" awidth="500px">
<img src="../public/home/img_demo/h1.jpg" height="200px">

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

<img src="http://code24h.com/public/home/img_demo/troll-funny.gif" style="awidth:200px;height:200px" alt="nếu đường dẫn tấm hình này không tồn tại thì câu này sẽ hiện ra">
<img src="http://code24h.com/public/home/img_demo/fgkbbjgyndy.gif" style="awidth:200px;height:200px" alt="nếu đường dẫn tấm hình này không tồn tại thì câu này sẽ hiện ra">

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ẻ <img> bên trong cặp thẻ <a></a>

<a href="http://code24h.com">
    <img src="../public/home/img_demo/h1.jpg">
</a>

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.

<img src="http://code24h.com/public/home/img_demo/trollface.png" style="float:right;">
<img src="http://code24h.com/public/home/img_demo/trollface.png" style="float:left;">

Ngoài cách trên, ta cũng có thể dùng cặp thẻ <div></div> với thuộc tính align="left|center|right" bao quanh thẻ <img> để xác định vị trí tấm hình ở bên trái | giữa | hoặc bên phải.

<div align="left"><img src="http://code24h.com/public/home/img_demo/trollface.png"></div>
<div align="center"><img src="http://code24h.com/public/home/img_demo/trollface.png"></div>
<div align="right"><img src="http://code24h.com/public/home/img_demo/trollface.png"></div>