HTML for the complete beginner

Adding graphics

Adding graphics (images) to your web page is easy, how easy?

HTML: (old way)
<img src="ezsmile.gif" width="48" height="48" alt="graphics or links details">

XHTML: (new way)
<img src="ezsmile.gif" width="48" height="48" alt="graphics or links details" />

The only difference to the above is the XHTML method has a "/" at the end. But note that it is all in lower case and all values are enclosed in double quotes.

The above will produce the image to the left.

What it means
<img   Means a graphic is being used. Short for image.
src=   Points to the source file, also where the image is if in another folder.
"ezsmile.gif"   Is the graphics name and format. (jpg and gif are the most common)
width="48"   Is the width of image, in this case, 48 pixels wide
height="48"   Is the height of image, in this case, 48 pixels high
alt="description"   This displays a description of the image.
/>   Is the end tag as every tag must now be closed.

"ezsmile.gif" is the example I have used here; you will name it to suit your own image. A few things to remember, the two most common reasons graphics don't show up is because of a missing " and/or wrong case. Not all browsers or servers mind the different text case, if you put "PIC.JPG" in your html code but upload your graphic as "pic.JPG, you will find it may not show up. As a general rule I like to keep everything lower case.

width="??" height="??" These two tags help your page load faster, by taking some guesswork away from the browser loading the page. It is best to use pixels (numbers, dpi) instead of % as everyone uses different hardware, software, screen sizes etc.
NEVER resize an image with the width and height tags, if you plan to use an image that's the size of your screen but only want a small version of it, use a graphic programs like Iranview to resize it, then make your tags to suit.
Quotes must be used around all values.
Most image programs display the width and height of the image, Iranview for example shows it on the bottom status bar. (see the related links page to get Iranview)

src="??" The images name as well as the source of the image if kept in another folder. If you want to keep your graphics separate to your files when you upload them you will need to add the folder to the name, like examples below.

alt="??" The alt tag is very important. This allows a description or instructions that show if the image doesn't load or you run your mouse over it if it does. If you use a spacer or blank image use alt="" If there is a gap between the quotes a small blank tab will appear as alt description.
The alt tag is now a required part of this tag, even if it is empty it must be used.

There is no order the tag has to be in, as long as it starts with <img the rest can be in any order you please. A good coding practice is to keep your method the same through out your code, this makes editing later so much easier.

The "main" directory shown below is your main directory; not a folder called main.
	This is everything uploaded into your main directory <img src="image.gif" width="??" height="??" alt="Your description" /> is all that's needed on your .html page to link to the image.

	This is probably the most common way of setting your directory up, with your .html files in the main directory and graphics in a sub directory. <img src="graphics/image.gif" width="??" height="??" alt="Your description" /> is what you need to use for this option.

	This option has both files in subdirectories <img src="../graphics/image.gif" width="??" height="??" alt="Your description" /> is what you need to use for this option.

	Which is similar to the last example but here we are linking from the main directory, like so <img src="new/graphics/image.gif" width="??" height="??" alt="Your description" /> is what you need to use for this option. Not to confuse you but using ../../image.gif wont work unless the graphic and .html file were reversed.

If the .html file and graphic is in the same folder anywhere on the tree is it the same as the first example, just src="image.gif"

The reason we don't use the full path is so we can use the same directories on our computer and just upload the files as we make/change them, saves a lot of editing as we can view and check the links and graphics as they would be set out on your site.

Everyone has their own way of setting up a site, but a good way to sort your files is this:
Directory sample

Or names to suit your site. Of course this is just a basic example. Your .html files in this example would go in the main directory (default) for your site, but the "new" folder could contain music, zip files etc and the "graphics" could contain all of your graphics for the site or you could have more sub directories in their also.
However you plan to set it up on your site, set it up in your hard drive the same way. The average site could get away with having all the contents in the main (default) directory, but a larger site or ones with lots of pages and graphics its best to split them up into sub directories.
My motto "keep it simple"

The reason we don't use the full path (URL) in the graphic name <img src="http://www.my made up domain name.com/graphics/image.gif"> is the browser has to go out of your server, into the net and look up your server again and then get your image, which takes longer in loading. The browser is already on your server so you might as well make it easy for it, and make your pages load a little faster at the same time.

Another little trick is to align your text with graphics, you may have seen graphics on the right of the page with text wrapping around it, or to the left with it wrapping around but if you just put an image tag and then text it doesn't work. It's because you have to align it. I have used the tags needed to do each way instead of text, trying to keep the page length down, Hopefully you will understand from these examples: (note i have added a border to these images to show you the distance between tag and image)

<img src="pic.jpg" align="top" />	<img src="pic.jpg" align="middle" />	<img src="pic.jpg" align="bottom" />
<img src="pic.jpg" align="left" />	<img src="pic.jpg" />	<img src="pic.jpg" align="right" />

Using the above can put the text right next to the image, which isn't always good, so we can move it off the image by the 'vspace' and 'hspace' tags with the above, like so:

NOTE: The default is to align text and graphics on the left border, to put everything in the center of the page we can use tags like so:

<div align="center"> Contents </div>
<p align="center"> Contents </p>

You may leave the alt="" empty but must put sizes in the width and height tags or the graphic wont show at all.

What is this picture?
Is it a link somewhere? Is it a graphic with important details or directions on it? Who knows. You would if I had of used the 'alt' tag. The alt tag is one of the most important, yet most widely missed tags. Alt tags are the backbone of your site and should be used always.

If you use a graphic to link somewhere and you want to get rid of the blue border. Simply add border="0" to the <img src> tag.
adding border="0" gives us

Thumbnails, you may have seen them. They are smaller pictures of the bigger ones, which you click to see. If you have heaps of pictures to show or the file sizes are big, then offer thumbnails. Thumbnails are smaller versions of the bigger picture NOT resized with the width/height tags. Resizing with the width/height tags will give you a smaller picture but not a faster loading time as the graphic still has to fully load. So make smaller pictures for the thumbs. (See the "Bad HTML" page for graphic no-no's)
A few helpful hints for thumbnails are:

Never put them on your index page.
Make all your thumbnails the same size (makes your page look clean)
Always use the alt tag
Add border="0" to remove the blue border from around the image

This is a thumbnail, click for a larger image

Here is an example of a thumbnail. The big image (creator unknown) is 36.5kb but the thumbnail is only 952 bytes, which is heavily compressed. We can also have the new image in its own .html page which would give us an option for text etc with it.
The image is called fall.jpg, so I called the thumbnail fall_t.jpg, the "t" standing for thumbnail. This is the code for this example:

<a href="fall.jpg"><img src="fall_t.jpg" width="72" height="78" border="0" alt="This is a thumbnail, click for a larger image" /></a>

We will see more on linking images on the next page

Common errors

Typos - putting scr is very commom, it's img src
Not having the image in the same folder (or not putting the right folder path) will cause the image not to show

Summary

We have seen how to display an image and what the parts of the tags mean
We have seen how to align graphics and aligning text with graphics
The importance of ALWAYS using the alt tag

Exercise

Set up/make your folders to suit your web site, add as needed
Add an image to your page, align it to the right and write a brief description about it.
Add three more images or the same one three times and align them at different places using one of the other align tags (div, p), don't forget the alt tags.
Find or make a large image and display a thumbnail for it (After the next character, make the thumbnail clickable to view the full size graphic

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your browser (save your work as you go).