1. Scott Marino MSMIS Summer Session 1 - 2001 Web Site Design and Authoring Session 5 and 6 Scott Marino

2. MSMIS Summer Session 1 - 2001 Topics Tables –HTML 4 / Chapter 9 Nested Tables –HTML 4 / Chapter 9 Homework / Lab 3 Frames –HTML 4 / Chapter 10 Forms –HTML 4 / Chapter 11 Project Discussion

3. Scott Marino MSMIS Summer Session 1 - 2001 Tables –Starts and ends a table definition –Denotes a row in a table –One or more row (pairs) within a table –Denotes a column within a row –One or more column (pairs) within a row

4. Scott Marino MSMIS Summer Session 1 - 2001 Tables Student Grade Mary A+ John B … StudentGrade MaryA+ JohnB...

5. Scott Marino MSMIS Summer Session 1 - 2001 Tables Attributes border=n –n is the number of pixels for the size of the border around the table and each cell width=n or width=n% –n is the number of pixels –n% is a percentage 100% align=center –Aligns the table to the center of the screen bgcolor=#FF00FF –sets colors for the table

6. Scott Marino MSMIS Summer Session 1 - 2001 Tables attributes bgcolor=#FF00FF –Sets the background color for the cell width=n or width=n% –n is the number of pixels –n% is a percentage 100% height=n –n is the number of pixels –Use caution when setting the height align=center –Aligns the data to the center of the cell –Creates a cell that spans n columns –Creates a single cell that spans n rows

7. Scott Marino MSMIS Summer Session 1 - 2001 Nested Tables Created by placing a … inside the and tags of another table Allows you to create powerful layouts that look very sophisticated Used by ALL the commercial sites

8. Scott Marino MSMIS Summer Session 1 - 2001 Table Text Alignment valign=“top” –Used when 2 or more cells in a row contain different amounts of text or images –Aligns the text in the cell to start at the top line of the cell –Useful when an image is in one cell and you want to align the text of another cell in the same row to align to the top of the cell –Also middle, baseline, and bottom valign attributes

9. Scott Marino MSMIS Summer Session 1 - 2001 Merging Cells Can merge 2 or more cells in a row or column to produce a single cell –Merges two or more columns in a single row into one cell –Merges two or more rows in a single column into one cell Used extensively to create formatting blocks within a table

10. Scott Marino MSMIS Summer Session 1 - 2001 Lab 3 / Homework Create a web page from your resume Must use tables for aligning the text Should include font formatting and hyperlinks to home pages of prior employers Include a hyperlink to your resume from your home page

11. Scott Marino MSMIS Summer Session 1 - 2001 Lab 3 / Homework Using MS-Word to produce a web page not allowed –It can create incredibly ugly html especially since it has trouble with special formatting requirements of resumes Should use MS FrontPage or another HTML Editor Due Thursday, May 24th –Bring a printed copy of the page from the browser

12. Scott Marino MSMIS Summer Session 1 - 2001 Frames Divides a page into sections Usually have content and navigation areas Not common among commercial sites as there are sizing issues –Older browsers did not support frames –Having a framed site link to a framed site can get ugly

13. Scott Marino MSMIS Summer Session 1 - 2001 Frames … –Splits the screen into 3 rows –65 pixels at the top, 60 pixels at the bottom and all the remaining space (*) in the middle 65 * 60

14. Scott Marino MSMIS Summer Session 1 - 2001 Frames … –Splits the screen into 3 columns Can also change from pixels to percentages 100 * 60

15. Scott Marino MSMIS Summer Session 1 - 2001 Frames Must have a defined for each row in a

16. Scott Marino MSMIS Summer Session 1 - 2001 Frames 50 150* (from the cols frameset

17. Scott Marino MSMIS Summer Session 1 - 2001 Frames options –marginwidth=n –marginheight=n –scrolling=yes Show scrollbars –scrolling=no No scrollbars –scrolling=auto Only show scroll bars if needed –noresize Prohibits resizing frame options –bordercolor=#000000 Set the color for the border –border=n –frameborder=n n=0 makes them disappear

18. Scott Marino MSMIS Summer Session 1 - 2001 Frames –name is a reference to the definition Without a named target, the default to display the followed link is the current page target=_blank –Opens a new window called _blank target=_self –Opens link in the same frame target=_top –Open in browser independent of current frameset target=_parent –Same as top except when nested frames are used

19. Scott Marino MSMIS Summer Session 1 - 2001 Frames This site uses frames and your browser is old Nest the tag inside the tag just before the The noframes area can also contain a link to a non-framed version of your site if you decided to create a mirror copy of your site

20. Scott Marino MSMIS Summer Session 1 - 2001 Forms CGI or Common Gateway Interface –Stateless protocol Used to pass information from the browser to the host server Most common language is Perl –Also use C, Java, VB Script and other languages Many shareware scripts exist on the web

21. Scott Marino MSMIS Summer Session 1 - 2001 Forms The action is the script that is called when the user clicks “SUBMIT” The somescript.cgi is the name of the CGI program in the cgi-bin directory –Sometimes called somescript.pl instead of.cgi –MUST be set to be executable chmod 755 somescript.cgi

22. Scott Marino MSMIS Summer Session 1 - 2001 Forms Creates a submit button with the value “Submit” displayed in it Can add a name=“xxxx” to the submit button to pass it to the cgi as a name –Only need to be named if there are multiple submit buttons that do different things Can use a custom image to replace the generated button

23. Scott Marino MSMIS Summer Session 1 - 2001 Forms Generates a reset button with the value “Reset Values” displayed in it –The reset button is handled within the browser –Clicking on it does not send a request to the server Can use a custom image to replace the generated button

24. Scott Marino MSMIS Summer Session 1 - 2001 Form - Get Method http://www.mysite.com/cgi- bin/script.pl?f_name=joe&l_name=smith Passes cgi information via the url Faster because it doesn’t open a socket connection Less secure because variables are visible in the url

25. Scott Marino MSMIS Summer Session 1 - 2001 Forms - Post Method http://www.mysite.com/cgi-bin/script.pl Passes cgi information via Unix Slower because it must open a socket connection More secure because the values can’t be modified as easily

26. Scott Marino MSMIS Summer Session 1 - 2001 Forms Creates a one line text box Will pass the name/value pair to the cgi as first_name Will display space for 30 characters Will allow a maximum of 40 characters

27. Scott Marino MSMIS Summer Session 1 - 2001 Forms Creates a one line password box that will display *’s for data entered Will pass the name/value pair to the cgi as secret_pw Will display space for 10 characters Will allow a maximum of 10 characters

28. Scott Marino MSMIS Summer Session 1 - 2001 Forms Initial Text Creates a 5 line text box 50 characters wide Allows for autowrapping of the text entered The “Initial Text” will appear inside the text box –Initial text is optional –Place the close tag immediately after the for no initial values

29. Scott Marino MSMIS Summer Session 1 - 2001 Forms True False Should have at least 2 radio buttons All buttons with the same name are a set –Only one button in a set can be depressed Add “checked” to default to be set “on”

30. Scott Marino MSMIS Summer Session 1 - 2001 Forms All check boxes with the same name are a set Add “checked” to default to be set “on”

31. Scott Marino MSMIS Summer Session 1 - 2001 Forms Alaska Alabama Size determines the number of lines of the selection list to be displayed Multiple will allow more than one entry to be selected

32. Scott Marino MSMIS Summer Session 1 - 2001 Forms Form field that is available to the cgi, but is not displayed on the screen Can be used to help maintain “state” in a “stateless” environment

33. Scott Marino MSMIS Summer Session 1 - 2001 Project Discussion Create a working web site with a common theme Should be at least 5 pages with a navigation bar linking all pages Should include a cgi form that has basic JavaScript validations Start thinking about the theme or content –Favorite sports team, actor/actress, movie or book reviews, recipes, hobbies or collections Class presentations on June 19th and 21st