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!
   • What are the typical effects of putting text inside the <p> </p> container tag? That is, what is typical formatting for a paragraph structure in HTML?
   • How can you get EXTRA vertical space between paragraphs?
   • If you use empty paragraph container tags <p> </p> between paragraphs, will this give extra vertical space?
   • Write the code that will give a 3em indent on paragraphs.
   • Write the code that will give you double-spacing; that is, extra space between lines.
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?

• Write the code to produce the following:
  

  This is a first-level heading.

  This is a second-level heading.

  This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph.

  This paragraph has a 0.5 inch indent. This paragraph has a 0.5 inch indent. This paragraph has a 0.5 inch indent. This paragraph has a 0.5 inch indent. This paragraph has a 0.5 inch indent. This paragraph has a 0.5 inch indent.

  This is a double-spaced paragraph. This is a double-spaced paragraph. This is a double-spaced paragraph. This is a double-spaced paragraph. This is a double-spaced paragraph. This is a double-spaced paragraph.

  ---

  The horizontal rule above is 100 pixels wide, 10 pixels high, solid, and left-aligned.
  
  
• (5 pts) Show me that you've marked the answers to all the questions in your text book!
• (30 pts) Questions from the index cards and reading (see below).
  There will be 19 randomly-chosen questions; you will cross off 4 questions.
  The remaining 15 questions are worth 2 points each.