CS120 The Information Era Chapter 4

1
CS120 The Information EraChapter 4 More HTML
Specifics

• TOPICS Frames

2
Frames

• When you build a large web site, you need to
  start thinking about how your readers are going
  to navigate your web site.
• You can make the navigation of your site by using
  HTML frames.
• A frame allows you to partition a web page into
  several sections so that you can display a
  different file in each section.

3
Frames Example

• Side.html

Main.html
4
Frames Example

• Create a file called frameex.html
• lthtmlgt
• ltheadgt
• lttitlegt
• Frames Example
• lt/titlegt
• lt/headgt
• ltframeset cols"20, 80"gt
• ltframe src"side.html" scrolling"no"
  name"sideframe"gt
• ltframe src"main.html" name"mainframe"gt
• lt/framesetgt
• lt/htmlgt

5
Frames Example

• Create a file called side.html and place it in
  the same directory as frameex.html
• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody bgcolor"red"gt
• Side Column.
• lt/bodygt
• lt/htmlgt

6
Frames Example

• Create a file called main.html and place it in
  the same directory as frameex.html
• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody bgcolor"blue"gt
• Main Frame!
• lt/bodygt
• lt/htmlgt

7
Frames Example

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody bgcolor"red"gt
• lta href"http//zeus.cs.pacificu.edu/ryand/"
  target"mainframe"gtDoug Ryanlt/agt
• lt/bodygt
• lt/htmlgt

8
Frames Problem

• You should still have the files htmlinfo.html,
  htmltags.html and htmlterms.html. Create two
  frames such that the screen is split up into two
  rows. The top row is to contain two centered
  links HTML Terms and HTML Tags. Clicking on HTML
  Terms should display the the terms in the second
  row and clicking on HTML Tags will do the same
  for the tags file. Initially the first row is to
  have the centered links with a background color
  of white with black text. The second row is
  initially black until one of the links is
  selected and then white text is displayed on the
  black background.