New Perspectives on Creating Web Pages with HTML

1
New Perspectives on Creating Web Pages with HTML

• Tutorials 4 and 5 Designing a Web Page
• with Tables and Frames

2
Table Tutorial Objectives

• Create a text table
• Create a table using the lttablegt, lttrgt, and lttdgt
  tags
• Create table headers and captions
• Control the appearance of a table and table text
• Create table cells that span several rows or
  columns

3
Tutorial Objectives Continued

• Use nested tables to enhance page design
• Learn about Internet Explorer extensions for use
  with tables

4
Tables and Frames

• Relatively advanced HTML programming due to the
  many interrelated attributes
• Frames can contain any other HTML elements,
  including tables
• Frames can be nested within other frames
• The interactions can be confusing to the
  programmer and the user!
• easy to program, but the behavior of the page may
  be difficult to visualize
• Design first, program second

5
A Text Table
This figure shows a text table.
6
A Graphical Table
This figure shows a graphical table
7
Using the ltpregt Tag for simple text tables

• The ltpregt tag creates preformatted text and
  retains any spaces or line breaks indicated in
  the HTML file.
• preformatted text is text formatted in ways that
  HTML would otherwise not recognize.
• The ltpregt tag displays text using a fixed-width
  font.
• By using the ltpregt tag, a text table can be
  displayed by all browsers, and the columns will
  retain their alignment no matter what font the
  browser is using.
• Most of the time, the lttablegt tag will be used to
  insert tables into a Web page.

8
Text Table Created with the ltpregt Tag (race1.htm)
This figure shows the complete preformatted text
as it appears in the file.
9
Text Table as it Appearsin the Browser
This figure shows the page as it appears in the
browser.
10
Defining a Table Structure

• The first step to creating a table is to specify
  the table structure
• the number of rows and columns
• the location of column headings
• the placement of a table caption
• Once the table structure is in place, you can
  start entering data into the table.

11
Using the lttablegt, lttrgt, and lttdgt Tags

• Graphical tables are enclosed within a two-sided
  lttablegt tag that identifies the start and ending
  of the table structure.
• Each row of the table is indicated using a
  two-sided lttrgt (for table row).
• Within each table row, a two-sided lttdgt (for
  table data) tag indicates the presence of
  individual table cells.

12
The Graphical Table Syntax

• The general syntax of a graphical table is
• lttablegt
• lttrgt
• lttdgt First Cell lt/tdgt
• lttdgt Second Cell lt/tdgt
• lt/trgt
• lttrgt
• lttdgt Third Cell lt/tdgt
• lttdgt Fourth Cell lt/tdgt
• lt/trgt
• lt/tablegt
• This creates a table with two rows and two
  columns.

13
A Simple Table (8-07.htm)
This figure shows the layout of a graphical table.
two columns
14
HTML Structure of a Table
You do not need to indent the lttdgt tags or place
them on separate lines, but you may find it
easier to interpret your code if you do
so. After the table structure is in place,
youre ready to add the text for each cell.
15
Completed HTML Table Tags
This figure shows the completed text for the body
of the table. With the text for the body of the
table entered, the next step is to add the column
headings.
16
Creating Headings with the ltthgt Tag

• HTML provides the ltthgt tag for table headings.
• Text formatted with the ltthgt tag is centered
  within the cell and displayed in a boldface font.
• The ltthgt tag is most often used for column
  headings, but you can use it for any cell that
  you want to contain centered boldfaced text.

17
Adding Table Headings to the Table
Text in cells formatted with the ltthgt tag is bold
and centered above each table column.
18
Result of Table Headingsas Displayed in the
Browser (articles.htm)
19
Creating a Table Caption

• HTML allows you to specify a caption for a table.
• The syntax for creating a caption is ltcaption
  alignalignmentgtcaption textlt/captiongt
• alignment indicates the caption placement
• a value of bottom centers the caption below the
  table
• a value of top or center centers the caption
  above the table
• a value of left or right place the caption
  above the table to the left or right

20
Inserting a Table Caption
Placing the caption text within a pair of ltbgt
tags causes the caption to display as bold.
21
Result of a Table Caption
This figure shows a table with a caption.
22
Adding a Border to a Table
Only the outside border is affected by the border
attribute the internal gridlines are not
affected.
23
Defining Cell Padding

• To control the space between the table text and
  the cell borders, add the cellpadding attribute
  to the table tag.
• The syntax for this attribute is lttable
  cellpaddingvaluegt
• value is the distance from the table text to the
  cell border, as measured in pixels
• the default cell padding value is 1 pixel
• Cell padding refers to the space within the cells.

24
Tables with Different Cell Padding Values
This figure shows the effect of changing the cell
padding value for a table.
25
Working with Table and Cell Size

• The size of a table is determined by the text it
  contains in its cells.
• By default, HTML places text on a single line.
• As you add text in a cell, the width of the
  column and table expands to the edge of the page.
• once the page edge is reached, the browser
  reduces the size of the remaining columns to keep
  the text to a single line
• You can insert a line break, paragraph or heading
  tag within a cell.

26
Defining the Table Size

• The syntax for specifying the table size is
  lttable widthsize heightsizegt
• size is the width and height of the table as
  measured in pixels or as a percentage of the
  display area
• To create a table whose height is equal to the
  entire height of the display area, enter the
  attribute height100.
• If you specify an absolute size for a table in
  pixels, its size remains constant, regardless of
  the browser or monitor settings used.
• Remember that some monitors display Web pages at
  a resolution of 640 by 480 pixels.

27
Setting the Width of the Table
This figure shows the revised page with the table
width increased to 500 pixels. Once the width is
set for the table, the width of individual cells
and columns can be set.
28
Aligning a Table and its Contents

• By default, a browser places a table on the left
  margin of a Web page, with surrounding text
  placed above and below the table.

29
Aligning a Table on the Web Page

• To align a table with the surrounding text, use
  the align attribute as follows alignalignment
• alignment equals left, right, or center
• left or right alignment places the table on the
  margin of the Web page and wraps surrounding text
  to the side
• center alignment places the table in the
  horizontal center of the page, but does not allow
  text to wrap around it
• The align attribute is similar to the align
  attribute used with the ltimggt tag.
• The align attribute is available only with
  browsers that support HTML 3.2 or later.

30
Results of a Right-Aligned Table
31
Spanning Rows and Columns

• To merge several cells into one, you need to
  create a spanning cell.
• A spanning cell is a cell that occupies more than
  one row or column in a table.
• Spanning cells are created by inserting the
  rowspan and colspan attribute in a lttdgt or ltthgt
  tag.
• The syntax for these attributes is
  rowspanvalue colspanvalue
• value is the number of rows or columns that the
  cell spans in the table

32
Spanning Rows and Columns Continued

• When a cell spans several rows or columns, it is
  important to adjust the number of cell tags used
  in the table row.
• When a cell spans several rows, the rows below
  the spanning cell must also be adjusted.

33
Example of Spanning Cells (race2.htm)
34
Example of Spanning Cells (race2.htm)
35
A Table Structure with a Row-Spanning Cell
This figure shows spanning cells.
36
Results of a Table with Spanning Cells
37
Designing a Page Layout with Tables

• HTML tables are most often used to define the
  layout of an entire Web page.
• If you want to design a page that displays text
  in newspaper style columns, or separates the page
  into distinct sections, youll find tables an
  essential and useful tool.

38
Table Layout of a Web Page
This figure shows a sample table layout of a Web
page.
39
A Web Page with Tables
This figure shows a sample web page using tables.
40
Using Nested Table

• Tables can be created within another table making
  the Web page easier to manage.

41
A Sketch of a Web Page using Nested Tables
This figure shows a sketch of a web page using
nested tables.
42
The Result of the Web Page using Nested Tables
This figure shows a sample web page using nested
tables.
43
Table cells are very general containers! Hold
other tables, lists, text, images, etc.
44
A digression on color (MEH 14.9, MEH back chart)

• In HTML4 colors can be specified in two ways
• symbolic labels RED, BLUE, GREEN, etc.
• RGB hex notation
• RRGGBB
• where is a literal
• RR, GG, BB are 2 digit hexadecimal numbers from
  00 to FF (0 to 255 ) representing the red, green
  and blue components of the color
• Java and many scripting languages use the same
  convention

45
Summary

• Learned how to create and use tables.
• Created a simple text table using the ltpregt tag
  to display unformatted text.
• Created a graphical table using the lttablegt,
  lttrgt, ltthgt and lttdgt tags.
• Worked with basic properties of tables.
• Learned how to control the placement of the table
  on a Web page.

46
Summary

• Learned how to specify the size and alignment of
  the various table elements.
• Worked with row-spanning and column-spanning
  cells.
• Discussed the principle uses of tables.
• Discussed extensions to the standard table tags
  that are supported by some browsers.

47
Frame Tutorial Objectives

• Create frames for a Web site
• Control the appearance and placement of frames
• Control the behavior of hyperlinks on a Web page
  with frames
• Use reserved target names to specify a target for
  a hypertext link

48
Advantages to Using Frames

• Frames can give more flexibility in designing
  your Web presentation.
• You can place information in different Web pages,
  removing redundancy.
• Frames can make your site easier to manage.
• Frames allows you to update only a few files
  rather than the whole.
• Web designers advocate creating both framed and
  non-framed versions for a Web site and giving
  users the option of which one to use.

49
Disadvantages to Using Frames

• The browser has to load multiple HTML files
  before a user can view the contents of the site
  increasing the waiting time for potential
  customers.
• Some older browsers cannot display frames.
• Some users simply do not like using frames.
• Some web authors feel that frames are too
  constricting, limiting flexibility in designing
  the layout of a Web page.
• There is concern that frames can use up valuable
  screen space.
• The source code is removed from the user.

50
Frames

• A FRAME is an independently scrollable display
  area of a browser window
• Each frame cell typically displays a different
  HTML page
• A frame is NOT a separate browser instance
  (separate browser instances can be invoked
  programmatically and have different uses and
  behaviors)

51
Basic Frame Syntax

• A framed page is constructed by the browser from
  multiple HTML documents
• 1. The frame specification - the number of
  frames, and their dimensions
• 2. As many other documents as required to be
  displayed in the frame elements specified in (1)
• 3. Anchor elements in one frame (links) can
  specify other frames as the display destination
• the classic menu structure (MEH 9.4a)

52
Basic Frame Syntax (MOE 9.4)

• Frames can be nested, that is, a frame element
  can contain other frame elements. Since the
  contents of frames come from different pages,
  this can be far more confusing than nested TABLE
  elements
• In the frame specification document, the HTML
  element ltFRAMESETgt is used in place of the ltBODYgt
  element

53
Basic Frame Syntax
Powell, p. 271 9.4

• ltFRAMESET COLS250, gt
• ltFRAME SRCfileone.htm NAMEControlsgt
• ltFRAME SRCfiletwo.htm NAMEDisplaygt
• ltNOFRAMESgt info for non frame supporting browsers
• lt/NOFRAMESgt
• lt/FRAMESETgt
• The name attribute allows each frame to be
  targeted for link display and manipulated as a
  named object by scripting languages (real soon
  now)

54
Frame Targeting(Powell 9.04a 9.04 9.06)

• A link may specifiy a named frame as the display
  destination with the TARGET attribute.
• ltA HREFhttp//mypage.htm TARGETdisplaygt
• Display Mypage
• lt/Agt

55
Frame Targeting

• The previous code snippet will
• display the text Display Mypage as a link in a
  frame (assume the frame displaying the link is
  NOT the display frame)
• When the link is clicked, the page specified,
  Mypage will be loaded and displayed in the frame
  identified as display by the NAME attribute of
  the ltFRAMEgt element.

56
Frame Targeting (Powell 9.04a 9.04 9.06)

• Reserved (pre identified) TARGET values
• _blank
• loads the page into a NEW, usually unnamed window
• _self
• loads the page over the current display (where
  the link is currently displayed)
• _parent
• if frames are nested, load the page into the
  outer frame containing the one displaying the
  link
• _top
• loads the page over ALL the frames in the window
• _new
• loads the page in a new broweser window

57
Inline Frames (HTML v. 4) (staff.htm)

• Scrollable windows that behave like a hybrid
  between frames and VBScript text fields
• ltIFRAME src source.htm
• nameframeName
• heightpixels
• widthpixels gt
• MEH Figure 9.16