iframe and object tags

HTML object tag

The <iframe> and <object> tags can be used to embed another document within the current page.

HTML iframe tag

The <iframe> is used to add and display the content of another document, or webpage within the current HTML document.
- Example:

<h4>Example iframe</h4>
<p>The following content is into an IFRAME element.</p>

<iframe width='400' height='300' src='https://coursesweb.net/'></iframe>

Attributes of <iframe>

The following attributes can be used in the <iframe> tag:

height - specifies the height of an iframe, in pixels.
name - specifies the name of an iframe (its value is used in the 'target' attribute in hyperlink (<a>))
sandbox - enables an extra set of restrictions for the content in the iframe..
<iframe sandbox='value' src='https://gamv.eu/'></iframe>
- You can add multiple values separated by comma: sandbox='val-1 val-2'.
- no value - applies all restrictions.
- allow-forms - re-enables form submission in iframe.
- allow-pointer-lock - re-enables APIs.
- allow-popups - allows popup from iframe.
- allow-same-origin - allows the iframe content to be treated as being from the same origin (to have access to server content via ajax scripts).
- allow-scripts - re-enables scripts.
- allow-top-navigation - allows the iframe content to navigate its top-level browsing context .
src - specifies the address of the document to embed in iframe.
srcdoc - specifies a HTML content to show in iframe, that will override the content specified in the 'src' attribute.
width - specifies the width of the <iframe>, in pixels.

- Example, <iframe> with 'srcdoc'.

<h4>Example iframe with srcdoc</h4>
<p>The following content is into an IFRAME element with srcdoc attribute, which replaces the content from the 'src' address.</p>

<iframe width='400' height='300' src='https://coursesweb.net/' srcdoc='<h3>Content from srcdoc</h3>'></iframe>

The <iframe> positioning and style is made with CSS properties, via the 'id', 'class' or 'style' attributes.

HTML object tag

The <object> tag is used for embedding media contents on a web page (images, Java applets, Flash, PDF, movie, or even another HTML file).
This element is designed to include any sort of document. It uses the type attribute to indicate the 'mime type', and the data attribute to indicate the source of the document (its URI).

- Example, adds a SWF flash game in HTML document.

<h4>Example HTML object element</h4>
<p>In the OBJECT tag of this HTML document it is added a SWF file (a game).</p>

<object width='550' height='400' data='html/cubilus.swf' type='application/x-shockwave-flash'></object>

Attributes of <object>

In <object> you can add the following attributes:

data - specifies the address of the resource added in <object>.
height - defines the height of the object, in pixels.
name - defines a 'name' for the <object> (used in scripts).
type - specifies the media type (MIME type) of the resource specified in the 'data' attribute.
width - defines the width of the object, in pixels.

- Example, shows a PDF document in HTML page:

<h4>Example PDF in HTML object</h4>
<p>In the OBJECT tag of this HTML document it is added a PDF file.</p>

<object type='application/pdf' data='blog/101_zen_stories.pdf' width='400' height='280'>PDF Document.</object>

<<-HTML Symbol Entities

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used in <table> to create table header cell?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Which CSS property sets the distance between lines?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Which function opens a new browser window.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicate the PHP function that returns an array with names of the files and folders inside a directory.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);