Thẻ hiển thị hình ảnh img trong HTML

Thẻ hiển thị hình ảnh img trong HTML

Anh NguyễnBạn nghĩ gì về bài viết này?

Giới thiệu

Khi truy cập trang web, bạn sẽ thường xuyên thấy rất nhiều hình ảnh đủ mọi kích thước và vị trí trên trang. Hình ảnh trong trang web HTML sẽ giúp nội dung phong phú hơn cũng như tăng tính thẩm mỹ cho trang.

Có 3 định dạng ảnh thường dùng trên các trang web: JPG, PNG, GIF.

The hien thi hinh anh img trong HTML 1

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Meet Mr. Bob</h2>
<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png"
alt="Mr. Bob" style="height:100px">

</body>
</html>

Kết quả:

Cú pháp

Trong mã HTML, hình ảnh được định nghĩa bằng thẻ <img>.

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

Thuộc tính src để chỉ ra URL (địa chỉ web) của hình ảnh:

<img src="url" alt="some_text" style="width:width;height:height;">

Thuộc tính alt 

Thuộc tính alt tạo ra một dòng chữ thay thế cho hình ảnh trong trường hợp ảnh không hiển thị được (do mạng chậm, đường dẫn của thuộc tính src bị sai, hoặc khi người duyệt web dùng một phần mềm đọc màn hình – screen reader).

Nếu trình duyệt không tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt:

<p>Nếu trình duyệt không tìm thấy hình ảnh, 
nó sẽ hiển thị giá trị của thuộc tính alt:</p>

<img src="https://i.pinimg.com/originals/e5/f4/09/e5f409cad3a093cb317ea8ca03292818.gif" alt="Perfect gift not found" 
style="width:128px;height:128px;">

Kết quả:

Ta luôn luôn phải khai báo thuộc tính alt. Một trang web không được coi là hợp lệ nếu không có đủ các thuộc tính alt của thẻ <img>.

Đọc thêm

Phần mềm đọc màn hình(screen readers)

Một phần mềm đọc màn hình sẽ đọc mã HTML, lọc ra các văn bản và đọc cho người dùng nghe nội dung trang web. Phần mềm đọc màn hình giúp hỗ trợ cho người mù hoặc thị lực yếu hay người khó học.

Cỡ ảnh – Chiều rộng và chiều cao

Ta dùng thuộc tính style để chỉ định chiều rộng và chiều cao của ảnh.

Giá trị tính theo pixel (thêm px sau số chỉ chiều rộng/cao):

<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="Mr. Bob icon" style="width:208px;height:128px;">

Kết quả:

Ngoài ra, ta có thể dùng thuộc tính  width và height. Với hai thuộc tính này, giá trị mặc định là tính theo pixel:

<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="Mr. Bob icon" width="128" height="128">

Kết quả:

Chú ý: Luôn định rõ chiều cao và chiều rộng của hình ảnh. Nếu không trang web sẽ bị rung rinh khi hiển thị hình ảnh.

Nên dùng thuộc tính width và height, hay style?

Cả 3 thuộc tính width, height, and style đều hợp lệ trong HTML5.

Tuy nhiên, ta nên dùng thuộc tính style để  tránh việc kích thước ảnh bị các thuộc tính css khác điều khiển:

<head>
<style>
img { 
    width:50%; 
}
</style>
</head>
<body>
<div>

<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="HTML5 Icon" style="width:128px;height:128px;" float="left">
<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="HTML5 Icon" width="128" height="128" float="right"> 
</div>

</body>

Kết quả:

Đường dẫn ảnh

Trong dự án, ảnh thường được lưu vào một thư mục riêng. ta thường dùng đường dẫn tương đối cho thuộc tính src.

Trong đường dẫn ảnh phải ghi đầy đủ tên thư mục vào đường dẫn ảnh:

Ví dụ:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Ảnh động

Ta có thể hiển thị ảnh động (định dạng GIF) như ảnh thông thường, không cần thay đổi cú pháp.

<img src="https://pixelsbyumair.files.wordpress.com/2014/12/cssgif.gif" 
alt="Computer Man" style="width:250px;height:200px;">

Kết quả:

Dùng ảnh làm liên kết

Để dùng ảnh làm liên kết, chỉ cần đặt thẻ <img> vào trong thẻ <a>:

<a href="http://bob.codegym.vn/home" target="_blank">
<img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="Bob.Codegym.vn" style="width:142px;height:142px;border:0;">
</a>

Kết quả:

Chú ý: thêm border: 0; vào style để các phiên bản IE9 và trước đó không hiển thị đường viền quanh hình ảnh dùng làm liên kết.

Đặt vị trí cho ảnh

Dùng thuộc tính CSS float để đặt ảnh bên trái hoặc bên phải văn bản:

<p><img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<br/>
<p><img src="http://bob.codegym.vn/assets/images/Codegym-bob-RIGHTxWH200.png" 
alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Kết quả:

Bản đồ ảnh

Ta có thể dùng thẻ <map> để định nghĩa một bản-đồ-ảnh(image-map). Một bản đồ ảnh là một hình ảnh có các vùng có thể nhấp chuột vào.

Thuộc tính usemap của thẻ <img>  tương ứng với thuộc tính name của thẻ <map> . 

Thẻ <map> có các thẻ <area> để định nghĩa các vùng có thể nhấp chuột trong bản-đồ-ảnh:

<body style="background-color:#272780;">

<img src="http://bob.codegym.vn/assets/images/Codegym-bob-xh100.png" 
alt="Codegym map" usemap="#codegymmap" style="width:360px;height:126px;">

<map name="codegymmap">
  <area shape="rect" coords="0,0,262,126" alt="Codegym" 
  href="http://codegym.vn"   target="_blank">
  <area shape="circle" coords="300,58,38" alt="Codegy Bob" 
  href="http://bob.codegym.vn"   target="_blank">
</map>

</body>

Kết quả:

Tóm tắt

  • Dùng thẻ <img> để định nghĩa một hình ảnh
  • Dùng thuộc tính src để định nghĩa URL của hình ảnh
  • Dùng thuộc tính alt để định nghĩa dòng chữ thay thế cho ảnh khi ảnh không hiển thị được
  • Dùng thuộc tính width và height để định nghĩa kích thước của ảnh
  • Dùng thuộc tính CSS width and height để chắc chắn định nghĩa kích thước ảnh (không bị các thuộc tính CSS khác ghi đè)
  • Dùng thuộc tính CSS float để xếp vị trí ảnh
  • Dùng thẻ <map> để định nghĩa một bản-đồ-ảnh(image-map)
  • Dùng thẻ <area> để định nghĩa các vùng có thể click bản-đồ-ảnh
  • Dùng thuộc tính usemap của thẻ <img> để trỏ ảnh đến thẻ <map> tương ứng

Chú ý: Việc load ảnh nhanh hay chậm phụ thuộc độ lớn bức ảnh. Ảnh lớn quá sẽ làm chậm tốc độ load trang web. Phải lưu ý khi dùng ảnh cho trang web.

Kết luận

Qua đây là một số chia sẻ về thẻ hiển thị hình ảnh img trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận