Scribd
Upload
28 views3 pages

HTML Frames

Uploaded by

wycliffe.swa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views3 pages

HTML Frames

Uploaded by

wycliffe.swa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

# HTML Frames

Frames in HTML allow you to divide the browser window into multiple sections, where each section
can load a different HTML document independently. This feature was used in older web designs to
display multiple web pages at once, but its largely deprecated today in favor of more flexible CSS and
JavaScript-based layouts (like `<iframe>` and responsive designs).

Key Elements in HTML Frames:

1. `<frameset>`: This replaces the `<body>` tag when youre creating a page with frames. It is used to
define how the window is divided (rows and columns).

2. `<frame>`: This element defines what each frame should display. You specify the source (`src`) of
the HTML document for each frame.

3. `<noframes>`: This tag provides alternative content for browsers that do not support frames.

# Basic Example of HTML Frames

```html

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames Example</title>

</head>

<frameset cols="30%,70%">

<frame src="menu.html">

<frame src="content.html">

</frameset>

<noframes>

Your browser does not support frames.

</noframes>

</html>

Explanation:

- `<frameset cols="30%, 70%">`: Divides the window into two vertical columns. The first column
takes up 30% of the window width, and the second column takes up 70%.

- `<frame src="menu.html">`: Loads the content of `menu.html` in the first frame (the left column).

- `<frame src="content.html">`: Loads the content of `content.html` in the second frame (the right
column).
# Example with Rows

```html

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames Example</title>

</head>

<frameset rows="50%,50%">

<frame src="header.html">

<frame src="footer.html">

</frameset>

<noframes>

Your browser does not support frames.

</noframes>

</html>

Explanation:

- `<frameset rows="50%,50%">`: Divides the window into two horizontal rows, each occupying 50%
of the window height.

- `<frame src="header.html">`: Loads the `header.html` in the top row.

- `<frame src="footer.html">`: Loads the `footer.html` in the bottom row.

# Nested Frames Example

Frames can also be nested within other framesets.

`html

<!DOCTYPE html>

<html>

<head>

<title>HTML Nested Frames Example</title>

</head>

<frameset rows="20%,80%">

<frame src="header.html">

<frameset cols="30%,70%">
<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>

<noframes>

Your browser does not support frames.

</noframes>

</html>

```

Explanation:

- The top 20% of the window displays `header.html`.

- The bottom 80% is split into two columns, where `menu.html` is displayed in the left column (30%),
and `content.html` in the right column (70%).

# Important Notes:

- Frames have been deprecated in HTML5, so modern web development discourages their use.
`<iframe>` and other CSS-based layouts are more flexible and provide better user experience.

- Many accessibility concerns arise with frames, and they often do not work well on mobile devices.

You might also like