Kết nối

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

7.912 lượt xem 
 Cập nhật lần cuối: 03/09/2017 lúc 14:47:39
Thể loại: HTML/HTML5, Thiết kế Web 

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.

Liên quan:  [PHP] Phần 9: Toán tử

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.

Trích dẫn bài viết
  • 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}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Trung
Trung
7 năm trước

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

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x