Thẻ <object> trong HTML

1) Thẻ <object> trong HTML

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

  • Một tập tin audio
  • Một tập tin video
  • Một trang web
  • Một tập tin pdf
  • Một tập tin flash
  • ....

- 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 pdf được nhúng vào trang web bằng thẻ <object>

2) Các thuộc tính của 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>

2.1) Thuộc tính data

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

Ví dụ:
<!DOCTYPE html>
<html>
<body>
    <object data="../file/ban-khai-nhan-khau.pdf"></object>
</body>
</html>
Xem ví dụ

2.2) Thuộc tính width

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

  • px (pixel)
  • % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)

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

Ví dụ:
<!DOCTYPE html>
<html>
<body>
    <object data="../file/ban-khai-nhan-khau.pdf" width="100"></object>
</body>
</html>
Xem ví dụ

2.3) Thuộc tính height

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

  • px (pixel)
  • % (tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó)

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

Ví dụ:
<!DOCTYPE html>
<html>
<body>
    <object data="../file/ban-khai-nhan-khau.pdf" height="100"></object>
</body>
</html>
Xem ví dụ

2.4) Thuộc tính border

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

Ví dụ:
<!DOCTYPE html>
<html>
<body>
    <object data="../file/ban-khai-nhan-khau.pdf" border="10"></object>
</body>
</html>
Xem ví dụ

2.5) Thuộc tính hspace

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

Ví dụ:
<!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>
Xem ví dụ

2.6) Thuộc tính vspace

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

Ví dụ:
<!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>
Xem ví dụ

3) Định dạng CSS mặc định

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