IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




HTML Iframes

by GokiSoft.Com - 20:10 24/05/2020 2,339 Lượt Xem


Một HTML iframe được sử dụng để hiển thị một trang web bên trong một trang web.





Cú pháp iframe


Một HTML iframe được định nghĩa bằng thẻ <iframe> :

<iframe src="URL"></iframe>


Thuộc tính  src xác định URL (địa chỉ trang web) của khung trang nội tuyến.



Iframe -  Đặt chiều cao và chiều rộng


Sử dụng các thuộc tính height và width để xác định kích thước của iframe.

Chiều cao và chiều rộng được xác định dưới dang pixel theo mặc định:

ví dụ

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

</body>
</html>



Hoặc bạn có thể sử dụng CSS để đặt chiều cao vào chiều rộng của iframe:

ví dụ

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px"></iframe>

</body>
</html>





Iframe - Loại bỏ viền


Theo mặc định, một iframe có một đường viền xung quanh nó.

Để loại bỏ đường viền, thêm thuộc tính  style và sử dụng thuộc tính CSS  border :

ví dụ

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

</body>
</html>


Với CSS, bạn cũng có thể thay đổi kích cỡ, phong cách và màu của đường viền iframe:

ví dụ

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

</body>
</html>







Iframe - Mục tiêu cho một liên kết


Một iframe có thể được sử dụng như khung mục tiêu cho một đường dẫn.

Thuộc tính target của đường dẫn phải tham chiếu đến thuộc tính  name của iframe:

ví dụ

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>





Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!