Thẻ iframe HTML nhúng một tài liệu web vào một trang web. Tài liệu được nhúng có thể là PDF, trang web hoặc nội dung khác. Thuộc tính src xác định vị trí của tài nguyên được nhúng.
Bạn có thể nhúng nội dung của một tài liệu web, chẳng hạn như PDF hoặc bản đồ từ Google Maps, vào một trang khác, sử dụng HTML.
Đó là nơi mà HTML xuất hiện. HTML được sử dụng để nhúng các đối tượng bên ngoài như các trang web khác vào một trang web duy nhất. Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng HTML để nhúng các tài nguyên web vào một trang web.
iframe HTML
Khung nội tuyến HTML, hoặc khung nội tuyến, hiển thị các tài liệu web bên ngoài trên một trang. Bạn có thể nhúng bản đồ, PDF, video hoặc các tài nguyên khác bằng thẻ HTML
Mã được lưu trữ trong khung nội tuyến độc lập với phần còn lại của trang web. Bất kỳ kiểu hoặc JavaScript nào áp dụng cho trang web của bạn sẽ không được áp dụng trong iframe.
Đây là cú pháp cho HTML thẻ:
<iframe src="url"></iframe>
được sử dụng để tạo iframe. Chúng tôi đã chỉ định iframe src thuộc tính. Thuộc tính chứa vị trí của các phần tử HTML mà chúng tôi muốn nhúng vào trang web của mình. Đây phải là một URL HTML.
Ví dụ về mã HTML iframe
Hãy xem qua một ví dụ để khám phá cách thẻ hoạt động.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Giả sử chúng ta đang xây dựng một trang web cho một xã hội lịch sử ở Washington, D.C. Họ muốn chúng tôi tạo một trang có video nhúng từ Học viện Khan về sự ra đời của Hiến pháp Hoa Kỳ. Trang này là tài liệu được đề xuất cho bất kỳ ai quan tâm đến việc tham gia xã hội. Chúng tôi có thể sử dụng mã sau để nhúng video vào trang web của mình:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Mã của chúng tôi trả về:
Chúng tôi đã sử dụng phần tử để nhúng một tài nguyên web bên ngoài vào trang web của chúng tôi. Tài nguyên web mà chúng tôi đã nhúng là liên kết “https://www.youtube.com/embed/Rk8dCnKIfP4”. Điều này chỉ ra video mà xã hội lịch sử muốn được hiển thị trên trang web của họ.
Chiều cao và chiều rộng khung nội tuyến HTML
Thuộc tính chiều cao và thuộc tính chiều rộng được sử dụng để đặt kích thước của iframe. Giả sử xã hội lịch sử ở Washington D.C. muốn chúng tôi làm cho video lớn hơn trên trang web của họ.
Chúng tôi sẽ đặt chiều rộng của video YouTube là 500 pixel và chiều cao là 300 pixel:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Mã của chúng tôi trả về:
Video được nhúng của chúng tôi hiện có chiều rộng 500 pixel và chiều cao 300 pixel trên tài liệu HTML của chúng tôi. Điều này giúp mọi người xem video của chúng tôi trên trang web dễ dàng hơn.
Ngoài ra, chúng tôi có thể đặt chiều rộng và chiều cao của thẻ iframe bằng cách sử dụng CSS. Tuy nhiên, vì HTML hỗ trợ thuộc tính chiều cao và cân nặng, điều này là không cần thiết.
Xóa đường viền khung nội tuyến HTML
Khi bạn đang làm việc với , bạn sẽ nhận thấy rằng nội dung của nó được bao quanh bởi một đường viền. Nếu bạn muốn xóa đường viền này, bạn có thể sử dụng border:none; Thuộc tính CSS.
Xã hội lịch sử đã yêu cầu chúng tôi xóa ranh giới xung quanh video YouTube khỏi trang web của họ. Đây là mã chúng tôi sẽ sử dụng để xóa đường viền:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
Mã của chúng tôi trả về:
Giờ đây, video của chúng tôi không còn biên giới nữa.
Mục tiêu liên kết iframe HTML
Ngoài ra, thẻ có thể được sử dụng làm khung đích cho một liên kết. Chúng ta có thể đặt iframe làm khung mục tiêu cho một liên kết bằng cách sử dụng thuộc tính target trong một liên kết HTML. Thuộc tính HTML mục tiêu phải tham chiếu đến thuộc tính tên của .
Giả sử xã hội lịch sử có một video khác mà họ muốn chúng tôi hiển thị trên trang web của họ về Điều I của Hiến pháp Hoa Kỳ. Video này cũng được xuất bản bởi Khan Academy.
Khi văn bản Sự ra đời được nhấp vào trang web, Sự ra đời của Hiến pháp Hoa Kỳ video sẽ được hiển thị trong iframe. Khi văn bản Điều I được nhấp vào, video về Điều I của Hiến pháp sẽ được hiển thị.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
Mã của chúng tôi trả về:
Theo mặc định, video về sự ra đời của Hiến pháp Hoa Kỳ được hiển thị trong iframe. Nội dung của iframe thay đổi để trỏ đến video từ Học viện Khan về Điều I của Hiến pháp. Điều này xảy ra khi chúng tôi nhấp vào Bài viết I URL.
Khung nội tuyến của chúng tôi được chuyển hướng đến video về sự ra đời của Hiến pháp nếu video đó chưa được làm nổi bật khi chúng tôi nhấp vào Sự ra đời .
Kết luận
Thẻ HTML nhúng các tài nguyên web bên ngoài, chẳng hạn như các trang web vào một trang web khác. Điều này rất hữu ích nếu bạn muốn thêm bản đồ, tệp, video hoặc các trang web khác vào trang web của mình.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng HTML để hiển thị các tài nguyên web bên ngoài trên một trang web. Bây giờ bạn đã có kiến thức cần thiết để bắt đầu sử dụng gắn thẻ như một chuyên gia!
Để tìm hiểu thêm về cách viết mã trong HTML, hãy đọc hướng dẫn của chúng tôi để học Ngôn ngữ đánh dấu siêu văn bản.