Let's add an Image

Bring your notepad to the front (if it isn't already). Your cursor should be after your last <br> tag. Hit the "enter" key and let's begin our image tag on a fresh line. Remember: spacing down in notepad does not affect how your browser will display your page. In other words, spacing down in notepad does NOT "space down" in your web page. Spacing down simply makes it easier for us to read our code.

The "img" in the tag stands for image--which is another word for picture. The "src" stands for source. So we are telling the browser to display an image and the source of the image is a file called facebw.gif (which is what MY picture is called). You have to type the name of YOUR picture. Make sure to put quotation marks around the file name of the image.I included the sizes in my code, but you don't have to. If you do, remember to put a space between the image name and the width and height.
After you type your tag, save and bring your browser to the front. Hit the refresh button and you should see your picture.

Your picture will be centered, because we put a <center> tag when we began adding items to our web page--everything that comes after that tag will be centered until the browser sees the closing </center> tag. That tag is AFTER our image tag. If this doesn't make sense, look at the code above. Where does it tell the browser to begin centering and where does it tell it to stop?

Note for teachers: while the code is often written with align="center" tags for each paragraph or item, my goal here is to help the student under the concepts of the language. In later lessons, we learn more precise coding, as well as to store our images in folders that will be referenced in our source paths.

<---previous page        next page--->