HTML

Các hướng dẫn cơ bản

Tìm hiểu nâng cao

HTML CSS JavaScript jQuery MySQL PHP

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

Danh sách các thẻ trong HTML (sắp xếp theo bảng chữ cái)

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

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

Danh sách các thẻ trong HTML (sắp xếp theo bảng chữ cái)