Introduction to HTML 4: Working with Images

Placing An Image On Your Page

The command to place an image is constant. You will use the same format every time.

Now might be a good time to talk about where to store everything because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

It's a good idea for you to place whatever images you are going to use in the same place as your web pages in a directory (or folder) called 'images'. So if you are saving everything to a folder called "WebDesign", then inside that folder create a new folder called "images".

You must be cognizant of case when creating file names and folders as the servers that you will be publishing to will most likely be a UNIX server and UNIX is case sensitive. Also, try not to put spaces in your file or folder names as it will show up on the title and status bar with "%20" for every space.

Here's the format for placing an image:

<IMG SRC="image.gif">

By replacing "image.gif" with "clippership.gif", one of my own graphics, you get this...


Here's What's Happening

  • IMG stands for "image." It announces to the browser that an image will go here on the page.
     
  • SRC stands for "source." This is the attribute for the command IMG. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in the same directory as the page in the folder "images" that you created.
     
  • image.gif is the name of the image. This is the value given to the attribute "SRC" that is passed to the command IMG. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif). Images can also be .jpg or .bmp, and a few others depending on type of picture and how it was created.

Image Formats

There are three basic formats you will find on the World Wide Web.

  • .gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
     
  • .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image. .gif images also use compression but only when they are first created into that format.
     
  • .bmp (pronounced "bump") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example. Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers (Netscape, Opera) will be able to display it. Go with .gif or JPEG.

Where Do I Get Images For My Page?

They are literally everywhere. The HTML Goodies Images Page allows you access to over 500 for free, and there are other sites out there that offer just as many. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it, as it could be against copyright law. Ask by emailing the owner of the page or the webmaster of the site. Most sites include these as contact links easily found on the page.

If you will be developing a commercial site, then you probably want to credit your source as well. This type of information goes into a special section called <HEAD> that is above <BODY>. The information in HEAD is about the page but is not displayed on the page. It is used for reference.

When designing a page, it is best to try to use original art work and images whenever possible.

Activating An Image

Activating an image means making the image clickable or "active" by adding a Hypertext Link to the image. The viewer would click on the image, instead of on blue words, to make the hypertext link. For example, let's make the image "clippership.gif" a link to Newburyport High School.

Here's the format:

<A HREF="http://www.Newburyport.k12.ma.us"><IMG SRC="images/clippership.gif"></A>

The image tag is placed where you would normally have placed words. Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:

As you can see there is a new border around the image. That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a "border" around the image. Some people like it, some don't.

To make the border disappear, you add the attribute "BORDER".

Here's the format:

<IMG BORDER="0" SRC="homepage.gif">

Here we added an attribute that denoted that the border should be 0. The attribute is "BORDER" and the "VALUE" is "0". You can go the other way too if you'd like. Make it BORDER="55" if you want. It'll just make a huge border.

Here's what you get using BORDER="0":

If you roll the mouse over the image without clicking you'll see that it is active but doesn't carry the blue border.

Placement On The Page

When you place an image on the page, the default is justified to the left. If you write an image tag on a page, the image will pop up hard left.

If you want to change the alignment to center or right justified, you add the attribute ALIGN="--" to the <P> command.

Here's the format:

<IMG ALIGN="right" SRC="image.gif">

Here's what you get using "HighSchool.jpg", right justified:

Here's what you get using "HighSchool.jpg", centered:
    <IMG ALIGN="center" SRC="HighSchool.gif">

Aligning Text With Images

Images don't always stand alone. You will often want text alongside them. Here you will ALIGN text along the top, the middle, or the bottom. Again, you'll use the ALIGN="--" attribute with one of these three: "top", "middle", or "bottom".

Here are the formats:

<IMG ALIGN="top" SRC="image/HighSchool.jpg"> text text text

<IMG ALIGN="middle" SRC="image/HighSchool.jpg"> text text text

<IMG ALIGN="bottom" SRC="image/HighSchool.jpg"> text text text

And here's what it all looks like:

This is text ALIGN="top"

This is text ALIGN="middle"

This is text ALIGN="bottom"

You may notice that using the top, middle, and bottom attributes only allows for one line of text and then the rest jumps down below the image.

Here's the trick to solving that. Don't use the top, middle, or bottom attribute unless you only want one line of text. If you want text to wrap around the image, use ALIGN="left" and ALIGN="right".

Even if the image is already to the left, use the ALIGN="left" attribute anyway. It allows the text to wrap around the image fully.

this is text that should wrap around the whole picture and continue all the way until I stop typing.
 
 

 

Two At Once?

But what if you want only one line of text to come out of the middle of the image, and you want the image aligned to the right? Can you use two ALIGN="--" attributes in the same image? No.

You set the text coming out of the middle using the ALIGN="middle" attribute in the IMG tag. Then you set the image and its text to the right by surrounding the two items with the <P ALIGN="right"> and </P> commands.

Changing Image Size

Every image is made up of pixels. The more pixels per inch the image has the better, and more detailed, the image will appear. Of course, that also means the image will take up a whole lot more bytes on your hard drive. You're going to find that most images on the Web are 72 and 100 pixels per inch. There are other settings, but 72-100 is a good trade-off between loss of detail and bytes required.

When we "size a picture" we denote an image by number of pixels. For example, the "HighSchool.jpg" image is 107 pixels high by 143 pixels wide. With Windows XP, you can see the size of an image by browsing to the image through Windows Explorer. Open Windows Explorer, go to a directory with images, and if you hover your mouse over the image name, an information box should pop open with the details.

Here's the syntax for changing an image's size::


<IMG HEIGHT="##" WIDTH="##" SRC="image.gif">

Notice the HEIGHT and WIDTH attributes nestled right where the ALIGN command went before. You will replace the "##" with a number of pixels for height and width. Here are the three examples:

This is normal size:

This is 50 X 50:

This is 100X250:

This is 100X23:

The <HR> tag

The WIDTH command also works on the <HR> command, except you'll use percentages. Watch this:

<HR WIDTH="40%"> gives you this:

<HR WIDTH="64%"> gives you this:

When you use percentages, the size of the object will change when you change the size of the window. For example, resize this window and see how the Horizontal Rules change. Sometimes you want this to happen and sometimes you want it to be fixed. If you want it to be fixed, then do not use the percent sign in your tag.

 
 
 Home
 Previous
Next