Cách Chèn Plug-in Vào Trang Web

Table of Contents

Plug-in trong HTML giúp mở rộng tính năng và khả năng hiển thị trên trang web, cho phép tích hợp video, âm thanh, biểu đồ, bản đồ, hiệu ứng động và nhiều tiện ích khác. Việc chèn plug-in vào trang web có thể thực hiện bằng cách sử dụng các thẻ nhúng như <embed>, <object>, <iframe>, hoặc nhúng trực tiếp JavaScript, CSS, và API bên thứ ba.

Trong bài viết này, chúng ta sẽ tìm hiểu cách chèn plug-in vào trang HTML, giúp bạn nâng cấp trải nghiệm người dùng và tối ưu hóa tính tương tác cho website của mình.

Plug-in là gì ?

Plug-in có thể hiểu đơn giản là các ứng dụng hoặc tập tin bên ngoài (ví dụ: PDF, Flash, video, âm thanh…) được nhúng vào trang web để mở rộng tính năng và nâng cao trải nghiệm người dùng.

– Để 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>
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>

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ụ