Web Pages Published on WWW

As 20% of our grade, we will publish web pages on the WWW using a free web hosting account. We will have 5 different assignments during the term, each counting one fifth of the 20% portion of your grade (4% of final grade for each assignment). Each assignment will allow us an opportunity to practice what we have learned in the text. 

After completing each assignment, you will need to provide me with the URL to your new web page by signing the guestbook on our class web page that corresponds to our assignment number.

Be sure to check the grade sheet after you complete your assignments to make certain that you get all the points possible. Here is a list of the five WWW Assignments:

• Sign Guestbook #1

1. Create a web page on disk (save it with the name index.htm) 
2. Be creative with your web page. You can make it about anything you would like. Just be sure to include at least one of each of the following items in your web page. (HINT: Two points each) 
1. A title 
2. Something centered
3. Something left aligned
4. H1 Header, plus one additional header (H2, H3, H4, H5, or H6)
5. Some regular text
6. An ordered list
7. An unordered list
8. Something Strong
9. Something Bold
10. Something Italic
11. A copyright symbol
12. A bullet (middot)
13. An inline image (check out the graphics links on our class web page - when you find one you like, right-click it and save the image to your disk)
14. An animated GIF (check out the graphics links on our class web page - when you find one you like, right-click it and save the image to your disk)
15. A link to an anchor in your page
16. A link to a web page of your choice
17. Place all your graphic images in a folder named images on your site (and disk)
18. Use relative pathnames when you reference your graphic image(s)
19. Include a link to your email address so visitors can click to email you instantly
20. Use color text on your page (one with a reference to a color by name; Red, Green, etc.)
21. Use color text on your page (one referencing a color by its hexadecimal color value)
22. Use type with different sizes by specifying a font size tag.
23. Include a background image (Careful to pick one that will not distract from your page)
24. Be sure to include the ALT Property on one of your images.
25. Check your graphic images to make sure it doesn't take forever to load.
3. Set up a free web hosting account somewhere on the web. Here are some places to start: tripod, homestead, bizland, geocities, xoom, hypermart, angelfire.com.
4. FTP your files to your new account (download an FTP client if you do not have one installed) WS_FTP LE is a good shareware FTP client to use. 
5. Make sure your URL works and fix any problems 
6. Sign Guestbook #1 on our class web page, providing me your URL.

• Sign Guestbook #2

OPTION ONE:

1. Visit http://www.dynamicdrive.com and read about how to add a unique mouse pointer to your web page. Read all about how to copy and paste the required HTML code into your web page. 
2. Create a link off your page created in assignment #1 above that links to a second HTML file named page2.htm. 
3. Add one of the mouse pointers you learned about in step #1. 
4. Be sure to provide a link back to your main page. 
5. Create a graphic table on this second page as discussed in Tutorial 4. 
6. Be creative and modify the appearance of your table by changing the default border property. 
7. Vary the alignment of the information in your table. 
8. Use at least two different colors in your table. 
9. Use a second table to control the alignment of the page. Maybe a graphic on one side and the first table on the other. Just be creative. 
10. Sign Guestbook #2 on our class web page, providing me your URL to this second page. You will need to provide your URL, plus a slash and the page name (page2.htm). 

OPTION TWO:

1. Visit http://www.leigeber.com/2009/05/javascript-popup-box/ or Visit the site in a TinyBox and read about how to add a TinyBox JavaScript Popup Box to your web page. Download the code, read all documentation so you'll know how to add this effect to your page.
2. Create a link off your page created in assignment #1 above that links to a second HTML file named page2.htm. 
3. Add at least one link to a picture, video or Website that opens with the TinyBox effect you learned in step #1. 
4. Be sure to provide a link back to your main page. 
5. Create a graphic table on this second page as discussed in Tutorial 4.  You could have this table open in the TinyBox, if you prefer.
6. Be creative and modify the appearance of your table by changing the default border property. 
7. Vary the alignment of the information in your table. 
8. Use at least two different colors in your table. 
9. Use a second table to control the alignment of the page. Maybe a graphic on one side and the first table on the other. Just be creative. 
10. Sign Guestbook #2 on our class web page, providing me your URL to this second page. You will need to provide your URL, plus a slash and the page name (page2.htm). 

•  Sign Guestbook #3 

1. Create a link off your main page to a new page named page3.htm that uses frames from Tutorial 5. 
2. Be sure to include a link that opens in a second (or third) frame. 
3. Include a link that opens in a new browser window. 
4. Allow scrolling on at least one frame. 
5. Set up at least one frame that never allows scrolling. 
6. Be sure to include a link back to your main page. 
7. Sign Guestbook #3 on our class web page, providing me your URL to your frames page. 

 

• Sign Guestbook #4 
1. Create a link off your main page to a new page named page4.htm that collects information from your users in a form as discussed in Tutorial 6. 
2. Be sure to include a link back to your main page. 
3. Use at least one input box. 
4. Use at least one radio button with at least two choices. 
5. Use at least one drop-down list box with at least three items in the list. 
6. Use at least three check boxes. 
7. Use one comment box with plenty of room for a long winded visitor. 
8. Use a reset button so the user can clear everything and start over. 
9. Use the MAILTO action to submit the user's response to you via email. 
10. Sign Guestbook #4 on our class web page, providing me your URL to your form page. 

• Sign Guestbook #5 
(PICK ONE of the following two options for this assignments)

OPTION ONE:

1. Add a page (and link to it off your main page) that includes a JavaScript to tell the user how many days until your birthday. Keep in mind that the user could visit your page after your birthday. In this case, you'll need to add the number of days remaining for this year to the number of days during the next year, until your birthday. Don't just copy a script off the web that tells how many days, seconds, etc. old you are at this exact moment in time. Use the concepts we learned in our study of JavaScripts to create a script that will do the calculation. This is quite similar to the one we did in the book, but, the book simply offered the "Happy Holidays" message if the date was after Christmas. You will want to calculate the number of days until the end of the year, if it is past your birthday, then, add that number to the number of days from January 1 to your birthday.
2. Create a command button that performs some calculation for the user. You can make this very simple (just add two numbers together) or quite complicated (loan payment calculator). However, please don't copy a calculator script off the web and simply paste the code into your page. Use what we've learned about JavaScripts to create your own original calculation.
3. Add a group of option buttons to allow the user to select a background color on this page (at least two choices). You can use our class notes to refresh yourself on the syntax, but please don't just copy and paste the example I used in class.
4. Sign Guestbook #5 on our class web page, providing me your URL to your JavaScript page.

OPTION TWO:

1. Add a page (and link to it off your main page) that includes an embedded Google Map to some specific location - NOT the default location of Palo Alto, California.
2. Visit http://www.google.com/apis/maps to learn how to put Google Maps on your web site. You may need a geocoder - here's free one at http://geocoder.us. Complete documentation can be found on Google's site at http://www.google.com/apis/maps/documentation/.
3. Sign up for a Google Maps API key at http://www.google.com/apis/maps/signup.html.
4. Read the complete documentation and learn how to use the Google Map API to add at least one pin, marking a specific location on your map. Also, include an Info Window with a description of your choice (NOT "Hello World") - Here's and EXAMPLE. Also, add at least one pin marking another location. Also, make sure the user can pan the map - drag it to show a different view.
5. Sign Guestbook #5 on our class web page, providing me your URL to your Google Map page.