Practice Inserting Pictures

Somewhere at the top of any Illinois Trails county index page, you will see an Illinois Trails logo. There is a fine collection of logos to choose from -- click here.

For this lesson, we have chosen a logo for you and you have already downloaded the image (along with the lesson files) to a directory on your computer.

Let's put the logo in the center of this page.

Important tip: To prevent "no show" graphics on your webpage once it's online, always copy all the graphics you want to use in making your webpage into the same directory as the webpage on your hard drive BEFORE you insert it into the document.

Click on the "Align Center" button. See example of toolsbars below.

Click on "Insert" from the first toolbar row above. From the drop-down menu, choose "Image". Find the file named "wagonlogo3.jpg"in the directory where you downloaded the file; click on it and open. Your image should appear. It should look exactly like the logo image below, which can be seen in the "view in browser" option.

<insert image here>



Logo image

After you have inserted an image, you will see a black cursor bar blinking on the side of the picture. Hit ENTER a couple of times to get the cursor in a better position for typing in text...ie. a label for the picture, perhaps.

Take a look at the source code to see the difference between inserting an image from your computer and inserting a URL pointing to the file. Click on the "Edit Source" button.

Find the code that says <IMG SRC="wagonlogo3.jpg"...> which is the code pointing to a directory on your computer and the code <IMG SRC="http://www.genealogytrails.com/ill/graphics/wagonlogo3.jpg"...> is pointing to a directory on Illinois Trails.

Now that you have successfully inserted an image, right-click on the image and click on "Image Properties". You will see a box where you can enter "Alternate Text". It is recommended that you enter an alternate description, just in case a user's browser can't load the image or for some reason your image doesn't show up. In this situation, we could enter the phrase "Illinois Trails Logo" or something similar. Click "O.K." once you're done.

In "Image Properties", you can also create a border for your picture by specifying how many pixels wide you would like the border to be.

Now right-click the image and select "Cut". Your image is gone. To retrieve it again, go into the Edit option and click "Undo". Your picture is back!

You can also copy and paste pictures just like with text.

Note: The first time you upload your HTML page with a new logo on it, please make sure all the graphics (except for the Illinois Trails logos) have been uploaded and are in the same folder/directory as your HTML page. Otherwise, the pictures will not show up! You only need to upload the graphics ONCE - no matter how many times you make changes to the text part of the webpage.

Congratulations! You now know how to insert a picture! Please do not save any of your changes to this lesson...you might want to use it again sometime.

On to the next lesson!

Back to Main Lesson Page