Class 3 Exam  >  Class 3 Notes  >  HTML for Junior Classes  >  HTML Iframes & HTML JavaScript

HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3 PDF Download

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

HTML Iframe Syntax

  • The HTML <iframe> tag specifies an inline frame.
  • An inline frame is used to embed another document within the current HTML document.

Syntax

<iframe src="https://edurev.gumlet.io/rl" title="description"></iframe>

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:

Example

<iframe src="https://edurev.gumlet.io/emo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example

<iframe src="https://edurev.gumlet.io/emo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></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:

Example

<iframe src="https://edurev.gumlet.io/emo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

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

Example

<iframe src="https://edurev.gumlet.io/emo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></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:

Example

<iframe src="https://edurev.gumlet.io/emo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

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

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.
Example

HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3

The HTML <script> Tag

  • The HTML <script> tag is used to define a client-side script (JavaScript).
  • The <script> element either contains script statements, or it points to an external script file through the src attribute.
  • Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
  • To select an HTML element, JavaScript most often uses the document.getElementById() method.
  • This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

A Taste of JavaScript

Here are some examples of what JavaScript can do:

Example

JavaScript can change content:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Example

JavaScript can change styles:

document.getElementById("demo").style.fontSize = "25px";

document.getElementById("demo").style.color = "red";

document.getElementById("demo").style.backgroundColor = "yellow";

Example

JavaScript can change attributes:

document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

Example

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

The document HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3 is a part of the Class 3 Course HTML for Junior Classes.
All you need of Class 3 at this link: Class 3
14 videos|31 docs|24 tests

Top Courses for Class 3

14 videos|31 docs|24 tests
Download as PDF
Explore Courses for Class 3 exam

Top Courses for Class 3

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Extra Questions

,

Objective type Questions

,

mock tests for examination

,

Important questions

,

Sample Paper

,

HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3

,

video lectures

,

Free

,

pdf

,

Exam

,

Summary

,

ppt

,

Semester Notes

,

shortcuts and tricks

,

study material

,

Previous Year Questions with Solutions

,

HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3

,

MCQs

,

Viva Questions

,

past year papers

,

practice quizzes

,

HTML Iframes & HTML JavaScript | HTML for Junior Classes - Class 3

;