Adding Images to a Web Page with HTML

If you downloaded this tutorial the images that you need are in an htdocs/images folder located in the tutorial folder.

If you are working online and haven't created your images folder within your htdocs folder do that now.

If you haven't downloaded the zip file that contains the images for this site, do it now and move the images into the images folder.

You can't complete this lesson if you don't have the images. Image Download Page

Pictures or images are added to a web page using the image tag.

In its most basic form the tag looks like this: <img>

The image tag is one of the few HTML tags that does not use a closing tag.

You'll use the source attribute to tell the the browser what image to use. It looks like this: src="".. We need to tell the browser what image to use and where to find it. The name of our image is strawberry.jpg and it is located in the images folder.

Our image tag will look like this:
<img src="images/strawberry.jpg">

Copy the code and paste it between the left division tags .

Save the changes and look at the page in your browser.

Note:
If you aren't closing your browser, just right click on the page and click Refresh or Reload to see changes.

You should see a large strawberry on the left and on the right the words My First Web Page


The code will look like this:
<div id="main">
<div id="left"><img src="images/strawberry.jpg"></div>

More on Images
We're omitting some necessary attributes of the image tag to speed the learning process. When you get some experience, you should supply the width , height and alternate text for the image. The code for the strawberry jpg image would look like this: <img src="images/strawberry.jpg" width="350" height="266" alt="Strawberry"> . Set image margins and borders with style sheets.


Take a short quiz on the information you just learned.

Let's add a few paragraphs.