|
|
The Definition and UsageThe The external resource can be a web page, a picture, a media player, or a plug-in application. To embed a picture, it is better to use the To embed HTML, it is better to use the To embed video or audio, it is better to use the Browser Support
Plug-insThe Plug-ins are computer programs that extend the standard functionality of the browser. Plug-ins have been used for many different purposes:
Warning ! Most browsers no longer support Java Applets and Plug-ins. ActiveX controls are no longer supported in any browser. The support for Shockwave Flash has also been turned off in modern browsers. Attributes
Global AttributesThe Event AttributesThe HTML DOM reference: Object Object |
How to create HTML <object> Tag
<object type="application/pdf" data="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" width="250" height="200"></object>
Output should be:
How to create An embedded image on HTML <object> Tag
Add an image into HTML <object> Tag
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="https://horje.com/avatar.png" width="300" height="200"></object>
</body>
</html>
Output should be:
How to create An embedded HTML page on HTML <object> Tag
See the Example
index.html
Example:
HTML
<object data="https://horje.com/" width="500" height="200"></object>
Output should be:
How to create An embedded video on HTML <object> Tag
See the Example.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<object data="https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4" width="400" height="300"></object>
</body>
</html>
Output should be:
How to set Default CSS Settings on HTML <object> Tag
Most browsers will display the <object> element with the following default values.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<style>
object:focus {
outline: none;
}
</style>
<body>
<object data="https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4" width="400" height="300"></object>
</body>
</html>
Output should be:
What is HTML <object> data Attribute
HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.
Definition and Usage
The data attribute specifies the URL of the resource to be used by the object.
Browser Support
Syntax
<object data="URL">
Attribute Values
| Value | Description |
|---|---|
| URL | Specifies the URL of the resource to be used by the object.
Possible values:
|
How to create HTML <object> data Attribute
How to use the <object> element to embed an image.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="https://horje.com/avatar.png" width="300" height="200"></object>
</body>
</html>
Output should be:
What is HTML <object> form Attribute
The HTML <object> form Attribute is used to specify the one or more forms that the <object> Element.
Definition and Usage
The form attribute specifies the form the object belongs to.
The value of this attribute must be equal to the id attribute of a <form> element in the same document.
Browser Support
Syntax
<object form="form_id">
Attribute Values
| Value | Description |
|---|---|
| form_id | Specifies the <form> element the <object> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document. |
How to create HTML <object> form Attribute
An <object> element located outside a form (but still a part of the form).
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object form attribute</h1>
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<object data="https://horje.com/avatar.png" width="300" height="200"></object>
<p><b>Note:</b> The form attribute is not supported in any of the major browsers.</p>
</body>
</html>
Output should be:
What is HTML <object> height Attribute
The height attribute on an <object> tag sets the height of the object element.
The height is specified in pixels - without the ‘px‘ unit.
Definition and Usage
The height attribute specifies the height of the object, in pixels.
Browser Support
Syntax
<object height="pixels">
Attribute Values
| Value | Description |
|---|---|
| pixels | The height of the object, in pixels (i.e. height="100") |
How to add HTML <object> height Attribute
An embedded image with a height of 300 pixels and a width of 200 pixels:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="https://horje.com/avatar.png" width="300" height="200"></object>
</body>
</html>
Output should be:
What is HTML <object> name Attribute
The HTML <object> name Attribute is used to specify the name of the embedded file. This attribute is also used as a reference for an object element in the Javascript.
Definition and Usage
The name attribute specifies the name of an <object> element.
The name attribute is used for referencing an <object> element in JavaScript (an alternative, is to reference it by using its id attribute).
Browser Support
Syntax
<object name="name">
Attribute Values
| Value | Description |
|---|---|
| name | The name of the <object> element |
How to add HTML <object> name Attribute
An <object> element with a name attribute.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object name attribute</h1>
<object data="https://horje.com/avatar.png" name="obj1" width="300" height="200">
</object>
</body>
</html>
Output should be:
What is HTML <object> type Attribute
The type attribute on an <object> tag specifies the media type of the embedded resource.
A media type indicates the format and nature of the resource.
Definition and Usage
The type attribute specifies the Internet media type of the object.
Browser Support
Syntax
<object type="media_type">
Attribute Values
| Value | Description |
|---|---|
| media_type | The Internet media type of the embedded content. Look at IANA Media Types for a complete list of standard media types. |
How to add HTML <object> type Attribute
An <object> element with a specified media type.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object type attribute</h1>
<object data="https://horje.com/avatar.png" type="image/jpg" width="500" height="300">
</object>
</body>
</html>
Output should be:
What is <object> typemustmatch Attribute
This attribute is used in order to to make it safer for authors to embed untrusted resources where they expect a certain content type. The attribute specifies that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the aforementioned resource match.
The typemustmatch attribute must only be used when both the type and data is also being used.
The typemustmatch is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either typemustmatch or typemustmatch="typemustmatch")..
| typemustmatch | true/false | Specifies whether the type attribute and the actual content of the resource must match to be displayed |
How to add <object> typemustmatch Attribute
See the example.
index.html
Example:
HTML
<object data="https://cdn.bitdegree.org/learn/giphy%20(1).gif?raw=true" type="image/gif" width="550" height="450" typemustmatch></object>
Output should be:
.webp_(gif_image_300_×_300_pixels).png){kind=tracking}
What is HTML <object> usemap Attribute
The useMap property on the HTMLImageElement interface reflects the value of the HTML usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
Definition and Usage
The usemap attribute specifies the name of an image map to use with the object.
An image map is an image with clickable areas.
The usemap attribute is associated with a <map> element's name attribute, and creates a relationship between the object and the map.
Browser Support
Syntax
<object usemap="#mapname">
Attribute Values
| Value | Description |
|---|---|
| #mapname | A hash character ("#") plus the name of the map element to use |
How to add HTML <object> usemap Attribute
An <object> element using an image map:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object usemap attribute</h1>
<object data="https://horje.com/uploads/demo/2024-09-29-14-25-40-screenshot_2024-09-29_at_20-23-53_w3schools_online_html_editor.png" width="145" height="126" usemap="#planetmap"></object>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p><b>Note:</b> The usemap attribute of the object element is not supported in Chrome,
Edge, Safari, and Opera.</p>
</body>
</html>
Output should be:
What is HTML <object> width Attribute
The HTML <object> width attribute is used to specify the horizontal dimension of the embedded object, defining the width of the displayed content within the webpage.
Definition and Usage
The width attribute specifies the width of the object, in pixels.
Browser Support
Syntax
<object width="pixels">
Attribute Values
| Value | Description |
|---|---|
| pixels | The width of the object, in pixels (i.e. width="100") |
How to add HTML <object> width Attribute
An embedded image with a height of 300 pixels and a width of 200 pixels.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="https://horje.com/avatar.png" width="300" height="200"></object>
</body>
</html>
Output should be:
| html object |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |
Views: | 503 |
Reffered: https://www.w3schools.com/tags/tag_object.asp