Hướng dẫn cách sử dụng thẻ object trong HTML để nhúng một tài liệu nào đó vào trang web hiện tại của bạn
thẻ object,thẻ object trong html,thẻ object là gì,thẻ object dùng để làm gì
- Thẻ <object> dùng để nhúng một "tài liệu" nào đó vào trang web.
- Tài liệu ở đây rất đa dạng, có thể là:
- Tuy nhiên, thông thường thì thẻ <object> không dùng để nhúng các tập tin audio, video, trang web.
(Vì để nhúng những loại tập tin đó, ta đã có các thẻ chuyên dụng như <audio>, <video>, <iframe>)
- Ví dụ: Dưới đây là một tập tin flash được nhúng vào trang web bằng thẻ <object>
- Ví dụ: Dưới đây là một tập tin pdf được nhúng vào trang web bằng thẻ <object>
- Thẻ <object> có sáu thuộc tính cơ bản.
- Dưới đây là bảng mô tả sơ lược về sáu thuộc tính đó:
data | Xác định đường dẫn đến tài liệu mà bạn muốn nhúng vào trang web |
width | Xác định chiều rộng của phần tử <object> |
height | Xác định chiều cao của phần tử <object> |
border | Xác định độ dày đường viền của phần tử <object> |
hspace | Xác định khoảng cách lề bên trái & lề bên phải của phần tử <object> |
vspace | Xác định khoảng cách lề phía trên & lề phía dưới của phần tử <object> |
- Thuộc tính data dùng để xác định đường dẫn đến tài liệu mà bạn muốn nhúng vào trang web.
(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)
<!DOCTYPE html> <html> <body> <object data="../file/Ban_Khai_Nhan_Khau.pdf"></object> </body> </html>
- Thuộc tính width dùng để xác định chiều rộng của phần tử <object>
- Giá trị của thuộc tính width có thể được xác định theo một trong hai loại đơn vị:
- Tuy nhiên, mặc định thì giá trị của thuộc tính width sẽ được xác định theo đơn vị px.
<!DOCTYPE html> <html> <body> <object data="../file/Ban_Khai_Nhan_Khau.pdf" width="100"></object> </body> </html>
- Thuộc tính height dùng để xác định chiều cao của phần tử <object>
- Giá trị của thuộc tính height có thể được xác định theo một trong hai loại đơn vị:
Nếu xác định chiều cao của phần tử <object> dựa theo đơn vị % thì bắt buộc phần tử cha của nó phải có một chiều cao được xác định.
- Tuy nhiên, mặc định thì giá trị của thuộc tính height sẽ được xác định theo đơn vị px.
<!DOCTYPE html> <html> <body> <object data="../file/Ban_Khai_Nhan_Khau.pdf" height="100"></object> </body> </html>
- Thuộc tính border dùng để xác định độ dày đường viền của phần tử <object>
(Mặc định thì giá trị của thuộc tính border sẽ được tính theo đơn vị pixel)
<!DOCTYPE html> <html> <body> <object data="../file/Ban_Khai_Nhan_Khau.pdf" border="10"></object> </body> </html>
- Thuộc tính hspace dùng để xác định khoảng cách lề bên trái & lề bên phải của phần tử <object>
(Mặc định thì giá trị của thuộc tính hspace sẽ được tính theo đơn vị pixel)
<!DOCTYPE html> <html> <head> <style type="text/css"> div{ border:1px solid red; display:inline-block; } </style> </head> <body> <div> <object data="../file/Ban_Khai_Nhan_Khau.pdf" hspace="100"></object> </div> </body> </html>
- Thuộc tính vspace dùng để xác định khoảng cách lề phía trên & lề phía dưới của phần tử <object>
(Mặc định thì giá trị của thuộc tính vspace sẽ được tính theo đơn vị pixel)
<!DOCTYPE html> <html> <head> <style type="text/css"> div{ border:1px solid red; display:inline-block; } </style> </head> <body> <div> <object data="../file/Ban_Khai_Nhan_Khau.pdf" vspace="100"></object> </div> </body> </html>
- Hầu hết các trình duyệt sẽ hiển thị phần tử <object> với định dạng CSS như sau:
object:focus { outline: none; }