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. Thank you for choosing Xoom for your web site. |
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. |
Using Fonts with your web page, can really add a nice touch and a little bit of personality to your page. Using this tutorial, you'll learn how to use the Font Face, Font Size, and Font Color tags. Font Face: To use the Font Face tag on your web page, enter the following html on your page: <Font Face="arial">This text is shown with the Arial Font.</Font> Please note, that the Font Face you specify, must be installed on the computer of the visitor to your site, in order for them to see the font you've specified. If the visitor to your site doesn't have the font installed, most likely they will see your text with the default font face for their web browser. For this reason, many web designers are standardizing their fonts to include the Font faces Microsoft is giving away from their web site at http://www.microsoft.com/truetype Font Size: To use the Font Size tag on your web page, enter the following html on your web page: <Font Size=5>This is Font Size 5</Font> There are seven Font sizes for you to choose from, ranging from Font Size 1 (the smallest) to Font Size 7 (the largest) Try changing the 5 in the line of html above to a 1 and see what happens when you view your page from a web browser. Font Color: The Font Color tag does exactly what it's name implies... it changes the color of your fonts. To use the Font Color tag on your web page, enter the following html on your web page: <Font Color="#F0F8FF">This Font is shown using the color Alice Blue.</Font> If you want to see a listing of the html codes for various colors, use our color chart. One final note on these font tags: Let's say you wanted to use a Font Size of 2 and the color Alice Blue, and specify a font face of arial all at the same time. You may do just that by entering the following html: <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. |
| 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. |