Class Two: Hands On HTML

Browser = file viewer

  • from the internet Page Image
  • from your pc

    Why build a web site?

  • redundant content
  • electronic brochure shovelware
  • special interests, special audiences, vietnam site
  • fresh content / stale content

    What is a web site?

  • homepage webpage website

    What are file systems?

  • directory structure
  • files
  • images
  • growing pains

    HTML is a text file

  • word, wordpad, notepad
  • use your desktop

    The heart of HTML

  • What is a tag?
  • What is an attribute?
  • What your browser sees
  • HTML sandwich

    Getting started

  • HTML, HEAD, TITLE and BODY

    Comment

  • For your own sanity
  • For bigger, better browsers

    Formatting

  • Line breaks <br> Paragraph <p>
  • No Break <nobr>
  • Heading <h1> and Font Size <font size=+1>
  • Center <center>
  • Emphasize <em> and Italics <I>
  • Ordered Lists <ol> Unordered Lists <ul> Line items <li>
  • Definition Lists <dl> Definition Term <dt> Definition Data <dd>
  • Horizontal Rule <hr> attributes: width, size, noshade, color
  • Blink <blink> and <marquee>
  • Blockquote <blockquote>
  • Special Characters blank space and friends & ©
  • Preformatted text <pre>

    Simple Colors

  • silver, grey, maroon, green, navy, purple, olive,
  • teal, white, black, red, lime, blue, magenta, yellow, cyan
  • With the tag
  • bgcolor, alink, vlink, link
  • With the tag

    Anchors and links

  • Link in a document, Link to another document
  • Link text, link images
  • Link to sounds, flash movies, pictures, link to anything!
  • Link an e-mail address peter@911media.org
  • Directories!

    Frames

  • Frame examples good example
  • Why use frames?
  • <FRAMESET>
  • rows, cols
  • <FRAME>
  • name, src, marginwidth, marginheight, scrolling, frameborder, noresize
  • <NOFRAMES>
  • Nesting Framesets
  • Alternatives to frames
  • the Target attribute
  • _blank, _top, _parent
       -exercise- Build a frameset and make it link together.

    Simple Images

  • < img src > linking images
  • Attributes: alt, border, height, width, align Tables

  • It's all about tables!
  • absolute vs. relative tables
  • <table>
  • width, height, border, bgcolor, cellpadding, cellspacing, align
  • <tr> table row
  • valign
  • <td> table data
  • align, valign, bgcolor, bgimage, width, height
  • colspan, rowspan
  • border on for easy building)
  • table in a table (nested tables)
  • problems
      -exercise- Make a similar navigation bar using only HTML and text.

    Proper Syntax

  • Close your tag
  • Keep it neat
  • Troubleshooting

    FTP client demo

  • Fetch
  • WS_FTP LE

    Telnet demo

    HTML Editors

    Why should you use an editor?

  • reduce stress, future of your PC

    Why shouldn't you use an editor?

  • reduce stress
  • Behind the scenes

    Different kinds of editors

  • HTML editor - BB EDIT Homesite First Page
  • Visual editor - frontpage 2000 Dreamweaver
  • Page generator Hot Dog

    Learn from the web

  • View source code
  • Learn from the masters!
  • Imitate your favorite page

    Helpful links to HTML resources

  • Pick out a skinny book
  • "Visual Quickstart Guide HTML for the World Wide Web" by Elizabeth Castro