HTML - FRAMES
Basic Web
Structures
WHAT ARE FRAMES
Frames are most typically used to have a menu in one frame,
and content in another frame.
When someone clicks a link on the menu, that link is then
opened in the content page.
Here is a classic example of a basic "index" frameset with a
menu on the left and content on the right
HTML CODE
<html>
<body>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</body>
</html>
FRAME SET
frameset - The parent tag that defines the characteristics of
this frames page. Individual frames are defined inside it.
frameset cols="#%, *" - The width that each frame will have.
In the above example, we chose the menu (the 1st column) to
be 30% of the total page and used a "*", which means the
content (the 2nd column) will use the remaining width for
itself (70%).
FRAME SET
frame src="" - The URL of the web page to load into the frame.
A good rule of thumb is to call the page which contains this
frame information "index.html", as that is typically a site's
main page.
ADDING A BANNER OR TITLE FRAME
<html>
<body>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</body>
</html>
FRAMEBORDER AND FRAMESPACING
frameborder="#" - Determines whether there will be a border.
border="#"- Modifies the border width.
framespacing="#" -Modifies the border width, used by Internet
Explorer.
GUESS THE OUTPUT
<frameset border="0" frameborder="0"
framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0"
framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
FRAME NAME AND FRAME TARGET
<html>
<body>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</body>
</html>
FRAME NAME AND FRAME TARGET
<html>
<head>
<base target="content">
</head>
<body>
<!-- Content Goes Here -->
</body>
</html>
NORESIZE AND SCROLLING
noresize - Determines whether the frames can be resized by
the visitor or not. (values "true" and "false")
scrolling - Determines whether scrolling is allowed in the
frame or not (values "true" and "false")
We set the scrolling for our content frame to "yes" to ensure
our visitors will be able to scroll if the content goes off the
screen.
We also set the scrolling for our title banner to no, because it
does not make sense to have a scrollbar appear in the title
frame.
QUICK FRAMING RECAP
Attribute
name
Description
Assigns a name to a frame. This is useful for loading contents into one frame from
another.
longdesc
A long description - this can elaborate on a shorter description specified with the title
attribute.
src
Location of the frame contents (for example, the HTML page to be loaded into the frame).
noresize
Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame
or not).
scrolling
Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible
values:auto
yes
no
frameborder
Whether the frame should have a border or not. Possible values:1 (border)
0 (no border)
marginwidth
Specifies the margin, in pixels, between the frame's contents and it's left and right
margins.
marginheight
Specifies the margin, in pixels, between the frame's contents and it's top and bottom
margins.
QUICK RECAP
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the
site.</body>
</noframes>
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
HTML ENTITIES
Cent
English Pound
¢
£
Currency
Yen
¤
¥
Registered Trademark
®
Degree(s)
°
Plus or Minus
±
Fraction
¼
Fraction
½
Fraction
¾
