1 / 20

Use of color (Basic)

Use of color (Basic). HTML Attributes (telling tags what to do). We can change the way tags display things on web pages by putting what’s called an "attribute" into an opening tag Many of the things that were done with attributes are now done with CSS ( " C ascading S tyle S heet“)

lam
Download Presentation

Use of color (Basic)

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. Use of color (Basic)

  2. HTML Attributes (telling tags what to do) • We can change the way tags display things on web pages by putting what’s called an "attribute" into an opening tag • Many of the things that were done with attributes are now done with CSS ("Cascading Style Sheet“) • We shall put CSS code into tags by the use of the styleattribute

  3. HTML Attributes (telling tags what to do) • The style attribute’s job is to hold CSS code, that’s the stuff in the quotation marks • An unlimited amount of CSS commands can be added to the style attribute as long as they • are enclosed between the quotation marks and • each command ends with a semi colon

  4. Example

  5. On your web page, this is what it looks like:

  6. If you want the text in red and centred on the web page,

  7. You should add the following attributes: <html><head> <title>My First Webpage</title> </head><body> <h1 style="text-align:center; color:red;">Learning HTML</h1> </body> </html>

  8. Color Attributes • There are the two primary color attributes: • color:This refers to color of any text in the element. • background-color:The background color of the element. (The hyphen is a formal part of the name. If you leave it out, the browser won’t know what you’re talking about.)

  9. Use of color (basic) • In HTML there are two key ways of specifying a color: • color names: A set of names that represent over 200 colors, such as red, grey, fuchsia, etc. • Hex codes: HTML only understands the standard colors and doesn't understand colors like "sky blue" or "pea green“. So if you want these kinds of colors, you need to specify a hex color value. These are six - digit codes representing the amount of red, green, and blue that make up the color, preceded by a hash sign # (for example, #333333 ).

  10. The table below lists the standard colors

  11. Each standard color also has a hex color value

  12. Changing the colors • If used properly, color can really enhance your site. If used incorrectly, it can make your site very difficult to read. • Top 10 viewed colors

  13. Open mypage.html in Notepad

  14. Change the font color of h1 to DarkBlue

  15. Change the font color of h1 to DarkBlue <h1 style="color:darkblue;">Learning HTML</h1>

  16. Inserting a Background • There must be sufficient contrast between backgrounds and text so that the user can read the content. In general, try to use light backgrounds on dark text. • To insert a background color on your web page, use the following code INSIDE your <body> tag, E.g.: <body style="background-color:LightBlue;">

  17. Change the Background color to LightBlue <body style="background-color:LightBlue;">

  18. Change the Background color <body style="background-color:LightBlue;">

  19. HTML code

  20. CSS codes style=“color: red;” style =“background-color:LightBlue;” style=“text-align: center;” style=“font-family: Courier;” style=“font-size:30px;”

More Related