[HTML/HTML5] Phần 20: Iframe trong HTML

80 lượt xem

Iframe dùng để hiển thị nội dung 1 trang web bên trong 1 trang khác. Iframe còn được dùng để kéo traffic của 1 trang web mới khi đặt nó ở các trang web phổ biến hơn.

Cú pháp Iframe
Một iframe được định nghĩa bằng thẻ iframe như sau:

<iframe src=”URL”></iframe>

Thuộc tính src đặc tả đường dẫn website của trang bên trong iframe.

Chiều cao và chiều rộng Iframe
Thuộc tính width, height dùng để định nghĩa chiều rộng và chiều cao của 1 Iframe. Các giá trị width, height có thể là giá trị pixel (hay dạng phần trăm như 80%).

Iframe chứa nội dung trang dammio.html với chiều cao là 200 pixel và độ rộng là 300 pixel.

<iframe src="dammio.html" height="200" width="300"></iframe>

Bỏ đường viền trong Iframe
Theo mặc định, một iframe sẽ có đường viền bao quanh nó. Nếu bạn muốn bỏ đường viền này, bạn có thể thêm thuộc tính style chứa thuộc tính border là none. Khi bỏ đường viền, bạn rất khó phân biệt bằng mắt đâu là nội dung trong iframe và đâu là nội dung trang web chính.

<iframe src="dammio.html" style="border:none;"></iframe>

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

<iframe src="dammio.html" style="border:2px solid blue;"></iframe>

Sử dụng Iframe chứa 1 đường dẫn
Iframe có thể dùng để chứa nội dung đường dẫn URL. Thuộc tính target phải có giá trị trùng với giá trị của thuộc tính name ở iframe.

Trong ví dụ sau, khi bạn nhấn lên liên kết dammio.com thì nội dung website này sẽ hiển thị trong iframe.

<a href="http://www.dammio.com" width="400" height="300" target="iframe_a">dammio.com</a><br/>
<iframe name="iframe_a"></iframe>

Kết luận: Bài viết đã trình bày cho bạn kiến thức cơ bản về Iframe thông qua các ví dụ dễ hiểu.

Bình luận Facebook

Để lại bình luận

4 Comments on "[HTML/HTML5] Phần 20: Iframe trong HTML"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
trackback

[…] Đăng ngày 29 Tháng Tám, 201729 Tháng Tám, 2017 bởi dammio 9 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

Trung
Guest

Viết tiếp đi chủ thớt ơi hay quá

trackback

[…] 2017 bởi dammio 0 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz