Web Dev “Be True to Your School” HTML Rubric in MS FrontPage:
Your Mission:
You are a typical high school student who happens to have a cousin moving into town. Your cousin happens to be the same age as you are, and you think they’re pretty cool.
Your Aunt and Uncle say that the school system is one of their top concerns for moving to the right neighborhood. However, they are undecided between neighborhoods in the Roswell HS area verses the Milton HS area.
Your task is to design a one page HTML document in MS FrontPage illustrating why your Aunt and Uncle should choose a Roswell HS neighborhood. The name of your web site should be “Roswell High School Rocks.” Remember that you have to convince your Aunt, Uncle, and Cousin to move based on how great a school Roswell is!
Get Started –
1. Create a new folder on your 852 drive called //CMW/RHS/
o Inside that folder, create an images folder //CMW/RHS/assets and
o Create another folder called //CMW/RHS/assetsBuild
2. Go out onto Google > Images and find an appropriate image that displays a positive aspect of Roswell HS.
o Save the image to your //assetsBuild/ folder
3. Open PhotoShop and resize the image to be no greater than a 300 width and/or 300 height
______
Build your HTML:
Now that you’ve set up you folders and created your image JPG, it’s time to write some HTML.
Remember: You have both your simpleWebPage index.htm file as well as Mr. Lee’s WebMonkeyCheatSheet.doc on his web site as well as www.webmonkey.com as resources to complete this project!
1. First, open MS Frontpage and save a new file under //CMW/RHS/ and call it default.htm
2. Your “Roswell High School Rocks” name should appear in both the <title> tag for the browser and <h1> tag for the page body.
3. Create a header <H1> and include the title of your page and place it as the first code inside the <body> tags
4. Next, type a short paragraph that tells us why Roswell HS is the better choice.
· Be sure to use the correct tag to open and close a paragraph.
· Note that the FONT of the web is Arial! TimesNewRoman is unacceptable!
5. Now, insert an image into the paragraph
· Be sure to set the align=”right”
· Don’t forget the ALT tag!
6. Now, code an ordered list with 3 items that describe why Roswell HS is the best choice.
· Be sure to use the correct tag for an Ordered/Numbered List!
7. Each item should have some text that directs the end-user to a website that describes the Roswell HS or some attraction nearby.
· Create a hyperlink (href=http://www.something.com) for each of the three item web sites. Note: These must work correctly!
8. Next, insert a horizontal rule
9. Now, add a new paragraph and include the following text under the <hr>, “this page designed and developed by John Travolta 08, RHS Developers, Inc. © 2009 all rights reserved.” Where John Travolta is your name and 08 is your workstation number.
10. Lastly, go back into the <head> tag area and insert your META tags for “keywords” and “description” Don’t forget this important item!
Remember that style and creativity are both a big part of this presentation.
See Rubric for specific instructions!
Make sure that you follow the Rubric VERY closely!
Roswell Rocks in HTML Rubric 1st Draft in MS FrontPage.
Expectations: / Grade· Good use of classroom time to do the assignment.
(On task working only on this assignment during class.) / 20
· The basic tags for HTML, HEAD, and BODY are correctly coded and correctly closed. Remember, every tag that you open must be closed! / 15
· Proper use of Title
· Proper META tags within the <head> tag for “Keywords” and “Description” / 30
· One paragraph describing “Why Roswell Rocks!”
· Correct use of the <p> tag / 10
· Proper use of image – aligned “right.’
· Be sure to add the alt=” “ tag that describes the image for end-users with disabilities! / 20
· An ordered bullet list with 3 items.
· Each item includes a hyperlink to information related to your dream / 15
· An example of Italic text
· An example of Bold text / 10
· Creativity and overall presentation style. / 40
· Horizontal rule with 2009 copyright and
“Roswell Developers, INC.
· Your name, the class name, and the class period / 10
· Turn your name into an email address hyperlink as follows;
<a href=”email:”>John Travolta</a> / 10
· Arial font – no Times New Roman Fonts! Arial is the font of the Web! / 10
· Final Project due...
o I will view your project on your screen for your grade. / 10
______
Total points available: / ______
200