Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 5 and 6 Scott Marino

MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

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

Scott Marino MSMIS Summer Session Frames Must have a defined for each row in a

Scott Marino MSMIS Summer Session Frames * (from the cols frameset

Scott Marino MSMIS Summer Session 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=# Set the color for the border –border=n –frameborder=n n=0 makes them disappear

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session Form - Get Method 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

Scott Marino MSMIS Summer Session Forms - Post Method Passes cgi information via Unix Slower because it must open a socket connection More secure because the values can’t be modified as easily

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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”

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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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

Scott Marino MSMIS Summer Session 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