1. Source Code Formatting  & your assignments
    1. Most assignments from the textbook will utilize images.  There are several ways to include the images in your turned-in assignment:
      1. If you post the assignment to your own web site, you may simply link to the images however you like.  I will be able to see the images when looking at your site, and I will look at your HTML source code to see how you refer to the images.
      2. In "standalone" HTML files (or on your own web sites), you may use explicit (fully qualified) references in your page to refer to the images at http://instruct.tri-c.edu/rrichmond/html/exercises/tutorial.nn/casen/imagename.ext.  This way, all images will still be visible when I save your HTML source and view the page.
      3. If you used relative links to that were images copied from the class website to your development environment, you may simply mention in your email that you are using relative references to the images, and I will save and view your web page in an environment where those images are available.  You don't need to turn in your images.
    2. If your submitted assignment has multiple files, please zip-up your files.  Don't send me separate attachments for each file, and don't upload multiple HTML or image files. 
    3. In the HTML comment that identifies you and the assignment, please be sure to include
      1. your name,
      2. the course identifier (ITWM1010),
      3. the assignment number
      4. the assignment name or description (e.g. "Body Systems Web Site", "Tutorial 2 Case 4", etc.),
      5. the date, and
      6. any special notes about choices you made about options aspects of the assignment that are not revealed by the assignment description.
    4. Use the following techniques make your pages more uniform, and to enhance their readability and maintainability:
      1. Use block tag ID's and HTML comments to annotate the major structural sections of the page, such as the masthead, the footer, the main content, and various components of the main content (e.g. "toc" or "tableofcontents", "definitions", "productlist", etc.).
      2. When the masthead consists of several HTML elements, use a single <div> to lump them into one logical unit.  But if you really only need one <h?> tag, for instance, you can simply put your masthead ID on that tag.
      3. If the masthead and footer are well marked, and you use HTML comments appropriately, it is often not necessary for all of the main content to be collected in one <div> element.
      4. Use indentation to reveal the structure of your HTML.  There are many indentation styles, as some people prefer to put extra blank lines in the file when then change indentation levels, or to keep some nested tags (for example, <ol> and <li>) at the same indentation level.  We'll discuss specific indentation styles later in the semester as we discuss team development.
      5. Insert HTML comments freely, especially if a person reading your HTML code is likely to think "Huh? Why did they do it that way?"
      6. When there is a logo in the page header, make it be a hyperlink back to the home page of the site (and/or section of the site, as appropriate). There can certainly be more than one such link in the header, e.g. from an instructor's page back to the Tri-C home page, and back to the iWeb home page.
      (See the source code of the class home page, or even of this page, to see examples of these points.)
  2. Theme: Content vs Presentation
    1. <address>,<br />, and purity:
      1. The <address> tag is clearly about content rather than presentation.  But the components of a street address (number, street, city, state, zip, etc.) need to be formatted for presentation, and there is no provision for labeling each component.  Hence, additional formatting HTML tags (e.g. <br />, which is critical, but is really all about presentation)  have to be deployed within an <address> element.  This is one example of the notion that HTML is not ready for a complete separation of content and presentation.  It is certainly possible to move in that direction, but separating content and presentation is still an imperfect art in HTML.
      2. XML and XHTML have provisions for the page author to create structures such as <line1><line2><city><state><zip> as subordinates of <address>, and to supply styles for those custom tags.  So be aware that such provisions are coming in HTML, but they really aren't readily available at this point.
    2. The <b> and <i> tags are clearly about presentation, not content.  But they are still used regularly, even by people who believe strongly in the separation of content and presentation.  Here's a rationalization for their use in certain situations:
      1. When an entire sentence, paragraph, heading, or section of the site is to be highlighted, then use a "logical" tag (such as <h?>, <address>, <cite>, etc.) that normally provides highlighting, and, if you want to control the highlighting, use styles that apply to that tag.  (i.e. Don't use the "formatting" tags.)
      1. When a single word or letter is to be emphasized, try to use <em> or <strong>, which describes the text as needing emphasis, but doesn't explicitly say how to emphasize it. (Normally, <em> is italicized, and <strong> is bold.)
      2. Use <i> or <b> only on short text clips where you know you want that kind of emphasis.
  3. Jargon 
    We often use the terms "head" or "header", "content", and "body", to refer to components of the visible content of a page .  That is, the web page, as viewed by the user,  is likely to contain information that the user would characterize as a "header", a "body" and a "footer".   But web pages have required "<head>" and "<body>" elements that don't correspond to what the user sees as the page header and page body.  So the following jargon is often employed
    1. A  "masthead" is the graphic at the very top of a page, and is typically consistent across an entire site, or significant sections of a site.  The term "masthead" is also used imprecisely to represent the entire page heading, including links and a page title, as well as the graphic.   Though it is not precise, at least "masthead" isn't confused with the "<head>" element. 
    2. The word "content" sometimes refers to "everything that the user sees", and sometimes just refers to the information that is distinct from the header, the footer, and other navigational elements. The terms "main body", "main content" or even "meat" refer to the latter meaning.
  4. Inline images; the <img> tag, and its attributes
    1. src = image source
      1. This is essentially the same as the "href" attribute of the "a" tag (and it is unfortunate that those two attributes don't use the same name).  The source reference may be relative, absolute, or fully specified, just like hyperlink references, and the source reference doesn't have to refer to an image file.  It may refer to a script that returns an image.
      2. The "standard" image types are .gif, .jpg, and .png.  Some browsers can display others (such as .bmp and .tif, for example), and other browsers cannot. 
    2. border = # of pixels
      1. By default, there is a one-pixel border that is normally white and invisible. But if the image is part of a hyperlink, the border will take on the hyperlink text colors (typically bluish and reddish), depending on whether the image has been visited.
      2. In most cases, if the image is hyperlinked, the border will be set to zero. Although the HTML border attribute is deprecated in favor of styles, it is common to specify border="0" in this circumstance.
  5. Entities
    1. The entities I expect you to memorize are almost, but not exactly, the same as in table 1-29 on page 39 of the book:
      SymbolCodeNameDescription
       &nbsp;&#160;Non-breaking space
      <&lt;&#60;Less-than symbol (left angle bracket)
      &&amp;&#38;Ampersand
      >&gt;&#62;Greater-than symbol (right angle bracket)
      ©&copy;&#169;Copyright mark
      ™&trade;&#153;Trademark symbol
      ®&reg;&#174;Registered trademark symbol
      ·&middot;&#183;Middle dot
      •&bull;&#149;bullet
      –&ndash;&#150;en-dash
      π&pi;&#960;Pi
    2. Non-breaking spaces have two uses that are both superceded by styles, but that are still in very common use:
      1. To prevent word-wrapping from occurring within a phrase or multi-word name or title.  In this case, the entity &nbsp; replaces a space character, and
      2. To force extra horizontal spacing, since multiple whitespace characters are compressed to a single whitespace character. 
    3. Note that some entities are defined in the HTML standard, some are supported by convention, some are really extended ANSI characters (and thus will vary from character set to character set), and some will be the same (with slight font variances) in different character sets.