Ảnh trong HTMLẢnh JPG Ảnh GIFẢnh PNGVí 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ả Show
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 HTMLTrong 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 địnhURL ( địa chỉ web) của ảnh:<img src=url alt=some_text> Các thuộc tính altThuộ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ộthì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 trongalt: 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 HTMLTrì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à HeightBạ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 ảnhpixel(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ínhwidthvà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ínhwidth, height, and style là phù hợp trong các tiêu chuẩnHTML5 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ácNế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ácMộ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 độngChuẩ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ổiSử 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 đồ ảnhSử 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 usemapvà tạo mộtmố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> Xem kết quả Tóm tắt
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 |
