most of the attributes of the body element specify colors for the web page. note: the background...
TRANSCRIPT
![Page 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/1.jpg)
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.
![Page 2: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/3.jpg)
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 16 Base 10 equivalent00 0 (no saturation of color)33 5166 10299 153CC 204FF 255 (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.
![Page 4: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/5.jpg)
• 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.
![Page 6: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/6.jpg)
![Page 7: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/7.jpg)
• 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.
![Page 8: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/8.jpg)
These font faces are generally safe in Web pages since they will be available on most any computer.
![Page 9: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/9.jpg)
• 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.
![Page 10: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/10.jpg)
HTML code:black <font color="blue">and blue</font>
The result:black and blue
HTML code:regular<font face="Courier">monospace</font>
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.
![Page 11: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/11.jpg)
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.
![Page 12: 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](https://reader036.vdocuments.us/reader036/viewer/2022072015/56649ebf5503460f94bc9e28/html5/thumbnails/12.jpg)
• 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 sizessize="-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.