Introduction to Programming the WWW I

1. Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5

2. Topics 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. Reminder • 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 Table • Table element • <table></table> • Table row element • <tr></tr> • Table data element • <td></td> • Table head element • <th></th>

5. Table 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 Attributes • align • values: left, center, right • default: left • bgcolor, background • border • values: n (an integer) • default: 0

7. 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 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 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 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. width=“50”) 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 </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 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 <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 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 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 <frameset rows=“20%,*” cols=“*,50%”> • 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 <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 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 <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 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 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 • 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 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 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 • How to analyze?