HTML 1 - Assignment 4

This week you will learn a variety of new HTML tags. You will also investigate the intricacies of HTML vs. XHTML and learn more about web page validation. Here is a list of the week's assignments:

• use new tags in your web site - 10 pts.
• critique a web site - 3 pts.
• contribute to message board - 2 pts.
• quiz 2 - 10 pts.

Tip of the week: Never double-click a file in your FTP application. (It doesn't do what you think it will do.) Use your FTP application ONLY for transferring files between your computer and the server.

Preparation:

1. Online lecture:
   HTML 1, Week 4 - More HTML tags and validation
   
   
2. Text: Chapters 3, 6, and 7. As always, I strongly recommend that you carry out the hands-on exercises suggested in the text.
   
   
3. Handout: Tags you should know by the end of Week 4
   
   
4. Week 3 Review - PowerPoint presentation covered in online lecture (.pdf format)
   Week 3 Review - PowerPoint presentation covered in online lecture (.txt format - accessible)
   
   
5. This week you will be responsible for the following HTML elements. Do not use any that are not on this list.
   • basic elements: html, head, body, title, and meta
   • block elements: p, h1-h6, pre, blockquote, ul, ol, and li
   • inline elements: a, strong, em, br, and q

Validation Issues:

To save yourself a great deal of time and frustration, please read the "Validation Issues" section of Assignment 3 again. All of the comments there are still relevant.

The rules for nesting block and inline elements are stated clearly on pp. 253 - 254 in your text. These pages will be your best friends for a while! In particular, note that (as stated on p. 254) only block elements can be nested directly inside a blockquote, and that the text repeatedly violates this rule in the Chapter 3 reading. Again, this means that neither text nor inline elements may be nested directly inside a blockquote.

As for the "pre" element, you just need to know that you cannot nest any other block elements inside it. (This is just like "p" and "h1" - "h6".) Also, you cannot nest an img tag inside "pre".

For an exhaustive (but possibly confusing) chart of XHTML nesting rules go to http://www.cs.tut.fi/~jkorpela/html/strict.html. This is the web page that I refer to when I am unsure of a nesting rule. However, if you go there and find it more confusing than helpful, don't worry about it. You'll learn this stuff!

For Credit (25 points total):

1. Use new tags in your web site. - 10 pts. total
   
   
   1. 2 "strong" tags - .5 pt.
   2. 2 "em" tags - .5 pt.
   3. a "pre" tag - .5 pt.
   4. an "hr" tag - .5 pt.
   5. 2 "br" tags - .5 pt.
   6. a "blockquote" tag - .5 pt.
   7. an unordered list - 1.5 pts.
   8. an ordered list - 1.5 pts.
   9. your pages must validate - 4 pts.
      
      
   Also, in order to receive credit for this assignment your nav bar must still meet the nav bar requirements given in assignment 3. (In other words, your best bet is to leave it alone.)
   
   You will notice that neither "pre" nor "hr" is explained in detail in the text, although they appear in the "Element Soup" on p. 116. You'll have to experiment with the "hr" tag, but a previous student developed an excellent document explaining the "pre" tag.
   
   Upload your new web pages to the server, and send me an email. In the body of your email you should state (1) the URL of your web site (this should end with "index.html"), (2) whether all of your pages validate or not, and (3) the web page on which each of the required elements can be found. The subject should be "HTML 1 4.1".
   
   
2. Email me a critique of a web site listed as one of "The Best of the Web." Use the subject "HTML 1 4.2" - 3 pts.
   1. With any standard search engine, search for "Best of the Web".
   2. Go to any of the listings and examine some of the sites listed. Warning: some of the "Best of the Web" listings contain pretty bad web sites. If you don't like what you see, go to another list. It may take a while, but sooner or later you should find something worth discussing.
   3. Pick one of the sites that interests you, investigate it thoroughly, and answer the same questions you answered in assignment 1.3.
      
      Name of site:
      
      URL of site:
      
      Do the pages load quickly?
      
      Is information concise and easy to read?
      
      Is site easy to navigate?
      
      Are pages interesting? Why or why not?
      
      Do the graphics and colors enhance or detract from the site?
      
      Would you understand the site if the graphics were missing?
      
      Any other comments?
      
      
   
   
3. Participate in the Week 4 Discussion on the Message Board - 2 pts.
   
   
4. Take Quiz 2 on lessons 3 and 4 - 10 pts.
   
   Quizzes are open book and open notes but you should not talk to anyone or use your computer for anything else except to take the quiz itself. There is no time limit. You may take the quiz a second time if you like, but I will count only your first submission.
   
   
   
   

Return to Top