An Introduction to HTML

1
Chapter 6

• An Introduction to HTML
• Pages 169-180

2
Tag Nesting

• You can put two tags together to combine the
  effects
• ltBgtltUgtBold and underlinedlt/Ugtlt/Bgt
• But make sure the inner opening and closing tag
  are entirely inside the outside tags as shown
  above.
• This is wrong
• ltBgtltUgtBold and underlinedlt/Bgtlt/Ugt

3
Font size and color

• ltfont colorredgt will change font color
• There are 16 named colors on page 172
• ltfont size2gt will make font bigger
• ltfont size7gt will make font size 7 (the sizes
  go from 1 to 7)
• ltfont colorblue size-1gt will change font
  color and font size
• Closing tag is always lt/FONTgt

4
Colors

• Font Color
• Font tags can use color name or hexadecimal code
• ltFONT colorFF0000gt
• With the hex codes, you can use all 16 million
  colors, BUT
• Not all colors display the same in every browser
• Browser Safe Colors
• 216 colors which display essentially the same in
  any browser
• Dithering
• Technique of mixing colors to reach a color
  between the colors a browser can display
• See link Ch 6d for an example

5
Font face

• ltfont faceArialgt will change font to Arial,
  but only if the viewers computer has that font
  installed

6
Font types

• Serif or Sans-Serif
• Serifs are the little points at the corners
• Serif example
• THE
• Sans-Serif example
• THE

7
Font types

• Proportional or Monospaced
• Monospaced characters are all the same width,
  like this
• iiiii mmmmm wwwww
• Proportional fonts are narrower for some letters,
  like this
• iiiii mmmmm wwwww

8
Font face

• Good platform-independent font face lists
• ltfont faceArial, Helvetica, sans-serifgt
• ltfont faceTimes New Roman, Times, serifgt
• ltfont faceCourier New, Courier, monospacedgt
• Browsers try the fonts listed in order

9
Tag Attributes

• The structure of an HTML tag may contain one or
  more attributes like this
• lttaggt
• lttag attributevaluegt
• lttag attributevalue attributevaluegt

10
Align Attribute

• ltP align"center"gt
• Centers a paragraph
• ltP align"right"gt
• Right-aligns a paragraph
• ltP align"left"gt
• Left-aligns a paragraph (the default setting)
• Align works the same on header tags
• ltH1 align"center"gt
• ltH2 align"center"gt
• And so on

11
Hypertext Links

• To make hypertext, use the anchor tag
• lta href"http//www.yahoo.com"gtClick here to go
  to Yahoolt/agt
• Text becomes blue and underlined (unless you
  specify some other color for links in the BODY
  tag)
• If you omit the http// the link goes to another
  page on your site
• lta href"page2.html"gtClick to see page 2lt/agt

12
Page Properties

• Attributes for BODY Tag
• text
• Color for the text in the page
• bgcolor
• Background color for the page
• link
• Color for the hypertext links
• vlink
• Color for the visited links
• alink
• Color for the active link