CodeNique - Free Tutorials on HTML, XHTML, CSS and More Online!

You can also use an image to link to your audio and video files. You will need to use the <a> tag and its href and title attributes along with the <img> tag and its src, alt and border attributes. Let me first explain about the <img> tag and its attributes first.

What if you need to get the coordinates for your client-side image map and do not have access to a web page editor like Adobe Dreamweaver and so on, which can draw image maps on to your images as well as provide you with the coordinates. This is cool if you create web pages with Dreamweaver or other web page editors, but if you are coding your image map by hand what can you do, nothing your screwed, I’m just playing. You can use the free programs available on your computer that will tell you your images coordinates or you can use the image map coordinates hack technique, which I will explain.

The other type of an image map is called server-side because of the work that is done by the server when a user clicks on a hotspot also known as a link or clickable region or area.

There are two types of image maps that are called client-side and server-side image maps. I will explain about client-side image maps in this tutorial and in a future tutorial, I will explain about server-side image maps.

What if you want your images to download faster for your users, in order to do so you will have to include the width and height attributes for the <img> tag. The values for the width and height attributes should always be in pixels, for example width=”400px”.

Now let me show you how to make a thumbnail image, which will be used as a link to the larger external image. In order to make the thumbnail image you will need an image editor to resize the image to a smaller size, I used Photoshop CS to resize my image or you can use the <img> tags width and height attributes, you will have to give the size of both attributes values in pixels, for example, a pixel value of 75px.

Now let’s talk about how to add inline images to an HTML or XHTML document. You will do this by using the <img> tag, which displays an inline image. An inline image is an image that is inserted into the current text flow of your HTML or XHTML document, which has no implied line or paragraph break before or after the <img> tag, that is why the images are called inline. The <img> tag requires no end tag in HTML but in XHTML, it is required, since the <img> tag is an empty tag, which means it has no end tag you will either have to include an end tag the normal way, for example <img></img> or the shorthand way, for example <img /> both of which are acceptable for XHTML.

Why nest tags you ask because I ordered you to, just playing, nesting tags can give your web page multiple effects to your text and much more.