HTML Frames
topicTen
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Learning Objectives
• At the end of this chapter the students
should be able to:
– Use frames to divide web page into many
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
independent rectangular sections.
– Manipulate frame to display multimedia
elements.
– Use frames to combine two or more web
pages
[Link]
IMD208 – Introduction to Web Content Management & Design
Introduction
• Frames can divide the screen into separate
windows. Each of these windows can contain
an HTML document.
• A file that specifies how the screen is divided
into frames is called a frameset.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• If you want to make a homepage that uses
frames you should:
• Make an HTML document with the frameset.
• Make the normal HTML documents that should be
loaded into each of these frames.
• When a frameset page is loaded, the browser
automatically loads each of the pages
associated with the frames.
[Link]
IMD208 – Introduction to Web Content Management & Design
Consider this example:
• You are given three web pages, which is
[Link], [Link] and
[Link].
• All the web pages must be display in a single
windows/frameset based on the following
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
diagram.
• The diagram is divided into three slice, which is
menu, main and bottom.
• The size for menu is 120, and bottom is 50
while the size for main is the rest of the screen.
• By using the information given, construct a
complete HTML statement:
[Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
•In order to solve the problem, you must determine how many web pages
will be used.
•Previously the question stated that three web pages are used, so you
must add ANOTHER page, which is the page for the frameset.
•Usually the page for the frameset is the starting page for your website,
thus we usually named it [Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
The frameset code will produce a web page as above figure. You should
notice that the page produce an error message. This error occurred
because we have not yet written the code for other pages, which are
[Link], [Link] and [Link].
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Consider this example:
• Then write another two pages, which is
[Link] and [Link].
• Put all four files together then click
“[Link]” or “[Link]” or any name that
you give to your frameset.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• It’s a good practice to use a standard name and
extension for the web page.
• Avoid using a space in the file names because
there is some web server that doesn’t support
long file extension or space within file name.
• Some web server is also case sensitive. They
can regard “myFile” as different to “MyFile”.
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Default Pages
• You can add default pages to frame
windows with the src setting.
• Default pages are the pages that will be
loaded when the frameset is opened the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
first time.
• Furthermore, we can add names to each
frame window using the name setting
(compulsory).
• This will allow us to make a link in one
frame window, open a page in another
frame window.
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
frameset:
Frames: Border
• To make frame borders invisible you
need to add parameters to the
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Resizable Border
• Let say that you don’t want the frame
windows to be resizable because it
could affect the design and placement
of contents in your web pages.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• In order to prevent that, you should
add parameter “noresize” to the frame
src lines:
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Scrollbars
• Scrollbars is sometimes necessary but
sometimes irritating, thus a good
webmaster must make proper used of
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
the scrollbars.
• Let’s say you want to display a scrollbar
just when it’s necessary, in case if the
HTML document doesn’t fit in the
windows:
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Links Within
• If you have an HTML document with
hyperlink on the text “click here” for
instance, that links to a page called
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
“[Link]” then it appears in the
document as:
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Links Within
• Now if the link was in the menu
window of our example, and we
wanted it to load a page in the main
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
window, the HTML code would be:
[Link]
IMD208 – Introduction to Web Content Management & Design
Frames: Links Within
• We simply added the parameter target=
"main" to the <a href> tag to instruct the
navigation so that it would appear in the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
main window of the frameset.
• Now the link will be opened in the main
frame window instead of the menu frame
window where the link itself is located.
• Four target names are reserved, and will
be interpreted by the browser in this way:
[Link]
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
HTML is not a case sensitive programming language. You can have a target
with a similar name in your frameset but it’s not advisable to do so. Each
frame should have a unique name to identify each click.
Frameset: Example
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Frameset: Example
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Frameset: Example
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Frameset: Example
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Frameset: Example
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Setting the Border Color
• The bordercolor property can be applied
either to an entire set of frames (within
the <frameset> tag) or to individual
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
frames (within the <frame> tag).
• The syntax for this property is:
[Link]
IMD208 – Introduction to Web Content Management & Design
Using the <noframes> Tag
• In most cases you do not need to include the
<body> tags for pages containing frames.
However, if you want your page to be viewed
by browsers that do not support frames, as
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
well as by those that do, you need to use the
<body> tags.
• The difference is that the <body> tags must be
placed within a pair of <noframes> tags.
• The <noframes> tag identifies a section of you
html file that contains code to be read by
frame-blind browsers
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
• If a browser supports frames, it will ignore everything
within the <noframes> tags and concentrate solely on the
code within the <frameset> tags.
• If a browser doesn't support frames receives this code, it
doesn't recognize the <frameset> and <noframes> tags,
so it just ignores them.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• However it does know the <body> tags on the page and
deals only with them.
• In this way, both types of browsers are supported within
a single html file.
• In order to accomplish the <noframes> property, you
must create a non framed version of the same page and
place it between the body tags.
• For practical purposes, when creating frame web pages
you should create both.
[Link]
IMD208 – Introduction to Web Content Management & Design
Creating a Frame Layout
• Frame layout is defined using the
<frameset> tag.
• The <frameset> tag in this design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
replaces the <body> tag in a simple
page design
[Link]
IMD208 – Introduction to Web Content Management & Design
Creating a Frame Layout
• The <frameset> tag has two properties: rows
and cols. you choose only one layout for a
single <frameset> tag, either rows or columns.
• You cannot use both properties at once.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• The syntax for specifying the row or column
layout for the <frameset> tag is:
[Link]
IMD208 – Introduction to Web Content Management & Design
Creating a Frame Layout
• Row and column sizes are specified in
three ways:
– Pixels
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
– percentage of the total size of the
frameset
– Asterisk - which tells the browser to
allocate any unclaimed space in the
frameset to the particular row or column.
[Link]
IMD208 – Introduction to Web Content Management & Design
Creating a Frame Layout
• For example, the tag <frameset rows="160,*">
creates two rows of frames.
• The first row has a height of 160 pixels, and the
height of the second is equal to whatever
space remains in the display area.
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
• You can use all three ways of specifying row or
column size in a single <frameset> tag.
• The tag <frameset cols="160,25%,*"> creates
the series of columns, the first column is 160
pixels wide, the second column is 25% of the
display area, and the third column covers
whatever space is left.
[Link]
IMD208 – Introduction to Web Content Management & Design
Exercise
• Create a folder, put your named and uitm id as the
folder name, then copy the following file from your
last exercise.
– [Link], rename to [Link]
– [Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
– [Link]
– [Link]
– [Link]
2. [Link]
3. [Link]
1. [Link]
Create 3 more html file:
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Write this html code into [Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Write this html code into [Link]
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Menu
Banner
Utama
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
Review Exercise
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
necessary.
Exercise
• Create a complete HTML codes for the
above web pages. Make assumption if
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
[Link]
[Link]
IMD208 – Introduction to Web Content Management & Design
Exercise
• You are given a task to create a website for your faculty. Your
course coordinator instructs you to use frames as the main
page of the website.
• The frame consists of two columns, which the proportion of
the first column is 130 while the second column will take the
MOHAMAD RAHIMI MOHAMAD ROSMAN | [Link]
rest of the screen.
• The second column is divided into three rows with proportion
of the first column is 50, second column is rest of the screen
and the third column is also 50.
• The first column should be regard as the menu part, the first
row consider as the top banner, the middle row as main, and
the bottom row as the bottom banner.
• Create a complete HTML statement and made assumption if
necessary.