7a. Inline Graphics

Web Mathematics:

   Text + Pictures = Multimedia
   Multimedia + WWW = Global HyperMedia

Get it?

HTML Tags for Inline Graphics

An "inline" image is simply one that appears in the middle the text of a Web page, such as the W in the middle of the text here.

The HTML format for the inline image tag is:

    <img src="filename.gif">  <~~ HTML

    or 

    <img src="filename.gif" />  <~~ XHTML

You will notice above there are TWO different ways you can have an image tag with in your web page. There is no closing tag for image tags. So in order to keep your web page up to the newest standards of coding the XHTML version of this tag should be used.

Where "filename.gif" is the name of an image 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 W" above. What if we wanted the "Big W" sitting on its 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" /> </p>	
	

Alignment of Text and Inline Graphics

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

align="top"

<img align="top" src="filename.gif" />

This is to show you that with the align="top" attribute set in the <img... /> tag. The text runs across in line with the top of the image is till it hits the end of your document where it then returns to the bottom of the image and continues from underneath the image.

align="middle"

<mg align="middle" sc="filename.gif" />

This is to show you that with the align="middle" attribute set in the <img.. /> tag. The text runs across the middle of the page, starting in the middle of the image. It again runs across till it hits the end of your document where it then returns to the bottom of the image and continues from underneath the image.

There is also a align="bottom"(Default) for the image tag as well and guess what it does. Yes you guessed it! The text starts at the bottom of the picture like this below:

This is to show you that with the align="bottom" attribute set in the <img.. /> tag. The text runs across.......

Placing an Inline Image in Your HTML document

In this exercise, we will add a picture of a volcano to your lesson for the Volcano Tours.

1. Re-open your workspace (if not already open).
2. Go to the text editor window.
3. Above the <h1>Eazy Space Tours</h1> heading, enter the following:

       <img src="spaceship.jpg" />

   This HTML format will insert, above the Eazy Space Tours, the picture of the Eazy Space Tours Ship the "The Widow Maker" that you saved in the previous lesson.
4. Save and reload in your web browser.

In placing this image, you may wonder why we did not need to put a <p> or a <br /> tag after the image. That's because the following text was a header. A web browser automatically inserts a paragraph break before and after an <h1, h2, h3...> tag.

Compare your page to this SAMPLE here...

Practice
You may like to find your self a picture of a tropical beach and insert it above the <h2>Tropical Centres Of Venus</h2> like we just did with the image of the Space Ship.

Try GOOGLES image search or your favourite web site to get a picture.

The alt="..." attribute

If your web pages happen to be viewed by a user using a text-only browser (such as lynx), they will not be able to view any of your inline images. And sometimes, users will turn off the loading of inline images in there browser settings to save time on downloading over slow network connections. The alt="..." attribute for the <mg ... /> tag allows for substitution of a descriptive text to hold the place of the image instead.

Under these circumstances, a viewer with a text only browser will see only a place holder so that the image of our Volcano would look like:

The study of volcanoes, or Vulcanology, has been a major part of the tours and the start of colonization of the planet Venus for the past 10 years. [IMAGE] Volcanic Tours Of Venus

This lets the viewer know that there was a graphic inserted there above the heading. You can modify the <img.../> tag so that rather than just seeing the place holder, it displays a text of string. For example, in this lesson we would add "A picture of Mt. Nimucissa of Venus" by modifying the <img.../> to read:

    <img alt="A picture of Mt. Nimucissa 
of Venus" src="Volcano.jpg" />
			

The alt="..." attribute replaces there place holder now with a string of text so that from a text-only browser (or when loading of images is shut off), it would now appear:

The study of volcanoes, or Vulcanology, has been a major part of the tours and the start of colonization of the planet Venus for the past 10 years. A picture of Mt. Nimucissa of Venus Volcanic Tours Of Venus

At this point, make these same changes to your HTML file for the <img.../> tag that displays the picture of the Volcano and any other images you may have inserted.

Height and Width attributes

Another attribute you might want to include in you're <img.../> tags are the two attributes that give you the dimensions of the image in pixels. Well why you ask? Normally, your web browser would have to determine these dimensions as it reads in the image to your browser; the loading of your page will be a lot faster if you specify these numbers in your HTML.

The format for including this option is:

    <img src="filename.gif" width="Xpx" height="Ypx" />

Where Xpx is the width of the image and Ypx is the height of the image in pixels.

You can usually use some sort of graphics program or utility to determine these numbers.

For our example in this lesson, the spaceship.jpg image is 420 pixels wide and 330 pixels high. So you should edit your HTML file to read:

  <img alt="A picture of Eazy Space Tours Widow Maker"
  src="spaceship.jpg" width="420" height="330" />

NOTE: the order of the attributes inside the <img.../> tag does not matter. It can also be entered all on one line.

You can alter the size of your images by inserting numbers other than the actual dimensions of the image, but sometimes the results may be undesirable. If you insert larger numbers (to make the image bigger) the result will be a "blocky/pixilated" picture. Although sometimes this can be a useful effect on images with large areas of solid colour.

Have a look at the following EXAMPLES of altering image sizes by numbers and also by percentage scaling. You may close the page once you have read it.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the 7a. Inline Graphics section of this lesson. After viewing the sample, you can close the window that opened.

If you see a picture icon with a question mark or a red X:

Blah Blah Blah Blah Blah Blah ......... Blah Blah Blah Blah Blah Blah Blah .......

Firstly check that the HTML file and the IMAGE file are in the same folder/directory. Then, you may want to check that the file name entered in the <img... /> tag matches the name of the file you have.

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

Practice
Use the <img.../>, and the align=".." alt="..." height="..." & width="...", attributes to create your own specifications inside of your own document.

And if you're really game. Create a Folder in your work space and name it images. Place your images inside that folder and see if you can re link them to your page with the following clues. src="...." & foldername & a / & filename.gif

Top of page | Previous Lesson| Lessons Index | Next Lesson