Full stack Web Development

HTML Plug-ins

What are Plug-ins?

In computing, a plug-in is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.
The common examples are the plug-ins used in web browsers to add new features such as search-engines, virus scanners, or the ability to use a new file type such as a new video format. (src: wikipedia)

What are HTML plug-ins?

HTML plug-ins are also called as Helper applications. Plug-ins are computer programs that helps extending the standard functionality of a web browser.
The main purpose of a plug-in is to extend the functionality of the HTML browser. Plug-ins can be added to HTML pages with the <object> tag or the <embed> tag.
The main Purpose of Plug-ins are:

  • display maps
  • scan for viruses
  • verify your bank id, etc.

How to add a Plugin to a HTML page with <object> tag?

The HTML Embedded Object Element (<object>) represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
The <object> element is supported by all browsers.

Attributes of <object> tag

Let us discuss the attributes of <object> tag:

  • data

The address of the resource as a valid URL. At least one of data and type must be defined.

  • form

The form element, if any, that the object element is associated with (its form owner). The value of the attribute must be an ID of a <form> element in the same document.

  • height 

The height of the displayed resource, in CSS pixels.

  • name

The name of valid browsing context.

  • type

The content type of the resource specified by data. At least one of data and type must be defined.

  • typemustmatch

This Boolean attribute indicates if the type and the actual content type resource must match in order of this one to be used.

  • usemap

A hash-name reference to a <map> element; that is a ‘#’ followed by the value of a name of a map element.

  • width

The width of the display resource, in CSS pixels.
Example:
 

<!DOCTYPE html>
<html>
    <body>
       <object width="300" height="50" data="abc.swf"></object>
    </body>
</html>

The <object> element can also be used to include HTML in HTML as shown below:
<object width=”100%” height=”500px” data=”sample_page.html”></object>
The <object> element can also be used to include images as shown below:
<object data=”image.jpeg”></object>

The <embed> Element

The <embed> element defines an embedded object within an HTML document.
All the web browsers support <embed> element and it has been a part of HTML specification before HTML5. This element will not be validated in HTML4 page.

Attributes of <embed> tag

  • height
    The displayed height of the resource, in CSS pixels.
  • src
    The URL of the resource being embedded.
  • type
    The MIME type to use to select the plug-in to instantiate.
  • width
    The displayed width of the resource, in CSS pixels.

Example:

<!DOCTYPE html>
<html>
    <body>
       <embed width="300" height="50" src="abc.swf">
    </body>
</html>

The <embed> element can also be used to include HTML in HTML as shown below:
<embed width=”100%” height=”500px” src=”sample_page.html”>
The <embed> element can also be used to include images as shown below:
<embed src=”image.jpeg”>

Conclusion:

Plug-ins can be easily included into your HTML webpage by the above methods. I hope you have understood the concept of plug-ins.
If you have any query do write us at [email protected]acadgild.comNodeJS course details

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close