Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a container for an external (non-HTML) application in HTML5
To add a container for an external application in HTML5 we use <embed> tag. It defines or embed a container for an external resource like, web pages, media player, pictures or a plug-in application. Following is the usage of embed tag in HTML −
<embed attributes>
It doesn’t have closing tag. The browsers that support embed tag are google chrome, Internet explorer, Firefox, Apple Safari, Opera. It supports, global and event attributes in HTML. Most of the browsers display the <embed> element with default CSS settings like
embed:focus {
outline: none;
}
Attributes
Now, let us see the attributes that support ‘embed’ tag −
type − The type attribute that is used in <embed> tag defines the MIME type of file , that means it specifies the Internet media type.
<embed type="media_type">
src − The src attribute that used in <embed> tag specifies the URL of external file that is to be embedded.
<embed src="URL">
width − The width attribute used in <embed> tag defines the width of the object.
<embed width="pixels">
height − The height attribute used in <embed> tag defines the height of the object.
<embed height ="pixels">
Example
Following example demonstrates how to add a container for an external (non-HTML) application in HTML5 −
<!DOCTYPE html>
<html>
<head>
<title> Add a container for an external (non-HTML) application in HTML5 </title>
<style>
q {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<br>
<embed src="https://www.tutorialspoint.com/images/logo.png?v2" type="image/jpg">
</body>
</html>
Example
Following is another example to add a container. Here we are setting width and height of the container −
<!DOCTYPE html> <html> <body> <h1>Using embed text, src, height and width attributes</h1> <embed type="image/jpg" src="https://www.tutorialspoint.com/images/english-tutorials_icon.svg" width="150" height="200"> </body> </html>
Example
Following is an example to embed a video in a HML file −
<!DOCTYPE html> <html> <body> <h1> Sample Video embed into HTML File</h1> <embed type="video/webm" src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="400" height="300"> </body> </html>
Example
Following example demonstrates how to embed another HTML file in source file −
<!DOCTYPE html> <html> <body> <h1>The embed element</h1> <embed type="text/html" src="https://www.tutorialspoint.com/index.htm" width="500" height="200"> </body> </html>
Note −: For displaying a picture in a webpage, it is better to use the <img> tag. To display HTML, using <iframe> tag is better. For displaying video or audio, it is better to use the <video> and <audio> tags.
168 Views
