section4 notes

8/6/2019 Section4 Notes

http://slidepdf.com/reader/full/section4-notes 1/12

## Section 4 - images ##

Hexidecimal Colors

Graphics Formats

OptimizationDithering

Inserting Images<img> Attributes

alt text

Height and width

Scaling

Aligning text to an images

Links

URLsindex.html



page 41

hexidecimal colors

• colors displayed in RGB -- 0 to 255• decimal is based on 10; hex based in 16 (0 through F)

• must have # preceding

• eg #FFFF00 = yellow

• eg #FF0000 = red

web safe colors:• 216 colors built into browser

• display reliably across platforms

- must be in pairs

- only 0, 3, 6, 9, C, F

• converter: http://www.w3.org/Markup/Guide/Style

(scroll down to: Hexadecimal color values)



page 42

Graphics formatsPrint= TIFF, EPS, PICT

Web = JPEG, GIF, PNG, SCA*

(compression algorithms built in)

Vector = Illustrator - not a language understood by browser

Flash: uses vectors for internally-running programs played on

top of browser

PDF = must have player or browser mapped to Acrobat

JPEG (joint photographic experts group)- used for photographs

- up to 16 million colors

- blurred, fuzzing, loss of contrast

- not good for text

- no transparency

- due to compression algorithm

- block-by-block compression; brightness stays, but colors

change — to fool the eye

- not lossless - save original

- repeated saves will degrade

- color shifts are inevidable



page 43

GIF (graphical interchange format)- used for graphics

- transparency and animation support

- 256 colors only (through indexing)

- operates by pattern recognition

- if several pixels with the same color, can redefine

mathematically = compress

- or if repetitive pixel combinations, also reduces mathematically

- lossless compression, no color shifting if web-safe colors are

used (216)- adaptive setting - will have color shift, but tries to compensate

for user variables

PNG (portable network graphic format)- combines: lossless compression with 16 million colors

- 256 levels of transparency

- gamma correction between platforms

- not supported by older browsers



page 44

Optimization options - JPEGA) Settings menu

B) File Format (GIF, JPEG, PNG)

C) Quality menu (auto select for quality slider)

- a higher setting preserves more color info, but results in larger files.

D) Progressive (check box)- to create an image that displays progressively in browser

- as a series of overlays

- enables viewer to see low-res version before file downloads completely

- auto-selects optimized

- requires more RAM for viewing; not supported by some browsers

E) ICC Profiles

- used by some browsers for color correction

- preserves profiles embedded in Photoshop

F) Interlaced

- displays image in horizontal line sections; increases file size

G) Lossy

- allows compression process toremove pixels from image and reduce file size

- 5-10% ok, maybe up to 50%

- can’t use with interlace, noise or patterndither

H) Blur- creates smaller image size, but may reduce quality

- .1 to .5

- identical effect to Photoshop Gaussian Blur filter

I) Matte

- if original image contains transparency, select matte color to simulate appearance

of background transparency.

- JPEGs can’t be transparent, but if original image contains transparency, matte

color is blended

- fully transparent pixes are filled with matte color, partially transparent pixels are

blended with matted color



page 45

Dithering• selecting GIF dither (eg 128) from settings: simulates a larger

number of colors /reduce banding

• technique of mingling two colors together for optical illustion of

another

• if color is outside range, browser tries to mix colors that are

available.

• two types of dithering: application, browser

Optimize options - GIFA) Settings menu

B) File Format

C) Color Palette menu- color table for an 8-bit image has max 256 colors

- Perceptual: creates custom color table by giving priority to colors for which the

human eye has greater sensitivity

- Selective: creates similar to perceptual, but favors broad areas of color and pres-

ervation of Web colors -- produces images with greates color integrity (default)

- Adaptive - creates custom table by sampling colors most common in image;

- Web - uses standard 216 color table. Ensures no browser dither is applied to col-

ors.

D) Dithering algorithm menu

Inserting images• create your own images in Photoshop or Fireworks

-optimize as gif or jpeg

• download an image from the web - control+click > save to disk

• www.google.ca has an image search tab• images downloaded from the web cannot be altered in

Photoshop or Fireworks without serious deterioration in quality.

Even to resize, it must be recompressed when saved

<img src="sunflower.jpg" />

<img src="sunflower.jpg"></img>

these mean the same

<img> attributes

ATTRIBUTE DESCRIPTION

src specifies the filename of the image file

alt alternate text to display in place of image

longdesc identifies URL of web page with long description of image

width width

height height

usemap identifies image to be used as a client-side image map

ismap identifies image to be used as a server-side image map

page 46

alt Text• attribute of <img>

• required element for well-formed XHTML

• displays text in place of the graphic

- if images turned off - Lynx browser (text only)

- image file missing

• some search engines spider alt tags

<img src="sunflower.jpg" alt="Photo of Sunflower" />

<img src="barn.jpg" alt="Photo of Country Barn" />

Height and Width

• mandatory for properly formatted XHTML• speeds up page load

• if not there, browser must examine the picture and calculate its

dimensions.

• reserves space on the page - text can start displaying while pic-

ture is loading

<img src="sunflower.jpg" width="189" height="288"alt="Photo of a Sunflower" />

<img src="barn.jpg" width="40" height="40" alt="Photo of a

Barn" />

page 47

Scaling images• not recommended

• reduces appearance

• still has to load full file size

• always resize in Photoshop or Fireworks

align Attribute

(old HTML - does not validate Strict)• places the alignment of text to the image

• must all be in the same paragraph

• top, middle, bottom; right, left

• default is bottom, left

• alignment should be left for CSS, not XHTML compliant.

• can be used in Transitional

<img src="sunflower.jpg" align="middle" width="189"

height="288" alt="Photo of a Sunflower" />This is a pretty sun-

flower

page 48

Links• created with the <a> element

• means "anchor"

• inline element

• nested inside block-level element such as • href = hypertext reference

• link colors changed as attribute of <body>

<body link="#3399CC" vlink="#6699FF">

(this is HTML, won't validate, set in CSS)

To validate your XHTML documents, visit the <a

href="http://validator.w3.org/"> W3C markup validation service.</a>

page 49

Image as a link

<a href="banjo.html"><img src="banjo.jpg" width="252"height="239" alt="Banjo the dog" /></a>

...

<h1>Central Valley Farmers’ Market</h1>

<h2>Contact Information</h2>

If you have any questions or concerns about the CentralValley Farmers’ Market, please call (908) 626-3764.

P.O. Box 135 

Central Valley, CA 94359

<a href="centralvalley.html">Home</a>

...

page 50

mailto elements

• cc=emailaddress for a cc• bcc=emailaddress for a Bcc

• subject=subject text for a Subject

• multiple elements are separated by an & (ampersand)

<a href="mailto:[email protected][email protected]

&subject=testing">

<a href="mailto:[email protected]?Subject=Your Next

Show&[email protected]&BCC=paulm@wings.

com&Body=I can't wait for the next show!">Email Oasis</a>

• using mailto attracts spam

mailto:<a href="mailto:[email protected]">Send a message to

the president</a>

You can send an e-mail to <a href="mailto:your_email_address">your email address</a>.

• multiple addresses, separate with a comma

<a href="mailto:[email protected], [email protected]">

page 51

Connecting to Validator from files

<a href="http://validator.w3.org/check/referer">

<img src="http://www.w3.org/Icons/valid-xhtml10"

alt="Valid XHTML 1.0!" height="31" width="88" /></a>

this should be placed on the bottom of each xhtml page if it is infact valid.

section4 notes

Documents