Make your own free website on Tripod.com


What's a good Shareware graphics program?

For Windows computers, Jasc's Paint Shop Pro... for Macintosh... There are 2 programs available at ArtJourney's Public Gallery Matt Paint and Mordant.


Aligning Images with Text

You may have noticed by now that if you load an image without any alignment, it will take up almost all of the room and only allow you to have one line of text next to it, if you are confused, here's an example:

<img src="tweetymo.jpg">Here is an image<br>
Isn't it cool?


Here is an image
Isn't it cool?

If you want to be able to have the text start at the top next to the image, you must use the ALIGN attribute... example:

<img src="tweetymo.jpg"align=left>Here is an image<br>
Isn't it cool?


Here is an image
Isn't it cool?

 


Using <BR CLEAR=ALL>

When you use the ALIGN attribute with images you may notice a problem when you use the <HR> tag, because in some cases you may want the horizontal rule to fall below the image.. not next to it.. example:

<img src="tiger2_i.jpg"align=left>this is a big image.<hr>

This is our school mascot.




If you want the horizontal rule to fall below the image, you can add the <br clear=all> tag between the image and the horizontal rule. Example:

<img src="tiger2_i.jpg"align=left>this is a big image.<br clear=all><hr>

This is our school mascot.




This is also useful in other instances, such as when you want the text to fall below the image.


Animated Gifs

The gif version 89a supports an advanced technology which allows animation. Many picture frames are stored inside a single .gif file and an index telling how long each frame should be shown, if they should repeat after they are done, etc. If you wish to create your own animated gifs, try using the Gif Construction Set from Alchemy Mindworks for Windows or GifBuilder for Mac. Animated .gifs are treated as a standard image file, so they are loaded with the standard <IMG> tag.

The picture to the right is an animated .gif

.


Reference to the standard IMG tag

<img src="image.ext" width=x height=x border=x alt="x">

Name Of File--^    pixels--^ pixels-^ border-^ text-^


                     wide       deep      size  description



Adding Sounds

To add sounds to a web page... we will use Netscape's <EMBED> tag. This tag supports many common file formats... such as .wav, .mid, and .au. Here is the basic structure of the tag:

<EMBED SRC="filename.ext" width=x height=x autostart=x hidden=x loop=x volume=x>

If you want the file to automatically play when the web page is loaded, set autostart=true, if you do not want the file to automatically start, simply leave out the autostart attribute or set autostart=false. If you want the control box to be hidden, use the hidden=true attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over once it is done use the attribute loop=true. You can set the volume setting with the volume attribute, a value from 1 to 100 (default is 50). The control box size is around 145 x 60 pixels.. so it is recommend to set width=145 height=60, but you may use the numbers of your choice (if it is less than these values, a portion of the control box will be cut off.)

Example of the EMBED tag...

<embed src="loony.mid" width=145 height=60 loop=true>



NOTE: Because this embed tag was not set to autostart, you will need to click the play button to play the sound file.

You may use multiple embed tags within one page, but it is recommended to never set more than one on autostart. It is also never recommended to use .wav or .au files in the embed tag, because they are very large and take a few minutes to download.



[Go to Lesson 4! | Introduction | Go to Lesson 6!]


Copyright © 1999 Webmaster.

All rights reserved.