1. You’ve learned lots of new things since the first day of class. This project will be a review of the HTML and CSS that you’ve learned.
2. Your project will include creating two separate webpages for a Halloween Fun Run coming up this weekend in Medford. The pages must be linked together. You will following these steps:
a. Download the following files to your computer:
b. Open up the halloweenrun.html file in both Firefox and Notepad.
c. Add the following sentence for the page description in meta-name=”description”
This Halloween Fun Run is for all Medford kids in grades 5-8.
d. Add the following keywords in meta-name=”keywords”
halloween fun run, medford ma, medford, medford schools
e. Change the title to Halloween Fun Run
f. Change the background image from haunted house.gif to halloween banner.gif
g. Change the body background color from black to orange
h. Change the font-weight of text from normal to bold and change the text color from white to black.
i. Change the <h1> color from white to black and use the following font-family: font-family: Impact, Charcoal, sans-serif;
j. Put the following text in your headline:
Medford Youth Cross Country Championship’s
1st Annual Halloween Dash
k. Create six separate paragraphs for the following information:
Open to all Medford 5th, 6th, 7th, and 8th graders
Sunday, October 30, 2011
Location: Hormel Stadium, start and finish next to McGlynn School
Course is 1 mile and will go around Riverbend Park.
Free! Costumes optional but encouraged. Prizes for top finishers. Candy for everyone!
Parental permission is required. Please click the image below for more details.
l. Post the remaining race times in the menu section in the same way as the first race is posted. Hint: you might want to copy and paste and then just replace the information with the following:
Second race
12:20pm
5th and 6th grade boys
Third race:
12:40pm
7th and 8th grade girls
Fourth race:
1:00pm
7th and 8th grade boys
m. You are going to link the halloweenrun.html page with the parentalpermission.html page. There will be a link from halloweenrun.html to parentalpermission.html so when you click on the link it will bring you to the other page. You are going to insert an image and use it as a link.
Recall the code for creating a link:
<a href=”http://www.whatever.com”>This is the link text that’s clickable</a>
Recall the code for inserting an image:
<img src=”nameofimage.jpg” />
Putting them together so the image is what’s clickable as a link:
<a href=”http://www.whatever.com”><img src=”nameofimage.gif” /></a>
n. The image that you will use is costumes.gif. Put that image on halloweenrun.html.
The image will go beneath the paragraph that you created before that says:
“Parental permission is required. Please click the image below for more details.”
Your link should go to parentalpermission.html. Instead of “http://www.whatever.com” the URL will be parentalpermission.html.
o. Once you’ve gotten the link to work you can begin updating parentalpermission.html. In the headline put “Parent/Guardian Permission Required”
p. In the paragraph write “Permission forms should be returned to your principal or you can bring them on race day.”
q. You’re going to embed the permission form and flier on the page. Click here to get the code.
Scroll down and on the right click”embed.” It’s under Share and Embed and near the Facebook and Twitter icons.
When the window pops up click the SECOND copy, not the first. You want to click copy that is under Embed this Document, NOT Share Fullscreen URL.
You will copy and paste this code after the last paragraph you created.
That code is basically an iframe, which we talked about awhile ago. It’s like a small window to another website from yours.
r. Please change the title of parentalpermission.html to Parental Permission. Replace “put your website title here.”
Congratulations, you’re done!
This is a real event! If you need community service hours and are interested in volunteering please let me know. It will be fun!