Links Directory - Web Tip of the Month

Listings of useful websites for community organisations.

'My fourth page' - a basic HTML recipe

[December 2008] How to link to a photo from inside a web page.

Recent Panui Tips have explained the HTML coding for headings, paragraphs, and links. The HTML for an image combines techniques you've already learned. You may like to re-read earlier Tips to refresh your memory.

A filename warning.

But first, a little warning: when you save an optimised image, as explained in the previous Tip, be careful with the filename you give it.

To avoid problems, stick to using only (lower case) letters and numbers. Don't use apostrophes or spaces, commas, brackets or full stops in the name. And try to keep the name short.

It's also useful for search engines if you try to make the name meaningful and useful.

Here's a 'bad' name: Miraz's (Best) Photo.jpg

Here's a 'good' name: miraz-jordan-2008.jpg

Where's that photo?

Including a photo in a web page can be a bit tricky, as a lot depends on where the photo is stored. There are also issues about how to get the photo on to the website.

In these Tips I'm aiming to explain just a little about HTML coding so you have enough information for a basic understanding and a basis for further learning if you're interested.

If you already have a website your web designer will be able to explain how you work with images in that website.

For this Tip we'll just assume that you have two files on your own computer's Desktop. People who visit you in person will be looking at your page on your computer, not on the Internet.

One file is called page-03.html. That's your web page. The other file is an optimised photo of spring lambs in a paddock, called spring-lambs.jpg. That's the one you want to include in your page.

Tags start and stop.

In previous Tips I've explained how HTML tags provide a beginning and end for the heading or paragraph or whatever's in the middle. It's like having matching bookends at each end of a row of books.

Each opening tag, such as <h2> or <p> has a closing companion, such as </h2> or </p> that shows where the enclosed 'thing' ends, like this:

<h2>This is a heading </h2>
<p>This is a paragraph.</p>

The image tag.

Now we need the 'image' tag: img

It starts like this:

<img

That says: 'show an image here'.

Yeah, right! Which image?

Straight away we have a question: which image is to be included? The answer in this case is an image called spring-lambs.jpg that happens to be lying around right next to the web page itself (the file called page-03.html).

So, we need to explain the 'source' of the image, like this:

src="spring-lambs.jpg"

So far, the whole tag is:

<img src="spring-lambs.jpg"

'Img' is the HTML way of saying 'image' or 'photo', while 'src' is the HTML way of saying 'source'.

Notice how there's a space between 'img' and 'src'. That space is important.

I need an alternative!

One of the most fundamental rules of HTML is that if you ever include an image you *must* also provide some text that can *replace* that image, as an alternative.

This is a hugely important feature that helps human beings who can't see the images for some reason, and search engines (who can never see images).

We need to supply alternate or 'alt' text, like this:

alt="Spring lambs in a paddock"

The picture so far.

So far the whole thing looks like this (notice the spaces before 'src' and 'alt'):

<img src="spring-lambs.jpg" alt="Spring lambs in a paddock"

The self-closing tag.

Until now, all the tags we've used have had to be closed by you. You had to type </h2>, for example, or </p>, with an extra slash ( / ) to show where the heading or paragraph stopped.

Well, images are like those spring-loaded doors that shut themselves after you've walked through.

You sneak that closing slash into what you've already typed and just finish off with the normal angle bracket, like this:

That's sneaky, but that's it. You're done. You've included the image in your web page, though really you should wrap it all up inside a paragraph tag, like this:

Just for fun.

Here's the HTML coding that Flickr provided to allow me to include a photo of my bike in a web page.

Can you see what it does and how it works? While I haven't explained every single part of the coding Flickr provide, you should now know enough to be able to figure it out.

Next Tip: HTML secrets revealed! Or, how to see the HTML other people have used on their website.

Last word.

Remember: don't use other people's photos without their permission.

Panui tips contributed by Miraz Jordan, http://knowit.co.nz