Course Name – Web Technology

Lecture 7 – Iframe, Colors

Presented By
Sudipta Sahana
Asst. Prof.
Dept. of CSE
JIS College of Engineering
Sudipta.sahana@jiscollege.ac.in
 Topic of Interest

 HTML Iframe & Syntax

 Iframe - Set Height and Width
 Iframe - Remove the Border
 Iframe - Target for a Link
 HTML Colors
 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 for adding an iframe:

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

The URL points to the location of the

separate 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 –

<iframe src="demo_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:

<iframe src="demo_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="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

 Iframe - Change the Border

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>
 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="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com </a></p>
 HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
In HTML, a color can be specified by using a color name:
 HTML Colors
Background Color - You can set the background color for HTML elements
 HTML Colors
Text Color - You can set the color of text:
 HTML Colors
Color Values - In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX,
and HSL values:
Thank
You