Ảnh trong HTML
Code: 1 2 3 4 5 6 7 8 9 < ! DOCTYPE html > < html > < body > < h2 > Ả nh trong HTML < / h2 > < img src = "/pictures/picfullsizes/2018/09/19/uvo15373 ...
Code:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <h2>Ảnh trong HTML</h2> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="awidth:128px;height:128px"> </body> </html> |
Demo
Cú pháp chèn ảnh trong HTML
Trong HTML, ảnh được quy định trong thẻ <img>.
<img> là một thẻ rỗng, chỉ chứa các thuộc tính và không có thẻ đóng.
Thuộc tính src quy định địa chỉ của ảnh:
|
1 |
<img src="url" alt="Miêu tả ảnh"> |
Thuộc tính alt
Thuộc tính alt chứa một đoạn miêu tả về ảnh, sử dụng để thay thế cho ảnh trong trường hợp ảnh không hiển thị được.
|
1 |
<img src="html5.gif" alt="Biểu tượng của HTML5"> |
Bắt buộc phải sử dụng thuộc tính alt khi chèn ảnh vào web. Một trang HTML sẽ là không đúng chuẩn nếu ảnh thiếu thuộc tính alt.
Trình đọc nội dung
Trình đọc nội dung là một phần mềm có thể đọc những chữ đang hiển thị trên màn hình của bạn.
Trong lĩnh vực web, trình đọc nội dung có thể chuyển nội dung trang web của bạn từ chữ sang giọng nói.
Trình đọc nội dung được sử dụng cho người mù, khiếm thị hoặc khuyết tật.
Kích thước ảnh – Chiều rộng và chiều cao
Bạn có thể sử dụng thuộc tính style để quy định chiều rộng và chiều cao của ảnh.
Các giá trị có đơn vị đo là pixels (sử dụng px ở sau giá trị):
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="awidth:128px; height:128px"> </body> </html> |
Demo
Cách khác, bạn có thể sử dụng thuộc tính awidth và height.
Các giá trị có đơn vị đo là pixels (không sử dụng px ở sau giá trị):
Sử dụng awidth height hay dùng CSS
Cả awidth, height và thuộc tính CSS để quy định kích thước ảnh đều hợp lệ theo chuẩn HTML5 mới nhất.
Chúng tôi khuyên bạn nên sử dụng CSS. Nó sẽ giúp bạn thay đổi giá trị mặc định (nếu có):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <style> img { awidth:100%; } </style> </head> <body> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="awidth:128px;height:128px"> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" awidth="128" height="128"> </body> </html> |
Demo
Trong ví dụ trên, CSS sẽ ghi đè lên giá trị mặc định (awidth: 100%).
Hiển thị ảnh từ thư mục khác
Nếu bạn không chỉ định thư mục, trình duyệt sẽ tự động tìm ảnh tại cùng thư mục với trang HTML.
Tuy nhiên, cách sử dụng phổ biến trên web hiện nay là lưu trữ ảnh vào một thư mục riêng và đưa cả đường dẫn thư mục vào phần tên ảnh:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="awidth:128px;height:128px"> </body> </html> |
Demo
Nếu trình duyệt không tìm thấy ảnh, nó sẽ hiển thị biểu tượng liên kết bị lỗi:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="pic_html5.gif" alt="HTML5" style="awidth:128px;height:128px"> </body> </html> |
Demo
Hiển thị ảnh trên máy chủ khác
Có một số trang web không chứa ảnh và website trên cùng một máy chủ, họ sử dụng máy chủ khác để lưu trữ ảnh.
Bạn có thể truy cập vào những ảnh này từ bất kỳ website nào trên thế giới:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <img src="https://webvn.com/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="awidth:128px;height:128px"> </body> </html> |
Demo
Hiển thị ảnh động
Hiển thị ảnh động trên trang:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p>Hiển thị ảnh động GIF trên trang.</p> <img src="/wp-content/uploads/2015/05/programmer1.gif" alt="Computer man" style="awidth:107px;height:98px"> </body> </html> |
Demo
Cú pháp chèn ảnh động giống như cú pháp chèn ảnh thường.
Sử dụng ảnh trong liên kết
Cách phổ biến để sử dụng ảnh trong liên kết:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <p>Ảnh có chứa liên kết, bạn có thể nhấn để chuyển sang trang mới.</p> <a href="/html/hoc-html/"> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="Học HTML" style="awidth:42px;height:42px;border:0"> </a> <p>Chúng ta đã thêm "border:0" để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.</p> </body> </html> |
Demo
Bản đồ trên ảnh
Bạn có thể tạo bản đồ trên ảnh và những vùng này có thể nhấn như liên kết:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p>Nhấn vào mặt trời hoặc các hành tinh bên cạnh để nhìn gần hơn:</p> <img src="/wp-content/uploads/2015/05/universe.gif" alt="Vũ trụ" usemap="#universe" style="awidth:145px;height:126px"> <map name="universe"> <area shape="rect" coords="0,0,82,126" alt="Mặt Trời" href="/wp-content/uploads/2015/05/sun.gif"> <area shape="circle" coords="90,58,3" alt="Sao Thủy" href="/wp-content/uploads/2015/05/merglobe.gif"> <area shape="circle" coords="124,58,8" alt="Sao Kim" href="/wp-content/uploads/2015/05/venglobe.gif"> </map> </body> </html> |
Demo
Bạn có thể tham khảo thêm về thẻ <map> và <area> trong thư viện HTML.
Vị trí ảnh
Bạn có thể căn chỉnh ảnh sang bên phải hoặc bên trái của đoạn văn bản bằng thuộc tính float trong CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <p> <img src="/pictures/picfullsizes/2018/09/19/uvo1537343108.gif" alt="HTML5" style="float:left;awidth:128px;height:128px"> Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh. Đoạn văn bản bên cạnh ảnh. </p> <p>Ảnh sẽ ở bên trái của đoạn văn bản.</p> <p>Sử dụng thuộc tính float trong CSS. Thuộc tính align đã bị loại bỏ trong HTML 4 và không được hỗ trợ trong HTML5.</p> </body> </html> |
Demo
Tổng kết bài học
- Sử dụng thẻ <img> trong HTML để chèn ảnh vào trang
- Sử dụng thuộc tính src trong HTML để trỏ đường dẫn tới ảnh
- Sử dụng thuộc tính alt trong HTML để thêm miêu tả cho ảnh trong trường hợp ảnh không hiển thị
- Sử dụng thuộc tính awidth và height HTML để quy định kích cỡ của ảnh
- Sử dụng thuộc tính awidth và height trong CSS để quy định kích cỡ của ảnh
- Sử dụng thuộc tính float trong CSS để căn chỉnh vị trí của ảnh so với đoạn văn bản
- Sử dụng thuộc tính usemap trong HTML để trỏ tới một bản đồ trên ảnh
- Sử dụng thẻ <map> trong HTML để tạo một bản đồ trên ảnh
- Sử dụng thẻ <area> trong HTML để tạo các khu vực trên bản đồ ảnh
Việc tải ảnh sẽ tốn một khoảng thời gian và những ảnh lớn có thể làm chậm tốc độ tải trang của bạn. Hãy cẩn thận khi chèn ảnh vào trang.
