» » » bài 12: Chèn hình ảnh trong html
Thứ Sáu, 20 tháng 5, 2016

18:45:00

HTML hình ảnh

Trong HTML, hình ảnh được xác định bằng các thẻ <img>.
Các <img> là trống rỗng, nó chỉ chứa các thuộc tính, và không có một thẻ đóng.
Các thuộc tính src quy định các URL (địa chỉ web) của hình ảnh:
<img src=" url " alt=" some_text ">

Alt thuộc tính

Các thuộc tính alt xác định một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể được hiển thị.
Các thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh, nếu một người sử dụng đối với một số lý do không thể xem nó (vì kết nối chậm, một lỗi trong các thuộc tính src, hoặc nếu người dùng sử dụng một 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ị các văn bản alt:

Thí dụ

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Các thuộc tính alt là bắt buộc. Một trang web sẽ không xác nhận một cách chính xác mà không có nó.

Độc giả Screen HTML

Đọc màn hình là một chương trình phần mềm có thể đọc những gì được hiển thị trên một màn hình.
đọc màn hình này rất hữu ích cho những người mù, khiếm thị, hoặc học tàn tật.
chú thíchĐọc màn hình có thể đọc thuộc tính alt.

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

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

Thí dụ

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Ngoài ra, bạn có thể sử dụng thuộc tính chiều rộng và chiều cao. Ở đây, các giá trị được quy định tại các điểm ảnh theo mặc định:

Thí dụ

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

Width và Height hoặc phong cách?

Cả chiều rộng, chiều cao, và các thuộc tính phong cách là hợp lệ trong các tiêu chuẩn HTML5 mới nhất.
Chúng tôi đề nghị bạn sử dụng thuộc tính phong cách. Nó ngăn chặn phong cách tờ từ việc thay đổi kích thước ban đầu của hình ảnh:

Thí 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 quy định, trình duyệt vọng sẽ tìm thấy các hình ảnh trong thư mục giống như các trang web.
Tuy nhiên, nó được phổ biến để lưu trữ hình ảnh trong một thư mục con. Sau đó bạn phải bao gồm tên thư mục trong thuộc tính src:

Thí dụ

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

Hình ảnh trên máy chủ khác

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

Thí dụ

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

hình ảnh hoạt hình

Các tiêu chuẩn GIF cho phép hình ảnh hoạt hình:

Thí dụ

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Lưu ý rằng cú pháp chèn hình ảnh hoạt hình thì không khác gì hình ảnh không có hình động.

Sử dụng một hình ảnh như là một liên kết

Để sử dụng một hình ảnh như một liên kết, chỉ cần tổ <img> bên trong tag <a>:

Thí dụ

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
chú thíchThêm "border: 0;" để ngăn chặn IE9 (và trước đó) hiển thị một đường viền xung quanh hình ảnh.

hình ảnh nổi

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

Thí dụ

<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>

Bản đồ ảnh

Sử dụng <map> thẻ để xác định một bản đồ ảnh. Một bản đồ ảnh là một hình ảnh với các khu vực có thể click.
Tên thuộc tính của <map> thẻ được kết hợp với <img> 's thuộc tính usemap và tạo ra một mối quan hệ giữa hình ảnh và bản đồ.
<Map> thẻ có chứa một số lượng <diện tích> thẻ, xác định các lĩnh vực có thể click vào hình ảnh bản đồ:

Thí dụ

<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>

Chương Tóm tắt

  • Sử dụng các phần tử HTML <img> để xác định một hình ảnh
  • Sử dụng các thuộc tính HTML src để xác định URL của hình ảnh
  • Sử dụng HTML alt thuộc tính để xác định một văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị
  • Sử dụng chiều rộng và chiều cao HTML thuộc tính để xác định kích thước của hình ảnh
  • Sử dụng chiều rộng và chiều cao thuộc tính CSS để xác định kích thước của hình ảnh (cách khác)
  • Sử dụng thuộc tính CSS float để cho các phao hình ảnh
  • Sử dụng HTML <map> yếu tố để xác định một bản đồ ảnh
  • Sử dụng HTML <diện tích> yếu tố để xác định các khu vực có thể click vào các bản đồ ảnh
  • Sử dụng phần tử <img> 's HTML usemap thuộc tính để trỏ đến một bản đồ ảnh
chú thíchĐang tải hình ảnh cần có thời gian. hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng hình ảnh một cách cẩn thận.

HTML Hình ảnh khóa

TagDescription
<img>Defines an image
<map>Defines an image-map
<area>Defines a clickable area inside an image-map
Chủ đề: ,

0 Bình luận:

Đăng nhận xét

Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!

Đăng ký: Đăng Nhận xét (Atom)