Graphics
(Not everyone can see graphics! Must be usable without graphics!)

General

<hr> horizontal line
	Borders are more commonly used
Height (of an element)
	pixel value or percentage
width 	
width of image in pixels
max-width
	pixel value or percentage
min-width
	pixel value or percentage
linear-gradient
linear blending from one color to another.
example: linear-gradient (#FFFFFF, #8FA5CE);
(Other ways to do it available)
opacity
	Numeric values between 1 (fully opaque) and 0 (completely transparent).

Inserting Graphics

<img src="logo.gif" height="200" width="500" alt="My Company Name">
align	right, left (default), top, middle, bottom; considered obsolete
(see CSS float or position) alt
Text phrase that describes the image
border	use the CSS border property instead
height 	Height of image in pixels
hspace	use the CSS padding property instead
id	Text name—alphanumeric, beginning with a letter, 
no spaces; the value must be unique 
longdesc	URL of a resource that contains an accessible description of a complex image
name	names the image
use the id attribute instead
src 	The URL or file name of the image
title	more descriptive than the alt text
vspace	use the CSS padding property instead
width 	Width of image in pixels

Images as Hyperlinks
<a href="index.html">
<img src="home.gif" height="19" width="85" alt="Home">
</a>

To add a caption to a picture, try this:
Have a DIV to contain the image.
Put the caption in the DIV with the picture.
If you assign the DIV to the ID figure, (below) you have a caption with your picture.

<style>
#figure { width: 640px; border: 1px solid #000000; padding: 5px; text-align: center;
font-family: Papyrus, fantasy; }
</style>

HTML 5 has a ‘figcaption’ attribute.
<style>
figure { width: 640px; padding: 5px; border: 1px solid #000000;}
figcaption { text-align: center; font-family: Papyrus, fantasy; }
</style>

The following are a few sites that you may find
helpful when looking for images:
Free Images: http://www.freeimages.com 
Free Stock Photo Search Engine: http://www.everystockphoto.com 
Free Digital Photos: http://www.freedigitalphotos.net 
Pixabay: http://pixabay.com
iStockphoto: http://www.istockphoto.com

The following are useful sites for creating banners and button images:
LogoCreator: http://creatr.cc/creatr
Cool Text http://www.cooltext.com
Da Button Factory: http://dabuttonfactory.com

Images

Optimization of images
Many pictures (including cell phone pictures)
May be slow loading on the Web.
Images can be modified to load faster using applications such as GIMP (http://gimp.org).

	Less compression means 
Higher quality
slower loading and larger file sizes
Some pictures can be ‘interlaced’ which means it starts fuzzy and then appears sharper

Too much compression makes the picture look ‘blocky’ (pixilation)

Specifying the size of an image can help the REST of the web page load faster

	Thumbnail images can be much smaller, often used to link to larger picture

Photo editors
http://pixlr.com/editor
http://www.gimp.org

GIF (Graphic Interchange Format)
*.gif max 256 colors
Simple; line drawings, solid colors
Clip art
One color (usually background) can be transparent
Animated GIFs are possible
Compression is lossless
Can be optimized or interlaced

JPEG Joint Photographic Experts Group
	Designed for quality pictures
	Compression is lossy
	JPEG at 80% quality displays well
	Progressive JPEG similar to interlaced GIF; image comes in gradually

PNG Portable Network Graphic
	Compression is lossless
	No animation
	Millions of colors
	May replace GIF for many uses

Bar Charts
The meter element has attributes:
value (the value displayed), 
min (the lowest
value in the range),
max (the highest possible value in the range).
This can be used to make bar charts:
<h1>Monthly Browser Report</h1>
<meter value="14417" min="0" max="14417">14417 </meter>14,417 Total Visits<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Chrome<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Edge<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Firefox<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp; 312 Opera<br>
<meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200 other<br>

Progress Charts
The progress element, shows progress within a specified range.  (Think, gas gauge)
value (the value displayed) 
max (highest possible value)
Place information for nonsupporting browsers between opening and closing progress tags. 

<h1>Progress Report</h1>
<progress value="5" max="10">50%</progress>
Progress Toward Our Goal

Borders
border-style property 
inset, outset, double, groove, ridge, solid, dashed, and dotted. 

border-width
border-color
border-style with the border
border-top
border-right
border-bottom
border-left properties

.dashedborder { border-width: 3px;
border-style: dashed;
border-color: #000033; }
shortcut: .dashedborder { border: 3px dashed #000033; }

There are shortcuts for top, right, bottom, left doing width, style, color
There are ways to do rounded corners

Padding
padding
	single value (px or em) padding on all sides
	Two values (px or em)
		first value for top and bottom
		second value for left and right padding
	Three values 
		first top
		second left and right
		third bottom
	Four values: top, left, bottom, right

padding-bottom
padding-left
padding-right
padding-top

Background
To add a background image:
body { background-image: url(texture1.png); }

background-attachment
	fixed, or scroll (default)

background-clip
	padding-box, border-box, or content-box

background-origin
	padding-box, border-box, or content-box

background-position
	Position of background image
	Two percentage or numeric pixel values, horizontal, vertical position from upper left 
	OR left, top, center, bottom, and right.

background-repeat
	repeat (default), 
	repeat-y, (vertical repeat), repeat-x (horizontal repeat), and no-repeat 
	CSS3 values (space, round) are not supported in all browsers.

background-size
	Two percentages, pixel values, auto, contain, or cover. 
	Width then height
	contain horizontally fills container
	cover vertically fills container

Proper Use of Graphics

Avoid having graphics being the ONLY way to convey meanings.
Not everyone can SEE your graphic.
Connectivity can LIMIT graphics.
Include text ways to explain the same concepts.

Alternate text helps:
	Visually impaired
	Search engines
	Cell phone users
	Slow loading browsers
	Text only browsing

SIZE DOES MATTER
Images can be cropped
Images can be compressed
Thumbnails can be used
If text is used in graphics, may need ‘anti-aliasing’ to smooth edges.

ONLY use what adds value to your site.
(Cuteness is not a value, but a distraction.)

LIMIT animation.
	Is it distracting?
	How long does it take?
	Does it add true interaction?
	Is it attractive to adults?
	Is it tiresome for repeat visitors?

Is a text transcript available for audio?
Visitors may leave a slow loading page
White space increases readability