Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-01

Summer 2003

Lecture 5

2

Topics TodayTopics Today

• Table (cont’d)• 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

ReminderReminder

• Homework1 due midnight today

• Register at course’s web if you have not done it I need your cs account information

• No class on July 4th (this Friday)

4

Elements Used in TableElements Used in Table

• Table element <table></table>

• Table row element <tr></tr>

• Table data element <td></td>

• Table head element <th></th>

5

Table StructureTable Structure

<table><caption>Sample Table</caption><tr>

<th>headrow-col1</th>…<th>headrow-coln</th>

</tr><tr>

<td>row1-col1</td>…<td>row1-coln</td>

</tr>…<tr>

<td>rowm-col1</td>…<td>rowm-coln</td>

</tr></table>

sampletable.html

6

Table Element AttributesTable Element Attributes

• align values: left, center, right default: left

• bgcolor, background• border

values: n (an integer) default: 0

7

Table Element Attributes(cont’d)Table Element Attributes(cont’d)

• cellpadding margin between cell content and cell border default: 2

• cellspacing space between adjacent cells default: 2

• Example: table_layout.html

8

Table CellsTable 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 <font></font>

• Use case: a table with a single cell can frame an image or offset important text Example: singlecell-image.html

9

Tables and TextTables 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 cellpadding=“20” table attribute will put white space between the two columns) Example: table_2col.html

• More on tables for page layout later

10

colspan and rowspancolspan 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 GraphicsTables 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 ElementRules 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 BordersWeb Page Borders

• Empty table columns can be used to create margins for text on a Web page

• Use a fixed width attribute (e.g. width=“50”) for the empty table data element

• Put an internal table inside

• Better to control margins with CSS (later)

14

One vs. ManyOne 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

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

FramesFrames

• 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 StructureFrame Code Structure

</head><frameset rols=“” cols=“”><frame name=“frame1” src=“”>…<frame name=“framen” src=“”><noframes>

use <a href=“”>no-frame version</a> instead

</noframes> </frameset></html>

18

The Frameset ElementThe 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 columnsSetting up rows and columns

• Specify a certain number of rows or columns of certain sizes by<frameset cols=“100,300,*”>

• 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 ElementThe 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 scrolling=“no”

• frame is a self-closing tag Other self-closing tags?

21

Some more attributesSome 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 layoutTabular layout

• By setting both the cols and rows attribute, you create a table of frames

<frameset rows=“20%,*” cols=“*,50%”>

• Frames are listed row by row

• Example: framesetb.html

23

Nested framesetsNested framesets

• Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout)

• You can specify a <frameset> instead of a <frame> 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 framesLinking in frames

• Target links to correct frame

• Avoid sucking in external sites

25

The target attributeThe target attribute

• In a frameset, you can specify which frame you want to load a file in useful when using frames for site navigation

<a href=“foo.html” target=“myframe”>

• loads the source into myframe• target=“_top” clears the frameset• target=“popup” loads in a new window• Example: framesetd1.html

26

The base tagThe base tag

• Rather than specifying the target for each link, you can add a line before the </header> such as

<base target=“right”>

• Sets default link

• Can also set default link targets to be “_top” to leave the site

27

Deep LinkingDeep 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 NavigationFrames for Site Navigation

• A typical frame layout uses two nested frameset elements to divide a Web page into three frames:

1. The title frame runs across the top of the Web page

2. A navigational frame occupies a left-hand border under the title frame

3. A content frame occupies the remainder of the Web page

• Example: framesetd.html

29

Art Galleries with FramesArt 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 FramesProblems with Frames

• Not all browsers support frames (try it on a palm!)

• It is difficult for others to link to content inside a frame

• It’s easy to create deep links by accident• Tougher to save sub-pages, messy with

browser cache• Complex layout awkward• Doesn’t control layout inside each frame

31

Advantages of FramesAdvantages 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. tablesFrames 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 StudyCase Study

• What will we study? Modified version of course’s syllabus page URL:

http://www.classes.cs.uchicago.edu/classes/archive/2003/summer/10100-1/syllabus_bak.html

• Why will we study this page?

34

The Anatomy of Syllabus page

The Anatomy of Syllabus page

• How to analyze?