Scribd
Upload
69 views20 pages

3 Fonts and Color

This document discusses HTML fonts and colors. It provides examples of different font faces and sizes using HTML font tags. It also discusses the 16 basic color names recognized by HTML and ways to specify colors using hexadecimal codes. Hexadecimal codes allow for over 16 million color options by varying the red, green, and blue values in the 6-digit code. An optical illusion dress photo is also included that appears different colors to different viewers, due to how the visual system discounts lighting.

Uploaded by

New Wall
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
69 views20 pages

3 Fonts and Color

This document discusses HTML fonts and colors. It provides examples of different font faces and sizes using HTML font tags. It also discusses the 16 basic color names recognized by HTML and ways to specify colors using hexadecimal codes. Hexadecimal codes allow for over 16 million color options by varying the red, green, and blue values in the 6-digit code. An optical illusion dress photo is also included that appears different colors to different viewers, due to how the visual system discounts lighting.

Uploaded by

New Wall
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

HMTL 3

Fonts and Color

Types, Size, Color


Examples of Different Fonts

<font size=+2 face="Verdana">Verdana</font>


<font size=+2 face="Arial">Arial</font>
<font size=+2 face="Helvetica">Helvetica</font>
<font size=+2 face="Impact">Impact</font>
<font size=+2 face="Comic Sans MS"> Comic Sans
MS</font>
Examples of Different Size

Font size can be set relative to base size Ex:


<font size=+2 face="Verdana">Verdana</font>
Or at a value of 1 to 7 Ex:
<font size=1 face="Verdana">Verdana</font>
….
<font size=7 face="Verdana">Verdana</font>

Note: the font tag is to be phased out


In favor of CSS sheets, but will be valid
For a long time to come.
Fonts
Font Colors

Types, Size, Color


HTML 4.01 specification defines
sixteen named colors.

 These 16 were included in the HTML 3.0 specification which noted


"These colors were originally picked as being the standard 16 colors
supported with the Windows VGA palette.“
 http://en.wikipedia.org/wiki/Web_colors
 Color Names
Using Color

Almost every browsers support the 16 listed colors


Example:
<body bgcolor="blue" text="white">
<p>White text on Blue background.</p>
<p><font color="black">Black text on Blue
background.</font></p>
</body>
Note: Major browsers actually support about 140 different
names: Color Chart
Using Hexadecimal Color Codes

16,777,216 different
colors
Using Hexadecimal Color Codes

 Up to now we have been using names for


colors, such as <font color="black">
 You can also specify the color using
hexadecimal codes
 Advantage is that Hexadecimal colors are
recognized by almost all browsers, while
some color names may not be
alink is the color a link turns when it is clicked

To change Text Colors from page-wide setting use


<font color="#hexdec">
16.7 Million Different Colors

#000000 is black, and #FFFFFF is white.


Each of the 6 digits in the hexadecimal code is broken
into 3 separate groups...
#XXxxxx - Red Color Value
#xxXXxx - Green Color Value
#xxxxXX - Blue Color Value
– Each digit is a value from 0 to F, in the hexadecimal system,
with 0 being null value, and F being highest value.
Note: value is preceded by a pound sign (#)
Example: Red

If the first two digits (red values) are full (FF) and
the other four are null (00) the color will be red.
<font color="#FF0000">#FF0000 -
AaBbCcDdEeFf1234567890</font>

<bgcolor="#FF0000"><font
color="#000000">Background #FF0000</font>
Mixed Colors
216 Safe Colors to Use
 Hexadecimal Color Codes allow for 24-bit color
resolution, or a total of 16,777,216 possible colors.
 However, not every computer is capable of
displaying all of these colors.
 Since most computers are capable of displaying at
least 256 colors, a Safe Palette of colors was
created. This palette is constructed by incrementing
each color value by 51 decimal, or 33 hexadecimal.
or 00, 33, 66, 99, CC, and FF.
 This allows for a palette of 216 colors, which stays
inside the range of possible colors for a computer
that supports 256 colors.
 http://support.microsoft.com/?kbid=304335
Example
 <html>
 <head>
 <title>Hex Color Code</title>
 </head>
 <body bgcolor="#0000FF" text="#FFFFFF">
 <p>White text on Blue background.</p>
 <p><font color="#000000">
 Black text on Blue background.</font></p>
 </body>
 </html>
Sample Hex Color Code
References

 “Writing HTML, A Tutorial for Creating Web Pages.”


(June 2000) version 4.5.2 , Maricopa Center for
Learning and Instruction (mcli)
<http://www.mcli.dist.maricopa.edu/tut/index.html>
 Raggett D. “HTML 3.2 Reference Specification.”
W3C Recommendation” 14-Jan-1997.
<http://www.w3.org/TR/REC-html32>
 “Hex values for the 216 color safe palette used in
HTML documents in FrontPage” Microsoft 23 Oct
2007, <http://support.microsoft.com/?kbid=304335>
Illusion

What colors?

http://www.dailymail.co.uk/femail/article-
2979076/You-believe-eyes-Company-
optical-illusion-dress-divided-internet-
produce-white-gold-blue-black.html
Why different colors for different
people

“What’s happening here is your visual system is


looking at this thing, and you’re trying to
discount the chromatic bias of the daylight axis,”
says Bevil Conway, a neuroscientist who
studies color and vision at Wellesley College.
“So people either discount the blue side, in
which case they end up seeing white and gold,
or discount the gold side, in which case they
end up with blue and black.”
http://www.wired.com/2015/02/science-one-
http://www.wired.com
/2015/02/science-
one-agrees-color-
dress/
In normal light

http://www.dailymail.co.uk/femail/article-
2979076/You-believe-eyes-Company-
optical-illusion-dress-divided-internet-
produce-white-gold-blue-black.html

You might also like