|Atryeu Designs » Web Design » Tutorials & Guides » The Basics Part 3|
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.
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.
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
<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.
<embed src="YMCA.MID" width="150" height="40">|
The above code will look like the one below, and will play the midi file
over and over. In the below code, however, I set it so it will not start
automatically. (Note: Firefox may not show the embedded player below, but Internet Explorer does)
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:
<embed src="YMCA.MID" width="150" height="40" autostart="false">|
The above code will prevent the file from playing as soon as the page has loaded.
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
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.
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:firstname.lastname@example.org">Email Link</a>|
The above code looks like this:
If you hover your mouse over that link and look at the bottom of your browser, you
will see it says "mailto:email@example.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:firstname.lastname@example.org?subject=Just A Test">Email Link</a>|
The above code looks like this:
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).
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.
The above changes links already visited to red.
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.