Chris Dunn - [Multimedia HTML]

What is a web page without pictures? Pictures are an important element of the net but they also require some work. First you have to get the pictures. One of the greatest sources of images is the internet and I am going to show you how to download a picture. Be warned though that while in this situation this is suitable for any official productions or commercial applications you will have to comply with copyright laws. In university work this may mean referencing your pictures.

Download this picture:

Right-Click with your mouse on the picture at right. Choose Save-Picture-As and then save the picture to your folder on the desktop. Make sure it has an easy name that you will remember.

Those that have spare time may prefer to browse the image gallery at www.google.com.au for an image.
Google now have the largest index of images in the world.

The 'alt' text is used when people have images turned off or for voice descriptions of web pages. This is very important when creating sites for people who may be sight-impaired. In other cases it acts as a description of the image if the image does not load. Notice that images do not require an end tag.

The 'src' section contains the address of the image that you wish to show in your page.
There are two different ways of describing where a file exists; absolute address and relative address.

Open the folder on the desktop where you saved the image, find the file, Right-click on it and choose Properties.
Under 'Location' there will be an address like C:\Documents and Settings\cdunn\Desktop\MyWebFolder.

This means the Absolute Address of the image is C:\Documents and Settings\cdunn\Desktop\MyWebFolder\dude.gif
The absolute address is where I can find the image I have called 'dude.gif' on MY computer. If your web page is looking for the file at an absolute address it will find it only on your computer. However if someone else opens your website on their computer they won't have the picture in the same location. They will have a big empty box on the page.

I was using a Relative Address when I told you to create a folder on your desktop right at the start. This is because I assumed that you all had a desktop. Rather than saying create a folder at C:\Documents and Settings\cdunn\Desktop I used the desktop as a starting point. This same principle applies to web pages.

From the position of your web page (which is in your folder on the desktop), where is your image?
Your image should also be in the same folder. So if we use the folder as the starting point, like I did with the desktop, the image is with the web page.

If I created a folder called 'images' inside your folder on the desktop and moved your picture into it I would have to change the link to tell the web page to look in the folder 'images' for the picture dude.gif by addressing it like this:

In web pages we use forward slashes not backslashes. This is because the internet was originally based on Unix which uses forward slashes unlike Windows which uses the backslash.

The point is that the location of the image must be written RELATIVE to the relation of the web page. Many web page programs like Microsoft Frontpage Express don't fix this automatically. This is why you need to know HTML!!!

Add the image to your web page. View the page in your web browser. If you have time copy your web page folder to a disk and see if it works from there, alternatively if you don't have a disk, change the name of the folder and try that. It should work from any location as long as all the files are in the folder together.

The same principle applies when entering the location or address of any object to your web page. Including video.

Inserting multimedia elements into a web page is theoretically easy. You use the <object> and/or <embed> tags.

However these may require plugins and may not work on all browsers, as I have discovered. I originally had an mpeg as the demonstration file for this course but embedding an mpeg in a webpage is a plugin is required in most cases for the client to be able to view the video. Especially depending on which version of mpeg. I had great difficulty getting the mpeg to work on all the machines I used so I have gone back to an avi video.

When using the <object> or <embed> tags always provide a link to the plugin page (see Microsoft website for Windows Media Player, or Apple website for Quicktime Player), so that your visitors will be directed to download the plugin if they do not have it. Otherwise they will just get the page with an empty box.

NOTE: Due to a current lawsuit involving Microsoft and a patent for embedding objects in web pages, the <embed> and <object> tags may be modified in upcoming versions of Internet Explorer. Although this really affects all web browsers it is only Microsoft that is currently being sued. A popup will appear instead each time an embedded object tries to run.

If possible convert your video into one of the Real formats (*.ra, *.ram) or Avi (*.avi) as this will be viewable on almost all browsers and can be integrated differently. The simplest solution is using the image tag. The start option can also be "fileopen" which will start the video when the page opens.

Hopefully now you will understand why planning is so important in producing a good website. It requires testing in multiple browsers and lots of research. I have made it easy for you by doing all the hardwork and the code above as you see does work.

If there is time you can try to add this little video to your personal web page.

Download the AVI video from here (Right-Click and Save-Target-As). Save this to your folder and then add the code to your web page. Use the code above as a guide. You might want to try changing some of the various attributes to see what happens.

For those interested in rushing out and putting all of your photos and videos on the net, slow down, there is a lot to think about first. To make it easy the images and video used here are only relatively small. They have both been compressed to make them "web-ready". Video is usually compressed as part of the conversion process however not images. Programs like Photoshop or AcdSee [SHAREWARE] enable you to take an image and compress it. This is significant. On the internet speed is everything. The smaller or more compressed you can make your images the faster your page will load. If your page takes to long then people will give up and leave. That is also why you don't want to go into image-overload. A clever and selective use of images can be much more effective.

Consider your target audience. In almost all cases I recommend testing your site on a dial-up modem. You may have broadband but the majority of internet users still connect via dialup. If the page takes too long to load they will not stay. Some say 4 seconds is too long, others say 15 seconds, either way try to get it to load as fast as possible. With images consider making smaller versions of the images to use as thumbnails. You can see this in the Images section of this site. Right click on a web page (not on a picture or link) and choose View Source in IE. This will show you the code used to create that page. This way you can find sites you like, look at how they did it and use that to help you design your site.

You may have noted that with the pictures and video I specified sizes for some. You do not have to specify sizes but you can in order to have things arranged neater on the page. These sizes are either pixels (e.g. width="200") or a percentage (e.g. width="80%"). To compare sizes the standard screen is 800 pixels x 600 pixels. You can find out your screen size by looking in Control Panel > Display > Settings.

Congratulations. You should have no problems producing your own web page. If you have any questions please feel free to ask. If you have time you might want to try the W3C 10-Minute-Guide. You should find it easy but it will help re-affirm what you have learned today. There is no way you can remember everything here from one session so if you want to really learn try this again at home. Have a look at the www.ncdesign.org HTML Design Guide and then create your own web page.

If you have Microsoft Office on your computer you will probably have Microsoft Frontpage. Frontpage allows you to create all this HTML code but it does it in the background allowing you to design the page the same way you make a poster or type an essay in Word. However Frontpage does not always use the best code and is also geared towards internet explorer and some features require a web server with Frontpage extensions installed. An understanding of HTML, it's flexibility and it's limitations will help you understand why some things work and some don't and how to fix them. An example is that Frontpage often saves images etc as an absolute path which means they will not work when you load them on to your website because you need a relative path (see the Advanced HTML page). Now you should know how to change this. Good luck and good web design.