1 / 22

Mastering the Internet and HTML

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.

kasen
Download Presentation

Mastering the Internet and HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mastering the Internet and HTML Colors and Color Tags

  2. 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

  3. 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.

  4. Objectives • Introduction • RGB color model • Color palettes and lookup tables • Dithering • Using colors in Web pages • Color tags

  5. 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

  6. 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)

  7. Figure 9.1 RGB Color model

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. Tutorial 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) Tutorials

  14. Figure 9.2 Spot colors

  15. 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)

  16. 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.

  17. 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

  18. 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)

  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. 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)

  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)

More Related