Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
You are here: irt.org | Articles | HTML | HTML #3 - Making your Web pages more exciting [ previous next ]
Published on: Sunday 26th July 1998 By: Michael Bednarek
If you have been following my last two articles, you will already be familiar with the HTML commands necessary to create a basic Web page. You should by now be able to create pages with a bit of colour, using some fancy fonts, and with links to all your favourite places.
That's great, but now's the time to make your page more exciting. In this article, I'll not only teach you how to add images to your Web pages, and explain about image maps, but I'll tell you how to make your pages musical too. You'll have all-singing, all-dancing pages in no time.
Inline images are simply graphics which appear on a Web page. The irt.org logo at the top of this page is an example. Images on a Web page have many different uses - as site logos or titles, navigational aids (e.g. site menus), banner adverts, illustrations and diagrams, or photographs of the author.
The majority of Web browsers accept only two types of inline image - GIF files, and JPEG files. GIF files can have a maximum colour depth of 256 colours, while JPEGs have a minimum colour depth of 16.7 million colours. JPEGs manage this by using built-in compression, which keeps file sizes small but results in a slight loss of image quality. In general, GIF files are used for logos, banners, and titles, and JPEGs are used for photographic images. When creating graphics to put on your Web page, make sure you save them as either GIF or JPEG files first.
Once you have created your image, you use the IMG tag to put it on your Web page. Let's take a look at an example:
<IMG SRC="picture.gif" LOWSRC="lowpic.gif" ALT="A picture" BORDER="0" ALIGN="CENTER" HSPACE="2" VSPACE="2" WIDTH="300" HEIGHT="200">
The line above shows almost all the attributes you will ever need when using the IMG tag. In most cases you will not need to specify all of them. Let's take a look at each one in turn.
The SRC attribute points to the location of the image file you want to load. As with similar attributes, this can be a filename, an absolute URL such as http://www.server.com/picture.gif or a relative URL such as ../images/picture.gif. The LOWSRC attribute is similar, and specifies the location of a lower resolution version of the image. If included, this image is loaded first, and then comes the image specified in SRC. This is useful if you have a very large image which takes a long time to download, and you would like the user to be able to see something in the meantime, even if it is lower resolution.
The ALT attribute gives the browser some alternate text to display if the image does not load or if the user has images switched off. I recommend you use this attribute with all your images, to make your pages as user-friendly as possible.
The BORDER attribute specifies the width, if any, of a border around the image. In most cases you will not want a border, so you can leave out this attribute. The ALIGN attribute specifies how the image should be aligned with respect to any surrounding text. It can be LEFT, CENTER, or RIGHT. HSPACE (horizontal) and VSPACE (vertical) are the space, in pixels, between the image and its surrounding elements. For example, if you wanted text to be five pixels away on the right of the image, you would use HSPACE="5".
Finally, WIDTH and HEIGHT are the width and height of the image, also in pixels. These two attributes are important for two reasons. Firstly, including them will allow the rest of the page to load while the image is loading. Secondly, you can adjust the width and height of the image to resize it. For example, if you have an image which is 300 x 300 pixels, and you want smaller versions of the same image in other areas or other pages, you can use the same image file but with different WIDTH and HEIGHT attributes, e.g. WIDTH="50" HEIGHT="50". This means that only one image file needs to be loaded, saving on your page's download time.
That covers basic inline images - but there are a couple of other things you can do with them too. One of the most common is to use an image as a link; for example, the TESTED logo at the top of this article will take you to the Beta Testers page when clicked on. You learnt how to create hyperlinks in the last article, but here's a reminder in case you forgot:
<A HREF="http://www.somesite.com">Click me</A>
To use an image as a link, you simply replace the link text ("Click me") with your IMG tag. For example, the Beta Testers logo code is:
<A HREF="../../beta/"><IMG SRC="../../images/tested.gif" BORDER=0></A>
Note that using an image as a link will automatically add a border round your image, so you need to include BORDER=0 to remove it.
In the first article of this series, you learned how to change the background colour of your page. Well guess what? You can use images for the background wallpaper of your Web page. Alter the BODY tag of your page so that it reads:
<BODY BACKGROUND="picture.gif">
I do have to give you a few warnings though. The image will be tiled across the page, so if you want to create one big background image, you have to make your image the same size as the screen. Not only does this look different at different resolutions, but the image takes an age to download, too. Secondly, just because you can use wallpaper, doesn't mean you should. The Web is full of cheesy and garish patterns for you to use as your backgrounds, and these tend to give your pages an amateurish look.
There's still one aspect of images we haven't covered, and that is the image map. An image map is a single image file, which has been configured in such a way that clicking on different areas of it does different things. They are most commonly used for site navigation - clicking on different areas, or hotspots, on the image will take you to a different place on the site.
The advantage of image maps as opposed to using several different image files is that there is less to download, and also that the compactness of the single file allows more interesting designs. For example, a site about the human body could feature a photograph of a person. Clicking on various parts of this person's body would take the user to pages explaining more about that particular area of the body.
Below is a less imaginative example of an image map, but it gives you a reasonable idea of what can be achieved. It is a graphical representation of the main articles page on irt.org.
There are two types of image maps. Server-side image maps rely on a CGI script on the server. Client-side image maps, such as the one above, are handled by the browser, and they are the easiest to create. Their only disadvantage is that they are not supported by some of the older browsers. There are two stages to creating a client-side image map - defining the
hotspots, and displaying the picture.In our example image map above, the hotspots are the rectangles which enclose the article titles. Hotspots can also be circles or polygons. Whatever shape hotspot you want to create, you are going to need to know some co-ordinates. For rectangles, you want the top left co-ordinates of your rectangle, and the bottom right co-ordinates. For circlular hotspots, you want the co-ordinates of the centre point of your circle, and the radius of the circle in pixels. And for polygonal hotspots, you need the co-ordinates of every point on the polygon (so for a star shape you would need the co-ordinates of each of the five points of the star). These co-ordinates can all be found by loading your image into a graphics program such as Microsoft Paint (free with Windows) or Paint Shop Pro.
Once you have these co-ordinates, you need to define your hotspots by using the MAP and AREA tags. The MAP tag has one attribute, NAME, which is a unique name for your hotspot definitions. After your MAP tag come the AREA tags, one for each hotspot you want on your image map. The AREA tag looks like this:
<AREA SHAPE="RECT" COORDS="213,320,348,333" HREF="mypage.htm">
The SHAPE attribute specifies whether the hotspot is rectangular ("RECT"), circular ("CIRCLE") or polygonal ("POLY"). The COORDS attribute specifies the co-ordinates of the hotspot. In this case, we are telling the browser that the top left point of the rectangle has co-ordinates (213,320), and the bottom right point of the rectangle has co-ordinates (348,333). If your hotspot was circular, you would need the x co-ordinate of the centre point, then the y co-ordinate, then the radius. If it was polygonal, you would want the x co-ordinate of point 1, then the y co-ordinate, then the x co-ordinate of point 2, then the y co-ordinate, and so on.....
The HREF attribute tells the browser where to go when the user clicks on that particular hotspot. In this case, the user will be taken to mypage.htm.
Here's the map definition for the image map above:
<MAP NAME="example"> <AREA SHAPE="rect" COORDS="123,127,321,172" HREF="http://www.irt.org/articles/"> <AREA SHAPE="rect" COORDS="4,35,145,57" HREF="http://www.irt.org/articles/cgi.htm"> <AREA SHAPE="rect" COORDS="154,3,262,25" HREF="http://www.irt.org/articles/css.htm"> <AREA SHAPE="rect" COORDS="178,48,322,69" HREF="http://www.irt.org/articles/database.htm"> <AREA SHAPE="rect" COORDS="230,85,340,107" HREF="http://www.irt.org/articles/java.htm"> <AREA SHAPE="rect" COORDS="297,182,424,204" HREF="http://www.irt.org/articles/design.htm"> <AREA SHAPE="rect" COORDS="3,226,139,249" HREF="http://www.irt.org/about/topten.htm"> <AREA SHAPE="rect" COORDS="233,235,352,259" HREF="http://www.irt.org/articles/html.htm"> <AREA SHAPE="rect" COORDS="142,285,294,306" HREF="http://www.irt.org/articles/script.htm"> <AREA SHAPE="rect" COORDS="213,320,348,333" HREF="http://www.irt.org/articles/opera.htm"> </MAP>
Once you have defined your hotspots, you can display the actual image, using the IMG tag in the usual way. The only difference is that this time you add the USEMAP attribute, which points to the map definition you created just now. Below is the line I used to display the Articles image map.
<IMG SRC="map.gif" ALT="An example of an image map" BORDER=0 USEMAP="#example">
Notice that, just like anchors in the last article, you need to preceed your map definition name with the # symbol. If the map definition is stored in another file, say page1.htm, you can also use it with USEMAP="page1.htm#example".
As with hyperlinked images, an image map will automatically have a border round it, which you can remove by using BORDER=0. If you want to cater for browsers which do not support image maps, you can enclose the image map in a hyperlink which could lead to another version of your site. When users with older browsers click on the image, they will be taken to this site; users with image map-compatible browsers will not see any difference.
To round off this week's article, I'll teach you how to add background music to your Web pages. Background music is a phenomenon that you see less of on the Web nowadays, perhaps because people have seen past the novelty of having a Web site jingle and have realised that most of them are actually pretty irritating. Nevertheless, in certain situations, background music can be appropriate, and I think it's something you should be aware of even if you never actually use it.
Most Web browsers out there accept three types of sound file - WAV, AU, and MIDI. WAV and AU files tend to be short sound effects, like a voice saying "Welcome!" or a round of applause. MIDI files are those musical tunes which sound very dated unless you have a wavetable soundcard. Their advantage is that they can go on for ages while taking up very little space. Your choice of format depends on what kind of sound effect you want on your page.
You can either have your sound file play automatically and invisibly in the background, or you can present the user with some controls on the page which allow them to stop or start the sound file at will. If you choose the former, you should use two different commands; one is for Internet Explorer, the other for Netscape. The Internet Explorer command goes inside the HEAD tags and is as follows:
<BGSOUND SRC="mymusic.mid" LOOP="INFINITE">
Here we are instructing the browser to play the MIDI file mymusic.mid and to loop it over and over again.
Netscape uses the EMBED tag for sound files, which goes inside the BODY tags. The equivalent of the BGSOUND command would be:
<EMBED SRC="mymusic.mid" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP="TRUE">
If you choose to give the user control over the sound file, you need only use one command for both browsers, and one that is very similar to the line we just used. It goes inside the BODY tags, at the point on the page where you want the controls to appear:
<EMBED SRC="mymusic.mid" CONTROLS="CONSOLE" LOOP="FALSE">
The appearance of the controls will vary depending on which browser you use, but essentially you'll get stop, start, and pause buttons.
You now have the knowledge at your disposal to create some pretty interesting Web pages, which are less like text files and more like multimedia documents. In the next article of this series, I'll be teaching you the secrets of good page layout, using tables to align your content and frames to make your site navigation easier.
Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #4 - Advanced Page Layout