Create a Site with HTML


Adding Images to a Web Page with HTML TRY This SiteBuilder FREE! - No Credit Card

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.


Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

Start Your Website Now!SquareSpace


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.