Jack Nilan            EMail : jacknilan@yahoo.com

Syllabus - Web Page Design - MP 4

Project 1 - Creating a Blog with Perl
  • To to the HTML Tutor (under Links)
  • Go to the Perl Tutorial - go to the lesson about creating a blog
  • Create a program that will let you add to a blog and read from a blog. You may password protect the writer or reader if you choose. You should decorate the blog outpyut page and input page
  • Put links on your front page to enter to the blodg and read the blog

Project 2 - The Scientist Project
  • Pick a scientist to do a web page about
  • You should use an external style sheet
  • You should have a biographical page and a page about what made the scientist famous
  • on one of your pages use JavaScript to Click Button and have the picture on the page change
    • To to the HTML Tutor (under Links)
    • Go to the JavaScript Tutorial
    • Go to Lesson 9 Click Here for Lesson
    • Create a page that a button that when clicked will change to a new picture - you should have at least 5 pictures sized the same

Project 3 - Embedding a Google Agenda
  • In this project we are going to work with Google Calendars and Google agenda
  • Create a Google email account if you don't already have one (try to get your name or as close to your name as possible)
  • Create a Google calendar (select Calendar on the top of the Google Frame or select more and pull down to it)
  • Create a calender and put some events on it.
  • Then embed an agenda on the front page of your web page.
  • Next to the calender click the down-arrow next to the calendar you want to embed, and select Calendar settings.
  • Go to Embed this calender - Click on customize the settings
  • Select Agenda and then fix the size
  • Copy the iframe code displayed in the Embed This Calendar section and paste this code into your website to embed your calendar.
  • If you look at the fron page of the Central Web site you will see a Google agenda that is automaticall fed from a Google Calendar. If you change something on the Calendar then the embedded google agenda is also changed.


Project 4 - The Historical Event
  • Pick an historical event to do a web page about
  • You should use an external style sheet
  • You should have at least 5 links to pages of your own
  • You should have a JavaScript Quiz using Lesson 12 in the JavaScript Tutorial - this Quiz is different then the other ones you have done
  • You should have the date and time written with JavaScript on your front page
    • Go to the HTML Tutor (under Links)
    • Go to the JavaScript Tutorial
    • Go to Lessons 2 + 3
    • Make the date and time come out on the front page of this project (and make it look good)
         Lesson on printing date here


Project 5 - Exploring Careers
  • Choose a career that you may want to go in to.
  • Create a web page about that career
  • You should use a style sheet for your pages
  • You may have pages about what the career is about, have pictures of it, what courses in college you would have to take, and why you think the job would be interesting. You can add any other pages you like. You must have 5 total pages.
  • You should have a Perl or a JavaScript quiz


Project 6 - The Zoo
  • In this project we are going to create a digital zoo - pick a continent or country and create a virtual zoo of the animals in that area.
  • On the front page we should have links to our other pages - as we mouseOver these links a picture on our front page should change (to find out how to use onMouseOver go to Javascript Lesson 4)
  • Also, on one of your linked pages you should have a Slide Show of the animals in your area
    • To to the HTML Tutor (under Links)
    • Go to the JavaScript Tutorial
    • Go to Lesson 5
    • Create a page that has an image that changes every 4 seconds - you should have at least 8 images
    • Another of your linked pages should flash random pictures of the animals in your zoo
    • Go to the HTML Tutor (under Links)
    • Go to the JavaScript Tutorial
    • Go to Lesson 7
    • Create a page that has random pictures changing every 3 seconds - there should be at least 6 pictures that are all sized the same
  • You should also have a JavaScript or HTML quiz about your zoo animals


Project 7 - The Phone Directory
  • To to the HTML Tutor (under Links)
  • Go to the JavaScriptTutorial - go to the lesson about creating a phone directory Click Here
  • Your directory should work if you use first or last name


Project 8 - The Phone Directory Challenge
  • In this project you will take what you have learned about HTML, Javascript and PHP and try to create a program, like the one above, except using PHP. You will have to look at the code in your other perl programs to figure this out!!
  • The problem with the program above is that someone can view the source on your page and see the phone numbers of your friends
  • Create a text box that receives a last name - send it to a Perl program in your cgi bin. Receive the name in a variable there. Then write perl code to write out the phone number for that person
  • If the name is not there print "Not on File"
  • Extra for experts - enter a first name or a last name and print out phone number for all people with that first or last name


Project 9 - Javascript Random Quote
  • In this project you will pick 25 of your favorite quotes and then will print one out on your page at random
  • Click her for code


Project 10 - The Puzzle Project

You should create a Puzzle program for a picture (can be a group of your friends of a team you are on or ...). You can take a look at it Here There is another example of a puzzle Here

Project 11 - Finding the Circumference

Write a program using Javascript that will find the Area and the Circumference of a circle, once you enter the radius. This code will show you how to find the circumference. Add another text box and have the area come out in it. You are going to have to study the code to make sure you understand it first. Make sure the page is good looking.

Project 12 - Sales Price Calculator

Create a button called check out
When this button is clicked on summon two windows
Window 1: Have a question that tells user to input value of the item
Window 2: Have a question that request the user to input the amount of sales tax
Have a sentence that displays the cost of the item, the sales tax, and your final price.
You can look at a working, unformatted model here

Study the program until you understand what is going on. The parseFloat command took the text and turned it into a number so that we could do the math.

Make sure the page looks good


Project 13 - Converting to Celcius and Fahrenheit

We are going to write a calculator that will take in a Fahrenheit temperature and convert it to Celcius. You will need only one input box and one output box for this program (similiar to the Circumference program).

Once you get that working, on the same page, but in a different form create a calculator that will take in a Celcius temperature and convert it to Fahrenheit. You will need a new form with its own button and a different function to do this.
Get one working at a time.


Project 14 - The Drag Game Project

You should use a Drag program in your program to create a child's game. Here. This can be used to drag words on maps or pictures to places.

Create a game like the ones at this site
Click Here


Project 15 - Javascript Games

You should go Here and modify two of the games for your web pages. Right mouse click and view Source to get the code. Change messages, change colors, change sizes, put them on good looking pages. You can put them on existing pages or your home page if you want (the fun form one is good for your home page - have people give you feeback and ....
Be sure to link them to your main page

Project 16 - The Tutorial

Write a web page that teaches someone about something. You can teach someone how to tie a tie, graph a linear equation, use the quadratic formula, how to write music, etc.
Your project should be substantial. You should showcase the skills you have learned combining HTML,CSS, Perl and Javascript. Make your page interesting and exciting.
Be sure to link them to your main page

Final Project 1
  • Create a web page about a subject of your choosing (so something that you are interested in - something you might study in college - topic must be educational). Your page should have the date and a counter on it. It should have a picture on the main page that changes randomly every 5 seconds. It should have a 10 question quiz in JavaScript or HTML. It should have a picture page that has a picture that changes when you click on a button (there should be at least 7 pictures). You should have at least 3 links off your main page to pages of your own design. You will be graded on meeting the above criteria and also on the looks and style of your pages.


Final Project 2
  • Again, create another web page about a subject of your choosing. Your page should have the date on it. You should have at least 3 links off your main page. The menu on the main page should have a color background that changes as you MouseOver it (see changing background of links on HTML tutor page). You should have a link to a picture page that has a picture changing randomly every 5 seconds (have at least 5 pictures). You shouls have a 15 question quiz that is corrected by JavaScript. Use any of the other skills that you have learned this year to make your final project interesting and educational.