CS 200 Assignment 7 HTML Due Tuesday June 30 at 9:00 am Please read the submission instructions on page 7 carefully, especially if you will be working on the assignment past the due date. To access your home page (Question 1) via the student CS web server, use the URL https://www.student.cs.uwaterloo.ca/~username/root.html For the validator to know exactly what kind of web page you re To access your form (Question 2) via the student CS web server, use the URL(Pay extreme attention to the upper/lower cases of the letters) https://www.student.cs.uwaterloo.ca/~username/form.html To check a web page for faulty HTML tags, use the URL http://validator.w3.org/ submitting, your web source file must begin with the following incantation: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> To check a web page or external CSS file for faulty CSS, use the URL http://jigsaw.w3.org/css-validator/ or one of the Validate... menu items in StyleMaster s Debug menu. Read the excerpts from Learning Web Design listed on the Course Readings list. You may find material at the following URL to be useful if you are new to HTML. http:// www.htmlcodetutorial.com The Resources Related Web Links General HTML Documentation web page on the course web site also includes several useful pages, including all the reference web pages mentioned on page 4 of this assignment. CS 200 HTML Assignment Page 1
1. [55%] Create a home page for yourself. View and read the source for AnEmptyHomePage.html and JohnsHomePage.html to get started (documentation for these is accessible via the Commented HTML link (in the Lectures menu) on the course web page). Notice how blank lines and indenting are used to enhance the readability of these files. Your home page must include: your name and handin code at the top of your web page; a scanned image (such as the photograph you scanned for assignment 3); two absolute hypertext links to other web pages (eg sites you find particularly interesting); a list of something; a table of something; a mail-to link to your cs email account 1 ; a relative hypertext link to another web page in your www folder containing text of your own choosing that defines and uses at least ten distinct user-defined CSS styles: at least three of these must be defined in a linked external style sheet file; at least three of these must be defined in the <head> section of the page using a <style> tag pair. You must also use the style attribute to directly apply CSS to the contents of a tag pair in at least three places, each of which applies a distinct set of CSS attributes. 2 You may use only the gif, jpeg and png image file formats in web pages, so you will need to convert your digital image to these formats. To do so, you may use the File Save as..., File Save for Web or File Export... menu items (as appropriate) in one of Graphic Converter or Photoshop. (Think about when each of these formats is most appropriate.) Your web page must be visually attractive and well designed, consistent with the guidelines set in The Non-Designers Design Book. If you create auxiliary files linked from your home page and place them in a subfolder of your www folder, take care that the subfolder(s) are publicly readable. Marking for this question: 70% for the content of your page, as specified above. 15% for an attractive, well-organized page (as displayed by Firefox). 15% for a well-organized, easy-to-read source file. Extra credit will be awarded for especially attractive and creative home pages, or for a nontrivial and interesting use of Javascript. 1 A mail program will open when you click on your mailto link, but it will not open with your settings because of where you have your preferences saved. 2 You may, if you prefer, satisfy these requirements on your Root.html web page, but should attempt to do so only if you have significant experience with HTML. CS 200 HTML Assignment Page 2
2. [40%] Create a file named form.html in www containing a web form with the following items. (Labels are what the user of a form sees, while names are what the cgi uses to identify a piece of information they are equivalent to a field name in a database and values are the actual data that is entered on the form.) your name and handin code at the top of your web page; a hidden field with the name identity whose value is your full name (e.g. John Smith ); a one-line text input field with the label Registration Number and the name idnumber ; a multi-line, scrolling text input field with the label Comments and the name comments ; three radio buttons labeled 830 TR, 1030 TR, 1430 TR and 1430 WF with the name lab that submit the values Lab101, Lab102 and Lab104 respectively, when selected; one pop-up menu or scrolling menu with the label Application and the name app that allows the user to select from Word, Excel, Illustrator, Elements, Witango, and FileMaker ; three checkboxes labeled Macintosh, Window, and Linux with names mac, win, and unix, respectively, each of which returns the value Yes when checked; a Submit button. Your form should invoke the URL https://www.student.cs.uwaterloo.ca/~cs200/cgi-bin/responder.cgi using either of the GET and POST methods. Submitting your form will cause Responder to echo back to your browser a list of the names and values of the form parameters sent to it. At the right, for example, is what Responder returned when sent data from the table-formatted grade request form discussed in lecture (which had text fields for surname and id number, and checkboxes for assignments, the midterm, the final, and the course mark). You can use the File t menu item in your browser to display your form just as if it had been retrieved from the web server, and then submit values entered into it to see what Responder sends back. Or you can fetch the form by supplying its URL. Try both. 3. Once you have completed Question 1 and 2 you will move the contents of the www folder to your public_html folder. Under the Application folder on your computer, open Fugu or Fetch. Type linux.student.cs.uwaterloo.ca into the Connect to: text box. Type your student.cs password and click Authenticate CS 200 HTML Assignment Page 3
You will now be able to move files into the folder called public_html. Hint: use your pearls to figure this out. Your webpage should now be available at: https://www.student.cs.uwaterloo.ca/~yourusername/root.html You will now need to change the permissions on these files Under Applications, go to Utilities and open the application Terminal. Type ssh linux.student.cs.uwaterloo.ca and Return. Type in your password for the machines in the lab. Type chmod R go+rx public_html and Return. All of your files should not be accessible from a browser at the url: student.cs.uwaterloo.ca/~yourusername/root.html Places to go for help in learning about HTML 3 Follow the Lectures Commented HTML menu item on the CS 200 web site to access hyper-text-commented versions of the web pages discussed in lecture. Chapter 11 of Designing for the Web contains a very clean summary of basic HTML tags. There are two copies on reserve in the library. HTML & XHTML The Definitive Guide, 6/e, by Chuck Musciano & Bill Kennedy, O Reilly & Associates, ISBN 0-596-52732-2 is an exhaustive printed source for additional detail. There are two copies of an earlier edition on reserve in the library. AppleGuide help in PageSpinner (see Help PageSpinner Help). PageSpinner comes with an on-line tutorial, which you can access by selecting Help Documentation. StyleMaster comes with extensive built-in documentation both for the meaning of CSS properties and on the extent to which the major browsers correctly implement those properties. For a tutorial on cascading style sheets, see Comments http://www.westciv.com/style_master/academy/css_tutorial/ (StyleMaster is a Western Civilization product). Don t wait until you ve finished a web page before displaying it with a browser. It s smarter to display your page each time you change it to see if the changes work. You will need to save the html after each change and option-click on the reload button in your browser. Be sure that you have a clear overall understanding of how the lab Macintoshes, the server machines (Oscar & jcbserver), the AppleShare Web & File server application, and cgi s running on these machines provide file sharing and web services for the lab. 3 All of these links may be reached via the Resources Related Web Links General HTML Documentation web page in the course web site. CS 200 HTML Assignment Page 4
Use PageSpinner, an HTML-savvy text editor, to create your web pages. There is, of course, a startup cost to learning a new text editor, but PageSpinner has several advantages over more general text editors such as SimpleText. PageSpinner has menu items and palettes that insert proper HTML tags into the document for you. Style tags cause PageSpinner to change the way your text is displayed, like a browser (although unlike a browser, the tags are visible as they have to be, if you re going to edit them). PageSpinner will not preview your pages because of the permissions on your www folder. You will have to use the URL on page 1 or Firefox s File Open File (Suggestions for getting started with PageSpinner begin on page 6.) HTML editors comprise a rapidly-evolving segment of the software industry. At the top end are WYSIWYG editors that manipulate HTML tags invisibly, just as conventional word formatting software like Word and WordPerfect do with the formatting codes they embed in documents. None of these are very satisfactory as yet partly because HTML itself is evolving so fast, and partly because these editors have simply not been around long enough to develop stable and easy-to-use interfaces. CS 200 HTML Assignment Page 5
Using PageSpinner PageSpinner provides a wealth of assistance in learning HTML and constructing web pages. Don t try to learn all of PageSpinner in one sitting! A better strategy is to learn enough to get started, and then augment your understanding of PageSpinner (and HTML) a bit at a time. Getting Started with PageSpinner (Learning To Walk) PageSpinner offers extensive on-line help via AppleGuide. To access it, select the Help PageSpinner Help menu item (from the help menu). You don t have to use PageSpinner s many specialized tools and menu items to insert HTML into your document you can just type it in. In fact, this may be a good idea when you are first getting started. Later, when you want to explore more complex tags or tag attributes, you can use PageSpinner s tools to show you what these look like and what the appearance of pages using them is. Usually PageSpinner applies text attributes when it shows you a page of HTML text surround with <B> and </B>, for example, will be shown in bold. If this does not happen by default, go to the Edit Restyle Text menu item. Similarly, if the Edit Editor Options menu item is selected then you can t edit or delete HTML tags. If someone leaves PageSpinner in this mode, use the Edit Editor Options command to restore editability. You can also use command-delete. You can directly open any web page on your disk by using your browser s File Open File menu item. When working on your form, you can then use the submit button to transmit your form to the CS 200 web server, provided that you have used a complete URL to locate Responder.acgi such as http://jcbserver.cs.uwaterloo.ca/responder.acgi Learning To Run The HTML Assistant will guide you through the creation of various HTML features, although as a practical matter you must already have a rough idea of what you are doing before the Assistant will be helpful. (Open the HTML Assistant floating window by selecting it from the Windows menu, or by clicking on the toolbar that appears as <>) PageSpinner s menus especially the List and Table menus provide you with a way of inserting particular components of a list or table into your page. The HTML Examples window, accessed from the Windows menu, provides a way of copying a complete example into your web page that you can then modify. This is often a good approach if you re not yet entirely sure what you re doing. CS 200 HTML Assignment Page 6
Submission Instructions If you wish to submit this assignment late, notify your ISA FIRST. The subject of your e-mail should read YourUserName Assignment 7 Late Submission We will not mark your assignment twice. Do not alter anything in your public_html folder after the due date unless you have made written arrangements to submit your assignment late. If you alter any file in any way, your assignment will immediately become subject to the standard late penalty. Your home page must be named root.html, and must show your name and handin code at the top. The file containing your form must be named form.html. It must display your name and handin code at the top. CS 200 HTML Assignment Page 7