Mastering the Internet and HTML

1
Mastering the Internet and HTML

• Chapter 15
• Frames and Frame Tags

2
Outline

• Goal
• Objectives
• Introduction
• Frame layout and design
• Frame sets and nesting

• Frame tags
• Target frames and windows
• Tutorials
• FAQs
• Summary
• Exercises/Homework

3
Goal

• This chapter covers frames, their use in
• Web pages, and their tags. It also covers the
• frame layout, structure, design, nesting, and
• target frames and windows

4
Objectives

• Introduction
• Frame layout and design
• Frame sets and nesting
• Frame tags
• Target frames and windows

5
Introduction

• Some Web pages are left-side heavy i.e. most of
  the page content is left justified. Frames solve
  this problem
• Frames break a browser window into sub-windows,
  each with its own Web page
• Frames help Web authors in Web page design/layout
  and navigation
• Web page navigation can be enhanced using target
  frames, where the user navigates in one frame and
  the navigation results are displayed in the
  target frame

6
Frame layout and design

• Each frame set has a generic layout (figure 15.1)
  consisting of multiple frames
• Each frame is a rectangle that has a width and
  height, a location on the screen within the
  browser window, and an HTML file associated with
  it
• The layout and design of a frame set makes it
  unique
• Here are some useful design tips
• Keep the frame set simple
• Keep the frames short
• Keep the frames organized
• Surf the Web to learn more
• (Contd)

7
Figure 15.1 Frame layout
8
Frames sets and nesting

• The width and height of a frame in a frame set is
  specified by the numbers of columns and rows
  respectively. These numbers could be pixels,
  ratios, or a percentage of the browser window
• The location of a frame in a frame set is
  measured with respect to the top left corner of
  the browser window (figure 15.2)
• A simple frame set divides a browser window
  horizontally or vertically only (figure 15.3)
• A nested frame set divides a browser window both
  horizontally and vertically (figure 15.4)
  (Contd)

9
Figure 15.2 Coordinate system of a frame set
(contd)
10
(contd)
Figure 15.3 Simple frame sets
11
Figure 15.4 Nested frame sets
12
Frame tags

• HTML provides tags to create frame sets, frames,
  and target frames
• The frame tags are ltFRAMESETgt, ltFRAMEgt, ltIFRAMEgt,
  and ltNOFRAMEgt
• The ltFRAMESETgt tag acts as the container tag for
  all the others
• The attributes of the ltFRAMESETgt tag are ROWS and
  COLS
• The attributes of the ltFRAMEgt tag are NAME, SRC,
  NORESIZE, SCROLLING, FRAMEBORDER, MARGINWIDTH,
  MARGINHEIGHT, and LONGDESC (Contd)

13
Frame tags

• Example 15.1 Use of frames (figures 15.5 and
  15.6)
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with a frame gridlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS "5, 2" COLS "50, "gt
• ltFRAME SRC "" NAME "myFrame1" FRAMEBORDER
  0gt
• ltFRAME SRC "" NAME "myFrame2"gt
• ltFRAME SRC "" SCROLLING "no"gt
• ltFRAME SRC "" NORESIZE MARGINWIDTH 10
  MARGINHEIGHT 10gt
• lt/FRAMESETgt
• lt/HTMLgt (Contd)

14
Figure 15.6 Rendering a frame grid in Netscape
Figure 15.5 Rendering a frame grid in MS IE
(Contd)
15
Frame tags

• Example 15.2 Use of nested frames
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with nested frameslt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS ", "gt
• ltFRAMESET ROWS ", "gt
• ltFRAME SRC "myFrame1.html"gt
• ltFRAME SRC "myFrame2.html"gt
• lt/FRAMESETgt
• ltFRAME SRC "myFrame3.html"gt
• lt/FRAMESETgt
• lt/HTMLgt
• (Contd)

16
Frame tags

• ltHTMLgtltHEADgt
• ltTITLEgtA Web page for frame 1lt/TITLEgtlt/HEADgtltBODYgt
  
• ltFONT COLOR "blue"gtltH2gtHello from frame
  1lt/H2gtlt/FONTgt
• lt/BODYgtlt/HTMLgt
• ltHTMLgtltHEADgtltTITLEgtA Web page for frame 2lt/TITLEgt
• lt/HEADgtltBODYgt
• ltFONT COLOR "red"gtltH2gtHello from frame
  2lt/H2gtlt/FONTgt
• lt/BODYgtlt/HTMLgt
• ltHTMLgtltHEADgt
• ltTITLEgtA Web page for frame 3lt/TITLEgtlt/HEADgtltBODYgt
  
• ltFONT COLOR "green"gtltH2gtHello from frame
  3lt/H2gtlt/FONTgt
• lt/BODYgtlt/HTMLgt (Contd)

17
Frame tags

• Example 15.3 Use of nested frames
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with nested frameslt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS ", "gt
• ltFRAME SRC "myFrame1.html"
• MARGINWIDTH 50
• MARGINHEIGHT 75gt
• ltFRAMESET ROWS ", "gt
• ltFRAME SRC "myFrame2.html"gt
• ltFRAME SRC "myFrame3.html"gt
• lt/FRAMESETgt
• lt/FRAMESETgtlt/HTMLgt (Contd)

18
Frame tags

• Example 15.4 Use of inline frames (code shortened
  from the top) (figures 15.9 and 15.10)
• ltFONT COLOR "blue"gtltH2 ALIGN "center"gtA Web
  page using inline frameslt/H2gtlt/FONTgt
• ltIFRAME SRC "statement.html" WIDTH 350
  HEIGHT 90gt
• This Web page uses the IFRAME tag.ltBRgt
• This tag is only supported by MS IE.ltBRgt
• Browsers that are not IFRAME compatible ignores
  the tag.ltBRgt
• Instead, they render any tags and text enclosed
  by the IFRAME tag as the case with this browser.
• lt/IFRAMEgtltPgtThis Web page uses inline frames.ltBRgt
• Text flows around these frames.ltBRgt
• ltA HREF "http//www.neu.edu"gtCheck the latest
  programs at NUlt/Agtlt/BODYgtlt/HTMLgt (Contd)

19
Figure 15.10 Rendering the ltIFRAMEgt tag in
Netscape
Figure 15.9 Rendering the ltIFRAMEgt tag in MS IE
20
Target frames and windows

• Target frames and windows makes navigating the
  Web easy. They receive contents from other
  (source) frames and windows (figure 15.11)
• The TARGET attribute can be used to open a new
  browser window e.g.
• ltA HREF http//www.neu.edu TARGET
  _topgtCheck our course offeringslt/Agt
• A target frame is assigned a name at its creation
  time using the NAME attribute of the ltFRAMEgt tag.
  This name is used later in the TARGET attribute
  (Contd)

21
Figure 15.11 Relationship between source and
target frames
(Contd)
22
Target frames and windows

• Example 15.5 Use of target frames (figures 15.12
  and 15.13)
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with a target framelt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS "160, "gt
• ltFRAME SRC "Example15.5TableOfContents.html"gt
• ltFRAME SRC "initialContents.html" NAME
  "myTarget"gt
• lt/FRAMESETgt
• lt/HTMLgt (Contd)

23
Target frames and windows

• ltHTMLgtltHEADgt
• ltTITLEgtContents of the TOC framelt/TITLEgt
• lt/HEADgtltBODYgt
• ltA HREF "http//www.neu.edu" TARGET "myTarget"
  TITLE "NU Web page"gtNU propgramslt/AgtltBRgt
• ltA HREF "example15.2.html" TARGET "myTarget"
  TITLE"Another frame set"gtAnother frame
  setlt/AgtltBRgt
• ltA HREF "example15.3.html" TARGET "myTarget"
  TITLE "More frame sets"gtMore frame setslt/AgtltBRgt
• ltA HREF "http//www.prenhall.com" TARGET
  "myTarget" TITLE "Prentice Hall Web
  page"gtPrentice Hall bookslt/Agtlt/BODYgtlt/HTMLgt
  (Contd)

24
Figure 15.12 Using target frames
Figure 15.13 Target frame used
(Contd)
25
Target frames and windows

• Example 15.6 Use of the ltBASEgt tag
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with a target framelt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS "160, "gt
• ltFRAME SRC "Example15.6TableOfContents.html"gt
• ltFRAME SRC "initialContents.html" NAME
  "myTarget"gt
• lt/FRAMESETgt
• lt/HTMLgt
• (Contd)

26
Target frames and windows

• ltHTMLgtltHEADgt
• ltTITLEgtContents of the TOC framelt/TITLEgt
• ltBASE TARGET "myTarget"gt
• lt/HEADgtltBODYgt
• ltA HREF "http//www.neu.edu" TITLE "NU Web
  page"gtNU propgramslt/AgtltBRgt
• ltA HREF "example15.2.html" TITLE "Another
  rame set"gtAnother frame setlt/AgtltBRgt
• ltA HREF "example15.3.html" TITLE "More frame
  sets"gtMore frame setslt/AgtltBRgt
• ltA HREF "http//www.prenhall.com" TITLE
  "Prentice Hall Web page"gtPrentice Hall
  bookslt/Agtlt/BODYgtlt/HTMLgt

27
Tutorials

• Tutorial 15.6.1 Using ordered lists in a TOC
  frame
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with course descriptionslt/TITLEgt
  
• lt/HEADgt
• ltFRAMESET
• COLS "165, "gt
• ltFRAME SRC "tableOfContents.html"gt
• ltFRAME SRC "initialContents.html
• NAME "myTarget"gt
• lt/FRAMESETgt
• lt/HTMLgt (Contd)

28
Tutorials

• ltHTMLgtltHEADgtltTITLEgtContents of the TOC
  framelt/TITLEgt
• lt/HEADgtltBODYgt
• ltFONT COLOR "red"gtltCENTERgtList of
  courseslt/CENTERgt lt/FONTgt
• Choose a course for a full description.
• ltOLgt
• ltLIgtltA HREF "clientServerCourse.html" TARGET
  "myTarget" TITLE "client/server"gtClient/serverlt
  /Agt
• ltLIgtltA HREF "htmlCourse.html" TARGET
  "myTarget" TITLE "HTML"gtBasic HTMLlt/Agt
• ltLIgtltA HREF "xmlCourse.html" TARGET "myTarget"
  TITLE "XML"gtBasic XMLlt/Agt
• ltLIgtltA HREF "javaCourse.html" TARGET
  "myTarget" TITLE "Java"gtJavalt/Agt
• lt/OLgt lt/BODYgtlt/HTMLgt (Contd)

29
Tutorials

• Tutorial 15.6.2 Using image maps with frames
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with an image maplt/TITLEgt
• lt/HEADgt
• ltFRAMESET
• COLS "165, "gt
• ltFRAME SRC"imageMap.html"gt
• ltFRAME SRC "
• NAME "display"gt
• lt/FRAMESETgt
• lt/HTMLgt (Contd)

30
Tutorials

• ltHTMLgtltHEADgtltTITLEgtA Web page with a client-side
  vertical image maplt/TITLEgtlt/HEADgtltBODYgt
• ltH2gtltBgtltFONT COLOR "red"gtSelect a
  shapelt/FONTgtlt/CENTERgtlt/Bgtlt/H2gt
• ltIMG SRC "verticalMapImage.gif" ALT "My
  vertical image map" USEMAP "myVerticalMap"gt
• ltFONT COLOR "black"gt
• ltMAP NAME "myVerticalMap"gtlt/FONTgt
• ltAREA SHAPE "rect" COORDS "3, 10 95, 75" ALT
  "My rect spot" HREF "map/rectSpot.html"
  TARGET "display"gt
• ltAREA SHAPE "circle" COORDS "50, 150 40" ALT
  "My circle spot" HREF "map/circleSpot.html"
  TARGET "display"gt
• ltAREA SHAPE "poly" COORDS "10, 285 90, 285
  50, 225" ALT "My poly spot" HREF"map/polySpot.h
  tml"TARGET"display"gt
• lt/MAPgtlt/BODYgtlt/HTMLgt (Contd)

31
Tutorials

• Tutorial 15.6.3 Using forms with frames
• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with formslt/TITLEgt
• lt/HEADgt
• ltFRAMESET
• COLS "185, "gt
• ltFRAME SRC "forms.html"gt
• ltFRAME SRC "
• NAME "display"gt
• lt/FRAMESETgt
• lt/HTMLgt (Contd)

32
Tutorials

• ltHTMLgtltHEADgt
• ltTITLEgtContents of the TOC framelt/TITLEgt
• ltBASE TARGET "displaygt
• lt/HEADgtltBODYgt
• ltFONT COLOR "red"gtltCENTERgtList of
  formslt/CENTERgtlt/FONTgt
• Choose a form that you would like to fill.
• ltOLgt
• ltLIgtltA HREF "ecommerceForm.html" TITLE
  "E-commerce"gt E-commercelt/Agt
• ltLIgtltA HREF "guestBookForm.html" TITLE "Guest
  book"gt Guest booklt/Agt
• ltLIgtltA HREF "customerSurveyForm.html" TITLE
  "Customer survey"gtCustomer surveylt/Agt
• lt/OLgtlt/BODYgtlt/HTMLgt

33
FAQs

• Q What does the following frameset definition
  mean assuming a browser window that is 1000
  pixels wide ltFRAMESET COLS 30, 400, 2, gt?
• A The first frame is allotted 300 pixels. The
  width of the second frame is already specified to
  be exactly 400 pixels. That leaves 300 pixels for
  the remaining two frames. The width of the third
  frame is twice that of the last frame. Thus, the
  third frame becomes 200 pixels wide, and the last
  frame receives 100 pixels for its width.
  (Contd)

34
FAQs

• Q Why does my browser not display all the
  frames I expect, although the code of the frame
  set is correct?
• A This is an issue of space allocation that
  depends on the size of the currently displayed
  browser window. Let us assume that the size of
  the window is 300 pixels wide by 200 pixels high.
  If you request two rows of frames, and the first
  is 400 pixels high, you will not see the second
  row in this window size. If you enlarge the
  browser window to fill the entire screen, you
  should see all the frames, unless you are using
  very large sizes. It is usually recommended to
  use the wild card () to describe sizes of
  frames, to give the browser full freedom at the
  display time.

35
Summary

• Many Web pages use a two-frame layout, where one
  frame serves as a TOC or a navigation menu
• Frames can divide a browser window horizontally,
  vertically or both to create frame sets
• Nested sets are created left-to-right,
  top-to-bottom in a browser window
• There is no HTML limit on the depth of frame
  nesting
• Frame tags are ltFRAMESETgt, ltFRAMEgt, ltIFRAMEgt, and
  ltNOFRAMEgt
• The attributes of the ltFRAMESETgt tag are ROWS and
  COLS
• The attributes of the ltFRAMEgt tag are NAME, SRC,
  NORESIZE, SCROLLING, FRAMEBORDER, MARGINWIDTH,
  MARGINHEIGHT, and LONGDESC
• Target frames receive content from other frames.
  The TARGET attribute can be used with the ltAgt
  tag, ltBASEgt tag, etc.

36
Exercises

• Problem 15.3. Write the HTML code to generate a
  three-frames frame set where the bottom frame
  uses the full width of the browser window
• Solution strategy Follow example 15.2. Use a
  text editor to write and debug the HTML code.
  Use a browser to display the results
• (Contd)

37

• ltHTMLgt
• ltHEADgt
• ltTITLEgtA Web page with nested frameslt/TITLEgt
• lt/HEADgt
• ltFRAMESET
• ROWS ", "gt
• ltFRAMESET
• COLS ", "gt
• ltFRAME SRC "myFrame1.html"gt
• ltFRAME SRC "myFrame2.html"gt
• lt/FRAMESETgt
• ltFRAME SRC "myFrame3.html"gt
• lt/FRAMESETgtlt/HTMLgt

38
Problems

• Problem 15.10. Create a Web page that uses frames
  and uses unordered lists in its TOC frame.
• Solution strategy Use a text editor to write
  the HTML code. Use a browser to test it
• (Contd)

39

• ltHTMLgt
• ltHEADgt
• ltTITLEgtDepressionlt/TITLEgt
• lt/HEADgt
• ltFRAMESET
• COLS "20, "gt
• ltFRAME SRC "list.html"gt
• ltFRAME SRC "welcome.html
• NAME "trgt"gt
• lt/FRAMESETgt
• lt/HTMLgt
• (Contd)

40

• ltHTMLgt
• ltHEADgt
• ltTITLEgtDescriptionslt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltULgt
• ltLIgtltA TARGET "trgt" HREF
  "welcome.html"gt Welcomelt/Agt
• ltLIgtltA TARGET "trgt" HREF
  "causes.html"gtCauseslt/Agt
• ltLIgtltA TARGET "trgt" HREF
  "symptoms.html"gt Symptomslt/Agt
• ltLIgtltA TARGET "trgt" HREF
  "treatments.html"gt Treatmentslt/Agt
• lt/ULgt
• lt/BODYgt
• lt/HTMLgt