HPi - Adding Graphics

Adding Graphics

Screen Resolutions

What we must learn now is the significance of screen resolutions. In HTML, we measure screen height and width in pixels which is the measurement system that determines screen resolutions:

640w X 480h
800w X 600h
1024w X 768h
1280w X 1024h

Keep in mind that this has nothing to do with screen size. So, when creating/manipulating graphics for the web, always assume the person viewing your pages has the lowest resolution screen (800w X 600h is usually the standard these days).

Graphics File Formats

There are two types of graphic file formats that can be displayed in the majority of Web browsers:

gif
jpg (pronounced "jay-peg")

These file formats can be recognized by their .gif and .jpg file extensions respectively. A complete discussion about graphics (creating, editing, and manipulating) is beyond the scope of this class. The following information will provide you with some basic facts about these two file formats:

.gif

.jpg

Alternate Names:
8 bit
indexed color
256 colors

Display:
Capable of displaying a maximum of 256 colors and/or shades of gray

Compression:
LZW

Usage:
Graphics with 256 colors or less
Specific colors can be set to transparent
Used to create animations
Used as image maps

Alternate Names:
24 bit
RGB (red-green-blue)
Millions of colors

Display:
Capable of displaying millions of colors and/or shades of gray

Compression:
Variable

Usage:
Photographs (continuous tone)
Graphics with more than 256 colors
Used as image maps

Inserting A Graphic

<img src="name_of_graphic_file"> - Calls and Displays the Graphic

Example Code:

The Result:

The Animal

Placing Graphics

Attributes:

align="left | right | top | middle | bottom"
alt="alternate text"
border="x"
height="x"
width="x"
hspace="x"
vspace="x"

Example Code:

The Result:

The Animal

Example Code:

The Result:

The Animal

Example Code:

<img src="theAnimal.jpg" align="top" alt="The Animal" height="250" width="188">Top Alignment

The Result:

The Animal Top Alignment

Example Code:

<img src="theAnimal.jpg" align="middle" alt="The Animal" height="250" width="188">Middle Alignment

The Result:

The Animal Middle Alignment

Example Code:

<img src="theAnimal.jpg" align="bottom" alt="The Animal" height="250" width="188">Bottom Alignment

The Result:

The Animal Bottom Alignment

Click here for an example of text and graphic alignments.

Creating A Graphic Link

Example Code:

<a href="http://www.yahoo.com"><img src="yahoo1.gif" alt="Yahoo!" height="100" width="80"></a> <a href="http://www.yahoo.com"><img src="yahoo1.gif" alt="Yahoo!" border="0" height="100" width="80"></a>

The Result:

Adding Color

Top of Page

Tables