computer science 101 images in web pages. image files two common formats, gif and jpeg gif images...

21
Computer Science 101 Images in Web Pages

Upload: moris-singleton

Post on 30-Dec-2015

225 views

Category:

Documents


3 download

TRANSCRIPT

Computer Science 101

Images in Web Pages

Image Files

• Two common formats, GIF and JPEG

• GIF images are more flexible for use as icons

• JPEG images are sharper with more colors (good for full-size photos)

Sizes

• Image size - measured as width and height in pixels

• File size - measured as data size in kilobytes (1000 bytes = 1000 * 8 bits)

Data Compression

• For a true color monitor, each pixel gets 24 bits

• Even a small image size requires a huge number of bits (100 * 100 * 24 = 240K)

• Files are in compressed format and the image is rebuilt when it is displayed

Creating and Editing Images

• Use a scanner, a digital camera, or a digital video camera with a stop

• Edit with an image manipulation program

Image Markup

• Use the IMG element

• Not a container element

• One required attribute, SRC

• Loads the image stored at the URL

<IMG SRC="URL">

Example: Nathaniel

Too Big, Too Many

• The larger the image, the more time it takes to load

• Use economy with images on a single page

• Create a balance between speed and content

Width and Height Attributes

• By default, width and height come from the image itself

• The size of an image can be reduced or enlarged by specifying the attributes

Always Specify the Width and Height

• The browser can lay out the entire page before all the images have been loaded

Resizing Rectangular Images

• When an image is not a square, you must adjust the width and the height in proportion to the desired size

We need to fit a 26 by 37 image in a square of 30

26/37 = w/30

Alignment

• ALIGN– bottom (default)– middle– top– left (causes text to flow to right of image)– right

Spacing

• HSPACE,VSPACE expect number of pixels as values

Other Attributes

• BORDER=pixelWidth, draws a border around the image

• ALT="some text", displays the text when the image is unavailable or the browser’s image display is turned off

Images as Links

• Use a small version of the image as a link

<A HREF="URL"><IMG SRC="imagename.gif"></A>

Thumbnailing

• You can just resize the image for the link, but it will take the same time to load as if it were the original size

• Better to create a thumbnail by using an image processing program to reduce the image’s file size

Organizing Image Files

• Keep them on your server (for speed)

• Associate with topics in their directories

• Or keep commonly used images in a separate directory under public_html

Background Images

• Use an image to paint a page’s background

• Tiles the image (repeats its display in row after row)

<BODY BACKGROUND="filename.gif">

Other Contents of Web Pages

• In addition to text and images, Web pages can contain – video – sound– applications