HTML INTERMEDIATES PART III

 HTML Iframes

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

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="url" title="description">

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> 

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="demo_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="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe> 

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="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

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

Chapter Summary

The HTML <iframe> tag specifies an inline frame

The src attribute defines the URL of the page to embed

Always include a title attribute (for screen readers)

The height and width attributes specifies the size of the iframe

Use border:none; to remove the border around the iframe 

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

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>

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> 

HTML File Paths

A file path describes the location of a file in a web site's folder structure. 

Absolute File Paths

An absolute file path is the full URL to a file:

Example:

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example:

<img src="/images/picture.jpg" alt="Mountain"> 

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example:

<img src="../images/picture.jpg" alt="Mountain">