What You'll Produce

You will create an HTML5 web page with a recipe.

Step-By-Step

1) Open this zip file which contains the text and an image for a recipe.

2) Paste the text into an HTML document. Save it in your project-portfolio folder as 02recipe.html

3) Create another folder inside your project-portfolio and name it "images". Move the image from the zip file to this folder.

4) Mark up the text with some of the elements we’ve learned so far. At a minimum you should include headings, paragraphs, lists, images, links. Don't forget your basic structure (doctype, html, head, title, body)

5) Link to this new page from your Project Portfolio index.html

6) Your document should validate.

7) Your work should be synced to GitHub by the start of class on Monday, September 15. If you need to use a lab computer to sync, we will have time for that at beginning of class.

8) I would encourage you to work through this as you revisit the readings from Learning Web Design; markup makes more sense when applied to a specific task.

Important

• Your tags must be lowercase
• Don’t forget to close your tags, except for <br /> and <img />
• Test your links to make sure they work!

Delivery

When you have completed this project, commit it to your GitHub Project Portfolio repository. Don't forget to add a link to this new page from your index.html page!

Rubric

	Full Credit	Partial Credit	No Credit
Basic Page Elements	Page includes all required structure tags, including Doctype, Head, Title, and Body. All tags are properly opened and closed	Page missing more than two of the required structure tags and / or tags are improperly closed	Basic structure tags are all missing or improperly closed.
Code syntax / style	All tags are closed. Correct syntax of paragraphs, headings, and list items All tags are lowercase All attributes correctly include quote marks	Some tags are closed Mostly correct syntax of elements Some tags are lowercase Some attributes include quote marks	No tags are closed Fully incorrect syntax of elements No tags are lowercase Missing quote marks for attributes
Code structure	Images are correctly included, organized into separate "images" folder Images have "alt" attributes All links work Lists, paragraphs, and headings are used appropriately	Images are somewhat correctly included, not organized into images folder Images are missing "alt" attributes Some links work, some are broken. Lists, paragraphs, and headings are used somewhat appropriately	Images are broken Images are missing "alt" attributes Links are broken Lists, paragraphs, and headings are used inappropriately / incorrectly
Submission	Project validates Project finished on time Project uploaded to GitHub	Project has some validation errors Project submitted late or not uploaded to GitHub	Project has many validation errors Project is never turned in

Credit

Tim Lockridge, COM372 Fall 2013