Hình ảnh trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Hình ảnh trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src=”pic_mountain.jpg” alt=”Mountain View” style=”width:304px;height:228px;”>

</body>
</html>

Cú pháp hình ảnh trong HTML

Trong HTML, hình ảnh được định nghĩa bằng thẻ <img>. Thẻ <img> trống, chỉ chứa các 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” alt=”some_text” style=”width:width;height:height;”>

Thuộc tính alt

Thuộc tính alt cung cấp một văn bản thay thế cho một hình ảnh, nếu người dùng vì một lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).

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

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

Thuộc tính alt là bắt buộc. Một trang web sẽ không xác nhận hợp lệ mà không có thuộc tính này.

Trình đọc màn hình trong HTML

Trình đọc màn hình là một chương trình phần mềm đọc mã HTML, chuyển đổi văn bản và cho phép người dùng “lắng nghe” nội dung. Trình đọc màn hình rất hữu ích cho những người khiếm thị hoặc người khiếm thị.

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

Bạn có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao của một hình ảnh. Các giá trị được xác định bằng pixel (sử dụng px sau giá trị):

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

Ngoài ra, bạn có thể sử dụng các thuộc tính width và height. Ở đây, các giá trị được mặc định theo pixel:

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>

Lưu ý: Luôn khai báo độ rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được xác định, trang sẽ nhấp nháy trong khi tải hình ảnh.

Thuộc tính Width và Height hay Style

Cả hai thuộc tính width, height và style đều có giá trị trong HTML5. Tuy nhiên, tốt hơn hết bạn nên sử dụng thuộc tính style. Ví dụ:

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

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

</body>
</html>

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

Nếu không được khai báo, trình duyệt sẽ tìm kiếm hình ảnh trong cùng một thư mục với trang web. Tuy nhiên, cách phổ biến là lưu trữ hình ảnh trong một thư mục con. Sau đó, bạn phải khai báo tên thư mục trong thuộc tính src:

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

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

Một số trang web giữ hình ảnh của trên kho lưu trữ, hoặc trang web khác. Trên thực tế, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web nào:

<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>

Hình ảnh động

Hình động có đuôi .gif:

<img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>

Lưu ý rằng cú pháp chèn hình ảnh động không khác gì những hình ảnh bình thường.

Sử dụng hình ảnh với đường dẫn

Để sử dụng hình ảnh với đường dẫn, bạn chỉ cần dùng thẻ <img> bên trong thẻ <a>:

<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>

Lưu ý: border:0; được thêm vào để ngăn phiên bản IE trở về trước hiển thị một đường viền xung quanh hình ảnh (khi hình ảnh có chứa liên kết).

Hình ảnh nổi

Sử dụng thuộc tính float trong CSS để cho hình ảnh trôi nổi ở bên phải hoặc bên trái của văn bản:

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.</p>

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.</p>

Thẻ <map> trong HTML

Sử dụng thẻ <map> để xác định bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các vùng có thể nhấp. Thuộc tính name của thẻ <map> được liên kết với thuộc tính usemap của <img> và tạo ra liên kết giữa hình ảnh và bản đồ.

Thẻ <map> chứa một số thẻ <area>, xác định các khu vực có thể nhấp được trong bản đồ hình ảnh:

<img src=”planets.gif” alt=”Planets” usemap=”#planetmap” style=”width:145px;height:126px;”>

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm”>
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm”>
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm”>
</map>

Tổng kết

  • Sử dụng thẻ <img> để xác định hình ảnh
  • Sử dụng thuộc tính src để xác định URL của hình ảnh
  • Sử dụng thuộc tính alt để xác định một văn bản thay thế cho một hình ảnh, nếu không thể được hiển thị
  • Sử dụng thuộc tính widthheight để xác định kích thước của hình ảnh
  • Hoặc có thể sử dụng các thuộc tính widthheight trong CSS để xác định kích thước của hình ảnh
  • Sử dụng thuộc tính float để cho hình ảnh trôi nổi
  • Sử dụng thẻ <map> để xác định bản đồ hình ảnh
  • Sử dụng thẻ <area> để xác định các khu vực có thể nhấp được trong bản đồ hình ảnh
  • Sử dụng thuộc tính usemap của phần tử HTML <img> để trỏ tới một bản đồ hình ảnh

Lưu ý: Việc tải hình ảnh mất thời gian. Hình ảnh lớn có thể làm chậm trang của bạn. Vì vậy cần sử dụng hình ảnh một cách hợp lý.

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: