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="https://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.
- APA:
Dammio. (2017). [HTML/HTML5] Phần 20: Iframe trong HTML. https://www.dammio.com/2017/08/29/htmlhtml5-phan-20-iframe-trong-html.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[HTML/HTML5] Phần 20: Iframe trong HTML},
year = {2017},
url = {https://www.dammio.com/2017/08/29/htmlhtml5-phan-20-iframe-trong-html},
urldate = {2024-11-06}
}
Viết tiếp đi chủ thớt ơi hay quá
đang lễ nên chưa viết bạn nhé