Ảnh trong HTML
Ảnh JPG
Ảnh GIF
Ảnh PNG
Ví dụ:
<
!DOCTYPE
html
>
<
html
>
<
body
>
<
h2
>Núi hùng vĩ
<
/h2
>
<
img
src=
“pic mountain.gif”
alt=
“Mountain View”
style=
“width:304px;height:228px;”
>
<
/body
>
<
/html
>
Xem kết quả
Luôn đặt chiều rộng và chiều cao của một ả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 ảnh tải lên.
Cú pháp chèn ảnh trong HTML
Trong HTML, ảnh được định nghĩa với thẻ <img>.
Thẻ <img> là trống, nó chỉ chứa các thuộc tính, và không có thẻ đóng.
Các thuộc tính src xác định URL ( địa chỉ web) của ảnh:
<
img
src=
“url“
alt=
“some_text“
>
Các thuộc tính alt
Thuộc tính alt định nghĩa một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiện thị đượ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 vì lí do nào đó không thể xem nó (vì kết nối mạng chậm, hoặc lỗi trong 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 trình duyệt không thể tìm thấy ảnh, nó sẽ hiển thị nội dung chứa trong alt:
Ví dụ:
<
img
src=
“wrongname.gif”
alt=
“HTML5 Icon”
style=
“width:128px;height:128px;”
>
Xem kết quả
Thuộc tính alt là bắt buộc. Một trang web sẽ không hợp lệ nếu thiếu nó.
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 mà có thể đọc mọi thứ hiển thị trên màn hình.
Trình đọc màn hình này rất có ích cho người mù, khiếm thị hoặc học dạng khiếm thính.
Trình đọc màn hình có thể đọc thuộc tính alt.
Kích thước ảnh – Width và Height
Bạn có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao cho một ảnh.
Các giá trị được quy định tại các điểm ảnh pixel (sử dụng px sau giá trị):
Ví dụ
<
img
src=
“htnl5.gif”
alt=
“HTML5 Icon”
style=
“width:128px;height:128px;”
>
Xem kết quả
Ngoài ra bạn có thể sử dụng thộc tính width và height. Tại đây, giá trị được đặt mặc định theo đơn vị pixel:
Ví dụ:
<
img
src=
“html5.gif”
alt=
“HTML5 Icon”
width=
“128”
height=
“128”
>
Xem kết quả
Width and Height or Style?
Tất cả thuộc tính width, height, and style là phù hợp trong các tiêu chuẩn HTML5 mới nhất.
Chúng tôi gợi ý bạn nên sử dụng thuộc tính style. Nó sẽ tránh được việc thay đổi định kiểu được định ngĩa trong style sheet.
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
>
Xem kết quả
Hình ảnh trong thư mục khác
Nếu chỉ rõ đường dẫn, trình duyệt sẽ tìm các ảnh trong cùng thư mục với trang web .
Tuy nhiên, thường lưu trữ các ảnh trong thư mục con. Vì thế, bạn phải cho cả tên thư mục con vào trong thuộc tính src:
Ví dụ:
<
img
src=
“/images/html5.gif”
alt=
“HTML5 Icon”
style=
“width:128px;height:128px;”>
Xem kết quả
Ả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.
Thực vậy, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web trên thế giới:
Ví dụ:
<
img
src=
“https://timoday.edu.vn/wp-content/uploads/2015/09/logo11.png”
alt=
“timoday.edu.vn”
>
Xem kết quả
Ảnh động
Chuẩn GIF cho phép tạo ảnh động:
Ví dụ:
<
img
src=
“programming.gif”
alt=
“Computer Man”
style=
“width:48px;height:48px;”
>
Xem kết quả
Lưu ý cú pháp chèn hình ảnh động không khác gì với chèn hình ảnh không bình thường.
Sử dụng ảnh như là một liên kết (link)
Để sử dụng ảnh như một liên kết, đơn giản chỉ là thẻ <img> nằm trong thẻ <a>:
Ví dụ:
<
a
href=
“timoday.edu.vn”
>
<
img
src=
“smiley.gif”
alt=
“Tìm ở đây”
style=
“width:42px;height:42px;border:0;”
>
<
/a
>
Xem kết quả
Thêm “border: 0;” để tránh trình duyệt IE9 (và phiên bản cũ hơn) hiển thị đường viền xung quanh hình ảnh.
Ảnh nổi
Sử dụng các thuộc tính CSS để các hình ảnh nổi lên.
Các ảnh có thể nổi sang phải hoặc sang trái của văn bản::
Ví dụ:
<
p
>
<
img
src=
“smiley.gif”
alt=
“Smiley face”
style=
“float:right;width:42px;height:42px;”
>
Ảnh sẽ nổi sang bên phải của văn bản.
<
/p
>
<
p
>
<
img
src=
“smiley.gif”
alt=
“Smiley face”
style=
“float:left;width:42px;height:42px;”
>
Ảnh sẽ nổi sang bên trái của văn bản.
<
/p
>
Xem kết quả
Bản đồ ảnh
Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh. Bản đồ ảnh là một ảnh mà ở đó chúng ta có thể kích được.
Tên thuộc tính của thẻ <map>kết hợp với thẻ <img> là thuộc tính “usemap” và tạo một mối quan hệ giữa ảnh và bản đồ.
Thẻ <map>chứa một số thẻ <area>, xác định các khu vực có thể kích vào trong bản đồ ảnh:
Ví 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>
Xem kết quả
Tóm tắt
- Sử dụng thẻ <img> để định nghĩa một ảnh
- Sử dụng thuộc tính src xác định URL ( địa chỉ web) của ảnh
- Sử dụng thuộc tính alt để xác định văn bản thay thế cho ảnh, nếu ảnh không hiển thị
- Sử dụng thuộc tính width và height để xác định kích thước của ảnh
- Sử dụng CSS width và height để xác định kích thước ảnh (cách khác)
- Sử dụng CSS float để đặt ảnh nổi
- Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh
- Sử dụng thẻ <area> để định nghĩa một vùng kích được trong bản đồ ảnh
- Sử dụng thẻ <img> với thuộc tính usemap để chỉ tới một bản đồ ảnh
Nạp ảnh mất nhiều thời gian. Các hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng các ảnh phải cẩn thận.
Các thẻ ảnh trong HTML
Thẻ
Mô tả
<img>
Định nghĩa một ảnh
<map>
Định nghĩa một ảnh bản đồ
<area>
Định nghĩa vùng kích được trong bản đồ ảnh
