Week 6 Practical

Complete at beginning of class. Code this from scratch. Do not style the page with CSS or add any other elements. Test your work in a browser after every change in code.

  1. Create a root folder for a web page on a topic of your choice. Give it an appropriate name.
  2. Create a new HTML file called index.html and save it to your root folder.
  3. Code the basic HTML skeleton in index.html.
  4. Add the two lines of code that are required to make this an HTML5 document.
  5. You’re going to make only a menu on this page:
    1. Create a <ul> element inside the <body> element.
    2. Create three <li> elements inside the <ul>. Inside each, put a menu item label that would be relevant for your topic. Create different menu items than you used for last week’s HTML Challenges.
    3. Create <a> elements around each label (and within the <li> tags).
    4. Set the value for the href attribute for each <a> element to #.
  6. Create an external stylesheet and link to it.
  7. Style the menu items, then style them differently for on hover. Create different styling than you used for last week’s HTML Challenges.
  8. Try this now: style the <li>s to float: left. Add some margin-right to create some spacing.
  9. Save everything and test the page in a browser. Try resizing the browser.
  10. ZIP the root folder and turn it in to the appropriate basket in Dropbox.

You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.

Demo: HTML Challenges

I will demonstrate the answers to last week’s challenges.

Infographic

How do colors affect purchases?

color-purchases-lrg

The Traditional Color Wheel

The traditional color wheel is used for paints and other pigments.

traditional color wheel
Primary colors in the traditional color wheel:
red
blue
yellow
Secondary colors: two primaries mixed together
orange (red and yellow mixed)
violet (blue and red mixed)
green (yellow and blue mixed)
Tertiary colors: a primary plus a neighboring secondary
yellow-orange
red-orange
red-violet
blue-violet
blue-green
yellow-green

The RGB Color Wheel

The RGB color wheel is based on the way colors are mixed in light, and therefore on a monitor screen.

RGB Color Wheel

Primary colors in RGB:

red
green
blue

Secondary colors (CMY):

cyan (green and blue mixed)
magenta (blue and red mixed)
yellow (green and red mixed)

CMYK and RGB: Subtractive vs. Additive Color Models

CMYK stands for Cyan, Magenta, Yellow and Key color (which is black). CMYK is the color model used for printing presses. It is based on the chemistry of mixing translucent printing inks rather than paint. It is called subtractive because if you mix the three primary colors (cyan, magenta and yellow) together, you get black (in theory; in reality you need to added pure black ink to get real black.)

RGB stands for Red, Green, Blue. It is based on the way the light mixes on a computer screen. It is called an additive color model because if you add the three primaries (red, green and blue) together, you get pure white light.

CMYK   and RGB

Hexadecimal Color Wheel

Click for a larger image:

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color mode is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in CSS coding.

You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Web Color: Using CSS for Color Presentation

Text

#box {color: #57BAA8;}

Backgrounds

#box {background-color: #57BAA8;}

Borders

#box {border: solid 1px #57BAA8;}

Text Shadow

#box {text-shadow: 2px 2px 2px #57BAA8;}

Box Shadow

#box {-moz-box-shadow: 2px 2px 4px #57BAA8;
-webkit-box-shadow: 2px 2px 4px #57BAA8;
box-shadow: 2px 2px 4px #57BAA8;}

Color Transparency

#box {background-color: rgba(87, 186, 168, .7)}

#box {color: rgba(87, 186, 168, .7)}

#box {border: solid 10px rgba(87, 186, 168, .7)}

CSS3 Generator

Color-Finding Resources

  1. Photoshop color picker
  2. Dreamweaver color picker (a poor choice because it it hard to use)
  3. Colorzilla – a Firefox browser plugin which allows you to “eyedrop” any color in your browser window; it will retunr both the RGB and hexadecimal color formulas
  4. ColorPicker.com – online color picker similar to Photoshop’s
  5. HTML Color Names
  6. COLOURLovers – find an harmonious color palette, pattern, or single color

Homework: Web Color

Review the following concepts on your own before next week. Some of this material may be in the Practical at the beginning of class.

Article

The Code Side Of Color from Smashing Magazine, October 2012

Hexadecimal Color

How Hexadecimal Is Calculated

  • subdivided pixelspixels are subdivided into 3 vertical parts: one for red, one for green, and one for blue
  • the pixel’s “color” is created by the varying amounts of light coming out of those 3 sub-pixels
  • we typically count in “base-10”

To understand hexadecimal, we start with binary code

  • binary (“base-2”) describes whether an electrical connection is “on” (1) or “off” (0)
  • a bit is a single record of “on” or “off” (that is, a single digit)
  • one byte equals 8 bits
  • each half-byte has 16 possibilities (24)
  • a complete byte = 162 = 256 possibilities
  • 256 possible values each for red, green and blue
  • color can be described using RBG notation, like this for white: rbg(255, 255, 255)

We can write hexadecimal with fewer characters

  • hexadecimal (“base-16”) counting starts at 0, switches to letters after 9, and stops at f: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
  • this gives us 16 possible values for a single digit
  • each digit represents one half-byte of information
  • each pair represents a byte (or 8 bits): the first 2 characters are red, next 2 for green, last 2 for blue: ffffff
  • this explains the term “8 bits per channel”
  • lowest value (00) means no color value at all, or black
  • highest value (ff) means full brightness (pure color or white)
  • 2563 = 16,777,216 possible color values
  • color can therefore also be described using hex notation, like this for white: #ffffff
  • how hexadecimal color shorthand works (shortening 6 digits to only 3): the two R values must be the same as each other, the two G values must be the same as each other, AND the two B values must be the same as each other:
    • #000000 can be shortened to #000
    • #ff0000 can be shortened to #f00
    • #44dd99 can be shortened to #4d9
    • #60ee33 cannot be shortened

High-Saturation Hues in Hex

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

#ff0000 pure red #ffff00 yellow: pure red plus pure green #00ff00 pure green #00ffff cyan: pure green plus pure blue #0000ff pure blue #ff00ff magenta: pure blue plus pure red

Tints of White in Hex

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

#eeffff #efffff #ffefff #ffeeff #ffffef #ffffee #ffffde #ffffdd

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

Shades of Black and Gray in Hex

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

#440000 #004400 #000044 #444444 #999999 #cccccc

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Muted Colors in Hex

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

#ff0000 red #ffff00 yellow #00ff00 green #00ffff cyan #0000ff blue #ff00ff magenta
#cc3333 muted red #cccc33 muted yellow #99cc99 muted green #339999 muted cyan #6666cc muted blue #993399 muted magenta

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Shades of Brown in Hex

Browns tend to be versions of muted orange. Try mixing middle values of red and green (more red than green,) and leaving blue as 00.

#996600 #663300 #683500