Text + Pictures = Multimedia
Multimedia + WWW = Global HyperMedia
Got it?
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">
<img align=top src="filename.gif">
<img align=middle src="filename.gif">
<img align=bottom src="filename.gif">
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.
In this exercise, you will add an introductory picture of a volcano to your lesson.
<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.
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
than 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.
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 browser window -- and the height and width will be displayed in the title bar of the browser (at this time this works only in Netscape).
For our example in this lesson, the lava.gif image is 300 pixels wide and 259 pixels high. So you should edit your volc.html file to 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 may be undesirable. If you insert larger numbers (to make the image bigger) the result will be a "blocky" picture. Sometimes this can be a useful effect on images with large areas of solid color. Take a look at our example of Going from Small to Big. If you use lower numbers (to make the image smaller) the result may be a distorted picture. Also, the full size image still has to be downloaded, so there is no real savings in terms of time to download the image. Any re-sizing of the image requires extra "work" by the web browser to recalculate the page layout.
You could experiment and see for yourself. We just might be wrong!
You can also specify the size of an inline image in dimensions that are percentages of the current browser window size, so that the image will resize itself if the viewer expands or reduces the size of their browser window. Take a look at our example of Percentage Scaling. Caveat Emptor! This may not work on all web browsers!
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).
The Internet Connection at MCLI is
Alan Levine --}
Comments to levine@maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut7a.html