How to link to a photo from inside a web page.
Recently I 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 posts 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 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 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: <img src="spring-lambs.jpg" alt="Spring lambs in a paddock. " />
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: <p><img src="spring-lambs.jpg" alt="Spring lambs in a paddock. " /> </p>
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.
<a href="http://www.flickr.com/photos/tikouka/2900690103/" title="Electric bike 00209 by Miraz, on Flickr"><img src="http://farm4.static.flickr.com/3186/2900690103_daf9653a96_m.jpg" width="240" height="209" alt="Electric bike 00209" /></a>
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.
Update:
The whole series:
KnowIT by RSS
Add your Comment