CS 101
Web Construction, Summer 2006, Instructor: Jeffrey Horn
COURSE ANNOUNCEMENTS (Friday,
June 30, 2006)
- What's REALLY New:
- FINAL PROJECT information below
- Not so New (Older Announcements):
- Assignment 7, Let's Male a Deal, (and the final assignment) is below
- Point breakdown for grading of Assign. 6 is now on the page below.
- Assignment 5, the interactive web page, is assigned. See below!
- Assignment 4, the teamwork project, is assigned. See below!
- Here is the Battleship (java) folder (zipped
or unzipped)! Download please, for in-class
exercise.
- QUIZ Monday, June 5, 2006. This will be that short,
on-line (WebCT), multiple choice question quiz, where you are given some
html source code and asked which of five web pages (images of web pages) it
would generate. And also, given an image of a web page, which of five
html source code files would generate that page...
- Assignment 3 is due Tuesday, June 6, 2006
- Assignment 2 is due next Wednesday! See below.
- Reminder that we have a short, first quiz today, Wednesday, May 24, near
the beginning of class:
- Open book, open notes, open computer, but do your own work!
- Best to bring your laptop so that you can take the quiz
electronically, but there will be a hardcopy version to do "by hand"...
- Format: You will be given an .html source code file
(a text file) with some error(s) in it. You will also be given an
image of what the desired web page. You will then be asked to edit the
html file and "fix it" so that it produces the desired web page. You
will be sent the "problem" html file by email at the start of the test, and
will be asked to email your "fixed" version to me (jhorn@nmu.edu)
at the end of the quiz. If you choose to take the paper version of the
quiz, you can simply indicate the fixes (clearly) on the printed version of
the html file, and turn that in.
- Material: <html>, <title>, <head>,<body> <p>, and
maybe <br> tags. (But NOT other tags we have covered, such as <img>,
<u>, <b>, <i>, or <a>. Those will be covered on
other quizes or
tests!)
Welcome to the class!
- Here is the syllabus...
- Assignment 1 is due Wednesday, May 24 end-of-the-day (short and simple).
See below for details.
- Reading:
- Browse Ch. 1 to see if there is any topic there that you don't
really know; read it!
- Read Ch. 2. That is the material we are covering now, in
the first week of class!
- Starbucks:
CONTENTS
LECTURE NOTES
ASSIGNMENTS
- Assignment 1 "First Web Page"
- Handed out Tuesday, May 23, 2006
- Due: Wednesday, May 24, 2006 end-of-day (12 midnight!)
- Goals: Simply a "hello world" type of programming assignment. So major goal is simply to get used to the "development environment", which includes creating, editing, and viewing your own .html file, using a text editor and a browser.
- Details:
- Create a single, simple web page consisting of a single .html file. (10 pt.s)
- Make sure it has original content in each of the following elements:
- Title (10 pt.s)
- Comments (10 pt.s)
- body (10 pt.s)
- Other features:
- Multiple colors (10 pt.s)
- Multiple paragraphs (i.e., use "<br>"!) (10 pt.s)
- Indentation (of at least one paragraph) (10 pt.s)
- Italicized text. (10 pt.s)
- Bold text. (10 pt.s)
- Underlined text. (10 pt.s)
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Just email me your html file... (jhorn@nmu.edu)
- Assignment 2 "Multimedia, Linked Web Page"
- Handed out Thursday, May 25, 2006
- Due: Wednesday, May 31, 2006 end-of-day (12 midnight!)
- Goals: Create a static web page with images and hyperlinks.
- Details:
- Choose your own topic for a web site. Create a web page (.html file) with the following properties.
- Other features:
- Left-justified elements (10 pt.s)
- Center-justified elements (10 pt.s)
- Right-justified elements (10 pt.s)
- Local image. (10 pt.s)
- Remote image. (10 pt.s)
- Link to a remote web page. (10 pt.s)
- Link to a local web page (with the local web page linked back to the main page). (10 pt.s)
- An image that is a link. (10 pt.s)
- Good style (indentation and some "main" comments at the top, including name, etc.) in your source file. (10 pt.s)
- A decent-looking web page. (10 pt.s)
- An animated gif. (10 pt.s)
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Example Code: Starbucks
- Turn-in Procedure: Just email me your web site FOLDER.. (jhorn@nmu.edu)
Assignment 3 "Map with embedded links...." - Handed out Thursday, June 1, 2006
- Due: Tuesday, June 6, 2006 end-of-day (12 midnight!)
- Goals: Create a static web page consisting of a map/image with localized hyperlinks.
- Details:
- Choose your an image of your own and use the image file as the background for your web page. Then add links to your web page that are localized on the image and that take users to additional information (e.g., images, remote web pages, local web pages) that give more information relative TO THE LOCATION (ON THE IMAGE) OF THAT LINK!
- Example: A campus map of NMU (as background) with (text) labels for several of the buildings (e.g., "Cohodas"). The text labels are actually hyperlinks, so for example if someone clicks on the label "Cohodas", they will be taken to a page of information relative to "Cohodas" (e.g., a short blurb about the building, or a photo of the building, or to the NMU president's web page, etc.). The text label "Cohodas" should be placed on or near the building in the image...
- Put your web page on the web! See "Turn-in Procedure" below.
- HINTS:
- The image can be a map, or photo.
- Use the "background" property we looked at in class (see page 39 of your textbook). This will allow you to have essentially TWO layers to your web page. The background will be your image, the foreground will be your links. Example: <body background = "nmu_map.gif"> .
- Since your image will be used to TILE the background, choose a fairly large image so that the upper left copy of the tiled image will take up most of the browser window, even when the window is maximized, and then place your links on THAT upper left copy of your image.
- Use "<br>", " ", and/or borderless tables to try to place your hyperlinks over the right spots on the image.
- Here is an example.
- TASKS:
- Suitable background image (10 pt.s)
- Public web page (i.e., put your assign. 3 on the myweb.nmu.edu or other server!) (20 pt.s)
- Four links, each of which can earn up to 15 points for a total of 60. For each link: (60 pt.s)
- (5 pt.s) Link is placed appropriately on image (e.g., name of person is next to the person in the photo).
- (5 pt.s) Link goes somewhere (i.e., it works!) .
- (5 pt.s) The linked information is relevant to the location on the image.
- Good style (indentation and some "main" comments at the top, including name, etc.) in your source file. And don't forget an appropriate "title" for your web page! (The one that the user will see in the browser window title bar. ) (10 pt.s)
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for this assignment: (jhorn@nmu.edu). (Please do not link your main web page (that is "index.html"or "default.html") on your myweb.nmu.edu account to your Assignment 3! This will make it harder for anyone to "steal" your assignment 3 code for themselves! If you email me the URL, I will be able to get to it, but it will be hard for others too! Think about how they MIGHT find it, though...)
Assignment 4 "Team Project: On-line Quest Book"
- Handed out Thursday, June 8, 2006
- Due: Tuesday, June 13, 2006 end-of-day (12 midnight!)
- Goals: Learn to work as a team on a large, multi-page website. Learn to edit and manipulate your own images for web page viewing.
- Details:
- Go to here and find the folder with your name. Download all three or four image files (.png format) to your local hard drive. These are the book pages that have been assigned to you.
- Edit your image files to make the easy to read. At a minimum, rotate them so that they are upright (some were scanned in upside down or rotated 90 degrees...), and crop them down to the actual book pages. You can also reduce their size/resolution, so they take up less memory, but this is optional. I'll award points only for the correct orientation and cropping. See grading guideline below.
- Create a web page for each image and put the image in the web page. Example.
- Then add links from each web page to other web pages from the book as called for in the book pages! In other words, if the book page says "If you choose _____ then turn to page X", then create a link there to go to the web page for (book) page X. This is most likely the web page of someone else in the class! Find them and find out the URL for that page.
- Put your web pages on the web! See "Turn-in Procedure" below.
- Coordination and Standardization. A big part of this assignment is coordination with other web developers (your classmates). Toward that end, it is strongly suggested that you:
- Agree on a standard folder name for your book pages. I adopted "QuestEbook" from Jack. Thus my pages are at "http://myweb.nmu.edu/~jhorn/QuestEbook".
- Agree on a standard file name for each web page. I started using the format "pageX.html". Thus if you wanted to link to the web page for page 4 of the book: "http://myweb.nmu.edu/~jhorn/QuestEbook/page4.html".
- Check your email for a message I sent with a list of NMU IDs for your classmates. You can use this to find their myweb.nmu.edu web pages and also to email them.
- Note that there are other standardization extra credit points. See grading guidelines below.
- GRADING GUIDELINES:
- IMAGE:
- Correct orientation (rotation) (5 pt.s)
- Cropped (5 pt.s)
- Placed on web page (5 pt.s)
- Sized well (that is, it fits in a max size browser window without need for scrolling, and yet is also readable...) (5 pt.s)
- Clear, easy-to-find forward links to subsequent web pages. Have to be well-placed, as in our example in class in which we used a borderless table to put link just to the (20 pt.s)
- Forward links to subsequent web pages WORK (e.g., if you get three of four links working, you get 15 of 20 pt.s). (20 pt.s)
- Backward ink straight back to beginning...(i.e., "http://myweb.nmu.edu/~jhorn/QuestEbook/page4.html"). (10 pt.s)
- Link back to previous book page (that is, if the story goes from page 20 to page 76 and you have page 76, you should have a link back to paget 20 for this task). (10 pt.s)
- TEAM COMPONENT: I will calculate the percentage of working links (or the percentage of working web pages) and multiply this by 20 points and add the result to EACH team member's individual grade. So, for example, if half of all the web pages work, then everyone gets 10 out of the 20 possible points... (20 pt.s)
- EXTRA CREDIT, TEAMWORK: Extra points if everyone standardizes on:
- Web page title (5 pts.)
- Background color (other than white!). (5 pt.s)
- Grading: Total 100 pt.s (well, 110 with full extra credit...) The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for this assignment: (jhorn@nmu.edu).
Assignment 5 "Dynamic Web Pages"
- Handed out Thursday, June 15, 2006
- Due: Tuesday, June 20, 2006 end-of-day (12 midnight!)
- BACKGROUND:
- Class code: Here is some good example code, from class, that will help you do this assignment.
- Dynamic Images: see pp. 167-169 of Reed text, and associated example code at http://www.prenhall.com/reed/Chapter9/pics.html
- Conditional execution (If-the-else statements): see pp. 195-205 of Reed text. Pay particular attention to "nested If's" and "Cascaded If's", and watch your {curly braces}!
- Details:
- Create a web page that does the following:
- Converts Celsius to Fahrenheit (20 pts.)
- Prompts the user for his or her age (in years!) (20 pt.s)
- Does the following based on age:
- If age > 16, show them an image from an NC-17 movie, else (10 pt.s)
- if 13 =< age < 17, show them an image from a PG-13 movie, else (10)
- if 8 < age < 13, show them an image from a PG movie, else (10)
- if 0 < age <= 8, show them an image from a G movie, else (10)
- complain that they did not enter a proper age! (10)
- Good style (indentation, comments, etc) in source code. (10 pt.s)
- Grading: Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for this assignment: (jhorn@nmu.edu). Keep it "secret"! (Next assignment we'll use a password.)
Assignment 6 "Two-Dimensionally Formatted Web Pages (frames)"
- Handed out: Thursday, June 22, 2006
- Due: Monday, June 26, 2006 end-of-day (12 midnight!)
- BACKGROUND:
- Details:
- Make your own web page (or take one you already have!) on whatever topic you like, and format it thus:
- Create at least five different panels (my own term) of content (5 pt.s for >= 5 panels), with at least one each of:
- text (5 pt.s)
- image (5 pt.s)
- list of links to related material (5 pt.s)
- Put all panels on the page at once using both horizontal and vertical dimensions. (In other words, at least two rows, and at least two columns.) (10 pt.s)
- Avoid a purely "rectangular array". In other words, have rows with varying numbers of columns and/or columns with varying numbers of rows. You can do this using nested frames and nested tables. The examples above include nesting. Look at the syntax of nesting very carefully! It is a bit intricate, but makes sense. (10 pt.s)
- Do the same page two ways: One using the table technique and one using frames. I want the same content on BOTH pages. (The above 40 pts., for detail items 2-4, times 2, for a total of 80 pt.s. I.e., 40 pt.s for the table version, and 40 for the frames version.)
- Create a master web page that is PASSWORD protected. The master page should have a link to each of the two web pages above. (20 pt.s, which means 10 for the master page with links, and another 10 for the password protection.)
- Grading:
- Page with tables:
- >= 5 panels total (5 pt.s)
- >= 1 text panel (5 pt.s)
- >= 1 image panel (5 pt.s)
- >= list of links panel (5 pt.s)
- Page with frames:
- >= 5 panels total (5 pt.s)
- >= 1 text panel (5 pt.s)
- >= 1 image panel (5 pt.s)
- >= list of links panel (5 pt.s)
- Master page:
- Link to both page above (10 pt.s)
- Working password protection (5 pt.s)
- Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for the master page and also send me the password!: (jhorn@nmu.edu).
Assignment 7 "Let's Make a Deal"
- Handed out: Tuesday, June 27, 2006
- Due: Thursday, June 29, 2006 in class
- BACKGROUND:
- All the files that might help you are here. This includes images for doors 1, 2, and 3, and a donkey!
- Start with the code that implements a single button that toggles a single door open and closed, which is in hw7toggle.html
- Details: Generalize the code so that there are three toggled doors, each separately operable from the others. This means a separate toggle button for each door. The doors should start out closed. (Note that there are images for each of the closed doors: 1,2,3) There should be one prize behind each. Two should be "booby" prizes (you may use the donkey!), but one should be a "valuable" prize. I want you to get an image of something valuable to you. So personalize that one and surprise us. That is all! Oh yes, and the doors should be in a single row on the web page, just like in the original show...
- Grading:
- Prize image (original, or unique), and works! (10 pt.s)
- Three doors all show up (10 pt.s) in same row (10 pt.s)
- Three buttons all show up (10 pt.s) in row below doors (10 pt.s)
- Buttons open and close associated doors (20 pt.s)
- Form-button-function-image work all work together, but individually for each door (in others words, form for button 1 calls function for door 1 which loads image for door 1, etc.) (20 pt.s)
- On the web, and works on the web (10 pt.s)
- Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for the page: (jhorn@nmu.edu). No need to password protect it!
PROGRAMMING Language: HTML, Javascript
Platform: NMU IBM ThinkPads OR Apple iBooks
TESTS AND QUIZZES
- All tests are open book and open notes. Some require your
notebook computer (I'll let you know ahead of time!) NONE are
"open neighbor"! (i.e., no help from others!)
FINAL
FINAL PROJECT:
- Create your own web site that incorporates as many of the following elements from class:
- JavaScript prompts (20 pt.s)
- JavaScript functions called from HTML form buttons (20 pt.s))
- Nested table (20 pt.s)
- Nested frames (20 pt.s)
- To earn the full 20 points for each, 10 pts for functionality, and 10 pts for smooth integration of function with purpose.
- Last 20 pts. is for overall look and feel (10) and good looking code (10) meaning comments and indentation.
