Moving Along with HTML!


HyperText Markup Language

HTML Lesson 2

Adding Music, Pictures, and Links


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.

Image

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.

Image

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.

Image

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.

Image

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.

Image

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.

Image

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.

Image

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!


~ HTML Links ~

Lisa Explains It

HTML Goodies

HTML Goodies Reference

HTML Code Tutorial

Learning HTML - UT

Dave's HTML Tutorial

W3Schools Tutorials

W3Schools HTML Reference

W3C HTML Home Page



Back to Learn