1) Plug-in là gì ?
– Plug-in có thể tạm hiểu là những cái ứng dụng bên ngoài (ví dụ như một tập tin pdf, tập tin flash, . . . .) được dùng để nhúng vào trang web, giúp mở rộng tính năng cho trang web.
2) Cách chèn Plug-in vào trang web
– Để chèn plug-in vào trang web thì chúng ta sử dụng thẻ <object> với cú pháp như sau:
<object data="đường dẫn đến tập tin"></object><!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<object data="../file/ban-khai-nhan-khau.pdf"></object>
</body>
</html>Xem ví dụ
– Dưới đây là một số thuộc tính thường được sử dụng bên trong thẻ <object>
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)
| border | – Thiết lập độ dày của cái đường viền bao xung quanh phần tử <object> |
| width | – Thiết lập chiều rộng của phần tử <object> |
| height | – Thiết lập chiều cao của phần tử <object> |
| hspace | – Thiết lập khoảng cách lề bên trái & lề bên phải của phần tử <object> |
| vspace | – Thiết lập khoảng cách lề phía trên & lề phía dưới của phần tử <object> |
– Thuộc tính border dùng để thiết lập độ dày của cái đường viền bao xung quanh phần tử <object>
– Đường viền của phần tử <object> bên dưới có độ dày 10 pixel
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<object data="../file/ban-khai-nhan-khau.pdf" border="10"></object>
</body>
</html>Xem ví dụ
– Thuộc tính width dùng để thiết lập chiều rộng của phần tử <object>
– Để sử dụng thuộc tính width thì chúng ta thêm nó vào bên trong thẻ <object> với cú pháp như sau:
width="value"– Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:
– Thuộc tính height dùng để thiết lập chiều cao của phần tử <object>
– Để sử dụng thuộc tính height thì chúng ta thêm nó vào bên trong thẻ <object> với cú pháp như sau:height="value"
– Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:
– Thuộc tính hspace dùng để thiết lập khoảng cách lề bên trái & lề bên phải của phần tử <object> Ví dụ:
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> <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>Xem ví dụ- Thuộc tính vspace dùng để thiết lập khoảng cách lề phía trên & lề phía dưới của phần tử <object>Ví dụ:<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> <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>
| px | – Chiều rộng của phần tử <object> sẽ được xác định dựa theo một giá trị pixel cụ thể.
– Ví dụ, nếu tôi viết width=”400″ thì điều đó có nghĩa là phần tử <object> sẽ được hiển thị với kích thước chiều rộng là 400 pixel (Xem ví dụ) |
| % | – Chiều rộng của phần tử <object> sẽ được xác định dựa theo tỷ lệ phần trăm “chiều rộng phần nội dung” của phần tử cha của nó.
– Ví dụ, nếu phần tử cha của phần tử <object> có chiều rộng 500 pixel, tôi viết width=”70%” thì điều đó có nghĩa là phần tử <object> sẽ được hiển thị với kích thước chiều rộng là 350 pixel (Xem ví dụ) |
| px | – Chiều cao của phần tử <object> sẽ được xác định dựa theo một giá trị pixel cụ thể.
– Ví dụ, nếu tôi viết height=”400″ thì điều đó có nghĩa là phần tử <object> sẽ được hiển thị với kích thước chiều cao là 400 pixel (Xem ví dụ) |
| % | – Chiều cao của phần tử <object> sẽ được xác định dựa theo tỷ lệ phần trăm “chiều cao phần nội dung” của phần tử cha của nó.
– Ví dụ, nếu phần tử cha của phần tử <object> có chiều cao 400 pixel, tôi viết height=”70%” thì điều đó có nghĩa là phần tử <object> sẽ được hiển thị với kích thước chiều cao là 280 pixel (Xem ví dụ) |
