Pages and elements using OBJECT, EMBED and IFRAME
What is it all about?
For various reasons, it can be an advantage to embed an element in a page. These days it is especially video that is embedded, and to some degree pdf documents, but those are not the only uses.
In the late 1990's, frames, an earlier version of the current IFRAME tag, was all the rage, as it offered some possibilities for design, that hadn't been possible before. Today frames are only used on a very few and old websites, to some extent because the tag was removed in HTML 5. Embedding we still use a lot, and for that we have the three tags OBJECT, EMBED og IFRAME. They basically do the same, but you should be aware that the tags have some minor differences that may make one better to use that the other, when coding. In general, IFRAME is currently the most populat tag, and EMBED is supposedly being deprecated. The three tags can handle video, but here it is generally better to use the VIDEO tag, as the was created specifically for this particular use. You can read more about video on websites here.
In the late 1990's, frames, an earlier version of the current IFRAME tag, was all the rage, as it offered some possibilities for design, that hadn't been possible before. Today frames are only used on a very few and old websites, to some extent because the tag was removed in HTML 5. Embedding we still use a lot, and for that we have the three tags OBJECT, EMBED og IFRAME. They basically do the same, but you should be aware that the tags have some minor differences that may make one better to use that the other, when coding. In general, IFRAME is currently the most populat tag, and EMBED is supposedly being deprecated. The three tags can handle video, but here it is generally better to use the VIDEO tag, as the was created specifically for this particular use. You can read more about video on websites here.
Using IFRAME
The tag IFRAME is extremely simple. The syntax to make it work is:
Note that though it has both a start and end tag, it has no content. Also, you don't have to specify the type as you have to do with EMBED and OBJECT. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the SRC attribute.
If we try inserting the page with chess symbols in a 680 x 500 px IFRAME, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
On screen it looks like this:
IFRAME has a number of specific attributes, of which a big part has vanished as a part of HTML 5. As demonstrated in the example above, being gone only means that the effect has to be done using the attribute STYLE, either directly in the tag or as CSS.
The attributes are as follows:
<IFRAME SRC="FileName"></IFRAME>
Note that though it has both a start and end tag, it has no content. Also, you don't have to specify the type as you have to do with EMBED and OBJECT. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the SRC attribute.
If we try inserting the page with chess symbols in a 680 x 500 px IFRAME, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
<IFRAME SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></IFRAME>
On screen it looks like this:
IFRAME has a number of specific attributes, of which a big part has vanished as a part of HTML 5. As demonstrated in the example above, being gone only means that the effect has to be done using the attribute STYLE, either directly in the tag or as CSS.
The attributes are as follows:
| Attribute | Values | Effect |
| ALIGN | left right top middle bottom | Specifies the alignment (placing) of the IFRAME relative to the other elements on the page. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case. |
| FRAMEBORDER | 1 0 | Specifies whether you want a border/frame on the IFRAME or not. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case. |
| HEIGHT | pixels | Specifies the height of the IFRAME in px. The effect can be done using STYLE, which is recommended in any case. |
| LONGDESC | URL | Specifies a page containing a longer description of the content of the IFRAME. Not supported in HTML5. Note: The content of the file being linked to is not shown anywhere in the IFRAME. |
| MARGINHEIGHT | pixels | Specifies margin top and bottom for the IFRAME content. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case. |
| MARGINWIDTH | pixels | Specifies margin left and right for the IFRAME content. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case. |
| NAME | navn | Specifies a name for the IFRAME |
| SANDBOX | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Additional options for restrictions on the IFRAME content. Only HTML 5. |
| SCROLLING | yes no auto | Specifies whether you want to show scrollbars or not in the IFRAME. Not supported in HTML5. The effect can be done using STYLE, which is recommended in any case. |
| SRC | URL | Specifies the address for the embedded file in IFRAME. |
| SRCDOC | HTML_code | Specifies HTML code to be executed in the IFRAME. Only HTML 5. Note: Content generated using SRCDOC will make content specified in SRC invisible. |
| WIDTH | pixel | Specifies the width of the IFRAME in px. The effect can be done using STYLE, which is recommended in any case. |
Using EMBED
EMBED is basically the same as IFRAME, only with fewer attributes. Formally, EMBED is an HTML 5 tag, but on several browsers it will also work for HTML 4.01, if you are using this. It just cannot be validated. As always HTML 5 is recommended for the pages.
The syntax to make EMBED work is
i.e. there is no end tag. If we try inserting the page with chess symbols in a 680 x 500 px EMBED, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
On screen it looks like this:
The attributes are as follows:
As demonstrated in the example above, any styling has to be done using the attribute STYLE, either directly in the tag or as CSS.
The syntax to make EMBED work is
<EMBED SRC="FileName">
i.e. there is no end tag. If we try inserting the page with chess symbols in a 680 x 500 px EMBED, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
<EMBED SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000">
On screen it looks like this:
The attributes are as follows:
| Attribute | Values | Effect |
| HEIGHT | pixels | Specifies the height of the EMBED in px. The effect can be done using STYLE, which is recommended in any case. |
| SRC | URL | Specifies the address for the embedded file in EMBED. |
| TYPE | media_type | Specifies the type of embedded file e.g. TYPE="application/vnd.adobe.flash-movie" if it is a Flash file. It does not appear to be mandatory to specify the common file types with this attribute. |
| WIDTH | pixel | Specifies the width of the EMBED in px. The effect can be done using STYLE, which is recommended in any case. |
As demonstrated in the example above, any styling has to be done using the attribute STYLE, either directly in the tag or as CSS.
Using OBJECT
The tag OBJECT is a bit older than IFRAME and EMBED and works under HTML 4.01 as well. The syntax to make it work is:
Note that here we use the attribute DATA instead of SRC which is the attribute normally used for file/path. Also note that though it has both a start and end tag, it has no content. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the DATA attribute.
If we try inserting the page with chess symbols in a 680 x 500 px OBJECT, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
On screen it looks like this:
OBJECT has a number of specific attributes, of which a big part has become invalid in HTML 5. As demonstrated in the example above, being gone only means that effect has to be done using the attribute STYLE instead, either directly in the tag or as CSS.
The attributes are as follows:
<OBJECT DATA="FileName"></OBJECT>
Note that here we use the attribute DATA instead of SRC which is the attribute normally used for file/path. Also note that though it has both a start and end tag, it has no content. You can write something or insert images, if you want to. That will just be shown below the content being linked to in the DATA attribute.
If we try inserting the page with chess symbols in a 680 x 500 px OBJECT, like the IFRAME above, having automatic scrollbar (i.e. when there is an overflow) and a black frame, 2 px wide, then the code looks like this:
<OBJECT DATA="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></OBJECT>
On screen it looks like this:
OBJECT has a number of specific attributes, of which a big part has become invalid in HTML 5. As demonstrated in the example above, being gone only means that effect has to be done using the attribute STYLE instead, either directly in the tag or as CSS.
The attributes are as follows:
| Attribute | Values | Effect |
| ALIGN | left right top middle bottom | Specifies the alignment (placement) of the OBJECT relative to the other elements. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case. |
| ARCHIVE | URL | Link to files that needs to be uploaded along with the object to make it work right. Not supported by HTML 5. |
| BORDER | pixel | Specifies whether there has to be a border/frame aounf the OBJECT by specifying a width in px. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case. |
| CLASSID | class_ID | Reference number that OBJECT needs to handle the content correctly. Either a reference to Windows Registry or a link. Not supported by HTML 5. |
| CODEBASE | URL | Link to where you can find the code base for CLASSID. Not supported by HTML5. |
| CODETYPE | URL | Specifies the type of embedded file, e.g. a Word file: CODETYPE="application/msword" or a Flash animation: CODETYPE="application/x-shockwave-flash". This is slightly different from TYPE, which specifies the type of embedded object. Not supported by HTML 5. |
| DATA | URL | Specifies the address for the embedded file in OBJECT. |
| DECLARE | declare | Specifies that the object should only be declared, not created or instantiated until needed. Not supported by HTML 5. |
| FORM | form_id | Specifies the ID for forms, that the object may refer to. New in HTML 5. |
| HEIGHT | pixels | Specifies the height of the OBJECT in px. The effect can be done using STYLE, which is recommended in any case. |
| HSPACE | pixels | Specifies whitespace/padding to the object's left and right. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case. |
| NAME | navn | Specifies a name for the OBJECT |
| STANDBY | text | Specifies a text to be shown while uploading the object. Not supported by HTML 5. |
| TYPE | media_type | Specifies the type of embedded object e.g. TYPE="application/vnd.adobe.flash-movie" if it is a Flash file. It does not appear to be mandatory to specify this attribute for the common file types. |
| USEMAP | #mapname | Specifies ID for maps created using the MAP tag, if you have one. Does not work for all browsers. |
| VSPACE | pixels | Specifies whitespace/padding over and under the object. Not supported by HTML 5. The effect can be done using STYLE, which is recommended in any case. |
| WIDTH | pixel | Specifies the width of the OBJECT in px. The effect can be done using STYLE, which is recommended in any case. |