Math 696 -- Images

Images

Images

The HTML tag for including a graphic image in a World-Wide Web page is <img>. For example, to include a copy of the Math 696 logo on your home page, you could use the HTML code

<img src="../math696/animated_logo.gif">

Notice that the HTML tag img is an exceptional one that has no matching end tag. However, the img tag takes an argument src that specifies the URL of the source file of the image.

For upward compatibility with XHTML, put a space and a slash before the closing angle bracket of the img tag:

<img src="mypicture.jpg" />

You can similarly link into your own World-Wide Web pages any image whose URL you know. It is also possible to grab an image off the World-Wide Web and store a copy locally on your hard disk. Typically you can do this either by holding down the Shift key while you click the left mouse button on the image, or else by holding down the right mouse button on the image and making an appropriate selection from the menu that appears. However, you should take care not to violate the copyright of the owner of the image.

If you have an image file of your own (for example, your photograph) that you want to display, you should move it to your subdirectory where World-Wide Web browsers look for files (typically public_html) and set its access permissions to world-readable via the Unix command

"chmod a+r public_html/filename". Then you can include the image on your World-Wide Web page with the code <img src="filename">.

The image tag accepts several other arguments besides src. It is a courtesy to set the alt flag, which specifies "alternate text" that can be displayed by non-graphical browsers such as lynx or by speech synthesizers. You may wish also to set the height and width attributes: these tell graphical browsers how much space to reserve for the image, so that display of the page can begin before the image finishes loading. (You can determine the size of an image in pixels by, for example, displaying the image in the graphics program xv.) Thus, to include your photograph in your World-Wide Web page, you might write something like this:

<img src="photo.gif" width="192" 
     height="228" alt="My Photograph" />

HTML 4.0 introduced a generic object tag that can be used to include not only images but also video clips, applets, and other types of data. Browsers do not yet universally support this tag, however.

Images