Writing HTML | About | FAQ | Alumni | Tags | Lessons | previous | next |

7a. Inline Graphics

WWW Mathematics:
          Text + Pictures = Multimedia
          Multimedia + WWW = Global HyperMedia
Got it?

Objectives

After this lesson, you will be able to:

Lesson

Let's see how with HTML you can include pictures like the "Big M" in a 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 "Big M".

The HTML format for the inline image tag is:


     <img src="filename.gif">
where filename.gif is the name of a GIF file that resides in the same directory/folder as your HTML document. By "inline", this means that a web browser will display the image in between text.

Note how the text immediately follows the "Big M" above. What if we want the "Big M" sitting on its very own line? To force the image to appear on a separate line,

simply insert a paragraph tag before the image tag:


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

Alignment of Text and Inline Graphics

With an attribute to the <img...> tag, you can also control how text adjacent to the image aligns with the picture. The align attribute, added inside the <img> tag, can produce the following effects:

1. align=top

<img align=top src="filename.gif">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State...

2. align=middle

<img align=middle src="filename.gif">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State...

3. align=bottom (default)

<img align=bottom src="filename.gif">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State...


Note how the text aligns only for one line... (shrink or stretch the width of your WWW browser window to see what happens.) With HTML 2.0, you cannot have blocks of text adjacent to a picture. In a later lesson, we will see a way to create that effect.

Placing an Inline Image in Your HTML document

Note: If you do not have the working document from the previous lesson, download a copy now. You will also need to have the GIF image available from the Lesson 7 Image Download Center.

In this exercise, you will add an introductory picture of a volcano to your lesson.

  1. Re-open your workspace (if not already open).
  2. Open your volc.html document with the text editor.
  3. Above the <h1>Volcano Web</h1> heading, enter the following:
      <img src="lava.gif">
    
    This HTML format will insert, at the very top of your page, the lava picture that you downloaded in the previous lesson.
  4. Save and reload in your web browser.
In placing the image, you may have wondered why we 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.

The alt="..." attribute

If your web pages will be viewed by users using a text-only browser (i.e. such as lynx), they will not be able to view any inline images. Or sometimes, users will turn off the loading of inline images to save time on downloading over slow network connections. An attribute for the <img ...> tag allows for substitution of a descriptive string of text to hod the place of the image.

Under these conditions, a viewer with a text browser will see a place holder so that the top of our lesson page looks like:

[IMAGE]
                         Volcano Web
In this lesson you will use the Internet to research information 
on volcanoes and then write a report on your results. 
 -----------------------------------------------------------------
In this Lesson... 

This lets the viewer know that there is a graphic inserted at the top of this page. You could modify the <img> tag so that rather then using the place holder, it displays a text string. For example in our lesson we could add "A Lesson on:" by modifying the <img> to read:
     <img alt="A Lesson on:" src="lava.gif">
The alt="..." attribute replaces the place holder with a text string so that from a text-only browser (or when loading of images is shut off), it would now appear:
A Lesson On
                         Volcano Web
In this lesson you will use the Internet to research information 
on volcanoes and then write a report on your results. 
 -----------------------------------------------------------------
In this Lesson... 

At this time, add this same edit to your HTML page for the <img> tag that displays the picture of the volcano.

Height and Width attributes

Another option you may want to include in your <img...> tags are two attributes that give the dimensions of the image in pixels. Why? Normally, your web browser has to determine these dimensions as it reads in the image; the loading of your page can be faster if you specify these numbers in your HTML.

The format for including this option is:

  <img src="filename.gif" width=X height=Y >
where X is the width of the image and Y is the height of the image in pixels.

You can usually use some sort of graphics program or utility to determine these numbers. Another way to find the dimensions of an image is to load it into your web browser-- you may be able to drag and drop the icon for the image into your brower window-- and the height and width will be displayed in the title bar of the browser.

For our example in this lesson, the lava.gif image is 300 pixels wide and 259 pixels high. So you should now edit your volc.html file to now read:

  <img alt="A Lesson on:" src="lava.gif" width=300 height=259>
NOTE: the order of the attributes inside the <img> tag does not matter.
Often we are asked if you can alter the size of the image by inserting numbers other than the actual dimensions of the image. The answers is yes but the results will most likely be undesirable. If you insert larger numbers (to make the image bigger) the result will be a "blocky" picture. If you lower numbers (to make the image smaller) the result may be a distorted picture. You could experiment and see for yourself. We just might be wrong!

Check Your Work

You may want to compare your work to this sample of how this document should appear. If your document is different from the example, check how you entered the image format in your text editor. Make sure you entered it as instructed in the Placing an Inline Image in Your HTML Document section of this lesson.

If you see a picture icon with a question mark:

first check that the HTML file and the GIF image are in the same folder/directory. Then, you may want to make sure that the file name entered in the <img... > tag matches the name of the GIF file.

NOTE: Some computer systems (UNIX) are case sensitive for the names of files, meaning that the file "lava.GIF" is NOT the same as "lava.gif". Other computers (Macintosh) consider them as the same files. Even if your computer does not differentiate, we suggest that you be consistent in the naming of files and how they are referred to in your HTML. (Many WWW servers run UNIX).

Review Topics

  1. What is the HTML format for an inline image?
  2. What type of tag must you put before an image tag to make the image appear on a separate line?
  3. How did you add the lava picture to your document?
  4. What does the alt="...." attribute do? What does the height="...." attribute do?

Independent Practice

Add an inline image to your web page using a GIF picture file that is stored on your computer or one that you have downloaded from the Internet.

Coming Next....

Create links to other documents and files that you create as well as ones on the Internet.

GO TO.... | Lesson Index | back: "Graphics" | next: "Linking with Anchors" |

Writing HTML Lesson 7a: Inline Images
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut7a.html