LESSON 5: STRUCTURAL TAGS

1. Study the index cards on Structural Tags. I've included a hard copy of these index cards, for your convenience. Be sure you can answer all the questions!
   • What's the basic structure of an HTML document? What type of information goes in each part of the HTML document?
   • What is the <TITLE> tag used for?
   • List two uses for the info inside the <TITLE> tag.
   • How do I insert COMMENTS in an HTML document?
   • How do browsers treat "white space" in HTML documents?
   • What extension(s) should you use for HTML documents?
2. Do Worksheet (W5.1) on Structural Tags. Here, you'll continue with the online tutorial.
3. Create a file for your homepage; save it as   index.htm
   (I'll refer to this as your "homepage file.")
   The "htm" that appears in the file name after the period (.) is called the filename extension; you can use either "htm" or "html" as extensions for your HTML files.
4. Put the head, body, and title tags in your homepage file. Choose an appropriate title!
5. CODING EXERCISE FOR THIS LESSON (8 pts):
   1. Set up your screen.
   2. Create the "shell" for any HTML document (HTML tags, HEAD with TITLE, BODY). Be sure to type all container tags in pairs, then go back inside and insert.
   3. The TITLE should be "Lesson #5 Coding Exercise".
   4. Insert a COMMENT at the top of the document, that has your name and today's date.
   5. Save the file with filename "test_lesson5" with an appropriate extension.
   6. Your name should appear, centered, when you pull the file into a browser.
   7. In your source code, type the (incorrect) command    <break>   in the middle of your centered name. BEFORE you pull this into the browser, you should be able to tell me what will happen!
   8. In your source code, after your centered name, type the (incorrect) command   <br<  . BEFORE you pull this into the browser, you should be able to tell me what will happen!
6. Many people like to note the last date that the file was modified somewhere near the top of their homepage. If you want to do this, type the following script (EXACTLY as shown here) inside the BODY container. This will automatically update the revision date, each time you modify your file. (You'll learn more about JavaScript later on!)

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write("Last Modified " + document.lastModified)
// -->
</SCRIPT>

   
7. Please read pages 22–25 in the Weasel book (up to "Choosing a Page Size"), and answer the following questions. Be sure to mark where you find the answers in your book, for 5 points on the Lesson #5 quiz!
   1. What is meant by the phrase "flexible design"?
   2. What are the four advantages of flexible design listed in your text?
   3. What are the three disadvantages of flexible design listed in your text?
   4. What is meant by the term "relative measurements"?
   5. What two things are mentioned that can be used to give a web page a flexible structure? Will we be studying these two things in this course?
   6. What is an "em"? What is the advantage of measuring text elements (like text height and line length) using units of "em"?
   7. Look carefully at the two bold sentences below. Then, make your viewing font-size larger. Does the "1em" font-size change? How about the "12 pixel" font-size? Now, make your viewing font-size smaller. Does the "1em" font-size change? How about the "12 pixel" font-size?
   
   This sentence has font size 1em.
   This sentence has font size 12 pixels.
   
   8. What is meant by the phrase "fixed design"?
   9. What are two advantages of fixed design discussed in your text?
   10. What are three disadvantages of fixed design discussed in your text?
   11. Your book says that fixed web page designs are created by putting all the contents of the page in a table with absolute measurements specified in pixels. An "absolute measurement" is something like "400 pixels wide," whereas a "relative measurement" is something like "50% of the current page width". (We'll study absolute versus relative measurements later on.) The question is this: is a fixed web page design REALLY totally fixed? Will 400 pixels look exactly the same on everyone's monitor? Or, is it really more of a "not totally fixed, but at least less flexible" web design?
   12. Does a fixed-width design completely solve the line-width problem? That is, can you write code that will guarantee that all lines will have width (say) 4 inches on every user's monitor?
   13. Can JavaScript be used to launch a window with specific pixel dimensions? What might be an advantage of doing this?
   14. What is a "pop-up window"? (Click here to see a sample pop-up window!)
8. Study the page that appears in the previous pop-up window example. Is this a fixed page design, or a flexible page design? How can you tell?
9. Study this web page (Lesson 5: Structural Tags). Is this a fixed page design, or a flexible page design? How can you tell?
10. What is a common user reaction to pop-up windows?
11. Do web pages need to be all-fixed or all-flexible? Or, is it possible to have a combination of the two?

• (8 pts) Coding part:
  1. Set up your screen.
  2. Create the "shell" for any HTML document.
  3. The TITLE should be "Lesson #5 Coding Exercise".
  4. Insert a COMMENT at the top of the document, that has your name and today's date.
  5. Save the file with filename "test_lesson5" with an appropriate extension.
  6. Your name should appear, centered, when you pull the file into a browser.
  7. In your source code, type the (incorrect) command    <break>   in the middle of your centered name. BEFORE you pull this into the browser, you should be able to tell me what will happen!
  8. In your source code, after your centered name, type the (incorrect) command   <br<
    . BEFORE you pull this into the browser, you should be able to tell me what will happen!
• (5 pts) Show me that you've marked the answers to all the questions in your text book!
• (24 pts) Questions from the index cards and reading (see below).
  There will be 14 randomly-chosen questions; you will cross off 2 questions.
  The remaining 12 questions are worth 2 points each.