Inserting images into a web page

So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with the IMG tag in HTML. The basic IMG tag looks like this:

There are no closing tags for the IMG tag. So you don't do this:

In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you type SRC. This stands for Source and means the location of your image. After an equals sign, you type the name of your image between a pair of double quotes.
It's essential that you get the SRC part right, though. To do that, you need to know about Absolute versus Relative file referencing.

Absolute Referencing

Take a look at this file reference:

C:\Users\Owner\Documents\HTML\some_image.gif

Starting from the right-hand side, this says that there is an image called some_image.gif. This has been saved into a folder called HTML. The HTML folder is in the Documents folder. The Documents folder is in a folder called Owner. The Owner folder is in a folder called Users, which is on the C drive. This is an Absolute file reference. It points to a specific location on your C drive.
This would be no good on the internet, however. Although you will have all these folders on your C drive, somebody else viewing your web page won't. But that person's browser will try to look for all these folders. Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the image you specified to use in your web page won't be displayed to anybody else but you.
Another example of an Absolute References is this:

http://www.homeandlearn.co.uk

That's an absolute reference to a web page on the internet. Perfectly OK, and you'll see how to add links to web pages later. But Absolute References and not terribly practical when it comes to you own images and your own html pages. Relative References are much better.

Relative Referencing

With Relative Referencing, the starting point is not your own computer, but the image file or HTML file itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:

With Relative Referencing, the browser starts the search for the image on the right hand side:

So with a Relative reference, the browser starts looking for a file called "some_image.gif". If you just put this:

the browser will look for the file in the same folder where you saved your web page. If it's there, no problem; the browser will display the image. You don't need to add anything else, because the browser will stop searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder where you saved your web page.
So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will know where to find everything. And when you're asking the browser to display an image or another web page, you only need the name of the image or web page. You don't need to do this:

You can just do this:

On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder called "web_site" you would be expected to create other folders inside this one. A folder called "images" to store all your image files; a folder called "scripts" to store any external code; and a few other folders as well.
If you do that, Relative Referencing gets a little bit trickier. For example, suppose you have a web page called index.html. You've place this web page inside of a folder called web_site. You've created another folder inside of your web_site folder. You've called this new folder images. So your file and folder structure looks like this:

Folder structure showing an images folder and a web page

Of course, you will have placed all of your images in the images folder. Now, if you want one of those images on the index.html page, you couldn't do this:

If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder called images. You would have to do this:

The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this case, look for a folder called "images". (The current file is index.html, which is where you want the image to appear.)
If you wanted to point to an image that was outside the "web_site" folder, then life just got even trickier still. (You'll see how to solve this later). But as a beginner, if you keep everything in the same folder - images and web pages - then this sort of relative referencing should work:

In case all this file referencing is not too clear, we'll do some practical work in the next section.

Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML. Inside of the HTML folder, create two more. Call one of the folders images and the otherpages. If you're using a Windows computer, your Explorer window will then look like this (Windows 7):

Double click your template text file and add the following HTML image code:

Click File > Save As and save your template as a HTML file. But save it in your new pages folder, and call it images.html. Don't forget to change the Save as type box to All Files, if you're using Windows:

Windows Explorer showing folder structure

Once you have saved your template as a HTML web page, double click it to open it up in your browser. You should see this, if you are using Firefox:

If you are using Internet Explorer, however, you should see this:

Internet Explorer showing broken image reference

In both cases, the image has not displayed. Firefox displays a broken file icon, and Internet Explorer displays a red X icon. The reason is that the browser can't find the file. So if you see either of those icons in future, just remember that the browser is telling you "Image File Not Found".
To solve this problem, we have some files for you. The file you need is in the extra_files folder that came with this course.

Double click the extra_files folder, and then double click the york_images folder. Copy theyork_minster.jpg file and paste it into your HTML/pages folder. Your pages folder will then look like this:

The image and the web page are in the same folder, the pages folder. Notice the file size of the image - 747 kilobytes. Could be a bit big on the internet, and we'd want to look into this.
Once you've copied the image over, refresh your HTML page in your browser. You should see the image appear:

If you don't see an image, but still have the "Image File Not Found" icon, make sure the SRC part of the HTML is correct:

SRC="york_minster.jpg"

Note the lowercase spelling, and the two double quote marks. A common error is to spell SRC as SCR. Make sure, too, that the image and the web page are in the same folder.
Once you get the image displayed in the browser, create another folder inside the pages folder. Call this one york_images. Your explorer window should then look like this:

Now move the york_minster.jpg image to the york_images folder. Your explorer window will then look like this:

Reload your web page in your browser. You should see the "Image Not Found" icon again.
Go back to your HTML code and change the IMG line to this:

So we've added the folder name, then a forward slash. This denotes a folder in the same directory as the HTML page. After the forward slash, we have the image name. What we're saying here is, "In the same folder as the images.html page, look for a folder called york_images. In this folder there is an image called york_minster.jpg".
Save your work and reload the images.html web page in your browser. You should see the image reappear.

Advanced file referencing

Previously, you created an images folder and a pages folder. This:

For neatness sake, this is a good idea: you can have most of your html pages in the pages folder, and all your pictures in the images folder. (We say most of your html pages because there is an exception called the index.html page. You'll learn about this a bit later.)
One difficulty about this approach is that file referencing becomes a lot harder. Suppose we moved the york_images folder inside of the images folder. If we did, the code we wrote before would no longer work. This line:

That's because there would no longer be a folder called york_images in the same location as theimages.html file. The image is now one folder up from the pages folder. The code would therefore be this:

After SRC we now have two dots and a forward slash. Two dots and a forward slash mean "go up one folder from where you are". (Remember, this is all relative to the images.html page, where the code is.) The browser will then look for a folder called images. It will search this folder for one called york_images. Then it will look for the image specified.
Don't worry if all that is not too clear: we'll keep images and image folders together, just for simplicity's sake.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 4 (Dealing with Images)

Thursday 9 July 2015