At the dawn of site building, web resources made extensive use of frames to display individual parts of pages. But with the advent of the new version of HTML 5, everything has changed. The markup elements < frame >, < frameset > and < noframes > are deprecated. Their replacement was a single tag - < iframe >. How to add in html <iframe>? The example below will be clear even to a novice in programming.
What are frames?
The frame is the foundation of most of the first web pages. Translated literally, this word means "frame", that is, the frame is a small part of the page in the browser. The widespread use of frames in the past can be explained by the low quality and high cost of Internet traffic. As a rule, the site was divided into 3-5 parts, each of which performed a specific purpose:
- “Header” (top frame on page width) - display the name of the resource;
- left / right “glass” - menu output;
- central frame - displaying site content.
Pagination of a page allowed to reload only a certain part when it was updated. For example, a user clicked a menu item, and new content was uploaded to the central frame.
Modern frames in HTML 5
Why is it needed in HTML < iframe >? An example is pasting content from a third-party resource. A classic situation is when a web developer wants to show the position of an object on a map. How to be Draw a ground plan from scratch? No - there is a simpler solution: embed the Google Map element, Yandex Maps or 2GIS on the page. The task is solved in four actions.
- You need to go to the site of any mapping service.
- Find the desired object. Knowing the exact address, you can enter it in the search box.
- Using the “Save and get code” button (for “Yandex.Maps”) or “Finish” (for Google maps), get the code to insert.
- It remains to enter the generated markup tags on the page.
Additionally, you can choose the size of the map and configure other display options.
How else can be used in HTML < iframe> ? An example is the insertion of videos from the Youtube resource. Multimedia technology attracts Internet users, so video content is so popular. The developer will cope with the installation of the video quickly.
- You should upload your own video to Youtube or find a third-party file for broadcast.
- Get the tag by selecting the HTML button
- The final step is to embed the HTML <iframe>. An example of the resulting tag content will be discussed below.
Both examples used automatic code generation, but professional developers should be able to compose it themselves. Firstly, this will allow them to understand the page layout and, if necessary, modify it. Secondly, the markup of site elements (even despite the fact that they belong to an external resource) is not always formed without the participation of a webmaster. This is where the high qualification of the developer manifests itself.
Syntax
So, before you start page layout, you need to consider the iframe (html) tag: what it is and how to use it correctly.
First of all, it should be noted that the tag is paired. Between the opening and closing elements indicate the content that will be displayed in browsers that do not support this markup element. Key tag attributes:
- width
- height
- src (address of the loaded resource);
- align (alignment method);
- frameborder
- allowfullscreen.
Thus, the code for <iframe> is received. The HTML example is fully demonstrated below:
<iframe width = "560" height = "315" src = "https://someserver.com/" frameborder = "0" allowfullscreen> </iframe>
In the above markup, it is enough to replace the site address with any other and, if necessary, adjust the frame size.