HTML5 IFRAMES CHAPTER 15

15th TUTORIAL ON HTML IFRAMES


HTML Iframes

An HTML iframe is used to display a web page within a web page.

 

Iframe Syntax


An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>

The src attribute specifies the URL (web address) of the inline frame page.

 

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:

 

 

 

Example

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Iframes</h2>

<p>You can use the height and width attributes to specify the size of the iframe:</p>

 

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

 

</body>

</html>

OUTPUT

HTML Iframes

You can use the height and width attributes to specify the size of the iframe:

This page is displayed in an iframe




Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

<!DOCTYPE html>

<html>

<body>

 

<h2>Remove the Iframe Border</h2>

<p>To remove the default border of the iframe, use CSS:</p>

 

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

 

</body>

</html>

OUTPUT

Remove the Iframe Border

To remove the default border of the iframe, use CSS:

This page is displayed in an iframe

With CSS, you can also change the size, style and color of the iframe's border:

<!DOCTYPE html>

<html>

<body>

 

<h2>Custom Iframe Border</h2>

<p>With CSS, you can also change the size, style and color of the iframe's border:</p>

 

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

 

</body>

</html>

OUTPUT

Custom Iframe Border

With CSS, you can also change the size, style and color of the iframe's border:

This page is displayed in an iframe


Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

<!DOCTYPE html>

<html>

<body>

<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>

</html>

OUTPUT

Iframe - Target for a Link

This page is displayed in an iframe

 

 

UNKNOWN PROGRAMMER

When the target of a link matches the name of an iframe, the link will open in the iframe



Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more