Cách chèn một cái khung vào bên trong trang web - 20

Cách chèn một cái khung vào bên trong trang web – 20

1) Khung là gì !?

– Khung là một phần tử được tạo nên bởi thẻ <iframe>, nó có chức năng gần giống với một cái Tab trên trình duyệt, đó chính là dùng để mở & thao tác với trang web.

– Ví dụ: Phần tử bên dưới chính là một cái khung.

2) Cách chèn một cái khung vào bên trong trang web

– Để chèn một cái khung vào bên trong trang web thì chúng ta sử dụng thẻ <iframe> với cú pháp như sau: <iframe src=”URL”></iframe>

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <iframe src="https://dsmart.vn/"></iframe>
</body>
</html>

– Dưới đây là một số thuộc tính thường được sử dụng bên trong thẻ <iframe>

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

frameborder : Tùy chỉnh việc hiển thị hay không hiển thị cái đường viền bao xung quanh khung.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <iframe src="https://dsmart.vn/" frameborder="1"></iframe>
    <br><br>
    <iframe src="https://dsmart.vn/" frameborder="0"></iframe>
</body>
</html>

width: Thiết lập chiều rộng của cái khung.
height: Thiết lập chiều cao của cái khung.
srcdoc: Thiết lập nội dung sẽ được hiển thị bên trong cái khung.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <iframe srcdoc="<p>Lập Trình Web</p><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><img src='https://dsmart.vn/wp-content/uploads/2022/06/Screenshot_7.png'>"></iframe>
</body>
</html>

scrolling: Tùy chỉnh việc hiển thị hay không hiển thị các thanh scroll của cái khung.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <iframe src="https://dsmart.vn" scrolling="auto"></iframe>
    <br><br>
    <iframe src="https://dsmart.vn" scrolling="no"></iframe>
</body>
</html>