Lesson 4 - Adding images

So far our website is pretty boring, it's just plain text with a big title and a single link. Let's liven it up with some images.

Right click on this image, choose "Save Image As" and save it in your lakehouse folder as house-from-lake.jpg. It looks small here, but it will save on your computer as a much larger image. This particular image is 604 pixels (px) wide by 453 pixels high. We'll need this information in a moment.

Find the line < h1 >New England Lake House For Rent< /h1 > in your index.html file and right below it, above the first paragraph, add the following:

1

<img src="house-from-lake.jpg" style="width:604px;height:453px;" alt="View of House From Lake" />

What Happened?

Reload your website and you should see something like this:

Our visitor has to scroll down to see the text, but at least we have an image.

What Did We Do?

The code to add an image is pretty simple. As a base, it's only < img src="/IMAGENAME" / >. The image tag is what is called a "self-closing" tag. This means that instead of having a separate closing tag, it just has / > at the end of the tag.

There are two more important parts to an image. The first is the style. This tells the browser how to display an image. In our example we gave only the most basic instructions—width and height. Later on we'll learn how to add borders and wrap text around our images. Although images will display without any styles specified, to be "valid" HTML, an image must have its height and width declared, so you should always do this.

You can change the size of an image by specifying a different height and width in pixels. For example, at the top of the page I instructed the browser to display the 604 pixel wide image at only 150px wide.

If you resize a particularly large image (like those produced by modern digital cameras) using only the browser, it could take a long time for your page to load. A better idea is to use an image-editing application to resize your image to the size you want to display on your page. Most digital cameras come with software that will allow you to do this. There are also many sites online where you can do this for free, including:

• PicResize.com
• ResizePic.com
• Resizr.com

Congratulations!

You've created your first website complete with an image and a link! If you were desperate, you could stop here and upload it. But it's not particularly attractive—we should add some formatting.

Let's Go!

Let's move on to Lesson 5 — Basic Formatting.