HTML

Hình ảnh img trong HTML

Posted on by HKT

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ú pháp hình ảnh trong HTML

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

Thẻ <tag> là thẻ rỗng, chỉ chứa thuộc tính và không có thẻ đóng. Thuộc tính src xác định URL (địa chỉ web) của hình ảnh.

<img src="url">

Thuộc tính alt

Thuộc tính alt dùng để bổ sung văn bản mô tả cho hình ảnh. Nếu vì lý do gì đó mà người dùng không thể xem được ảnh (do mạng yếu, lỗi thuộc tính src, hoặc dùng công cụ đọc màn hình).

Giá trị của thuộc tính alt là đoạn mô tả hình ảnh.

<img src="img_quantrimang.jpg" alt="Trang web Quản trị mạng">

Nếu trình duyệt không thể tìm được ảnh, nó sẽ hiển thị giá trị thuộc tính alt.

Lưu ý: thuộc tính alt là bắt buộc. Trang web sẽ không hợp lệ nếu hình ảnh không có thuộc tính này.

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

Dùng thuộc tính style để xác định chiều cao và chiều rộng của hình ảnh.

<img src="congnghe.jpg" alt="Trang web công nghệ"
style="width:500px;height:600px;">

Ngoài ra bạn có thể dùng thuộc tính width và height.

<img src="congnghe.jpg" alt="Trang web công nghệ" width="500" height="600">

Thuộc tính width và height luôn định nghĩa chiều rộng và chiều cao của ảnh bằng pixel.

Lưu ý: Hãy luôn chỉ định kích thước ảnh, nếu không, trang web có thể khó tải ảnh.

Width, Height hay Style?

Thuộc tính width, height và style đều hợp lệ trong HTML5. Dù vậy, nên dùng thuộc tính style vì nó giúp ngăn tập tin định dạng (Style Sheet) thay đổi kích thước của ảnh.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:100%;
}
</style>
</head>
<body>

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

</body>
</html>

Hình ảnh nằm trong thư mục khác

Nếu không được chỉ định cụ thể, trình duyệt sẽ tìm ảnh trong cùng thư mục với trang. Nếu lưu trữ ảnh ở thư mục con, bạn phải đưa tên thư mục vào thuộc tính src.

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

Hình ảnh nằm ở máy chủ khác

Một số trang web lưu trữ ảnh trên máy chủ riêng. Thực tế, bạn có thể truy cập hình ảnh từ bất kì địa chỉ web nào trên thế giới.

<img src="https://www.quantrimang.com/hinhanh/quantrimang_html.jpg"alt="Quantrimang.com">

Hình ảnh động

HTML có thể hiển thị ảnh động (GIF).

<img src="laptrinh.gif" alt="Máy tính"style="width:48px;height:48px;">

Hình ảnh đóng vai trò là đường dẫn

Để dùng hình ảnh làm link, hãy đưa thẻ <img> vào trong thẻ <a>

<a href="default.asp">
<img src="hihi.gif" alt="Hướng dẫn HTML"style="width:42px;height:42px;border:0;">
</a>

Lưu ý: border:0; được thêm vào để ngăn IE9 (và trở về trước) hiển thị đường viền xung quanh ảnh (khi ảnh là link).

Hình ảnh nổi

Đặc tính float trong CSS dùng để làm ảnh nổi về bên phải hoặc bên trái văn bản.

<p><img src="hihi.gif" alt="Mặt cười"
style="float:right;width:42px;height:42px;">
Hình ảnh này sẽ nổi về bên phải văn bản.</p>

<p><img src="hihi.gif" alt="Mặt cười"
style="float:left;width:42px;height:42px;">
Hình ảnh này sẽ nổi về bên trái văn bản.</p>

Tạo bản đồ bằng hình ảnh Image Map

Thẻ <tag> được dùng để định nghĩa image-map, hình ảnh có các vùng mà khi click vào sẽ có tác động gì đó, tùy ý bạn đặt. Bạn hãy thử click vào máy tính, điện thoại và cốc cà phê trong hình ảnh dưới đây để xem chuyện gì xảy ra nhé:

Đây là code của file .htm đầy đủ, bạn có thể copy vào notepad, lưu thành file .htm và chạy thử trên máy.

<!DOCTYPE html>
<html>
<body>

<h2>Quantrimang.com</h2>
<p>Click vào máy tính, điện thoại hoặc cốc cà phê trong ảnh để đi đến trang mới và đọc nhiều hơn về topic:</p>

<img src="https://img.quantrimang.com/photos/image/2018/05/25/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
 <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://quantrimang.com/cong-nghe">
 <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://quantrimang.com/ios">
 <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://quantrimang.com/cuoc-song">
</map>

</body>
</html>

Thuộc tính name của thẻ <tag> gắn tới thuộc tính usemap của thẻ <img> tạo ra mối quan hệ giữa hình ảnh và bản đồ. Phần tử <map> gồm các thẻ <area> định nghĩa những vùng có thể click vào được trong image-map.

Hình ảnh nền

Để thêm hình nền trên phần tử HTML, dùng đặc tính CSS background-image.

Thêm hình nền cho trang, dùng đặc tính background-image trên phần tử BODY.

<body style="background-image:url('bautroi.jpg')">
<h2>Hình nền</h2>
</body>

Để thêm hình nền trên đoạn văn trong HTML, dùng đặc tính CSS background-image.

Thêm hình nền cho trang, dùng đặc tính background-image trên phần tử P.

<body>
<p style="background-image:url('bautroi.jpg')">
...
</p>
</body>

Phần tử <picture>

HTML5 có thêm phần tử <picture> để thêm sự linh hoạt khi xác định nguồn ảnh.

Phần tử <picture> gồm số các phần tử <source>, mỗi phần tử tham chiếu tới các nguồn ảnh khác nhau. Bằng cách này trình duyệt sẽ chọn ảnh hợp với cách xem và/hoặc thiết bị hiện tại nhất.

Mỗi phần tử <source> có các thuộc tính mô tả khi nào thì hợp ảnh nào nhất. Trình duyệt sẽ dùng phần tử <source> đầu tiên hợp với giá trị thuộc tính, bỏ qua các phần tử <source> sau.

Hiển thị ảnh hoa hồng nếu khung nhìn tối thiểu là 650px và ảnh hoa trắng nếu tối thiểu là 465px.

<picture>
  <source media="(min-width: 650px)" srcset="hoa-hồng.jpg">
  <source media="(min-width: 465px)" srcset="hoa-trắng.jpg">
  <img src="hoa-xanh.jpg" alt="Flowers" style="width:auto;">
</picture>

Lưu ý: Luôn dùng phần tử <img> làm phần tử con cuối cùng trong phần tử <picture>. Phần tử <img> được các trình duyệt không hỗ trợ phần tử <picture> sử dụng, hoặc nếu không thẻ <source> nào phù hợp.

Đọc màn hình HTML

Công cụ đọc màn hình là phần mềm đọc mã HTML, chuyển đổi văn bản, cho phép người dùng “nghe” được văn bản. Công cụ đọc màn hình rất hữu ích với người khiếm thị.