Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-01
• Summer 2003
• Lecture 5

2
Topics Today

• Table (contd)
• Frames
• frameset
• frame
• nested framesets
• targeting links to frames
• navigation via frames
• deep linking
• pros and cons of frames
• Case study
• To dissect a complicated Web page

3
Reminder

• Homework1 due midnight today
• Register at courses web if you have not done it
• I need your cs account information
• No class on July 4th (this Friday)

4
Elements Used in Table

• Table element
• lttablegtlt/tablegt
• Table row element
• lttrgtlt/trgt
• Table data element
• lttdgtlt/tdgt
• Table head element
• ltthgtlt/thgt

5
Table Structure

• lttablegt
• ltcaptiongtSample Tablelt/captiongt
• lttrgt
• ltthgtheadrow-col1lt/thgt
• ltthgtheadrow-colnlt/thgt
• lt/trgt
• lttrgt
• lttdgtrow1-col1lt/tdgt
• lttdgtrow1-colnlt/tdgt
• lt/trgt
• lttrgt
• lttdgtrowm-col1lt/tdgt
• lttdgtrowm-colnlt/tdgt
• lt/trgt

6
Table Element Attributes

• align
• values left, center, right
• default left
• bgcolor, background
• border
• values n (an integer)
• default 0

7
Table Element Attributes(contd)

• cellpadding
• margin between cell content and cell border
• default 2
• cellspacing
• space between adjacent cells
• default 2
• Example table_layout.html

8
Table Cells

• A table cell a table data element
• Tables cells can be independent from each other
• background colors bkcolor
• background patterns background
• alignments align
• fonts using nested ltfontgtlt/fontgt
• Use case a table with a single cell can frame an
  image or offset important text
• Example singlecell-image.html

9
Tables and Text

• Text is hard to read against a busy background
  pattern, but you can lay a table containing text
  on top of a background pattern without
  sacrificing readability (just give the table a
  solid background color)
• Examples table_text2.html vs. table_text1.html
• Tables can also be used to separate text into two
  columns (a cellpadding20 table attribute will
  put white space between the two columns)
• Example table_2col.html
• More on tables for page layout later

10
colspan and rowspan

• colspan and rowspan are table data attributes
  that are used to create irregular tables
• A table cell can be extended horizontally with
  the colspan attribute
• A table cell can be extended vertically with the
  rowspan attribute
• Example
• table_rowspan.html
• table_colspan.html
• composite example (with both rowspan and colspan)

11
Tables and Graphics

• Tables can be used to control a Web page layout
  for multiple images (or images mixed with text)
• Images of different sizes can be fit together in
  irregularly-shaped tables using cell-structure
  diagrams
• All tables have an underlying cell structure with
  a uniform number of table cells across each table
  row

12
Rules for Table Element

• TD Rule 1
• each row receives a TD element whenever the row
  has (1) a cell with no arrow or (2) a cell with
  the beginning of an arrow
• TD Rule 2
• any TD tag corresponding to a cell that contains
  the beginning of a downward-pointing arrow
  receives a ROWSPAN attribute with a value equal
  to the length of the arrow
• TD Rule 3
• any TD tag corresponding to a cell that contains
  the beginning of a rightward-pointing arrow
  receives a COLSPAN attribute with a value equal
  to the length of the arrow

13
Web Page Borders

• Empty table columns can be used to create margins
  for text on a Web page
• Use a fixed width attribute (e.g. width50) for
  the empty table data element
• Put an internal table inside
• Better to control margins with CSS (later)

14
One vs. Many

• If you have one very large table, try to break it
  up into a sequence of smaller tables that can be
  stacked vertically on a Web page
• Browsers download the contents of an entire table
  before any of the table can be viewed
• Multiple tables will be displayed incrementally
  so the user will be able to see the first part of
  your page while the rest of the page is still
  downloading

15
Disadvantages of tables for layout

• Not all browsers can read tables
• Complex layout requires complex tables (lots of
  headaches, room for error)
• Complex tables can download, be rendered slowly
• Scalability issues

16
Frames

• Frames can be used to facilitate Web site
  navigation
• Good for organizing large Web sites
• Easy to construct
• However, frame-based approaches have
  disadvantages

17
Frame Code Structure

• lt/headgt
• ltframeset rols colsgt
• ltframe nameframe1 srcgt
• ltframe nameframen srcgt
• ltnoframesgt
• use lta hrefgtno-frame versionlt/agt instead
• lt/noframesgt
• lt/framesetgt
• lt/htmlgt

18
The Frameset Element

• The frameset tag pair should follow the head
  element, replacing the body element
• The cols and rows attributes are used to divide
  the Web page into frames
• Each frame is represented by a separate frame
  element
• Specify DOCTYPE as HTML 4.01 Frameset
• HTML 4.01 Frameset is a variant of HTML 4.01
  Transitional for documents that use frames.

19
Setting up rows and columns

• Specify a certain number of rows or columns of
  certain sizes by
• ltframeset cols100,300,gt
• This makes a three columns of 100 pixels, 300
  pixels, and the rest of the screen
• Example frameseta.html
• Can also use percentages (n)
• Use no more than one in the list

20
The Frame Element

• Each frame tag should contain a name attribute
• The name attribute is used for targeting links
  (see later)
• Each frame tag should contain a src attribute
  that specifies a Web page
• Can turn off scroll bars with scrollingno
• frame is a self-closing tag
• Other self-closing tags?

21
Some more attributes

• You may specify frameborder, framespacing, and
  border attributes
• Only border seems to have a big effect
• HTML validator has trouble with frameborder
• See HTML p. 136, and W3C online for more
  information
• Examples
• frameseta1.html (border"5" framespacing"5)
• frameseta2.html (frameborder"0" border"0"
  framespacing"0)

22
Tabular layout

• By setting both the cols and rows attribute, you
  create a table of frames
• ltframeset rows20, cols,50gt
• Frames are listed row by row
• Example framesetb.html

23
Nested framesets

• Irregular layouts are useful (the equivalent of
  using rowspan or colspan in a table layout)
• You can specify a ltframesetgt instead of a ltframegt
  to create nested framesets
• Or, you can set the src for a frame to point to a
  frameset file.
• Example framesetc.html

24
Linking in frames

• Target links to correct frame
• Avoid sucking in external sites

25
The target attribute

• In a frameset, you can specify which frame you
  want to load a file in
• useful when using frames for site navigation
• lta hreffoo.html targetmyframegt
• loads the source into myframe
• target_top clears the frameset
• targetpopup loads in a new window
• Example framesetd1.html

26
The base tag

• Rather than specifying the target for each link,
  you can add a line before the lt/headergt such as
• ltbase targetrightgt
• Sets default link
• Can also set default link targets to be _top to
  leave the site

27
Deep Linking

• A deep link is any absolute link inside a framed
  Web page that displays the destination page
  inside the frame system
• You can avoid deep links by sending them to a new
  browser window
• Any link can be routed to a new browser window
  with the target attribute

28
Frames for Site Navigation

• A typical frame layout uses two nested frameset
  elements to divide a Web page into three frames
• The title frame runs across the top of the Web
  page
• A navigational frame occupies a left-hand border
  under the title frame
• A content frame occupies the remainder of the Web
  page
• Example framesetd.html

29
Art Galleries with Frames

• A three-frame layout works well for an online art
  gallery
• Fill the navigation frame with clickable
  thumbnail previews
• When a user clicks on a thumbnail preview, send
  the original image to the content frame
• Example framesete.html

30
Problems with Frames

• Not all browsers support frames (try it on a
  palm!)
• It is difficult for others to link to content
  inside a frame
• Its easy to create deep links by accident
• Tougher to save sub-pages, messy with browser
  cache
• Complex layout awkward
• Doesnt control layout inside each frame

31
Advantages of Frames

• Frames support intuitive site layouts that are
  easy to navigate
• Site development efforts can focus on content and
  navigation as independent problems
• Scalability write one navigation tool bar and
  stick it in a frame - only change one file to
  change navigation system

32
Frames vs. tables

• Tables are tougher to code (but this is fixable
  through scripting)
• Tables have wider (but not universal) support on
  browsers
• Frames are really quick to get going

33
Case Study

• What will we study?
• Modified version of courses syllabus page
• URL http//www.classes.cs.uchicago.edu/classes/ar
  chive/2003/summer/10100-1/syllabus_bak.html
• Why will we study this page?

34
The Anatomy of Syllabus page

• How to analyze?