Kevin Murphy Web Color Basics Masters Project CS 490.

Slides:

Advertisements

Similar presentations

Cascading Style Sheets

Advertisements

CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

HTML Tags. Bolding Text Or Italics Text Or

Tutorial 3 – Designing a Web Page Working with Color & Graphics Mrs. Wilson.

Design, Formatting, CSS, & Colors 27 February, 2011.

Design, Formatting, CSS, & Colors September 9, 2010.

Math Further HTML and Web design Gavin Shaddick

HTML Lesson 2 TBE 540 Farah Fisher. Prerequisites Access web pages and navigate Use search engines to locate specific information Download graphics from.

RGB color model Skills: none IT concepts: combining red, green and blue light to generate colors This work is licensed under a Creative Commons Attribution-Noncommercial-

AdvWeb-1/9 DePaul University SNL 262 Web Page Design Chapt 11 - Custom Background And Colors Instructor: David A. Lash.

Using color and fonts in HTML and XHTML Please use speaker notes for additional information!

Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,

Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.

© 2005 ComputerPREP, Inc. All rights reserved. HTML 4.0 and Web Page Design Module I.

1 Introduction to HTML. 2  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language  of Web Pages on the World Wide Web. HTML is a.

Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.

Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.

Creating Web Pages with Links, Images, and Formatted Text.

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML basics exercises.

CMYK vs. RGB Design. Primary colors The colors that make up the base for every other color created. Depending on whether you are looking at it from science,

Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture.

THE COLORS OF LIGHT RED, GREEN and BLUE

07: Color in Interactive Digital Media

Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.

Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.

Content To Date Review Course Work/Labs Assigned to Date Review HTML Image Tag Editing code for image folder Introduce HTML Color Tags Webpage Safe Colors.

HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be.

1 Background and Text Links CGS3066 Rory J. De Simone.

Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.

More Basic XHTML Module 2: XHTML Basics LESSON 2.

Introduction To CSS.. HTML Review What is HTML used for? Give some examples of formatting tags in HTML? HTML is the most widely used language on the Web.

Chapter 6 An Introduction to HTML Pages Tag Nesting You can put two tags together to combine the effects Bold and underlined But make sure.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.

Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.

1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.

Web Colors. Web Colors: Up until now, we have been using only predefined color names, such as "orange" and "lightblue". As web designers, we need the.

Colors. Color of HTML Elements You can control the color of the following elements: You can control the color of the following elements: All text within.

Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course.

Computer Science 101 Color, Fonts, Links, Design.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Images  Colors.

 To specify blue as the background color for a page, put bgcolor=“blue” inside the tag. Of course, you can use many colors other than blue. You can choose.

The Teacher Computing HTML HyperText Markup Language.

12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10.

Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.

HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.

Elements of Design 1.02 Investigate Design Principles and Elements.

©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.

Fine Tuning Basic HTML CGS3066. Some HTML Tags and Their Defaults default = What will happen in the absence of instructions to the contrary from you.

Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.

1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

Basic Web Publishing M. Scott Gartner 7/15/98.

CNIT 131 Graphics.

Basic HTML Tags Ryan Frazier April 30,2004 CSC113.

LESSON 2 Module 2: XHTML Basics More Basic XHTML.

Web Development & Design Foundations with HTML5 8th Edition

Design Concepts: Module A: The Science of Color

Introduction to HTML.

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5

LESSON 2 Module 2: XHTML Basics More Basic XHTML.

Presentation transcript:

Kevin Murphy Web Color Basics Masters Project CS 490

Kevin Murphy Advantages of Using Color Color can give a more polished and professional look to a Web site. Colors can evoke certain feelings and moods in people browsing the site.

Kevin Murphy HTML Color Attributes There are attributes to HTML tags that can change the colors used on the Web page itself: including adding spot color to text, changing the background color and the color of links. n BASEFONT and FONT tags have COLOR = (value) attributes n The BODY tag has BGCOLOR, TEXT, LINK, VLINK, and ALINK color attributes

Kevin Murphy Spot Color Examples: Stop the presses. Throw caution to the wind. GO FOR IT!

Kevin Murphy Body Tag Attributes n n Visited Links n Active (As you click) n (Image) n

Kevin Murphy Specifying Colors As shown in the examples, there are two ways of specifying color values for the HTML attributes: 1)Specify in “ “ one of the predefined color names recognized by popular browsers. 2)Specify the color by its hexadecimal number for red, green, and blue components.

Kevin Murphy 1) Predefined Colors n There are 16 Windows palette colors that can be specified by their names: WhiteCyanSilverNavy RedMagentaGrayLime GreenYellowMaroonOlive Blue BlackPurpleTeal

Kevin Murphy Why Red, Green, & Blue? n Print Media Colors: - CMYK—Cyan, Magenta, Yellow, Black - (Mix these colors together for ink colors) n Display Media Colors: - RGB—Red, Green, Blue - (Mix these colors together for the colors of light) Color Models

Kevin Murphy RGB Color Model

Kevin Murphy 2) Hexadecimal Values Color codes in HTML are specified by the # sign followed by six digits that consist of three hexadecimal numbers (two each for the amount of red, green, and blue in the color). There are 16 x 16 = 256 different amounts of each color that can be selected. 256 x 256 x 256 = 16.7 million colors possible

Kevin Murphy Color Values #REDGREENBLUE # (least amt) # FF FF FF (most amt) Samples: #FF0000#00FF00#0000FF (Red) (Green) (Blue) #00FFFF#FFFF00#FF00FF (Cyan) (Yellow)(Magenta)

Kevin Murphy Choosing Colors How do you know what the hex codes are for the colors you want to use? 1)Consult a chart of common colors. 2)Choose the color desired and convert the RGB values to hexadecimal. - Image editors, such as Adobe Photoshop, will show the R, G, and B values from 0 to Convert these values to their hex equivalent using a scientific calculator, chart or shareware. (

Kevin Murphy Do you have 16.7 million choices for color? n TECHNICALLY YES! n In reality, it is recommended by Netscape Tech Support that you use colors from a 216-color palette for best results. (Some browsers will dither colors that do not follow this palette.)

Kevin Murphy Dithering

Kevin Murphy Which 216 Colors? n Colors that use any of the following for red, green, and blue values are recommended by Netscape: 00,33,66,99,CC,FF Photoshop Values = 0, 51, 102, 153, 204, 255 Is this a rule? No—Many lists of common colors do not follow this formula. However, it is recommended that you check your colors in various browsers.

Kevin Murphy Final Reminders When Using Color n Avoid changing link colors because users are accustomed to the defaults. n Make sure the text is easy to read by creating enough contrast between the background color of the page and the text color. n Make sure that a background pattern does not interfere with the text. n Enjoy!