Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
How to include an image in your page
How to control the dimensions and border size of the image
How to align the image
How to make a text alternative / tool tip

How to include an image in your page

The web would be quite boring if all pages were just text. HTML therefore allows you to include graphics in your pages. Any graphic you want to use needs to be in either .gif or .jpeg format. GIF format is usually more suited to graphics that have large blocks of color, such as logos or cartoons. JPEG is more suited to graphics like photographs, where a large amount of detail is needed.
Most graphics software will allow to you save, or export your graphic into the right format. It's important to remember that any image you include on your page will significantly raise the file size of the page. This means that your page will then take much longer to download. It's a good idea, therefore, to optimize, or compress your graphics as much as possible (you can do this with software such as Image Optimizer or within your normal graphics software, such as Paint Shop Pro), to ensure a fast download time.
To include an image into your page, you need to use the following code -
<img src="myimage.gif">
Where "myimage.gif" is the filename and file extension of your graphic. Notice that the <img> tag is one of the HTML tags that does NOT require a closing tag. The browser knows that, once it has read the contents of the tag and displayed the image, that will be no more information relating to it after the ending >.
Remember that if the image is stored in a different directory to the page itself (perhaps in a directory called 'images'), then you need to include the path to it in the tag. E.g. -
<img src="images/logos/logo.gif">
You can also include an image from elsewhere on the web. If you do this you need to include the entire address, e.g. -
<img src="http://www.thedomain.com/somewhere/theimagename.gif">

How to control the dimensions and border size of the image

When you use an image in a page, it's a standard practice to 'tell' the browser the width and height of the image (in pixels). This is especially important when the file size is large, because it allows the browser to render the content of the rest of the page in the right way, whilst the image is downloading. To do this you need to use the height and width attributes, for example -
<img src="logo.gif" width="300" height="50">
If you use different dimensions to the actual graphic, the browser will scale the graphic to fit, producing what is often an ugly result. Here is a graphic displayed in the correct dimensions (160 width by 40 height) -
example
And here in the incorrect dimensions (300 width and 50 height) -
example
If you wish, you can set a border to appear around the image. this is done with the border attribute. For example, to have a border with a width of 3 pixels, you would use the following code -
<img src="logo.gif" width="200" height="50" border="3">
Which would give you a border of this size -
example

How to align the images

The alignment (how the image is rendered in relation to anything around it) can be controlled using the align attribute. The possible values are as follows -
  • absbottom (meaning the absolute bottom)
  • absmiddle (meaning absolute middle)
  • baseline
  • bottom
  • left
  • middle
  • right
  • texttop
  • top
The main ones to consider are : top, bottom, left, right and middle. An example of the code -
<img src="logo.gif" width="50" height="50" align="right">
Here is the same image aligned using the different possibilities.

Firstly using align="top" - some surrounding text example and some more text.

Now using align="bottom" - some text here example

Now with align="left" - some text here example and some more text.

Now align="right" - text text example and more text here.

Now using align="middle" - some text example and some more text.



How to make a text alternative/tooltip

Although nearly all modern browsers can display images, some do not, whilst others prefer to have this feature disabled, to speed up their browsing. Sometimes images fail to load and sometimes the image will be taking so long to download that the user will not wish to wait to see the image. (They can click 'stop' to stop the loading of the page).
For this reason, it's a good idea to always use the alt attribute of the <img> tag. This allows the browser to show a text description of the image in place of the image. This also allows you to create a 'tooltip', so that when the mouse is 'hovered' over the image, the description is displayed. In some browsers this text is also displayed whilst the image is downloading, so the user can see what the image is/is for. For example -
<img src="logo.gif" height="50" width="350" align="top" alt="Our Logo">
Hover your mouse over the image below to see an example of the alt attribute -
This is an example of the alt attribute. The text with in it is displayed when the mouse is 'hovered' over the image

Hopefully now, you've got a basic understanding of how to use images in your pages. The best thing to do is practice, practice and then practice some more, so make or copy some images, open up Notepad and start playing! Next, we'll be taking a look at what is after all, the whole point of the internet - links.

TopTop of page - BackBack to Backgrounds - Next - LinksNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference