Graphics: Manipulation Issues

• Display Size Options
• Wrap-Around Options
• Centering Graphics
• Horizontal Rule

Display Size Options

Another attribute to the Graphics tag is to change the size of the graphic as it appears on the Web page. Here is a graphic at its full size:

Kind of large for most Web pages. So, what to do about it?

BEST ANSWER:

Go into a graphics program and change the size to something more useful.

NOT AS-BEST ANSWER:

Change the size at which Netscape will display the graphic like this:

So, how do you do this? By modifying the graphics tag:

You have to specify the height and width in PIXELS (the dots that make up an inch of text on a page).

You can figure out the dimensions of your graphic quite simply by viewing the graphic in Netscape as follows:

1. Open the webpage with the graphic you want to display at a different size.
2. On the Mac, click and hold your mouse over the image. On Windows, right-click on the image.
   This will open a context-sensative menu for you.
3. Choose VIEW IMAGE.
   This will open the image in by itself.
4. Look at the title bar. This will show the size of the graphic.
   It might say, for example JPEG IMAGE 174x400 pixels. This means the graphic is 174 pixels wide and 400 pixels high.

Tips:

• Change the height/width in proportion to each other or the graphic will appear warped.
• Change the pixels by an easily figured proprotion (ie. 1/2) this makes it easy to avoid mistakes.
• Use this with caution! The image is still just as large. A large graphic takes longer to download so you may be showing a smaller image but still requiring users to download a very large graphic.
• This size change ONLY applies to how the page appears on the screen. Most printers will not understand the size change which means the graphic will print at its normal size and could render the page unusable in printing. TEST THIS BEFORE RELEASING YOUR WEB PAGES!!!
• Also, using the image size tags -- even if you don't plan to make changes to the size of the graphics -- will make the pages appear to load more quickly. It's a good habit.

Web Graphics are considered in-line. This means that they are meant to be part of a line of text. Like this . . . . The basic options for lining up the text work this way:

ALIGN=TOP

ALIGN=MIDDLE

ALIGN=BOTTOM

These choices don't allow for much flexibility -- such as wrapping text around the graphic which is a feature many people want. Later versions of HTML allowed for this in minimal ways:

ALIGN=LEFT (graphic on right, text on left)

Castle

A fortified residence, especially that of a prince or nobleman; a fortress.

The house of every one is to him castle and fortress, as well as for his defense againts injury and violence, as for his repose.
--Coke

Our castle's strengthwill laugh a siege to scorn.
-- Shakespeare

ALIGN=RIGHT (graphic on left, text on right)

Castle

A fortified residence, especially that of a prince or nobleman; a fortress.

The house of every one is to him castle and fortress, as well as for his defense againts injury and violence, as for his repose.
--Coke

Our castle's strengthwill laugh a siege to scorn.
-- Shakespeare

So, how do you achieve these effects? By modifying the graphics tag:

Centering Graphics

Because we are used to the align tag allowing us to CENTER things on the page, it needs mentioning that it does not work that way with graphics. In order to center graphics, you need to place the graphic into a paragraph and center that paragraph as follows:

The result will be a center graphic like this:

Horizontal Rule

Not exactly a graphic but certainly a graphical element, the HORIZONTAL RULE tag lets you place a clean line across your page. The HORIZONTAL RULE appears on its own line, text following it will start on the next line.

Options:

<HR NOSHADE>

<HR WIDTH="80%">

<HR WIDTH="365">

<HR HEIGHT="15">

<HR WIDTH="365" ALIGN="LEFT">

Or of course, combining all of these:

<HR NOSHADE WIDTH="50%" ALIGN="RIGHT" HEIGHT="15">