Presentation is loading. Please wait.

Presentation is loading. Please wait.

Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.

Similar presentations


Presentation on theme: "Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics."— Presentation transcript:

1 Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.

2 RGB (Red,Green,Blue) colors 256 colors per byte 3 bytes = over 16 million colors (one byte for each of Red,Green,Blue) Most computer monitors use 3-byte (24-bit) color.

3 Hexadecimal (base 16) Color Values Hex digits, 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Each RGB component is a 2-digit hex number. Base 16Base 10 equivalent 000(no saturation of color) 3351 66102 99153 CC204 FF255(full saturation of color) Each of the 256 colors for an RGB color component is then concisely represented as a 2-digit hex color. The 6 values for a color component shown above are called Web Safe colors. That means that older computers would render them consistently.

4 RGB Hex Color Values Used as values for HTML attributes to set colors in Web pages. Preceded with a # character to tell the browser that a hex color follows. Examples: #FF0000 -- Bright pure red, full saturation of red -- none of the other colors #330000 -- Dark pure red, almost no red -- none of the other colors Computer colors (like visible light) are additive -- the more color saturation is added, the brighter the color. In contrast, mixing paint is subtractive -- as more colors are added, the mixture gets darker.

5 Since computer colors are additive, #000000 is black (no saturation of any colors) and #FFFFFF is white (full saturation of each color) Since more color saturation gives lighter colors, it is easy to predict pure colors (Red,Green,Blue), like the reds of the last slide. Grays are also easy to predict -- equal saturations of each of Red, Green, and Blue: #333333, #CCCCCC Other mixtures are harder to predict just by thinking about it. Another option is to use a color picker utility. Just Google the phrase html color picker and you will see lots of them.

6

7 Fonts for computers are simply files containing specifications which tell software exactly how to draw the characters. Serif font Sans-Serif font Some fonts come with the operating system, and software packages install other fonts. A a Web page is limited only to those fonts installed on the computer on which the page is being viewed.

8 These font faces are generally safe in Web pages since they will be available on most any computer.

9 The font element is deprecated, meaning that the W3C may remove it from the HTML standard in the future. It is easy to format text with this element. However, CSS provides all of the same formatting control, and much more.

10 HTML code: black and blue The result: black and blue HTML code: regular monospace The result: regular monospace Note: The font element with Courier above does the same thing as the tt (teletype) element, since Courier is a monospace font.

11 When a list of font faces is supplied, the browser uses the first one it finds. If it finds none of them, it simply uses it's default. Good priority list for a serif font: face="Georgia, Times, Times New Roman" Good priority list for a sans-serif font: face="Verdana, Arial, Trebuchet MS, Helvetica" Note: Gerogia and Verdana were both made to look good on computer monitors.

12 Font sizes can be given in absolute or relative values. Examples of absolute values: size="3" (typical default for browsers) size="2" (smaller) size="4" (bigger) Examples of relative sizes size="-1" (one step smaller than the default) size="+1" (one step larger than the default) Using relative sizes is usually the best idea. That way, your page does not depend upon the default size for which a particular browser is set.


Download ppt "Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics."

Similar presentations


Ads by Google