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:
Here's how the class works:
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!
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.
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.
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.
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.
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.
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:
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.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!
If you run into any problems, be sure to send email to
members.support@xoom.com. In your message describe the problem as best you can and include your screen name and the URL of the filename with which you are having trouble.We have samples of the coding and the completed page for your review:
HTML Coding Example:
<HTML>
<HEAD>
<TITLE>
My Homepage
</TITLE>
</HEAD>
<BODY>
<H1>
Welcome to My Homepage!
</H1>
<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.
</BODY>
</HTML>
http://xoom.com/xoom/helpcenter/intermediate_class
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:
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:
Okay, enough chit-chat, let's learn by doing!
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.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>
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:
<IMG SRC="xoomlogo.gif">
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!
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!
If you have forgotten how to upload, check out the uploading steps in the
Web Tutorials section.We have samples of the coding and the completed page for your review:
http://xoom.com/xoom/helpcenter/essential/essential HTML
|
An Introduction to HTML -- brought to you by the Xoom Help Center! What is HTML? HTML stands for Hypertext Markup Langauge..it is the language in use for building Web Pages. Don't be worried that learning HTML is too difficult. We can teach you HTML whether you're young or old. To get started learning HTML, we recommend you start by reading our class notes and/or attending our online classes. From there, branch off into actually creating your very first web page, and use an FTP tool available from our Web Tools Download area to upload your file to your Xoom Server. Next, you'll want to browse through the remainder of the tutorials, and tools we have put together in our Help Center for you. Remember, that HTML isn't that difficult, and the friendly staff here at the Help Center is here to assist you. You can obtain Help personally by attending a weekend chat session, or by posting a message or question in our Message Boards. Thank you for choosing Xoom for your web site, and let us know if we can help you
|
|
The Simplest Web Page shown here, is meant to show you just how easy HTML really is. Of course, you'll want to add more features to your web site, and we'll show you how to do just that in our online classes, and other tutorials in this area. To create this Simple Page, just use Windows Notepad, or any Word Processor. When finished, save your text as a .txt file or text file, and then rename the file from a .txt extension to a .html extension. Upload your newly created html file to your Xoom web server using any of the methods shown in our FTP tutorials. Open Notepad or a word processor, and type the following... <HTML> <HEAD> <TITLE> This is my very first web page! </TITLE> <BODY> Soon, I'll add much more to my web site by following the tutorials here at the Xoom Homepage Help Center. </BODY> </HTML> Congratulations, you've just created a simple web page. Be sure to see the rest of our tutorials, or attend an online class to learn more. |
|
One of the easiest things to learn is how to add a background color or a background image to a web page. If you've taken a look at our simple page tutorial, you'll notice an html tag labeled <Body>. From within the Body tag, we can set the background color or a background image to use for our web page. To use a background color of white for our page, we'd add the following to our <BODY> tag <Body BGCOLOR="#FFFFFF"> Of course, you'll want to be able to use other colors besides white. You may find the entire list of colors available on our color chart. To use a background image instead of a color, we'd add the following to the <BODY> tag: <BODY BACKGROUND="filename.gif"> Of course, substitute filename.gif with the name of your image file. Don't forget, that when you use a image file for a background, you'll need to upload that image file to your web site separately from, and in addition to your html file. |
|
Adding emphasis to a web page can be done in many ways, including use of the Bold, Italic and Underline tags. To create BOLD text within html, use the following tag around your text like this: <b>This text is Bold</b> To create Italicised text, use the following around your text: To create Underlined Text, use the following around your text: <u>This is underlined text</u> If you choose to use these tags, keep in mind that you'll want to use them sparingly to create emphasis. If you use them too much on one web page, the emphasis will be lost or diminished. |
|
Sometimes, it's necessary to use Headings on a web page for titles and subtitles. To create headings or subheadings, follow the samples below: <H1> Sample Heading Text</H1> <H2> Sample Heading Text</H2> <H3> Sample Heading Text</H3> <H4> Sample Heading Text</H4> <H5> Sample Heading Text</H5> <H6> Sample Heading Text</H6> As shown above, there are six heading sizes available. |
|
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: <A HREF="mailto:username@domain.com">Send me Mail</A> 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. |
|
Sooner or later, you'll want to add more web pages to your Xoom server. Of course, once you do, you'll want to create a link from your home page to the additional pages. Let's say that your index.html file is your home page, and the new page you want to create a link to is called welcome.html To create a link from index.html to welcome.html you'd enter the following html on the index.html page. <A HREF="welcome.html"> That's very easy! Now, if you're file named welcome.html was in a different directory on your server, you'd have to name the directory also as follows: <A HREF="http://xoom.com/username/directory/welcome.html"> Of course, substitute your username at Xoom with username, and the directory with the name of the directory you created on the server. |
|
Adding images to your web page is both fun, and easy to do! To start with, choose an image that you want to add to your page. In the example that follows, I've included an image called welcome.gif To add the image welcome.gif to my web page, I'd use the following html: <IMG SRC="welcome.gif"> There are other attributes for images as shown below. <IMG SRC="welcome.gif" height=100 width=400 border=0 alt="welcome to my page"> the height and width of the image are specified in pixels. Using the height and width tags, speed loading of the image in the web browser. The border=0 attribute specifies that there is to be no border around this image. The alt= specifies alternate text that will display in browsers that have the graphics turned off. If you've tried and tried to get your image to show up, and can't get it right... pay a visit to our message boards and one of the staff here at the Help Center will be happy to try and help you. Remember to tell us your username, and the URL of the page and the name of the image that isn't displaying. |
|
You may wish to include files for your visitors to download directly from your web page. If you are going to include a downloadable file, it is recommended that you first compress the file into a .zip format (for Windows users) or a .sit format (for Mac users) Popular Zipping and Stuffing programs are available from Shareware.com Once you've zipped or stuffed your file or files, you can add a link to the file or files as follows: <A HREF="filename.zip">Click here to download file</A> Of course, substitute filename.zip with the filename of the downloadable file you've compressed. You must also upload your compressed file to your web server. |
<font size="2" face="Arial" color="#F0F8FF">This is size 2 using the arial font, and alice blue in color.</font>
|
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. <EMBED SRC="sound.wav" AUTOSTART="True" HIDDEN="True"> <BGSOUND SRC="sound.wav"> 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> As with all links that link to other files, be sure to upload the file welcome.wav in addition to your html file. |
|
Looking for an orderly method to present your information? If so, you'll want to use this tutorial to learn about creating lists for your web page. HTML supports several types of lists. Three of the most popular forms of lists are shown below: <DL> ... </DL> - Definition list. The Definition list is simply a list of terms, and thier definitions. Here is an example of how you would add the html to your page for a definition list: <DL> The Ordered list is used to present a numbered list. Here is an example of how you can create an ordered list: <OL> The Unordered list is typically used to separate items with bullets. Here is an example of an Unordered list: <UL> |
|
Learn how to create a horizontal rule (page divider)! Throughout your web travels, you'll see lots of horizontal rules. A horizontal rule looks like this: To create the above example, simply type <HR> Now let's learn how to customize our horizontal rules The following attributes will allow you to choose how your horizontal rule will appear:
To demonstrate, lets create a horizontal rule with a size of 4 and a widthh of 50% and set the align attribute to the left. The html for the above horizontal rule would look like this: <HR Size=4 width=50% Align="left"> Of course, you can also create a horizontal rule using an image file. See our graphics tutorials and also our html tutorial on adding images to your web page for more information on those types of horizontal rules. |