The Key Placing Graphics

in Your Web Page

HTML Tags for Inline Graphics

An "inline" image is one that appears within the text of a WWW page, such as this picture of the world and this picture of a computer disk. "Inline" means that the web browser will

display the graphic image in between text. In the examples below graphicname.gif is the name of a

GIF file and graphicname.jgp is the name of a JPG file. P> 

The HTML coding for the inline image tag is:

<img src="graphicname.gif"> or <img src="graphicname.jpg">

 

Note: When your graphic files are tagged as in the above example, they must be placed in the same directory and folder as your HTML document. They are separate files that must reside with your html document(s) so that the web browser can display them along with your document.

 

Notice how the text immediately followed the picture of the earth and then the disk in the above example. If you want the graphic on its very own line, you must use an extra tag. All that you have to do is insert the paragraph tag before typing the image tag:

<p><img src="graphicname.gif">

 

Note: With web servers spelling does count and so does capitalization! File names on UNIX computers are case sensitive. GraphicName.gif is a different file than graphicname.gif.

 

Aligning Text and Inline Graphics

By placing an attribute code within the <img...> tag, you can control how text adjacent to the image aligns with the picture. There three different align attribute choices. All are placed inside the <img> tag in the following manner.

1. align=top <img align=top src="graphicname.gif">

 

2. align=middle <img align=middle src="filename.gif">

 

3. align=bottom (default) <img align=bottom src="filename.gif">

On Your Own

  1. Save the disk image from above into your Web page folder.
  2. Open your text editor software program.
  3. Open up your Web page with the text editor.
  4. Above the <h1>My Home Page</h1> heading, enter the following html coding:
  5. <img src="disk.gif">
  6. This HTML coding will insert, at the top of your page, the disk picture that you just downloaded.
  7. Save your new coding in your text editor, close the file, and reload your Web page in your web browser.

You may be wondering why you did not need to put a <p> tag after the image. This is because the following text was a header. A web browser always inserts a paragraph break before and after an <h1,h2,h3...> tag. When you are placing your image in the body of your Web page, you will want to use the <p> tag often.

Lesson 7

Alice Drive Middle School

Staff Information Index

This is a Palmetto State Roots Web Site.

© 1998

Cynthia Ridgeway Parker, M.Ed.