Web Page Design: Exercises for Section 03

After you have completed reading section 03, try the following exercises. Answers are at the end.

  1. Use this linked text file to make an HTML file that will render like the following inside the table:

    2. Famous quotes

    • Always remember to balance tags.
    • It's easy to leave off closing quote marks.

    From the famous sayings of
    Jim Hurley

    Block Markup

    The best way to remember to balance tags is to enter the start and end tags before you enter the text to be marked up.

    For example, in making a definition list, first enter: 

          <DL> 
      </DL>

    Then go back and enter the items, like this:

    Markup:
    The process of typing tagged clues for a browser, so it knows what you want it to do with your text data.
    Rendering:
    The process whereby a browser formats a document and its parts subject to the author's tagged data.

    Careful indentation to show the balance of tags and the included data will help you avoid problems. This technique is especially helpful when making nested lists.

    These are all block-level markup elements:

    • P - paragraphs
    • DIV - divisions
    • BLOCKQUOTE - a block quotation
    • ADDRESS - address information
    • DL - definition lists
    • OL - ordered lists
    • UL - unordered lists
    • Headings:
      1. H1
      2. H2
      3. H3
      4. H4
      5. H5
      6. H6
    • PRE - pre-formatted text

  2. Using the Curry-flavored Fettucine markup from the last section's exercise, change the ingredient's from a paragraph with line breaks to an unordered list with a square bullet. Make the cooking instructions into an ordered list. Make the Heading level a little lower in priority to shrink the size.

  3. Repeat the last exercise using the Linguine with Basil Sauce markup from the last section's exercise.

  4. Once again, improve the markup for the Penne with Asparagus recipe.

Answers

  1. Here is one possible markup for the sample text.
  2. Here is one possible markup for the fettucine recipe.
  3. Here is one possible markup for the linguine recipe.
  4. Here is one possible markup for the penne recipe.

Go to Contents