Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

Welcome to the Basic HTML guide Part 3! This is more for complete beginners who have no idea how to write any code yet. If an HTML term comes up that has not been mentioned before, it will be shown in italics and will be followed with a short description of it like this: Term (Description).

This last part of the Basic HTML tutorials will cover extra little bits of code, such as adding background music to a page, using the "name" property in hyperlinks, and other helpful bits of random codes to help with your webpages.

Background Music

If you browse around long enough online, you may notice that a lot of sites will play music while you visit them. It is very simple to add in music to your page, but you will want to remember that background music and sounds can become quite annoying for some. Be sure you read over the Tips at the end of this section!

Using "bgsound" code

There are two ways you can add music to your webpage. The first way is by using the "bgsound" tag. Unless you want to specify where you want your control to play/pause/stop the sound on your page, this is normally the method you would use to add background sound or music to your site.

<bgsound src="song.midi">

The above code will play the file "song.midi" when the page is loaded.

By default, the file will usually constantly play over and over until the page is closed. If you want the file to play only once or twice and then stop, you can do it with a simple code:

<bgsound src="song.midi" loop="1">

The above code will play the midi file once and then stop.

You can set any number you like in the loop code. If you wish the music to play over and over again until the page is closed you do not need to even add it in.

Using the "Embed" code

The embed code has many different uses, but in this section we will just be focusing on adding a sound file to your page. By using the embed tag to add your music file, you are able to specify where you want your sound controls to be located within your page.

By setting a width and height, you will allow a visitor to see the controls for the player. The settings of 150x40 will display the Windows Media Player just right, so only the play/stop/pause controls are visible. If you do not want the file to start automatically as the page loads, use the below code:

You can also add background music by using the Object tag instead, however that particular code needs to be written different than the ones above and will not be covered here. It may be added to a future tutorial though.

* Note: The music file is not owned by this site. It came from a MIDI database years ago.

Tips for Background Music

Don't use MP3s or Wav files! The file size is too large to download quickly for dialup users.

MIDIs make the best background music because they are small files and don't distract the visitor with lyrics while trying to read your content.

Set a control on the site somewhere so a visitor can turn the sound off.

"A Name" Links

You are probably asking what this is, correct? This type of link will allow you to create a link on a page and when clicked, it will bounce you to another part of the exact same page you are on. For example, at the bottom of this page, there is a link that says "Back to Top". If you click that, it will take you back to the top of this page. It is just a simple way to help your visitors out by finding an area of the page quickly and easily. For another example, you can view the Terms of use page. At the top, you can see a few different links. If you click one, it will jump down the page to the correct section.

Creating one of these links requires the use of two separate anchor tags in order to work properly. First, you need to figure out where you want the visitor to be brought to if they click a link like this. Select a spot on one of your webpages somewhere. This works best if the location is further down the page and would require somebody to scroll to get there.

<a name="Section1">Section 1</a>

The above code is a bit special. Since there is no "href" property listed, the code will not create a visible link. Instead, it will secretly give the name "Section1" to the text enclosed inside of that tag. This can also be done with an image, if you do not wish to use text. Just make sure you close the anchor tag!

Next, you need to create the link, that when clicked, will take you to that area of the site. This code is written almost exactly like any other link.

<a href="#Section1">Go to Section 1</a>

Note the pound/number sign in front of the word "Section1". That tells the browser it needs to look within the page to locate the area titled "Section1". Pretty simple, right? You can also link to a section on a different page.

<a href="page2.html#Section1">Go to Section 1 on Page 2</a>

It is not too hard, is it? If you forget to name the section you want the link to go to, the link will not do anything. Some browsers will bounce you to the very top of the page, others won't. When you are working with these types of links, make sure that you specify a unique name for each section you want to link to. Also, the names of the section must be exactly the same. If you have a capital letter in the name, you must also have a capital letter listed in the link.

Email Links

Most websites would like to display a way that a visitor can contact the owner with questions, comments, suggestions, etc. The most common method is by allowing a visitor to email the owner. It is usually best to setup a contact form on your website and make sure your email cannot be seen anywhere on the site or within the site's source code (Source Code contains nearly all of the coding for a webpage. Just about every browser allows the user to view a page's source code.) to prevent spam/junk mail. However, if you would rather just use a link and risk the spam, email links are very simple to setup.

<a href="mailto:email@email.com">Email Link</a>

The above code looks like this:
Email Link

If you hover your mouse over that link and look at the bottom of your browser, you will see it says "mailto:email@email.com" instead of a regular link. The "mailto" part of the code tells the browser that it needs to open your default email program up and start a new message sent to whatever email is listed in the link. (Please note, that email I posted is NOT a real email, it's for an example only).

You can also set the email link to write out an email subject for the visitor. They of course can change if it they like, but most people will leave the subject as is.

<a href="mailto:email@email.com?subject=Just A Test">Email Link</a>

The above code looks like this:
Email Link

If I am using an email link on a website, I like to place my site's title in the subject so I know which website the person is emailing me about. You can add in just about anything you like though.

Changing Link Colors

When you design a webpage containing links and you view it online, you may notice that links to a page you have not yet viewed are blue, links you have already viewed are purple, and when you click on a link, it temporarily turns red. These are the default colors used. You can change them by adding a bit of code into the body tag of your website. This can also be done using CSS, if you prefer (See the CSS Links tutorial).

<body link="red">

The above changes all links on the page to red.

The above code tells the browser to make any links within that page red, instead of the default blue. Note that the "link="red"" code is inside of the body tag. These codes need to be placed within the body tag to work properly.

<body vlink="red">

The above changes links already visited to red.

<body alink="blue">

The above changes a link that is being clicked to blue.

As I said above, these can also be changed by using CSS instead. If you were to use CSS instead of changing the link colors through the body tag, you can add several other interesting features to your links.