Download color - Brian Whitworth

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
Document related concepts
no text concepts found
Transcript 
Mastering the Internet and
HTML
Colors and Color Tags
1
Outline







Goal
Objectives
Introduction
The RGB color model
Color palettes and
lookup table
Hexadecimal codes of
colors
Dithering






Using colors in Web
pages
Color tags
Tutorials
FAQs
Summary
Exercises/Homework
2
Goal
This chapter covers colors and their use in
Web pages. It also covers some theoretical
aspects of colors such as existing color
models, and color palettes and lookup tables
for better understanding of colors.
3
Objectives

Introduction
 RGB color model
 Color palettes and lookup tables
 Dithering
 Using colors in Web pages
 Color tags
4
Introduction

Colors, if used properly, enhance
appearance of Web pages
 Excessive use, or wrong mix of colors can
create an adverse effect during viewing Web
pages
 Colors can be used in Web pages in three
ways: text (including hyperlinks),
background, and images
5
The RGB color model

The RGB (red, green, and blue) color model is
used in graphics and HTML
 The RGB model is represented by a cube (figure
9.1) whose sides are the three primary colors (red,
green, and blue), and its diagonal represents the
shades of gray
 Colors in the RGB model are created by mixing
(adding) the three primary colors
 Each primary color uses 8 bits, producing 258 (28)
decimal values, from 0 to 255
(Cont’d)
6
Figure 9.1 RGB Color model
7
Color palettes

Each pixel value has a corresponding color
 Browsers and client monitors have color palettes
whose colors are stored in color lookup tables
 The size of a color palette depends on the number of
bits per color; it is 16.7 (224)million colors for 24-bit
color model, and 256 (28) for 8-bit color model.
Many monitors use the 256 colors palette
 The browser-safe color palette uses a 6 x 6 x 6 (216
colors) RGB color cube. Each primary color may
take values of 00, 33, 66, 99, CC, and FF
8
Hexadecimal codes of colors

Hex codes, not names, should be used to specify
colors in HTML tags. A color name may not
specify a unique color.
 Each color has a unique hex value that is preceded
by a pound (#) sign when it is used in HTML
 Hex values 00 to FF corresponds to decimal
values 0 to 255
 The Web site www.lynda.com lists the 216 safe
colors with their decimal and hex values
9
Dithering

When a Web page requests a color that is not
available in a browser’s lookup table, the browser
interpolates (dithers) its own colors to come up
with the closest color to render the page
 Dithering colors is not a good practice as the look
of Web pages becomes unpredictable
 Web authors should try to limit their colors to those
of the browser-safe color palette to avoid dithering
 Image software, such as Photoshop, allows Web
authors to define and control image color palettes
10
Using colors in Web pages

Web authors can specify colors of text, hyperlinks,
background, and images of Web pages
 The color of a hyperlink depends on its state
whether it is link (blue), alink (red), or vlink
(purple). Web authors can override these default
values
 Spot colors are used for specific characters or
words
 The background of a Web page could be a color,
or an image
11
Color tags

Colors can be specified in Web pages via
the attributes of both the <BODY> and
<FONT> tags
 The color attributes of the <BODY> tag are
TEXT (foreground color), LINK (link
color), ALINK (alink color), VLINK (vlink
color), and BGCOLOR (background color)
 The <FONT> tag has the COLOR attribute
12
Tutorials
<! Give me an i in one color>
<FONT COLOR = "#B5A642">i</FONT>
<! Give me an s in one color>
<! Show "Hello" in Blue and "World" in a
<FONT COLOR = "#145F0A">s</FONT>
different color>
<! Give me an a in one color>
<H2><B>Hello <FONT COLOR =
<FONT COLOR = "#008000">a</FONT>
"#FFFF00">World!</FONT></B></H2><
<! Give me a T in one color>
BR>
<FONT COLOR = "#F6EF31">T</FONT>
<! Give me a T in one color>
<! Give me an e in one color>
<H1><FONT COLOR =
<FONT COLOR = "#215E21">e</FONT>
"#FF7F00">T</FONT>
<! Give me an s in one color>
<! Give me an h in one color>
<FONT COLOR = "#9F9F5F">s</FONT>
<FONT COLOR = "#EAADEA">h</FONT>
<! Give me a T in one color>
<! Give me an i in one color>
<FONT COLOR =
<FONT COLOR = "#00FFFF">i</FONT>
"#ADEAEA">t</FONT></H1>
</BODY>
<! Give me an s in one color>
</HTML>
<FONT COLOR = "#4566C9">s</FONT>
Tutorial 9.8.5 Spot color
(shortened from the top)
(figure 9.2)
13
Figure 9.2 Spot colors
14
FAQs
 Q:
Why should a Web author not
specify colors by names?
– A: While many browsers allow the use
of color names in HTML code, there is no
list of color names that work the same in
all browsers. Specifying colors via hex
codes is safer and works consistently in
all browsers
(Cont’d)
15
FAQs

Q: What is the difference between color
matching and dithering?
– A: Color matching means that the browser
finds the nearest color, in its color table, to
the requested color and uses it. Color
dithering means that the browser mixes
some pixels of one color with some pixels of
another color. It is not clear when a browser
matches or dithers colors. It is also hard to
notice the effect of either.
16
Summary
– Colors enhance Web page appearance
– HTML uses the RGB color model to specify colors
– Colors in the RGB model are created by mixing the three
–
–
–
–
primary colors: red, green, and blue
Each primary color may use 256 decimal values (0 to
255), or hex values (00 to FF)
Browser-safe color palette uses a 6 x 6 x 6 (216) colors.
These colors use the hex values of 00, 33, 66, 99, and FF
Browsers use dithering to replace missing colors from
their palettes
Web page contents that may use colors are text, links, and
background
17
Exercises

Problem 9.1. Write a Web page that displays
the first 9 colors in table 9.1. Create the
following text in the page with H1 bold
heading: This is color 1. Replace 1 by 2, 3,
..., 9.
– Solution strategy: Follow tutorial 9.8.1. Use a
text editor to write and debug the HTML code.
Use a browser to display the results
(Cont’d)
18
<HTML>
<HEAD>
<TITLE>Different colors</TITLE>
</HEAD>
<BODY>
<FONT SIZE =6 COLOR = "red"><CENTER>Display of different
colors</CENTER></FONT>
<H2><FONT COLOR = "#00FFFF">This is color 1</FONT></H2>
<H2><FONT COLOR = "#000000">This is color 2</FONT></H2>
<H2><FONT COLOR = "#0000FF">This is color 3</FONT></H2>
<H2><FONT COLOR = "#9F5F9F">This is color 4</FONT></H2>
<H2><FONT COLOR = "#4566C9">This is color 5</FONT></H2>
<H2><FONT COLOR = "#B5A642">This is color 6</FONT></H2>
<H2><FONT COLOR = "#A62A2A">This is color 7</FONT></H2>
<H2><FONT COLOR = "#B87333">This is color 8</FONT></H2>
<H2><FONT COLOR = "#FF7F00">This is color 9</FONT></H2>
</BODY></HTML>
19
Problems

Problem 9.5 Add text, links, and background
colors to the Web page of problem 8.6
– Solution strategy: Follow tutorial 9.8.4. Use a
text editor to write the HTML code. Use a
browser to test it
(Cont’d)
20
HTML><HEAD><TITLE>Using definition List for course descriptions</TITLE>
</HEAD><BODY BGCOLOR = "FFFF00" TEXT = "8E2323" LINK = "FF0000"
ALINK = "00FF00" VLINK = "000000">
<H2><B><CENTER><FONT COLOR="blue">Welcome to our online course
catalog</FONT></CENTER></B></H2><P>Since last term, we have added new
exciting courses<BR>that cover a wide spectrum of interests and market
needs<BR>Here are descriptions some of our new exciting courses. <DL>
<DT><FONT COLOR = "red">Surfing the Web</FONT>
<DD>This course is designed for beginners. It shows how to surf the Web
effectively using search tools such as search engines, metasearch engines, smart
browsing, Web portals, and channels.<P>
<DT><FONT COLOR = "red">JavaScript</FONT>
<DD>This course covers the fundamentals of JavaScript. it explains JavaScript
built-in objects, the event handling model, and more.<P>
<DT><FONT COLOR = "red">Java Programming</FONT>
<DD>This course covers the concepts of OOP and how they relate to Java. It also
covers Java Swing package and graphics tools.<P>
<DT><FONT COLOR = "red">Networking</FONT>
<DD>This course covers the fundamentals of networking and protocols. It covers
both LANs and WANs.</DL></BODY></HTML>
(Cont’d)
21
22
Related documents
Chapter 18 Web Design - Boerne Independent School District
Chapter 18 Web Design - Boerne Independent School District
Xavier University Chemistry Department Research Report
Xavier University Chemistry Department Research Report
Web Design
Web Design
Web Design
Web Design
Sociologists to Know Extra Credit 5 minute Power Point Presentation
Sociologists to Know Extra Credit 5 minute Power Point Presentation
Setting the Font Color - Welcome to Our Course Web Page
Setting the Font Color - Welcome to Our Course Web Page
Fig H.12: Basic Layouts of Web and Graphic User Interfaces
Fig H.12: Basic Layouts of Web and Graphic User Interfaces
Endangered Animals
Endangered Animals
Document
Document
Word Format
Word Format