DePaul University

1
DePaul University

• SNL 262
• Web Page Design
• Chapt 11 - Custom Background And Colors
• Instructor David A. Lash

2
Color Attributes For Body Tags

• BODY Tag has specific attributes to set up the
  colors on your web page
• Background Color
• ltBODY BGCOLOR"TEAL"gt
• Link Color
• ltBODY LINK"BLUE"gt
• Recently Visited Links
• ltBODY VLINKS"RED"gt
• Links Briefly blink when someone visits them
• ltBODY ALINK"PINK"gt
• Put it all together
• ltBODY BGCOLOR"TEAL" LINK"BLUE"
  VLINKS"RED" ALINK"Pink"gt
• Click here for example
• http//www.depaul.edu/dlash/extra/Webpage/example
  s/11Example1.html

3
16 Standard Colors

• You can select from 16 standard named colors
  that include
• black, white,red, green,
• blue, yellow, magenta (aka fuchsia),
• cyan (aka aqua), purple, gray, lime,
• maroon, navy, olive, silver and teal.

4
Mix Match Colors

• The RRGGBB Format many colors possible.
• ltBODY BGCOLOR008800"gt
• http//www.24hourhtmlcafe.com/hour11/tileroom.h

Amount of Red (from 0-255)
Amount of Green (from 0-255)
Amount of Blue (from 0-255)
5
But Why Only 2 Digits

• Intensity of RED, GREEN, or BLUE made in
  HEXIDECIMAL
• 255 xFF - Says 100 of the intensity.
• 204 xcc - Says 80 intensity.
• 153 x99 - Says 60 intensity
• 102 x66 - Says 40 intensity.
• 51 x33 - Says 20 intensity.
• 00 x00 - Says 00 intensity.
• So what would these be
• ltBODYBGCOLOR00FF00"gt
• ltBODYBGCOLOR0000FF"gt
• ltBODYBGCOLOR000000"gt
• ltBODYBGCOLORFF00FF"gt

6
But Why Only 2 Digits

• Here is a Table of Decimal to Hexidecimal
  conversion
• http//www.depaul.edu/dlash/extra/Webpage/example
  s/11decTohex.htm
• Here is a complete color chart
• Browser Safe Colors - there are only 216 colors
  are common between the color palette of MACs,
  Win95 and Windows. (AKA Browser safe)

7
Background Images

• You can use an external file for "wallpaper" or
  background image.
• Wallpaper is a small picture file that is
  repeated over and over on the background
• An example from book that uses tiling or
  wallpaper.
• Here is the actual gif file.
• Here is the HTML line
• ltbody background"tile.gif"gt
• Here is the actual gif file for my home page.
• Here is the HTML line
• ltBODY background"image.jpg"gt

8
More On Background Images

• You can use an external file for "wallpaper" or
  background image.
• Wallpaper is a small picture file that is
  repeated over and over on the background
• An example from book that uses tiling or
  wallpaper.
• Here is the actual gif file.
• Here is the HTML line
• ltbody background"tile.gif"gt
• Here is the actual gif file for my home page.
• Here is the HTML line
• ltBODY background"image.jpg"gt

9
More On Background Images

• Pick a complementary tile not one that
  overwhelms the page
• Finding backgrounds
• Check out the Yahoo Index
• Another site (found from Yahoo) that has about
  100 backgrounds to choose from