HTML and WEB DESIGN COURSE, 2003--2004 academic year: Lesson 5

LESSON 6: PARAGRAPHS AND MORE

  1. Study the index cards on Paragraphs and more. I've included a hard copy of these index cards, for your convenience. Be sure you can answer all the questions!
  2. Do (W6.1) on Paragraphs and more. Here, you will continue with the online tutorial.
  3. Practice with the paragraph tag, as follows. Call up SimpleText, and type the sentence "The quick brown fox jumps over the lazy dog." Copy it several times, then press the "enter" key several times to get some line breaks in your code. Then, highlight and copy your original paragraph, and paste it in below your line breaks. So, you end up looking at something like this:
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
    I'll call each group of sentences a "chunk."
    View the results in a browser. Do you get the space between your chunks? Do you get any indent at the beginning of the paragraph? Explain your results in a few words.

    Next, put a single <br> tag between the two chunks. View the result in a browser. Describe what you see.

    Next, put a second <br> tag between the two chunks. View the result in a browser. Describe what you see.

    Next, put a few more <br> tags between the two chunks. View the result in a browser. Do you get extra space between the chunks?

    Next, take the <br> tags out, and instead put each chunk inside <p></p> tags and view the result in a browser. Describe what you see.

    Next, put several "empty" paragraph containers (<p></p>  <p></p>   <p></p>) in between the two chunks. Do you get extra space? Comment.

    Next, revise your first paragraph tag to look like this:
    <p style="text-indent: 3em">
    and your second paragraph tag to look like this:
    <p style="text-indent: 6em">
    Describe what you see. (The style information goes only in the opening paragraph tag, not the closing paragraph tag.)

    Next, revise your first paragraph tag to look like this:
    <p style="line-height: 2">
    and your second paragraph tag to look like this:
    <p style="line-height: 200%">
    Describe what you see.
  4. Put some paragraphs and headings into your homepage file.
  5. Please read pages 25–28 in the Weasel book (from "Choosing a Page Size" to the end of Chapter 3) and answer the following questions:
    1. Is there agreement in the web community over which monitor resolution is safest?
    2. According to the statistics reported on the bottom of page 25, what is the most common monitor resolution?
    3. What do professional web designers tend to consider as the standard web page size, at the time of our text's publication?
    4. Try to determine the viewable width of your current screen, as follows:
      Type this code in SimpleText, and pull it into a browser:
      <hr width=500 size=10 noshade align=left>
      Note the width of the horizontal rule.
      Keep increasing the width by 100 (from 500 to 600 to 700 etc.) and note the varying widths.
      Try to find the width just to the right edge of your window.
      What happens when you make the width even larger?
    5. If you have a 640 x 480 monitor and are looking at a horizontal rule that has "width=800", what will happen?
    6. Suppose you've designed your page for an 800 x 600 resolution, and a current user has a 640 x 480 resolution. Will it likely look bigger or smaller to this user?
    7. In terms of your target monitor resolution, what is the difference between designing for, say, a professional business group, or for a public educational system?
    8. What does the phrase "above the fold" mean?
    9. What is the most important real estate of an entire web site?
    10. Even when a vertical scrollbar is visible on your homepage, will most users scroll down past the first screenful?
    11. List several elements that you might consider placing "above the fold" on a web site.
    12. Do all monitors display color in the same way?
    13. Suppose a monitor uses "24-bit color". About how many different colors can it display? (This will be discussed much more thoroughly later in the course.)
    14. Suppose a monitor uses "16-bit color". About how many different colors can it display?
    15. Suppose a monitor uses "8-bit color". About how many different colors can it display?
    16. What happens when colors from the 24-bit color space are rendered on an 8-bit monitor?
    17. What does the phrase "dithering" refer to?
    18. What is the "web palette"?
    19. What is the advantage of designing web graphics and HTML elements using colors from the web palette?
    20. Suppose you're concerned about users with grayscale or black and white displays. What should you do?
    21. What does the phrase "gamma value" refer to?
    22. Which tend to be darker, PC monitors or Macintosh monitors?
    23. Suppose a color looks deep and rich on a Macintosh monitor. What might it look like on a PC monitor?
    24. What is WebTV? When did it hit the market?
    25. Does a WebTV permit vertical scrolling? How about horizontal scrolling?
    26. Is there any way to see how your web page will look on WebTV, right from the comfort of your own computer? If so, how expensive is it?
    27. Should you worry about microbrowsers (like palm-top computers, PDAs, and cellular telephones) when designing your web site?



THE QUIZ OVER THIS LESSON WILL CONSIST OF:
Prepare for the quiz over this section by practicing below.
Questions are asked in random order.
You can generate a printable quiz with solutions.








How many problems would you like on the quiz? (31 max)