Học HTML, Tất Cả Bài Viết, Tự Học Online

Ảnh trong HTML – Cách sử dụng thẻ hiển thị ảnh – Học HTML


Thẻ <img> được dùng để hiển thị ảnh trong HTML. Thẻ <img> có thể được sử dụng theo nhiều cách khác nhau, đi kèm nhiều thuộc tính khác nhau. Trong bài viết này mình sẽ cùng các bạn đi tìm hiểu về thẻ hiển thị ảnh trong HTML và một số thuộc tính cũng như cách sử dụng thẻ hiển thị ảnh IMG.

Ví dụ

Chạy đoạn code sau để hiểu rõ hơn:

<!DOCTYPE html>
<html>
<body>
 
<h2>Ảnh trong HTML</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" style="width:128px;height:128px">
 
</body>
</html>

Luôn thiết lập chiều cao và chiều rộng cho ảnh. Nếu chiều cao và chiều rộng không được thiết lập, hình ảnh sẽ hiển thị theo kích thước gốc của ảnh.

Cú pháp chèn ảnh trong HTML

Trong HTML, ảnh được quy định trong thẻ <img>.

<img> là một thẻ rỗng, chỉ chứa các thuộc tính và không có thẻ đóng.

Thuộc tính src quy định địa chỉ của ảnh:

<img src="url ảnh" alt="Miêu tả ảnh" height="chiều cao" width"chiều rộng">

Thuộc tính alt

Thuộc tính alt chứa một đoạn miêu tả về ảnh, sử dụng để thay thế cho ảnh trong trường hợp vì lý do nào đó khiến ảnh không hiển thị được.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Biểu tượng của HTML5">

Nên sử dụng thuộc tính alt khi chèn ảnh vào web. Một trang HTML sẽ là không đúng chuẩn nếu ảnh thiếu thuộc tính alt.

Trình đọc nội dung

Trình đọc nội dung là một phần mềm có thể đọc những chữ đang hiển thị trên màn hình của bạn.

Trong lĩnh vực web, trình đọc nội dung có thể chuyển nội dung trang web của bạn từ chữ sang giọng nói.

Trình đọc nội dung được sử dụng cho người mù, khiếm thị hoặc khuyết tật.

Trình đọc nội dung có khả năng đọc thuộc tính alt của ảnh.

Kích thước ảnh – Chiều rộng và chiều cao

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.

Các giá trị có đơn vị đo là pixels (sử dụng px ở sau giá trị):

<!DOCTYPE html>
<html>
<body>
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" style="width:128px; height:128px">
 
</body>
</html>

Có thể sử dụng thuộc tính height=”chiều cao” , width=”chiều rộng” để thay thế cho thuộc tính style.

Các giá trị có đơn vị đo là pixels (không sử dụng px ở sau giá trị).

Sử dụng width height hay dùng CSS

Cả width, height và thuộc tính CSS đều có thể quy định kích thước ảnh đều hợp lệ theo chuẩn HTML5 mới nhất.

Chúng tôi khuyên bạn nên sử dụng CSS. Nó sẽ giúp bạn thay đổi giá trị mặc định (nếu có):

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" style="width:128px;height:128px">

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" width="128" height="128">
 
</body>
</html>

Trong ví dụ trên, CSS sẽ ghi đè lên giá trị mặc định (width: 100%).

Bạn nên sử dụng các thuộc tính trong CSS.

Hiển thị ảnh từ thư mục khác

Nếu bạn không chỉ định thư mục, trình duyệt sẽ tự động tìm ảnh tại cùng thư mục với trang HTML.

Tuy nhiên, cách sử dụng phổ biến trên web hiện nay là lưu trữ ảnh vào một thư mục riêng và đưa cả đường dẫn thư mục vào phần tên ảnh:

<!DOCTYPE html>
<html>
<body>
 
<img src="/thumuc/thumuc2/image.gif" alt="HTML5" style="width:128px;height:128px">
 
</body>
</html>

Nếu trình duyệt không tìm thấy ảnh, nó sẽ hiển thị biểu tượng liên kết bị lỗi.

Hiển thị ảnh từ thư mục trong trang không bao gồm https://tenmien.com

Hiển thị ảnh trên máy chủ khác

Có một số trang web không chứa ảnh và website trên cùng một máy chủ, họ sử dụng máy chủ khác để lưu trữ ảnh.

Bạn có thể truy cập vào những ảnh này từ bất kỳ website nào trên thế giới:

<!DOCTYPE html>
<html>
<body>
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" style="width:128px;height:128px">
 
</body>
</html>

hiển thị ảnh từ url ngoài trang bao gồm đầy đủ url của ảnh đó. https://tenmien.com/thumuc/tenanh.dinhdang

Hiển thị ảnh động

Hiển thị ảnh động trên trang:

<!DOCTYPE html>
<html>
<body>
 
<p>Hiển thị ảnh động GIF trên trang.</p>
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML" style="width:107px;height:98px">
 
</body>
</html>

Cú pháp chèn ảnh động giống như cú pháp chèn ảnh thường. Nếu ảnh động sẽ động còn ảnh tĩnh sẽ tĩnh.

Sử dụng ảnh trong liên kết

Cách phổ biến để sử dụng ảnh trong liên kết:

<!DOCTYPE html>
<html>
<body>
 
<p>Ảnh có chứa liên kết, bạn có thể nhấn để chuyển sang trang mới.</p>
 
<a href="https://hoantn.com/tu-hoc-online/hoc-html/">

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Học HTML" style="width:42px;height:42px;border:0">

</a>
 
<p>Chúng ta đã thêm "border:0" để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.</p>
 
</body>
</html>

Thẻ kết thúc </a> đặt sau thẻ <img>.

Bản đồ trên ảnh

Bạn có thể tạo bản đồ trên ảnh và những vùng này có thể nhấn như liên kết:

<!DOCTYPE html>
<html>
<body>
 
<p>Nhấn vào mặt trời hoặc các hành tinh bên cạnh để nhìn gần hơn:</p>
 
<img src="/wp-content/uploads/2019/07/universe.gif" alt="Vũ trụ" usemap="#universe" style="width:145px;height:126px">
 
<map name="universe">
<area shape="rect" coords="0,0,82,126" alt="Mặt Trời" href="/wp-content/uploads/2019/07/sun.gif">
<area shape="circle" coords="90,58,3" alt="Sao Thủy" href="/wp-content/uploads/2019/07/merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Sao Kim" href="/wp-content/uploads/2019/07/venglobe.gif">
</map>
 
</body>
</html>

Bạn có thể tham khảo thêm về thẻ <map> và <area> trong HTML.

Vị trí ảnh

Bạn có thể căn chỉnh ảnh sang bên phải hoặc bên trái của đoạn văn bản bằng thuộc tính float trong CSS:

<!DOCTYPE html>
<html>
<body>
 
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML5"
style="float:left;width:128px;height:128px">
Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh.
Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh.
Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh.
</p>
 
<p>Ảnh sẽ ở bên trái của đoạn văn bản.</p>
 
<p>Sử dụng thuộc tính float trong CSS. Thuộc tính align đã bị loại bỏ trong HTML 4 và không được hỗ trợ trong HTML5.</p>
 
</body>
</html>

Tổng kết

  • Sử dụng thẻ <img> trong HTML để chèn ảnh vào trang
  • Sử dụng thuộc tính src trong HTML để trỏ đường dẫn tới ảnh
  • Sử dụng thuộc tính alt trong HTML để thêm miêu tả cho ảnh trong trường hợp ảnh không hiển thị
  • Sử dụng thuộc tính width và height HTML để quy định kích cỡ của ảnh
  • Sử dụng thuộc tính width và height trong CSS để quy định kích cỡ của ảnh
  • Sử dụng thuộc tính float trong CSS để căn chỉnh vị trí của ảnh so với đoạn văn bản
  • Sử dụng thuộc tính usemap trong HTML để trỏ tới một bản đồ trên ảnh
  • Sử dụng thẻ <map> trong HTML để tạo một bản đồ trên ảnh
  • Sử dụng thẻ <area> trong HTML để tạo các khu vực trên bản đồ ảnh

Việc tải ảnh sẽ tốn một khoảng thời gian và những ảnh lớn có thể làm chậm tốc độ tải trang của bạn. Hãy cẩn thận khi chèn ảnh vào trang, nên sử dụng thuộc tính heightwidth khi chèn ảnh vào trang.

Nếu bạn có thắc mắc hay góp ý cho bài viết này hãy để lại bình luận cho tôi phái dưới nhé. Chúc các bạn học tốt HTML Online ^^

Tagged , , , , , , , , , , ,

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *