Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 (but not universal) support on browsers • Frames are really quick to get going 25 HTML Forms • HTML Forms are used to select different kinds of • user input, defined with <form> tag Form contains form elements to allow the user to enter information text fields textarea fields drop-down menus radio buttons checkboxes, etc • A Web page can contain one or multiple forms Identified by id or name attribute 26 <form> Attributes • action attribute Gives the URL of the program(CGI) to receive and process the form’s data • CGI is Common Gateway Interface, a protocol to handle web data transmissions • How does CGI work? (next slide) • CGI programs usually kept in a cgi-bin/ directory • Usually triggered by clicking the submit button • action can also be a mailto: link Syntax: action=mailto:XXX Example: formeg.html • Example: add.html using CGI programs in action 27 How Browsers and Web Applications Work with CGI 28 <form> Tag Attributes (cont’d) • method attribute Sets the HTTP method by which the browser sends the form data to the program, value can be GET or POST • HTTP protocol specification • Simple HTTP request and reply GET method: • The form data gets appended to the request URL POST method: • The form data is sent as part of the message body Avoid GET method in favor of POST for security reasons • A long form content line attached to URL may crash the web server • The GET request line is plain ASCII text sent without encryption and will be saved in server logs • Example: add.html using CGI programs in action 29 <form> Tag Attributes (cont’d) • enctype attribute Specify the content type used to submit the form to the server when the action method is POST Default value application/x-www-form-urlencoded (need not specify) Special cases: • Use “text/plain” if action=mailto:XXX • Use "multipart/form-data“ if the data sent is a file • the id, name attributes Give the identification or name to a form Useful for multiple forms in a same page id is preferable 30 <input> Tag • To define any one of a number of common form “controls” Text fields (including password, hidden fields) multiple-choice lists Clickable images Submission buttons • Only type and name attribute required • No ending tag (no </input>) 31 Text Fields • single line of text <input type=text name=XXX> • Set type to password to mask text like a password • Set type to hidden to create a hidden field size and maxlength attributes value attributes to give default text • Example: formeg1.html 32 Multi-line Text Area • The <textarea> tag • Attributes cols rows wrap • Values: Off,virtual(default),physical • Example: formeg1.html 33 Check Boxes • Check boxes for “check all that apply” questions <input type=checkbox name=XXX value=XXX> Make sure name identical among a group of checkboxes checked attribute • When form is submitted, names and values of • those checked boxes are sent Example: formeg1.html 34 Radio Buttons • Similar as checkboxes, but only one in the group may be selected <input type=radio name=XXX value=XXX> • Example: formeg1.html 35 Multiple Choice Elements • The <select> tag creates either pull-down • • menus or scrolling lists The <option> tag defines each item within a <select> tag <select> tag attributes size attribute • Number of rows visible at the same time multiple attribute • If set, allow multiple selections name attribute • Example: formeg1.html 36 Action Buttons • Some special types of form controls Act immediately Effect can not be reversed Affect the entire content of the form 37 Action Buttons (cont’d) • What are they? Submit buttons • <input type=submit name=XXX value=XXX> Reset buttons • <input type=reset name=XXX value=XXX> Regular buttons • <input type=button name=XXX value=XXX> image buttons (will send form content as submit button) • <input type=image name=XXX src=XXX> *File buttons (need to deal with enctyple attribute) • <input type=file name=XXX accept=“text/*”> • Example: formeg1-bak.html 38 HTML Forms Resources • HTML Forms tutorials http://www.webcom.com/html/tutor/forms/start. shtml http://info.netmar.com/creating/forms.html • HTML Forms and Input http://www.w3schools.com/html/html_forms.asp 39