Document Embedding with HTML

In addition to allowing linking to other Web pages, HTML5 allows another Web page to be displayed inside a Web page and browsed independently. The element used for achieving this is the <iframe> element.

1. <iframe>…</iframe>

The <iframe> element is an inline element that allows content to be embedded in a page and interacted with by the user in various ways. Embedding content in this way is useful for embedding interactive applications, such as Google map. Commonly supported attributes are listed in Table 6.4. Figure 6.18 shows how it is used to embed interactive Google map, and Figure 6.19 depicts the result.

Obtaining the value for the sre attribute required going to https://maps.google.co.uk and searching for London. Next, when the map for London was displayed, the three- line menu icon at the top-left corner of the map was clicked to display a drop-down list, from which “Share or embed map” was chosen. Next, in the dialog that appeared, the “Embed map” option was chosen and the code for embedding the map was copied and used, as shown in the example. Note that the code generated by the site, as of time of writing, has some attributes that are no longer supported by the <iframe> element and should therefore be removed.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *