Comm 244: Design for the World Wide Web

Week 2

Notes

Homework

Reading

Required Reading

Learning Web Design:

  • Chapter 5:
    • Pages 88-97, "The Inline Element Roundup": There are a lot of details here. Just quickly review this section and don't worry about memorizing.
    • Pages 98-102, "Generic Elements (Div and Span)": Important!
    • Pages 105-108, "Character Escapes": Quick review
  • Read Chapter 6. Work through the exercises if you're confused about linking
  • Read Chapter 11: pages 239-245 (stop at "The Big Concepts")

Online:

Optional Reading (read if you need more instruction)

The w3schools.com site offers several tutorials which allow you to practice HTML in your browser. If you are confused by the reading, try working through some of these examples.

Lynda.com has an HTML Essential Training video course. There are several useful videos from the Hyperlinks chapter.

If you are still a little bit fuzzy about absolute and relative URLs, work through the exercises from chapter 6 of the textbook (6-1 – 6-8).

Exercises

Make sure to review the notes from class posted above in the notes section.

Choose Two Recipes

Choose two recipes that you want to feature for this class. Your recipe should have the following information:

  • A short description of the recipe and what is good about it as well as how it can be categorized (meal type, vegetarian, vegan, gluten-free, etc.)
  • A photo
  • A contributor (that's you)
  • Ingredients list
  • Instructions
  • Citation URL for where your recipe was adapted from

If the recipe is taken from another website, you must modify it to use your own words. You must also give credit to the website.

Choose One Cooking Tip

Choose one simple cooking tip. This can be instructions on how to cut or prepare a specific fruit or vegetable, ingredient substitutions or some other tip.

Mark up the pages for the Recipe Book

Using the spicy-thai-kale-salad.html page we worked on in class, mark up the following pages from your recipe books folder:

  • index.html
  • about.html
  • contributors.html
  • recipes.html
  • tips.html

Areas marked with square brackets [] mean you should write some brief content.

Use the following criteria for your markup.

  • Use semantic markup for each page
  • Every page should have a working navigation list at the top (just like we did in class)
  • All pages should have an appropriate page title
  • The lists of recipes and tips on their respective pages should link to the appropriate recipes and tips.
Mark Up Your Recipes and Cooking Tip

Complete the following with both your recipes and your tip:

  • Using proper HTML5, completely mark up your recipes and cooking tip. Use recipes we went over in class as a template. Name your files using good file naming practices we discussed in Week 1. The name should relate to the recipe/tip itself.
  • Save the recipes in the recipe-book/recipes/ folder. Your tip should go in the recipe-book/tips/ folder. Upload the entire recipe-book folder to your Simmons web space.
Check Your Work

Make sure to check that all of your pages are accessible and work.

  • Open a browser and visit each page to make sure it is working correctly
  • Ensure that all the links work
  • Make a link to the Recipe Book website from your class home page.

Blog Assignment

Read the following:

Write a post about what you learned. What is semantic markup? Why should we use it? What, if anything, does semantic markup discussed in the two articles have to do with Section 508?

You should create a new html file for your post named blog2.html and save it in your class website. Mark up your post with proper HTML. Make a link to it from your class index or week2 page under the Week 2 heading. Upload all updated files to your Simmons web space.

Classes

Projects

Contact