Introduction to Programming the WWW I CMSC 10100 01 Summer 2003 Lecture 5 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 2 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 3 Elements Used in Table Table element table table Table row element tr tr Table data element td td Table head element th th 4 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 5 Table Element Attributes align values left center right default left bgcolor background border values n an integer default 0 6 Table Element Attributes cont d cont d cellpadding margin between cell content and cell border default 2 cellspacing space between adjacent cells default 2 Example table layout html 7 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 8 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 9 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 10 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 11 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 downwardpointing 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 rightwardpointing arrow receives a COLSPAN attribute with a value equal to the length of the arrow 12 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 13 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 14 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 15 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 16 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 17 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 18 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 19 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 20 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 21 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 22 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 23 Linking in frames Target links to correct frame Avoid sucking in external sites 24 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 25 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 26 Deep Linking A deep link is any absolute link inside a