1 / 36

Introduce Color Sensibly to Your Pages

Introduce Color Sensibly to Your Pages. Day 5. 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. World of color. The Web has more than 16 million colors

zanna
Download Presentation

Introduce Color Sensibly to Your Pages

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. 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;} h1.red {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;} p.red {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.

More Related