Add Audio Files To Your Web Page

                    You can add a sound file that plays automatically when your web
                    page is opened with the <EMBED SRC="sound.wav"> tag. You
                    can use the EMBED SRC tag along with the BGSOUND SRC
                    tag to make sure that your background sound plays for visitors to
                    your web site whether they are using Netscape or Internet
                    Explorer to view your page.

The HIDDEN="True" part of the EMBED tag will play the sound
as a background sound in Netscape.

                    Instead of adding a background sound to your web page, you
                    may want to opt for adding a link to a sound file. To create a link
                    to your sound file, first pick a sound file you wish to use. In the
                    example below, I've chosen a sound file "welcome.wav"

<A HREF="welcome.wav">Click here to listen to my
welcome</A>

Welcome to the Beginning HTML Class

brought to you by XOOM's Homepage Help Center

Our goal for this class is to teach you the very basics for writing a web page in order to get you started.

We have intentionally kept this first class very simple to ensure that the basic concepts are understood before moving on. We will cover 8 HTML tags, some file naming conventions on the Web, and end with uploading the page to the XOOM server by showing you how to use an FTP tool.

This class is also offered in our online chat room every tuesday evening.

Here is what you need to take the class:

Word processor (such as Word, WordPerfect), text tool (Notepad on the PC, TeachText on the Mac)
or HTML editor (HomeSite, etc.)
FTP tool (File Transfer Protocol) such as WSFTP-LE (you can download this from XOOM) on the PC or Fetch on the Mac to move your files from your computer to the XOOM server.

Here's how the class works:

You need to have a copy of these class notes so you can follow the step-by-step instructions.
To do this, you can:

Select the Print button on your browser and use a printed copy of these notes.
OR Have this web page open but shrink the window down so you can see the class notes and your HTML editor (or word processor) at the same time.

Once you are ready, just enter in the HTML tags in the step-by-step order that we list.
Between each section we explain what the HTML tags mean and give some tips on usage.
At the end of HTML section you will have a web page completed.
We will then show you how to upload to the XOOM web server.
In other words, in about 30 to 45 minutes you will have your own web page live for the world to see at XOOM.

Let's start with the very basics.

HTML stands for HyperText Markup Language. HTML is simply a set of standardized tags that web browsers read and then interpret for displaying the Web page. If you ever have used the older desktop publishing programs, the HTML tags work in the same fashion.

All HTML tags start and end with the lesser than and greater than keys used as brackets, for example:

<HTML> or <BODY>

Most HTML tags use a beginning and ending tag, for example:

<TITLE>This is the HTML Class</TITLE> or <H2>Headline Size 2</H2>

Let's learn by doing and get started!

SECTION ONE

At the top of your text page enter the following on separate lines:

<HTML>
<HEAD>
<TITLE>
My Homepage
</TITLE>
</HEAD>

Here is the explanation of what we have just accomplished:
<HTML> identifies the page as an HTML document;
<HEAD> tells the browser that the header information will be appearing;
<TITLE> tells the browser what to show in the title bar of the browser (it's the top bar of the browser);
"My Homepage" will appear in the top bar of the browser;
</TITLE> ends the title entry;
</HEAD> ends the header entry.

One of the questions often asked here, is whether it is necessary to use all capital letters. We recommend that you do for the simple reason that if you are trouble shooting your page, the capital letters in the tags will make them easier to spot and therefore help you find a problem sooner. However, technically, you do not need to use all capitals. Whatever you decide to do, try to be consistent.

SECTION TWO

Now enter the following on separate lines:

<BODY>
<H1>
Welcome to My Homepage!
</H1>

Recap:
<BODY> tells the browser that the body of the page or document is next;
<H1> tells the browser that the headline size 1 is to be used;
"Welcome to My Homepage!" will appear in large text;
</H1> ends the headline entry.

There are six levels of headlines, 1 being the largest and 6 the smallest. You can use the different sizes to indicate subtopics for your page if you have a lot of text. As a design issue, we recommend that you only use the headlines for dividing up pages and to keep the headlines fairly brief.

SECTION THREE

Enter the following on separate lines:

<P>
This is my homepage and it is in the beginning stages. When I learn more, I will add information about my interests, hobbies, or business.

Recap:
<P> tells the browser there is a new paragraph and immediately enters the text following it;
"This is my home page ..." will continue as a single paragraph.

You can enter in more text if you would like. Be sure to use <P> to separate your paragraphs. The text from a paragraph will continue as one block of text until the browser encounters another <P> or headline tag.

It is important to note that browsers ignore what is called "non-blank spaces" or "white space". In other words, if you are typing along and you hit the return key for a paragraph break, if you don't insert the <P> into your web page, the browser will run the two paragraphs together as if they were one. The browser will also ignore the double spaces between sentences.

Another common question we receive is how to line up text in a paragraph. This will be covered in the tutorials section when we have the Tables tutorial written. Browsers ignore the TAB marks so you need to learn how to do tables in order to align text.

SECTION FOUR

Let's wrap up the first page so we can move on to uploading to the server.

Enter the following on separate lines:

</BODY>
</HTML>

Final Recap:
</BODY> closes the body of the page;
</HTML> closes the HTML.

Click on your text window now to make sure it is the active window.

SECTION FIVE

It is very important to remember that web file names are case-sensitive. This will be explained in more detail in the Intermediate HTML class.

For now, it is important to follow these simple rules:

If you are in Windows, save your file as index.htm
If you are in Windows95 or on the Mac, you can save your file as index.html

The .htm or .html is required by the browser to indicate a web page. While you can use either one, it is a good idea to be consistent.

Most web servers accept the file name "index.htm" or "index.html" as the default home page.

Make sure you close your file now and note which directory you have saved your file. This makes sure their are no file conflicts when you upload your file.

SECTION SIX

Now that you have a valid web page we need to get it to the server so others can see it. We will now be going through the steps to upload your file to the web server.

At this time, your web page is just a file on your hard drive. To transfer the file to the server, we use an FTP tool. Don't be alarmed, all FTP stands for is File Transfer Protocol. Simply put, is the way to copy files from your hard drive to the server or from the server to your hard drive.

Open your FTP tool and login to the XOOM server.

In WS-FTPLE you need to enter in the following information:

Profile Name: My web Site ( you get your choice on this one )
Host Name: ftp.xoom.com
Host Type: Automatic Detect
User ID: Insert your XOOM MemberName here.
Password: Insert your XOOM password here.

Once you have logged into the XOOM server, you will be in your home directory. Simply select your file from the harddrive, click on the -> arrow key in WS-FTP and your file will be uploaded to the XOOM server.

You can also review the uploading steps for the WS-FTPLE tool and some Netscape products by going to our Homepage Help Center Tutorials page.

SECTION SEVEN

Now that the file is uploaded to the server, you can view your web page live and online!

All you need to do is double click on your browser to open it up and enter in your URL (Uniform Resource Locator) in the Address bar in Microsoft Internet Explorer or Location bar in Netscape Navigator. Your URL is your web address.

Your URL at XOOM is:

http://members.xoom.com/MemberName/
Where MemberName is the name you use to log on.
Remember, your Mcreen Name is case-sensitive too. If your Member Name is bob, all in lowercase, then your URL will be http://members.xoom.com/bob. However, if your screen name is Bob, with the capital "B", then your URL will be http://members.xoom.com/Bob.

WELCOME TO THE WORLD OF THE WEB! YOUR PAGE IS NOW LIVE!

Intermediate HTML Class

brought to you by XOOM's Homepage Help Center

This class assumes that you have already taken the Beginning HTML Class. Therefore, we won't cover the types of word processors, text tools, or HTML editors you can use.

The goal of this class is to show you how to put the "hyper" into hypertext. The ability to use links to other pages, pictures, sounds, and other resources, is what makes the Web so exciting and powerful. By the end of this class you will be able to have links to other pages, have pictures in your pages, and even be able to display images in your pages that are somewhere else on the Web. We'll also show you how to have a link for people to send you email from your homepage so you can have feedback from visitors.

In this class session we will cover the <A HREF>, <IMG SRC> tags and the mailto: function.

The <A HREF> tag is actually a combination of Anchor and Hypertext REFerence, and is used to link to other files on the web. When your visitor clicks on the link, it will take them to the page you want them to go to.

<IMG SRC> is the Inline Image tag, and is used to display .jpg or .gif graphic files in your homepage.

We need to cover a little about "paths" in HTML and you will see how this works in practice. A path in HTML tells the browser where to go to find the resource you want to use. A resource in this case could be a web page, graphic file, sound file, or even a file for downloading. As you will see, file names and directories are case-sensitive.

Let's look at this example:
<A HREF="http://members.xoom.com/xoomhelp/index.html">XOOM Examples</A>

This would actually appear (or display) in your homepage like this:
XOOM Examples

As you can see, the words "XOOM Examples" show as underlined in the browser and this indicates that it is a hyperlink (a clickable link). We will try to be consistent and call it a link for our tutorials at XOOM.

When someone clicks on the words "XOOM Examples", the link tells the browser:

Go to the server "xoom.com"
then to the subdirectory "xoomhelp" (which is the XOOM screen name in this case)
then show the page "index.html".

Okay, enough chit-chat, let's learn by doing!

SECTION 1

At the top of the page enter the following on separate lines:

<HTML>
<HEAD>
<TITLE>
Learning Links, Images, and Email for my Web page
</TITLE>
</HEAD>
<BODY>

This first section doesn't have a recap since it is covered in the first class.

SECTION 2

We will now go through the steps to show how to create links in your homepage.

Enter the following on separate lines:

<H2>
Anchor Lesson
</H2>
My first link will follow this line:
<P>
<A HREF="http://members.xoom.com/xoomhelp/firstlink.html">This is my first link.</A>

Here's what we're doing:
"<A HREF=" starts the anchor and hyperlink;
"http://members.xoom.com/xoomhelp/firstlink.html">" shows the URL of the homepage that you want the browser to go to;
"This is my first link." is the text that will be highlighted as the clickable link.
"</A>" closes the anchor.

The example we used is for linking to the xoomhelp page on the XOOM server. However, you can link to anyone's page on the Web if you have the full URL. As a matter of courtesy, we recommend that you get permission though if you would like to link to someone else's site. Most often they will love to have the extra traffic from your site.

If you are linking to pages on your personal website, it is a slightly shorter URL because you do not have to spell out the full URL. This is because you are specifying a file in your directory (or directories) on your webserver. If the browser does not see the A HREF pointing to a file server it will look in the directory that is specified. In this case, it assumes that the file is in the home directory since a subdirectory is not listed.

In the first example, the A HREF to the full URL to the firstlink.html page is:
<A HREF="http://members.xoom.com/xoomhelp/firstlink.html">This is my first link.</A>

However, if I am the member known as xoomhelp, then I can shorten the A HREF to:
<A HREF="firstlink.html">This is my first link.</A>

It is extremely important to remember that file names and directory names on the Web are case-sensitive. The use of upper and lower case letters must match exactly if you want to link to them. For example, if the firstlink.html file was spelled Firstlink.html then our link would have to be:
<A HREF="Firstlink.html">This is my first link.</A>

SECTION 3

We are now going to show how to have images display on your homepage. Enter the following on separate lines:

<H2>
Image Source Lesson
</H2>
<P>
My first image will appear below:
<IMG SRC="http://members.xoom.com/xoomhelp/xoomlogo.gif">

Here's what we just did:
"<IMG SRC=" tells the browser that an inline image should be placed in this line;
"http://members.xoom.com/xoomhelp/xoomlogo.gif" is the path to a graphic in the xoomhelp directory at XOOM.

Most often, your graphic will be in your own directory which really shortens the path. It will follow the same rules that we described above about linking to a file in your own part of the webserver. For example, using the member name xoomhelp, the path to the image would be:

SECTION 4

Okay, now we're going to tie the anchor reference and the image source together. This will allow us to use an image as the link.

On separate lines, enter the following:

<H2>
Image Source and Link Lesson
</H2>
<P>
I'm learning how to link an image to a page!
<P>
<A HREF="http://members.xoom.com/xoomhelp/link2.htm"><IMG SRC="http://members.xoom.com/xoomhelp/xoomlogo.gif" BORDER=0></A>

Here's our recap:

<"A HREF="http://members.xoom.com/xoomhelp/link2.htm">" shows the full path to the page to which we want to link;
"<IMG SRC="http://members.xoom.com/xoomhelp/xoomlogo.gif" BORDER=0>" shows the path to image we want to use as the link; the BORDER=0 is used to prevent the border from displayed around the image when it is used as a link;
"</A>" closes the anchor!

SECTION 5

The next part that we will cover is so that you can get feedback from visitors to your site. We'll do this by showing how to add the mailto: function to your homepage.

On separate lines, enter:

<H2>
Email Lesson
</H2>
<P>
<A HREF="mailto:screenname@yourservice.com">Your name here</A>

Here's the final recap of the class!

"A HREF=" starts the anchor link;
"mailto:screenname@yourservice.com" calls to the mailer and tells it to send the email message to that Internet mail address. Make sure you replace the "screenname" and "yourservice.com" with your email address. "Your name here" is the clickable link; "</A>" closes the anchor!

Now we need to finish with the last two tags and get ready to upload the file.

Enter the following on separate lines:

</BODY>
</HTML>

If you do save this class as index.htm or index.html, you will overwrite your original page when you upload it to the server. You can save your file as class2.htm or class2.html (or any other name you may want) if you do not want to overwrite your original homepage at this time.

Now ftp them to the server and check out your work!

Add An E-mail Link To Your Page One of the most widely used HTML tags is the "mailto" Tag. Using the mailto tag, allows visitors to your site to send you E-mail by simply clicking on your "mailto" link.

To create an email link, use the following html:

If you wish, you can also add a subject line to the mailto tag as follows:

<A HREF="mailto:username@domain.com?subject=place your subject here">Send me Mail</A>
It's important to note, that not all browsers will support the use of the subject line.