HTML class I - Intro and References

Class Example Site

Why learn the Code?
If you've used a wyswyg (what you see is what you get) html editor, you may have discovered that it's not much more challenging than learning Word. That's because all the code is being written for you behind the scenes.

#1 Reason - Troubleshooting
  • "My document is double-spacing, and I can't seem to get it to just go down 1 line at a time."
  • "My table shows up fine in IE, but has disappeared in Netscape."
  • "I can't move the image to where I want it to go."
  • "My text is in one tall, narrow column that I have to scroll to see - how can I make it spread across the whole page?"

    Eventually, something will not end up looking the way you intended or something will go wrong, and you have no knowledge of how it got there, so you can't trace where the problem is. The solutions are usually simple, when you know what to look for.

    #2 Reason - Learning all your options
    By learning all about the various html codes, you will learn about all the options you have for a particular feature. So when you go back to your html editor software, you'll (1) be aware of the options you have and (2) be able to use those options, by knowing the code, even if you can't figure out how to make it work in the editor.

    What's the difference between a web page and a web site?
    A web page is just that - a single page. It can be a very long page, subdivided into sections, and may print out on several pages, but it has only one specific web address, pointing to one page. Example: http://www.musc.edu/ccit/helpdesk/training.html

    A web site is a compilation of pages for a central theme, idea, company, etc. A site contains several or more pages (from 2-2000 or more). A site includes pages that link to other pages in that site. A site can span more than one directory. It has one base URL (address - www.musc.edu), but can have many sub-directories. Example of a site:
    http://www.musc.edu/ccit/
    http://www.musc.edu/
    http://www.musc.edu/fanda/

    General guidelines:
    1. HTML is not like your word processor.
      - hitting the Enter key does not make a line break or repeat the previous action.
      - hitting the space bar 4 times does not render 4 spaces.
      - wysiNwyg - what you see is NOT what you get. There is a code for everything (at least what's possible so far), and code will surround your text throughout the page. You will have to use a code to make any "look" changes to your document - otherwise, you'll end up with one long line of text.

    2. Tags - All tags must closed (except <br> and <hr>)
            <b> opening bold tag
            </b> closing bold tag - close any tag with a forward slash, then the code name

      Example: <b>text to be bolded</b>

    3. Tag order - close tags in the order of most recently opened:
      <b><i>bold then italics</i></b> NOT <b><i>closing in random order</b></i>

    4. Tag case - html tags are not case-sensitive. However, other programming languages are, and who knows when html may be in the future, or if browsers will start being picky. So, as good practice, be consistent in the case you use. Don't mix upper and lower case in your tags.

    5. defining colors - when using the hexidecimal values, always precede the value with a # sign inside the quotes. If using a word, no # is necessary. It's best to use the hexidecimal values over words. Example: #0066FF (color is discussed more in depth in the "text" section; link to chart of hexidecimal values)
    ADA guidelines (section 508) - Web Accessibility Initiative (WAI) of W3C
    * W3C quick tips for acccessibility
    * ADA - Americans with Disabilities Act
    * Section 508 - Information Technology accessibility standards
    * Bobby - Site tester - will review your site and produce results of what is not compliant with the standards.
    * Visicheck Color checker - will show you what you page would look like to a color blind person
    * W3C - World Wide Web Consortium - they work on developing code and browser standards

    1. Visual obstacles when designing (color blindness, needing larger fonts, dyslexia, accessing from PDA, etc.)
      1. use relative font sizes when adjusting instead of set point sizes
      2. use contrasting colors in menus and background/text combinations (don't rely on lightness - try to use colors opposite each other on the color spectrum: black/white, blue/yellow - see article on Effective Color Contrast
      3. don't allow information to rely on color (i.e. "click the red button to confirm")
    2. Hearing impaired - if using audio files on your site, make sure there's a visual alternative to provide the same information
    3. Sight impaired or blindness - There are audio readers that read websites, make sure yours makes sense when read out loud
      1. link to readers for testing
      2. make sure links make sense if read out of context: "click here" is not clear; "download Netscape v. 6.1" is better.
      3. use <emphasis> and <strong> tags instead of bold and italics
      4. make sure headings are used in order (H1, H2, H3 - don't use them for text formatting)
      5. make sure lists follow a tier format (1, 1.1, 1.2, 2, 2.1, 2.2... not 1,1,2,2,1,2,3,1,2
      6. Flash based sites are not interrupted well or at all by audio readers; also flashing images and text can trouble some readers with medical conditions and dyslexia
      7. Frame-based sites are also difficult or impossible to interpret accurately enough to make sense to the user
      8. Be sure all images (buttons, pictures, graphics, charts) have alt tags to explain what they are and the purpose (if they link to something or describe something).
    4. Motor impaired - some users have systems that do not use a mouse, or use voice commands
      1. limitations here would be rollover effects - you can still use rollovers, just make sure that being able to see the rollover is imperative for the information to be received.
      2. check the tabbing order of your site - if you use the Tab key instead of a mouse, does the order make sense? Can you still select all your menu items?
      3. If you start with a flash movie, is there a way to get into the site without clicking your mouse?
    References
    1. web-safe color palette - http://the-light.com/colclick.html
      also Visibone - http://www.visibone.com/color/chart/

    2. Reference table of codes for special characters:
      http://www.natural-innovations.com/boo/doc-charset.html

    3. WC3 standards organization - http://www.w3.org/

    4. HTML online tutors:
      PageTutor.com
      Dave's Tutorial

    5. Web Guides and testers
    Class Outline

    1. Intro - show completed example for exercises; talk about general guidelines and ADA
    2. Creating a page (starting from scratch)
      1. Required parts of a page - html, head and body tags
      2. Text - formatting and attributes
        Exercise your knowledge

      3. Links - to outside sources, to images, e-mails, within same page
      4. Images - adding, referencing, properties
        Exercise your knowledge

        [mid-session break - 15 min.]

      5. Lists - order, unordered, definition
      6. Other - horizontal rule, special characters, learning more
        Exercise your knowledge

    3. Publishing - saving and site structure
      Exercise your knowledge
      Final Quiz!

    4. Cautions
    5. Q&A - workshop time
    Next --> Begin

    Class Outline      View Example Site