Writing HTML | About | Index | previous | next |

Inline Graphics

WWW Mathematics: 
          Text + Pictures = Multimedia

          Multimedia + WWW = Global HyperMedia

Objectives

After this lesson, you will be able to:

Lesson

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 in the same directory/folder as your HTML document. By "inline", this means that a WWW browser will display the image in between text.

To force the image to appear on a separate line,

simply insert a paragraph tag before the image tag: 

     <p> <img src="filename.GIF">
You can also control how text adjacent to the image aligns to the picture by including the align modifier:

1. align=top

<img align=top src="filename.GIF">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona...

2. align=middle

<img align=middle src="filename.GIF">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona...

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...

Note how the text aligns only for one line... (shrink or stretch the width of your WWW browser window to see what happens)

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.

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 HTML document with the text editor.
  3. Above the Volcanoes! h1 heading, enter the following: 
    
 <img src="lava.GIF">
    This 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 WWW browser.

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.

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?

More information

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 next folowing text was a header. A WWW browser always inserts a paragraph break before and after an <h1,h2,h3...> tag.

If your HTML documents will be accessed from users using a text-only browser (i.e. such as lynx), they will not be able to view any inline images. Typically they will see a placeholder so that the top of the lesson page would appear as: 

[IMAGE]
                         VOLCANOES!
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 lest the view 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 placholder, 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= keyword replaces the placeholder with a text string so that from a text-only browser, it would now appear: 
A Lesson On
                         VOLCANOES!
In this lesson you will use the Internet to research information 
on volcanoes and then write a report on your results. 
 -----------------------------------------------------------------
In this Lesson...

Independent Practice

Add an inline image to your WWW document 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.

| Lesson Index | previous lesson "Graphics" | next lesson "Linking with Anchors" |

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

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