Embed Size (px)
DESCRIPTION
Mastering the Internet and HTML. Colors and Color Tags. 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. Outline. Goal. - PowerPoint PPT Presentation
Citation preview
1
Mastering the Internet and Mastering the Internet and HTMLHTML
Colors and Color Tags
2
OutlineOutline
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
3
GoalGoal
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.
4
ObjectivesObjectives
IntroductionRGB color modelColor palettes and lookup tablesDitheringUsing colors in Web pagesColor tags
5
IntroductionIntroduction
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
6
The RGB color modelThe 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)
7
Figure 9.1 RGB Color model
8
Color palettesColor 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
9
Hexadecimal codes of colorsHexadecimal 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
10
DitheringDithering
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
11
Using colors in Web pagesUsing 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
12
Color tagsColor 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
13
TutorialsTutorialsTutorial 9.8.5 Spot color
(shortened from the top)<! Show "Hello" in Blue and "World" in a
different color>
<H2><B>Hello <FONT COLOR = "#FFFF00">World!</FONT></B></H2><BR>
<! Give me a T in one color>
<H1><FONT COLOR = "#FF7F00">T</FONT>
<! Give me an h in one color>
<FONT COLOR = "#EAADEA">h</FONT>
<! Give me an i in one color>
<FONT COLOR = "#00FFFF">i</FONT>
<! Give me an s in one color>
<FONT COLOR = "#4566C9">s</FONT>
<! Give me an i in one color><FONT COLOR = "#B5A642">i</FONT><! Give me an s in one color><FONT COLOR = "#145F0A">s</FONT><! Give me an a in one color><FONT COLOR = "#008000">a</FONT><! Give me a T in one color><FONT COLOR = "#F6EF31">T</FONT><! Give me an e in one color><FONT COLOR = "#215E21">e</FONT><! Give me an s in one color><FONT COLOR = "#9F9F5F">s</FONT><! Give me a T in one color><FONT COLOR =
"#ADEAEA">t</FONT></H1></BODY></HTML>
(figure 9.2)
14
Figure 9.2 Spot colors
15
FAQsFAQsQ: 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)
16
FAQsFAQsQ: 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.
17
SummarySummary– 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
18
ExercisesExercises
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)
19
<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>
20
ProblemsProblems
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)
21
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)
22
