Learning HTML - Day 7
Today is 29th January 2021 and it is my seventh day to learn HTML 🙋
Day 6 - Time 8.00 pm - 9.15 pm
An HTML iframe is used to display a web page within a web page.
Syntax
<iframe src="url" title="description">
Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default
Code - Inserting my website inside an iframe
<html>
Code - Removing the border from the above iframe
Learnings - When the target attribute of a link matches the name of an iframe, the link will open in the iframe.
Snippet - A snippet is a small section of text or source code that can be inserted into the code of a program or Web page. An HTML snippet might be used to insert a formatted table, a Web form, or a block of text. To be learnt later.
<head>
<title>My webpage</title>
</head>
<body>
<h1>Learning how to use iframe</h1>
<iframe src="https://html4dummy.blogspot.com/" height="400px" width="400px" title"My HTML blog"></iframe>
</body>
</html>
Output
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>Learning how to use iframe</h1>
<iframe src="https://html4dummy.blogspot.com/" style="border:none;" height="400px" width="400px" title"My HTML blog"></iframe>
</body>
</html>
Output 
Code -
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>Learning how to use iframe</h1>
<iframe src="file:///E:/Day%207%20iframes.html" style="border:none;" name="link" height="400px" width="400px" title"My HTML blog"></iframe>
<p><a href="https://html4dummy.blogspot.com/" target="link">Test</a></p>
</body>
</html>
The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
To display a picture, it is better to use the <img> tag.
To display HTML, it is better to use the <iframe> tag.
To display video or audio, it is better to use the <video> and <audio> tags.
Code : Used image from web
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>The embed element</h1>
<center>
<embed type="image/jpg" src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="auto" height="auto">
</center>
<left>
<embed type="image/jpg" src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="100px" height="200px">
</left>
</body>
</html>
Learnings, center tag, left tag, width, height if set auto will give the default size of the image. If I do not use only image in embed then the picture does not show.
Getting an image URL - Right click on the image and there will be the option "copy image address"
Snippet - A snippet is a small section of text or source code that can be inserted into the code of a program or Web page. An HTML snippet might be used to insert a formatted table, a Web form, or a block of text. To be learnt later.
Code for using video using embed
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>The embed element</h1>
<center>
<embed type="video/webm" src="C:\Users\User\Downloads\VID-20200831-WA0002.mp4" width="500px" height="500px">
</center>
</body>
</html>
Output - 
An embedded HTML page
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>The embed element</h1>
<center>
<embed type="text/html" src="file:///E:/Day%206%20form.html" width="600px" height="600px">
</center>
</body>
</html>
To find the source, open HTML document in a browser and cop the path.
Output - 
Comments
Post a Comment