Introduction to Programming the WWW I CMSC 10100 1 Summer 2004 Lecture 5 Today s Topics HTML Tables cont d HTML Frames HTML Forms 2 Review Typical Table Sketch Code 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 3 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 4 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 5 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 Example innertable html Note better to control margins with CSS 6 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 7 Disadvantages of tables for layout Complex layout requires complex tables lots of headaches room for error Complex tables can download be rendered slowly Scalability issues Not all browsers can read tables 8 HTML Frames HTML frames allow to display multiple HTML documents in a same browser window The browser window is divided into multiple regions or frames Each frame displays a unique web page Each frame is independent of the others 9 Frame Code Structure home head head frameset rols cols frame name frame 1 src page1 html frame name frame n src pagen html noframes body use a href no html no frame version a body noframes frameset html 10 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 11 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 Note use no more than one in the list 12 The Frame Element Each frame tag should contain a name attribute The name attribute is used for targeting links discuss later Each frame tag should contain a src attribute that specifies a Web page Can shutdown resizing by adding noresize Can turn off scroll bars with scrolling no frame is a standalone self closing tag 13 Some more attributes You may specify frameborder framespacing and border attributes Only border seems to have a big effect 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 14 Tabular layout By setting both the cols and rows attributes you create a table of frames frameset rows 20 cols 50 Frames are listed row by row Example framesetb html 15 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 16 Linking in frames Each frame may contain hyperlinks Each hyperlink can be targeted to different frame or a new window It is achieved by the target attribute of a tag 17 The target attribute Target link to a named frame Example a href foo html target myframe loads the source into a frame named myframe useful when using frames for site navigation HTML defined target values blank opens a new unnamed window self opens the link in the current frame default top opens the link in the full unframed browser window throws you out of the frameset parent opens the link in the immediate frameset parent calling frame Example framesetd1 html 18 The base tag Rather than specifying the target for each link you can add a line in head element Example base target right Sets default links to the frame named right Can also set default link targets to be top to leave the site Example framesetd2 html 19 Avoid Deep Linking A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system Deep linking should be avoided why Copyright issues might be illegal 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 20 Frames 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 21 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 22 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 23 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 It is difficult to print the entire page 24 Frames vs tables Tables are tougher to code but this is fixable through scripting Tables have wider