Cách chèn Plug-in vào trang web HTML

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>

Ví dụ:

<!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> .ttt-border
width	- Thiết lập chiều rộng của phần tử <object> .ttt-width
height	- Thiết lập chiều cao của phần tử <object> .ttt-height
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> .ttt-hspace
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> .ttt-vspace

- 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>

Ví dụ:

- Đườ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ị:

- 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ụ)

- 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ị:

- 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ụ)

- 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>

Xem ví dụ