Before starting this lesson, you should be fairly comfortable with the basics of HTML that
we discussed in the first lesson. I won't waste your time going over the things that we have already
talked about. If you feel that you need a refresher, please see the first lesson entitled
"Writing Your Own WebPages (HTML)."
In this lesson we will talk about adding music, pictures, and links to your WebPages. After all,
a plain WebPage without any pictures is pretty boring. Music and links also help add a little excitement
to your WebPages as well. First you will need to download the files that we are going to work with. You will
need the background picture, the picture we will use on the page, and the music file. Fortunately, I
already have all three! You can download each of these below. Put all of these files together in a
folder on your desktop. You can right click on the files and choose "Save Target As..." or simply open them
and save them to your folder. The "webpage.txt" file is simply an example of what your finished HTML
code should look like. The files, along with your "webpage.html" file that we are going to create must
all be in the same folder in order to work.
These are the files you will need
[ backgnd.gif ]
[ picture.jpg ]
[ music.mid ]
[ webpage.txt ]
Click here to see the finished page
Now that you have all of the files saved together in the same folder, open up Notepad and copy
the code in the picture at the top of the page. Save the file as "webpage.html" in the same folder
with the other files. When you are finished, I will explain everything that's going on. Please go
ahead and create your html file now before going any further.
Inside the <BODY> tag you will notice a couple of new things. The first is the BACKGROUND
attribute. The BACKGROUND attribute is where the name and location of the image, (or picture), for
the background is put. In our html file, a gif file named "backgnd.gif" is used for the background.
Inside of the quotation marks you must be very careful to type the correct path to the image. If the
image is in the same folder, (or directory), as the html file, you do not need to put a path. You
simply put the name of the file you are going to use. If it is in another location, like another
folder inside of your current folder called "images", you would need to specify the correct path
like this: BACKGROUND="images/backgnd.gif".
Also inside of the <BODY> tag is another new attribute called BGPROPERTIES. The BGPROPERTIES
attribute can be used if you do not want your background to move when someone scrolls down your
WebPage. BGPROPERTIES="FIXED" sets the background's properties so that it will not move. If you do
not care whether your background moves or not, you can leave this attribute out completely.
The first new HTML tag that you will notice is the <EMBED> tag. You can use the <EMBED>
tag to embed Macromedia Flash and Shockwave files into your WebPage, as well as other things, but today
we are using it to embed a midi file. Midi files are used more often than wav or other sound files on
WebPages because of their smaller file size. They load much faster and provide decent sound quality.
The midi file that we are using is only 6KB, which should load in a matter of seconds, even for dial-up users.
The first attribute inside of the <EMBED> tag is the SRC, (or source). The source that we are
using is the "music.mid" file that you should have already downloaded. Just like with the background image,
if we put this file in the same folder as the html file, we won't need to specify a path, otherwise we would.
The next attributes are the WIDTH and HEIGHT. With these we can set the size of the player displayed on
the WebPage. You can change these attributes to your own personal preferences, but the sizes shown should
work pretty well in most cases. The LOOP attribute can be set to TRUE or FALSE and determines whether your
music will keep playing over and over or not. The AUTOSTART attribute determines if the music will begin
automatically or if the WebPage visitor will need to press the play button to hear the music. This attribute
is set to either TRUE or FALSE also. The next picture shows a different way to use the <EMBED> tag.
The <EMBED> tag shown above will hide the player on your WebPage. You use the HIDDEN attribute,
and set it to TRUE, if you want to hide the player. Keep in mind though that music annoys some people when
they are trying to view a WebPage. It is generally better not to hide the player unless you really need to.
You may have also noticed the VOLUME attribute, which I did not include in the html file we are working
with. You can use this attribute to set the volume of your music. The values can range from 1 to 100, with
100 being the loudest. The next picture gives an example of using the <BGSOUND> tag.
A few browsers, mostly very old ones, may not recognize the <EMBED> tag. This doesn't seem to be
much of a problem anymore, but if you are worried about it, you can use the <NOEMBED> and </NOEMBED>
tags to enclose a <BGSOUND> tag for browsers that will not support the <EMBED> tag. The only
attributes for this tag are SRC and LOOP. The LOOP attribute is slightly different with the <BGSOUND> tag.
The values for LOOP can be any number from 1 to how ever many times you want the music to repeat. You can use
INFINITE to repeat the music over and over. The <BGSOUND> tag does not display a player on the WebPage.
It is always hidden. For most cases, just use the <EMBED> tag and forget about the <BGSOUND>
tag. It's not much of an issue anymore.
What good would a WebPage be without pictures? The <IMG> tag shown above is what allows us to
display images on our WebPages. The SRC attribute is the image, (or picture), that we want to display.
Just like with the <EMBED> tag, this path must be correct. You can link to images on other WebSites
like this: SRC="http://www.my-site.com/picture.jpg", but most sites don't like this method and consider it
bandwidth stealing, because they are having to use their computer to host images for your site. The WIDTH
and HEIGHT attributes are used to help "pre-size" your image before it is loaded. This helps your page
look neater and more organized. The image we are using is 400 pixels wide by 400 pixels high. The BORDER
attribute determines the size of the border around your image. If you do not want a border, just set this
attribute to 0. The ALT attribute will display the message enclosed inside of the quotation marks as the mouse
moves over the picture.
When working with WebPage graphics, it is best to save your files as JPEG, (or .jpg),
if they have a lot of detail and different colors. GIF, (or .gif), files are best for images with fewer colors
and less detail. Always try saving your image files both ways in order to see which one will be the smallest
in file size and still have decent quality. If you use large file size images on your WebPages and people
have to wait a long time for them to download, they probably won't come back. (When I'm talking about "file
size," I'm referring to the size in bytes, not the width or height of your image.) Try to keep your pages
so that they will load in less than 15 or 20 seconds, even for dial-up users. It may not always be possible,
but at least try to make them load as fast as you can.
The <A> tag, (or Anchor tag), is shown above. This is how you put links on your WebPage. I didn't
include one in the html file that we are working with, but you should experiment with adding some of
your own to yours. They are simple to use. They can link to other websites, images, files, documents, or
just about anything. You simply use the HREF attribute to specify what you want to link to,
(HREF = Hypertext REFerence). Don't forget to use the "http://" in front of the address as shown in the
picture above. The TARGET="_blank" attribute is needed if you want to open the link in a new blank window
and not send the visitor away from your WebPage. Another commonly used value for TARGET is TARGET="_top",
which erases everything in the current window, (like frames), and loads the new link. If you don't use the
TARGET attribute, the link will simply open in the current window or frame where it was clicked. You enclose
the name of your link within the <A> and </A> tags. This is what the visitor will see displayed
on your WebPage. The picture below shows how you use the <A> tag to put an email address on your WebPage.
The main thing to remember is that instead of "http://" you use "mailto:", followed by the email address.
That's all folks! You should try experimenting with everything that we have talked about. Try changing
the WIDTH and HEIGHT attributes to see what happens. Mess with the BORDER size and ALT text. Don't forget
that if you put a link on your page, you will also need to put the LINK and VLINK attributes in your
<BODY> tag if you want to change their default colors. You may also want to try adding the ALINK
attribute to your <BODY> tag as well, to see how it can affect a link's color when clicked. The values
for ALINK are colors, the same as with LINK and VLINK. Try adding more than one picture and things that you
have learned from the first lesson to your WebPage. If something doesn't seem to be working properly, check
your code for mistakes. Experiment! It's the best way to learn HTML!
|
