Intro & Getting Started | Viewing Source & Tags | Making & Testing a Page | Basic Text Formatting | Images
Links | Directory Structure & e-mail | Tables | META Tags | Outside Resources

Images:
You can place images on the page along with your text. To do this, have your image in the same folder (directory) as your HTML file (for the time being). The only types of images you should have on a web page are JPEG and GIF files; anything else would take too long for people to load up and view, especially on dial-up internet connections.

To show that image on your page, the coding would look similar to this:

<IMG SRC="filename.gif">

The "IMG" tells the browser that you're going to be showing a picture. The "SRC" attribute tells the browser where to look, and what file it is, exactly (think "source"). You can do more with the IMG tag, however. Look at the following example:

<IMG SRC="filename.gif" HEIGHT="20" WIDTH="20" ALT="This is my image" BORDER="1">

The "HEIGHT" indicates exactly how tall (in pixels) the image is, while the "WIDTH" indicates the width. By putting in these two options, the browser can draw the space where the image would be without even loading it first, and move on to loading the rest of the HTML file. This speeds up viewing times for browsers. The "ALT" is an interesting option. The text that you place in an "ALT" tag will appear on the web page when you place your cursor over the image it belongs with. Finally, the "BORDER" will place a border of indicated width (in pixels) around the image.

There are even more attributes you can use with your images. You'll probably notice that if you place an image within text on your page, the text will not flow around the image; it will appear as if the image has its own line in the paragraph (technically, it does!). To align the images with the text, you will use the "ALIGN" attribute in the <IMG SRC> tag. The image will automatically be aligned to the left, by default, once you put it in. However, if you use ALIGN="LEFT" in the tag, the text will flow around the image on the right, as the image is justified to the left. The same effect can be done by using ALIGN="RIGHT" to have the image justified right, with text flowing around on the left.

>> next