Images, Links, and Multimedia

Directories and Pathnames

Filesindex.html

standard.css

updatetime.js

welcome.gif

cis203syllabus.pdf

depelmatt.doc

internetbasics.ppt

file name

TIPS NO spaces in file names. Use all lowercase characters. Short names. Make names meaningful. Use “standard” file extensions. Browser Helper Objects and Viewers.

. extension

public_html

components cis203 images

materials solutions

RootDirectories

(subdirectories of public_html)

(parent directory is public_html)

Directories(subdirectories

of cis203)

(parent directory is cis203)

Directory Structure

(really a virtual root on most web servers)

Two Types of Pathname

• Absolute Pathname.

• Relative Pathname.

public_html

components cis203 images

materials solutions

../schedule.html ../../standard.css

../materials/introhtml.ppt

../solutions/mycssdll.css

../../images/welcome.gif

/images/welcome.gif

components/standard.js cis203/materials/depelmatt.doc

components/standard.js

../images/welcome.gif

/components/standard.js

introhtml.ppt

Pathnames

Images

Common Image Types

• GIF– Clipart, logos, and other simple graphics.– Animated GIF.

• JPG– Photographs.

• PNG– Replacement for GIF.

• BMP– Anything – but huge files – avoid.

Size and Aspect Ratio

234 pixels

400 pixels

Aspect Ratio = = 1.709horizontal

vertical

400 pixels

234 pixels=

Resizing Guide

New Size =Horizontal * change

Vertical * change

400 * 0.25

234 * 0.25=

≈100

59= 1.695

New Aspect Ratio = 1.695

Old Aspect Ratio = 1.709 Slight Distortion

=100

58.5

New Aspect Ratio =100

58.5

Distortions

Horizontal Distortion

Vertical Distortion

Aspect Ratio Preserved200 pixels / 117 pixels

Aspect Ratio Ok100 pixels / 59 pixels

Color Depth

• Number of colors each pixel can take.

• Bits Colors– 1 bit black and white– 8 bit 256 colors– 16 bit 65,536 colors– 24 bit 16,777,216 colors– 32 bit 4,294,967,296 colors

• More bits means more colors.

Image File Size

• Size larger file!

• Color Depth – more bits larger file!

• Larger file slower download!

• Resize images before loading to web site.

• General:– Most displays are 1,024 by 768.– Often do not need 32 bit.

An Image on a Web Page

<img src="bige.jpg“alt="Einstein on the stairs" />

<img src="bige.jpg"alt="Einstein on the stairs" width="320" height="187" />

Resizing an Image with Attributes

Preserve the Aspect Ratio!

A better approach is to resize the image with graphics editing software. This saves space and improves download time.

<img src="bige.jpg"alt="Einstein on the stairs" style="width: 320px; height: 187px" />

Resizing an Image with CSS

Float Left

<img src="littlee.jpg" style="float: left" /><p>Some days dinner is a little late. On those days, … a lazy human.</p>

Float Right

<img src="littlee.jpg" style="float: right" /><p>Some days dinner is a little late. On those days, … a lazy human.</p>

Some Additional Comments

• KISS! Do not get too fancy too quickly!

• Avoid over use of images.

• Respect copyrights.

• Do not engage in “bandwidth theft!”