Introduce Color Sensibly to Your Pages - PowerPoint PPT Presentation

introduce color sensibly to your pages n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduce Color Sensibly to Your Pages PowerPoint Presentation
Download Presentation
Introduce Color Sensibly to Your Pages

play fullscreen
1 / 36
Download Presentation
Introduce Color Sensibly to Your Pages
Download Presentation

Introduce Color Sensibly to Your Pages

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Introduce Color Sensibly to Your Pages Day 5

  2. You will learn to: • Specify colors by name • Specify Colors by code • Create a color comparison page • Use Style Sheets for Better control • Choose Pleasing Colors

  3. World of color • The Web has more than 16 million colors • Can select from the 16 million with mathematical precision • The figure 16 million comes from the 256 possible “settings” for red, green, and blue. • If you multiply 256 by 256 by 256 you arrive at the figure of 16.7 million

  4. Specify colors by name • The basic palette, called the HTML or Windows palette is a range of 16 colors. • Same as ones we covered already. • Open template.htm • Save as: COLOR.HTM

  5. In BODY element type the following: <body bgcolor=“blue”> Save and refresh in your browser

  6. Understand Browser-Safe Colors • Have very specific mixture of red, green, and blue light. • To be browser safe, a color can be made up of combinations of RGB on in the following amounts: 0%, 20%, 40%, 60%, 80%, and 100%

  7. Understand Hexadecimal Color Codes

  8. R(ed)G(reen)B(lue) • Remember that the individual colors you will mix are always red, green, and blue and they are always listed in that order. • To mix a shade of red: Red-ff (100%), green-33 (20%),blue-33(20%) Then add the # symbol in front to get #ff3333

  9. Define Page Colors Globally • You will be choosing the default colors throughout a Web page unless you specify otherwise. • Generally, you set these colors inside the <body> element

  10. Specify Background Color with the bgcolor Attribute • To specify the background color of a page, use the bgcolor=“ “ attribute inside the <body> tag. <body bgcolor=“white>

  11. Set text colors with the text Attribute • You can set the color for all the text in your page by using the text=“ “ attribute inside the opening body tag. <body text=“maroon”> • To have a page with yellow background and maroon text: <body bgcolor=“yellow” text=“maroon”>

  12. Set text colors with <basefont /> • You can also specify text characteristics with the <basefont /> element <basefont color=“purple” /> • All the text will display in purple

  13. Set link colors with link, vlink, and alink • A Web browser normally displays hypertext links as blue with an underline. • When you click on the link, it turns red momentarily; this is called an active link • After you have visited the link, usually it will display as purple; this is a visited link • Using link, vlink, and alink you can choose whatever colors you want.

  14. EXAMPLE: • If you want to set the link to red, the active link to yellow, and the visited link to blue, write the body tag this way: <body link=“red” vlink=“yellow” alink=“white”> Type the following code in color.htm

  15. <html> <head><title>Color Comparison Table</title></head> <body bgcolor=“blue” link=“white” vlink=“red” alink=“yellow"> <table border=“0” cellpadding=“100”> <tr> <td bgcolor=“green”>Sample Color</td> </tr> </table> <a href=“olist.htm”>Sample link to ordered list.</a> </body> </html>

  16. Choose Local Colors • You might find that there are certain places where you would like to substitute different colors. • You can override the global color choices you made and select colors for certain “spots” or locations on you page. • Sometimes this is called spot color.

  17. Use <font color=“ “> to change text color <p><h2>This line will have one <font color=“red”> red</font> word. </h2></p>

  18. Use the color=“ “ Attribute with Horizontal Rules <hr color=“yellow” width=“50%” size=7>

  19. Use bgcolor=“ “ to set colors for table cells • Add underneath first data cell the following: <tr><td bgcolor=“#0000ff”> <font color=“white”> <h1>Sample Two</h1> </font> </td> </tr>

  20. There has to be an easier way!!! • Is there a better way? Yes CSS. • Don’t worry about understanding it yet, just do it. • We will go in detail way down the road, but we need to get used to using it.

  21. Open template.htm • Save as: CSSCOLOR.HTM • This will be an embedded style sheet • Then in between the <head></head> tags, insert the following lines:

  22. Set background colors with CSS • Setting background colors with CSS is a simple process. • Instead of using the bgcolor attribute inside the <body> element, you place a rule(CSS instruction) inside the <style> element.

  23. To use CSS to set an aqua background for a page, insert the following line between the <style> tags: Body {background-color: aqua;} • Save the page and display it in you browser. The background will be aqua.

  24. Remember • Recall you used a property (background-color) combined with a value (aqua) • In this case you added another item a selector(body) • The selector is the HTML element you with to be affected by your style rule.

  25. Create Headings with Colored Backgrounds • One nice thing about style sheets is that you can apply you styles to any element. • Try adding the following lines in between the <style></style> tags on you page:

  26. h1 {font-family: arial; color: navy;} {font-family: Times-New-Roman; color: red; background-color: black;} h1.white {font-family: Times-New-Roman; color: white; background-color: green;} h1.lime {font-family: Arial; font-style: italic; color: lime; background-color: olive;}

  27. <body> <p><h1>This is my basic headline.</h1></p> <p><h1 class="red"> This is my red headline.</h1></p> <p><h1 class="white">This is my white headline.</h1></p> <p><h1 class="lime">This is my lime headline.</h1></p> </body>

  28. Note: • When using embedded style sheets, always remember to enclose properties and values inside curly braces { }. • For inline style sheets, the properties and values are enclosed in quotation marks.

  29. Properties should be separated from their values by a colon (:), and from other properties by a semicolon (;). • Selectors (the elements you wish to set a style for) should be outside and to the left of the curly braces.

  30. Proper style sheet syntax Selector {property: value; property: value;} Or Selector { property: value; property: value; }

  31. Set paragraph Colors with CSS • If you want several different paragraph styles on a page you would have a tough time creating this in HTML. • CSS make it much easier. • Insert the following code between the <style> </style> tags right after h1. Lime …

  32. p.blackback {font-family: arial; font-style: italic; font-weight: bold; color: powderblue; background-color: black;} p.yellowbk {background-color: yellow; font-size: 16pt;} {font-weight: light; color: #ff0000; text-align: center; font-size: 32pt;}

  33. You have three paragraph styles • Blackback an arial italic font, displaying powder blue with a black background • Yellowbk a 16-point font with a yellow background • Red A light, 32-point font which will be centered and displayed in red • Type the following code underneath your last paragraph.

  34. <p class="blackback">This is a sample of the blackback style.</p> <p class="yellowbk">Here is how yellowbk looks.</p> <p class="red">I enjoy this red, centered font.</p> <p>An unmodified paragraph looks like this.</p>

  35. Downside of CSS • The support of CSS is so varied it doesn’t take long to find a browser that does not support style sheets. • Netscape Navigator will display the page we just created differently. • We are introducing CSS because you will need to know it in the future.

  36. Learn Good Web Design • Use Gentle Colors in Pleasing Combinations • Put at least as much thought into your color scheme as you do your site’s layout • Compare colors side by side before you construct you page. • Choose soft colors rather than deep, bright, or garish shades • Make your color scheme consistent.