[Index of Lessons]
[Lesson 6] [Lesson 7]

6.1. Inline Images
An inline image is an image that turns up on a web page, for example, World picture. This world picture is a GIF file.
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, Or it can reside in a different directory but you reference it as though it was in the same directory. By "inline", this means that a web browser will display the image in between text.
Note how the text immediately follows the world picture above. It is also possible 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">;

World pictureThis is a picture of the world.

2. align=bottom(default)

<;img align=bottom src="filename.gif">;

World picture This is a picture of the world.

3. align=middle

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

World picture This is a picture of the world.

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 have in place of the image.

The HTML for this is :

<img src="filename.gif" alt="This is an image name">

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.

Now that you know all of these tags here is the html code used in loading each of these world pictures you have seen :

<img src="world.gif" alt="World picture" width=90 height=90>

Of course each picture showing the alignment of the text next to it has that little piece of added code align=...... within each line. Now here's a a little trick for you, I've told you that the width and height of the world pic is 90x90, now with the height and width commands you can change these numbers and your browser will modify the picture for you, in this way you can make the picture smaller, larger or just deform it a little.

Here is the World picture made smaller 30x30:
World picture
Everything was the same I just changed the numbers, again an example, this time the picture will be 30x120:
World picture Looks wierd doesn't it. But this can be a useful tool when it comes to calculate spaces on a web page or just using it for fun.
Example
As you know, the interesting web sites all have pictures on them, and now that you have looked at enough examples, let's get to work on this web site of ours. The pictures have to be saved in the same directory or folder that you have been saving your page. The pictures used for this web page are here (Pictures). What you should do is use the right mouse button to save the pictures in to the correct directory. There will be step by step instructions on that picture page for you to follow. Once you have done that, add the following to your web page. Or have a web page that contains the following code.

<html>
<head>
<title>UFO's, Paranormal and other Mysteries</title>
</head>
<body text=black bgcolor=white link=red>
<h1><u>UFO's, Paranormal and other Mysteries</u></h1>
<p>
Welcome to my web site, this site is going to have various
pages pertaining to information I have read and have found very
interesting.<br>
Subject matter will range from UFO's to ghosts and
there specter friends, prophecy's and theories which will make
your mind query all that you know. <p>
All of the information contained within these pages can be found in full in the <b>X-Factor</b> magazine. For these pages only excerpts have been used. All pictures have been found on various web sites around the world.<p>
I hope you enjoy this site<p>
<hr>
<img align=right src="iran_ufo.gif" width=80 height=60 alt="UFO pic">
<h1><u>UFO's</u></h1>
<h3>Area 51</h3>
<i>"About 190km north west of Las Vegas, in the Nevada desert, the offical map stops. There is plenty there - roads, creeks, mountains, bunkers, buildings and a massive 9.5 km runway - but on paper these things do not exist. It is as if all human activity has ceased across an area the size of Switzerland."</i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Profile
<li>Evidence
</ul>
<p>
<img align=right src="nos1.gif" width=68 height=99 alt="Nostradamus pic">
<h1><u>Paranormal</u></h1>
<h3>Millennium</h3>
<i>"Michel de Nostradame, popularly known by his Latin name Nostradamus, often spent his evenings alone, gazing into a bowl of water - like a gypsy with a crystal ball - until he went into a deep trance and saw into the future. On one such night, Nostradamus witnessed his own death. He died two weeks later, on 2 July 1566 - the exact date he had predicted." </i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Analysis
<li>Evidence
</ul><p>
<img align=right src="ark.gif" width=132 height=61 alt="Ark pic">
<h1><u>Mysterious World</u></h1>
<h3>Quest for the Lost Ark</h3>
<i>"Covered with gold and surmounted with two golden Cherubim facing each other, the Ark of the Covenant must have been an awesome object to behold. But it was what lay inside that made it the holiest - and most powerful - of religious objects"</i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Profile
<li>Evidence
</ul><p>
</body>
</html>

Like before, add all of this to your first web page by opening the document and editing the page. To speed it up, you can cut and paste the code. After you have done all of this, click here (Example 6) to compare your work to the example provided. The page with graphics is starting to look a little more noticable.
Here's an important thing for you to note, take care in where you position you're <img src...> tags, with your web page move the lines of code up or down a few lines. So instead of having
</ul><p>
<img align=right src="ark.gif" width=132 height=61 alt="Ark pic">
<h1><u>Mysterious World</u></h1>
<h3>Quest for the Lost Ark</h3>

Try having it as :

</ul><p>
<h1><u>Mysterious World</u></h1>
<h3>Quest for the Lost Ark</h3>
<img align=right src="ark.gif" width=132 height=61 alt="Ark pic">

Notice how it disrupts the positioning of your document.
Make sure you position your pictures in the right spot, a simple incorrect line placement and your document will look very different.

Click on Lesson 7 to continue, or click here (Top) to return to the top of document