Colors and Images

Logistics

Tidying Up

Komodo Edit Project› Helping you find your folder

Laptop› Delete what you don’t need› Keep class “doodles” in a single “sandbox”

folder Isis

› Delete what you don’t need

Structure and format

First page of every site is to be index.html

Works fine if you have then in different folders

Remember› Formatting of HTML and CSS› Validation of HTML and CSS

Course Page Do NOT spread items across multiple

pages. More work for us. Will send you notes about problems I

found NEW REQUIREMENT for link<li> Project 1: <a href=“” target=“_blank”>short name</a> (author names)</li>

Colors

Colors – Paint (Subtractive Color Model)

Primaries: magenta, yellow, and cyanThis color system is called subtractive because:

each primary color absorbs (subtracts) a certain part of the color spectrum.every time a color is added, less light is reflected.When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.

Colors -- Computer Screen (Additive Color System)

Primaries: Red, Blue, GreenAdditive color systems start without light (black).Light sources combine to make a color.As colors are added, the resulting color is brighter.

ColorsWe’ll be working with the additive color systemMix various amounts of red, green, and blue to create a color.Colors can be represented by

namean rgb (dec, dec, dec) valuehexadecimal (# hx hx hx) value.

Colors (cont)

For RGB, each color is indicated by a number from 0-255

(0,0,0) = black(255,255,255) = white

For Hexadecimal (hex), each color is indicated by 6 values from 0 – F

#000000 = black#FFFFFF = white

Hex...

Each two letters/numbers represent red, green, or blue in that order.Examples:

#FF0000 = red#00FF00 = green#0000FF = blue

#0F6480

#ADFAA5

#E01B4C

Why Hexadecimal?

How do computers store information? Bits 1 and 0 Binary numbers are too hard to use Group them together in groups of 4 That’s hexademical!

Color Shorthand

Sometimes you will see colors as#123

This is the same as#112233

Why? Still a pretty broad range of colorshttp://www.december.com/html/spec/color3hex1.html

Helpful Color Links

A list of color namescolorpicker.com

Identifying Colors

Eyedropper for Chrome Colorzilla for Firefox Colorpic

Color Combinations

Paletton Adobe

Gradients

Any place that you have a color Lots of different types Google it!

Images

Black and White Pictures

Pictures are stored as pixelsMonochrome:

BLACK or WHITE

What is needed?

Different levels of black and white

› Shades of gray

› Percentage of black

ASCII Images

Instead of pixels, use characters

Color Pictures

What is a Color Pixel?

Red Green and Blue Each has a value from 0 to 255

Sound familiar?

Formats

Many Formats

jpeg or jpg, png, tif, gif, … Different encodings, different sizes but

they all will work› Actually different ways to COMPRESS them

Why compression?1000 red pixels in a row…

› That’s why they are different sizes But you MUST use the correct

extension name and capitalization

How much fidelity?

Big difference in size is how many pixels were used (dpi)› Isis WILL run out of space

Don’t use more than you need!› Common dpi: 96, 300, Dimensions in pixels

(700, 2000, 4000, …)› Little pictures don’t need that much detail› Don’t always need HD!

Tools to change the fidelity› Use any program› Can do it on the web: phixr

Images in HTML

Images in HTML

Remember that HTML is just text Need to point to pictures Use the img tag

<img src=“where” alt=“what”> alt:

› screen reader › REQUIRED for this class and to validate

Where are images used

Pictures Backgrounds Link displays List markers

Where are pictures stored?

Can be any where on the web› src has full url<img src=“http://www.cs.unc.edu/cms/about-

us/sittersonsmall.jpg” alt=“Sitterson”>

Problems› Pictures change or disappear› You’re poaching on their resources

NOT PERMITTED FOR THIS CLASS

Preferable: IN THE FOLDER

If you only have one or two, just another file› src just needs the file name› <img src=“sittersonsmall.jpg” alt=“Sitterson”>› REMEMBER: case matters

If you have a lot, keep them in their own folder› src needs the path› <img src=“images/sittersonsmall.jpg”

alt=“Sitterson”> Either is specific to this website

Same image on ALL your websites

Examples › Company logo› Your picture

Put it in the top level› e.g., comp101 for this class› (same place as your course page)

Reference as › <img src=“../sittersonsmall.jpg”

alt=“Sitterson”>

References Summary(src or href)

In my folderfile.ext

In a subfoldersubfolder/file.ext

In a higher folder ../file.ext On the web

http://www. …

Picture Sources

Your own Publicly available

› Flickr and the Creative Commons› Google and labeled for reuse

IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

Formatting and Sizing

Formatting img

All the box-related characteristics in CSS

Add class in HTML

Resizing and Cropping

Resize and crop before you put it in the folder

Why?› Size on page› Size of file› More control

Sizing Pictures in CSS

HTML permits you to put size on an img, but NOT in this class.

ALWAYS do it in css.

Only size ONE dimension. Deductions for using both: funny house effect

Why not always resize picture to wanted size?› May want to use image multiple times› Simpler to make multiple pictures consistent in

CSS

Adding a caption

<figure><img …><figcaption>caption</figcaption>

</figure>

Images as Background

Overall page design

Default: window size› Advantage: grows and shrinks easily› Disadvantage: harder to design

Making body fixed width› Advantage: easier to control› Disadvantage: scroll bars and unused space

Using fixed width section in default body› Combines advantage of fixed width without scroll

bar› Allows complex backgrounds

Background Image

Body background› Need to assure readability› Simple images (see resources)› For busier images: use overlay

Use div or section or … Opacity (0 to 1) to let it show through

› Background-image Background-size Background-repeat