Mục lục
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://webcoban.vn/public/home/img_demo/h1.jpg">
<img src="../public/home/img_demo/troll-funny.gif">
ví dụ:
<!DOCTYPE html>
<html>
<body>
<img src="https://webcoban.vn/public/home/img_demo/h1.jpg">
<img src="../public/home/img_demo/troll-funny.gif">
</body>
</html>
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" width="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)
- % (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 width=”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" width="60px" height="60px">
<img src="../public/home/img_demo/h1.jpg" width="100%" height="40px">
<img src="../public/home/img_demo/h1.jpg" width="50%" height="100px">
<!DOCTYPE html>
<html>
<body>
<img src="../public/home/img_demo/h1.jpg"><br>
<img src="../public/home/img_demo/h1.jpg" width="60px" height="60px"><br>
<img src="../public/home/img_demo/h1.jpg" width="100%" height="40px"><br>
<img src="../public/home/img_demo/h1.jpg" width="50%" height="100px">
</body>
</html>
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.
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.
<img src="../public/home/img_demo/h1.jpg" width="500px">
<img src="../public/home/img_demo/h1.jpg" height="200px">
<!DOCTYPE html>
<html>
<body>
<img src="../public/home/img_demo/h1.jpg" width="500px">
<br>
<img src="../public/home/img_demo/h1.jpg" height="200px">
</body>
</html>
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://webcoban.vn/public/home/img_demo/troll-funny.gif" style="width: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://webcoban.vn/public/home/img_demo/fgkbbjgyndy.gif" style="width: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">
<!DOCTYPE html>
<html>
<body>
<img src=”http://webcoban.vn/public/home/img_demo/troll-funny.gif” style=”width: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”>
<br>
<img src=”http://webcoban.vn/public/home/img_demo/vfdugvsd136t64t.gif” style=”width: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”>
</body>
</html>
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://webcoban.vn">
<img src="../public/home/img_demo/h1.jpg">
</a>
<!DOCTYPE html>
<html>
<body>
<a href=”http://webcoban.vn”>
<img src=”../public/home/img_demo/h1.jpg”>
</a>
<h1>Bạn thử click vào tấm hình</h1>
</body>
</html>
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://webcoban.vn/public/home/img_demo/trollface.png" style="float:right;">
<img src="http://webcoban.vn/public/home/img_demo/trollface.png" style="float:left;">
<!DOCTYPE html>
<html>
<body>
<p>Tấm hình bên dưới được đẩy sang bên phải đoạn văn bản</p>
<p><img src=”http://webcoban.vn/public/home/img_demo/trollface.png” style=”float:right;”>
11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333
</p>
<p>Tấm hình bên dưới được đẩy sang bên trái đoạn văn bản</p>
<p><img src=”http://webcoban.vn/public/home/img_demo/trollface.png” style=”float:left;”>
11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333
</p>
</body>
</html>
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://webcoban.vn/public/home/img_demo/trollface.png"></div>
<div align="center"><img src="http://webcoban.vn/public/home/img_demo/trollface.png"></div>
<div align="right"><img src="http://webcoban.vn/public/home/img_demo/trollface.png"></div>
<!DOCTYPE html>
<html>
<body>
<div align=”left”>
<img src=”http://webcoban.vn/public/home/img_demo/trollface.png”>
</div>
<div align=”center”>
<img src=”http://webcoban.vn/public/home/img_demo/trollface.png”>
</div>
<div align=”right”>
<img src=”http://webcoban.vn/public/home/img_demo/trollface.png”>
</div>
</body>
</html>
