Review of HTML

1
Review of HTML

• (adapted from Guthrie, 1-6-99)

2
HTML Issues for E-Commerce

• why need to know HTML code?
• what is HTML?
• common HTML tags
• WYSIWYG authoring tools

3
Why Know HTML Code?

• new technologies start out as code, no tools
• HTML (early days), JavaScript, Java, ASP, XML
• helps to know HTML code to insert ASP or
  JavaScript into a HTML file
• if can read code, can copy clever ideas
• authoring tools dont give as much control
• highest paid professionals use HTML editors

4
What Is HTML?

• Hyper Text Markup Language
• hyper means much greater
• hypertext has hotlinks to other material
• markup language
• tells computer how/where to display content
• word processing programs use their own markup
  languages
• were visible (show codes), now hidden

5
Basic Document Structure

• Your Title
• This is where your content goes.

6
Text Manipulation

• paragraph (dont need to close)
• - attributes can align left,
  right or center (use to close)
• 
  break - break in text flow (less space
  between lines than with )

7
Hexadecimal System

• computer data is stored in bits 0s and 1s
• 8 bits 1 byte
• 00101010 (decimal 42) B
• hex is easier to read (2 hex digits 8 bits)
• hex digits run from 0 to 9, then a to f
• 00 smallest 2 digit hex (decimal 0)
• ff largest 2 digit hex (decimal 255)
• 00101010 is 2a in hex

8
Colors

• human eye sees 3 colors Red, Green, Blue
• computers have RGB monitors
• all colors you see based on R, G B levels
• HTML uses 2-digit hex for colors
• 000000 ? (no R, no G, no B)
• ffffff ? (full power on all 3 colors)
• 808080 ? (half power on all 3 colors)
• ff0000 ? (full power on ?)

9
More Text Manipulation

• overrides body font
  characteristics
• n is a number between 1 and 7 (largest)
  indicating size
• rrggbb is 3 hexadecimal numbers representing the
  red, green and blue color intensities
• can use common color names e.g. red, blue, white,
  etc. but page loads more slowly
• italic text
• bold text
• underlined text

10
Even More Text Manipulation

• Header 1
• h1 is the largest header, h6 is the smallest
• opposite from font size numbering
• automatic new paragraph (and new line after)

11
Lists

• Ordered List (numbers)
• 2. list item
  4. list item
•  Unordered List (bullets)
• • list item
  • list item

12
Horizontal Rules

•  
•  
•  
•  
•   

 horizontal rule thickness width on page
alignment color
13
Paths, Filenames Extensions

• www.csupomona.edu/rdwestfall/451w2001/index.html
• path www.csupomona.edu/rdwestfall/451w2001/
• file or filename index.html
• index.html is default (opens if no filename
  provided)
• file extension or type html (or gif, jpg, etc.)

14
Hyperlinks

• Basic Hyperlink (hotlink)
• text you want
  to use for a link
• case is critical on many servers
• save yourself a lot of trouble always use
  lowercase in paths filenames

15
Images

• where ext is usually gif or jpg
• To align images use align"left" (or right)
• text wraps around other side of image
• other alignments dont wrap text

16
Page Color Scheme

• "image.gif" if in same directory

to change the background color image
(wallpaper) background change the color of
the text
17
WYSIWG Authoring Tools

• Full features
• Dreamweaver
• FrontPage 2000
• HotMetTal Pro
• Limited capabilities
• Composer (comes with Netscape)

18
Exercise 1

• click hotlink in IE, then View Source
• add some text
• experiment with code from these slides
• colors, sizes, lists, etc.
• add free web graphics from Clipart.com
• backgrounds
• images (experiment with alignment)