Spring 2009 Kevin Cole Gallaudet University 2009.03.24 Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.24

Common mistakes <img ...> is an inline element. It MUST be contained inside a block element. Usually, this means inside a <p>...</p>. <img.../> is a self-closing element. This means there is no </img>. Tags for self-closing elements must be in the form <img .../> not <img ...>. Notice the slash near the end. <img.../> and <area.../> require alternate descriptions for blind users, and devices that cannot display images. Use alt="a description of the image or area" attributes. Anotther common block element is <div>...</div>. I'm fairly confident there are other possibilities as well. Self-closing elements are also called "emtpy" elements, or "stand alone" elements. Other self-closing tags include <br />, <hr />, <meta .../>, <link .../>, <area .../> A blind user will read or hear the alternate description instead of seeing the picture. So make the description clear.

Unordered List ... <ul> ... <li>Go shopping</li> <li>Make dinner</li> <li>Set VCR</li> <li>Do homework</li> </ul> ... Go shopping Make dinner Set VCR Do homework Lists are blocks, and list items are blocks inside of blocks. Notice the matching tags, and the nesting. (Draw the lines connecing the matching tags. They should not cross.) The pattern is: <ul>...<li>...</li>...</ul> with the middle tag pair (the li tags) repeated for each list item.

Ordered List ... <ol> ... <li>Go shopping</li> <li>Make dinner</li> <li>Set VCR</li> <li>Do homework</li> </ol> ... 1. Go shopping 2. Make dinner 3. Set VCR 4. Do homework Using the style sheet, you can change the way it numbers the list items. http://w3schools.com/css/pr_list-style-type.asp has a list of styles that you can apply to your list items.

Other problems File names for web pages: HTML file names end with .html CSS file names end with .css Use letters, numbers, hyphens, underscores, periods. Do NOT use spaces, quotes, apostrophes, parentheses, or other punctuation! Be careful about UPPER CASE (CAPITAL) letters. If your file name has capital letters, then your <a href...> and <img src...> must also have them. Many web browsers, operating systems and other software decide how to handle a file based on the file type (sometimes called the file extension). That is the part of the file name that is after the period. Different computers, and different human languages handle punctuation and spaces in an inconsistent way. When you click on a link that has a space in the file name, look at the URL in the title bar of your browser and try to find the space. Most web servers allow files with the same name, different case. For example: File.html file.html FiLe.html