Internet Access, Dial-up and DSL, Nationwide - psnw.com


	Tuesday, 06-Jan-2009 14:03:21 PST


	Member Space Internet Security New to the Net? •Internet FAQs •Internet Introduction •What's a Browser? •What is E-Mail? •Search Engine Basics •What are Newsgroups? •What is Chat? Chat Your Homepage •The Basics •Uploading 1A •Free Images & Code •Adding Color •Adding Links •Adding Images •Specifying Fonts •Add a Counter •Server Side Includes Member Pages •Business Pages •Personal Pages

Your Homepage	: The Basics

Web pages are coded using a markup language called HTML. HTML is an acronym for HyperText Markup Language. HTML uses "tags" to instruct browsers, such as Netscape and Internet Explorer, where and how to place images and text on a Web page. You will need to learn some basic HTML tags in order to make Your Homepage.

There are only a few things (besides a little time) you will need to get started:

A Plain Text Editor - Windows users may use Notepad. Mac users may use SimpleText.
A Web Browser - If you're viewing this page, you have one.

Getting Started
HTML is composed of tags that a Web browser interprets in order to display Web pages.

All HTML tags begin and end with brackets <> , for example, <HTML> . The majority of HTML tags use both an opening and a closing tag, for example:

<TITLE> — This is the opening tag.

</TITLE> —This is the closing tag. Note that the closing tag contains a backslash.

This tutorial covers 5 main HTML tags. Four of these tags (and their closing tags) are REQUIRED in every page. All of these tags need to be used in the order they are presented here, every time.

It is necessary to memorize and understand the four required tags, because these are the most important tags in an HTML document. If they are missing or not ordered correctly, they can stop a Web page from loading.

Following is a very a basic page which you can type (or cut and paste) into your text editor to begin making Your Homepage. Start your text editor, and copy the example exactly as shown. Include all of the tags, in the same order. The example is followed by a description of each tag and directions for saving the file.

<HTML>
<HEAD>
<TITLE>
My Home Page
</TITLE>
</HEAD>
<BODY>
Welcome to my first web page.
<P>
I'm learning basic HTML tags.
</P>
</BODY>
</HTML>

-back to top-

Here are the tags used in our example, broken down by function:

<HTML> — Identifies the file as an HTML document. This tag is REQUIRED.

<HEAD> — Tells the browser that important information to be interpreted first (such as the title) is contained within it. This tag is REQUIRED.

<TITLE> — Tells the browser to display its contents in the title bar at the top of the browser window. In this case "My Home Page." This is REQUIRED for any HTML document.

</TITLE> — Closes the title area. This is REQUIRED for any HTML document.

</HEAD> — Closes the HEAD area. This is REQUIRED for any HTML document.

<BODY> — Tells the browser that what follows is the body of the document. The body portion of the HTML document is where everything displayed on the Web page is located, including text, images, links, etc. ALL text and imaging tags MUST be enclosed within this tag. This is REQUIRED for any HTML document.

<P> — Tells the browser to start a new paragraph.

</P> — Ends the paragraph tag.

</BODY> — Closes the body area. This is REQUIRED for any HTML document.

</HTML> — Ends the HTML document. This is REQUIRED for any HTML document.

-back to top-

Saving Your File
In your text editor, select File, then Save. Name your file index.html

NOTE: All HTML documents must be saved with the extension .html or .htm. Also, always name your main page "index" and if your text editor offers a choice of formats, choose one of these:

Text Only
MS-Dos Text
ASCII Text

You may save your file on your hard drive or on floppy disk. Just remember where you stored it. You'll need it later.

-back to top-

Testing Your HTML File
To test your file in a Web browser, open your browser and select File, then Open File. Select the file you've saved. Click here to see what your page should look like. (NOTE: You will need to use your browser's back button to return to this page.) If it doesn't look like it should, read the questions and answers below.

Why is my page filled with strange symbols?: You probably saved the file as something other than a plain text file. Go back and save it again and be sure to save it as plain text file named index.html.
Part (or all) of my page isn't displaying. Why?: You're either missing some HTML tags or you don't have them in the correct order. Go back and make sure you copied the example correctly.

NOTE: Remember when you make a correction on a page, be sure to save it again and reload it on your browser using the Reload button on Netscape or the Refresh button on Internet Explorer.

-back to top-

I've Got it working. Now What?
In order for users to see Your Homepage on the Internet, you need to upload it on to the psnw.com server. Visit Uploading 1A for detailed instructions.

But, chances are good you want to add some pizzazz (and some information) to Your Homepage before uploading it to the Web. You will find additional tutorials on the main Your Homepage page, as well as a list of basic tags (which can be used within the <BODY> tag) below.

-back to top-

Miscellaneous Tags

NOTE: All of the tags below must be placed inside the <BODY> </BODY> tags.

The Header Tag
The Paragraph Tag
The Preformatted Text Tag
The Bold Text Tag
The Italicized Text Tag

The Header Tag:

<H1> This is what a header size 1 looks like. </H1>

What it Looks Like on the Page:

This is what a header size 1 looks like.

The Tag Broken Down by Function:

<H1> — This tells the browser to display the text enclosed

This is what a header size 1 looks like — This is the text to be displayed as a header size 1.

</H1> — This tells the browser to end the header size 1 tag.

NOTE: This tag has 5 graduated sizes <H1> ( largest), <H2> , <H3> , <H4> , and <H5> .

-back to top-

The Paragraph Tag:

<P> This is where your paragraph goes. </P>

What it Looks Like on the Page:

This is where your paragraph goes.

The Tag Broken Down by Function:

<P> — This tells the browser to display the text enclosed.

This is where your paragraph goes. — This is the text to be displayed as your paragraph.

</P> — This tells the browser to end the paragraph tag.

-back to top-

The Preformatted Text Tag:

<PRE>
This is where your preformatted text goes.
It will look just like this, even though
we didn't use any line break tags.
</PRE>

What it Looks Like on the Page:
This is where your preformatted text goes.
It will look just like this, even though
we didn't use any line break tags.
The Tag Broken Down by Function:

<PRE> — This tells the browser to display the enclosed text formatted exactly as it appears.

This is where your preformatted text goes.
It will look just like this, even though
we didn't use any line break tags.

— Above is the preformatted text to be displayed as your paragraph.

</PRE> — This tells the browser to end the preformat tag.

-back to top-

The Bold Text Tag

<B> This is the text you want to be bold. </B>

What it Looks Like on the Page:

This is the text you want to be bold.

The Tag Broken Down by Function:

<B> — This tells the browser to display the text enclosed as bold.

This is the text you want to be bold. — This is the text to be displayed bold.

</B> — This tells the browser to end the bold tag.

-back to top-

The Italicized Text Tag

<I> This is the text you want to be italicized. </I>

What it Looks Like on the Page:

This is the text you want to be italicized.

The Tag Broken Down by Function:

<I> — This tells the browser to display the text enclosed as italicized.

This is where the test you want to be italicized goes.
— This is the text to be displayed italicized.

</I> — This tells the browser to end the italicized tag.

-back to top-

Home - About psnw.com - Reseller Program - jobs@psnw.com
Technical Support - Customer Service - Home Services - Business Services
Terms of Service - Privacy Policy - Contact Us - Refer & Earn - Site Map

[ Privacy Policy ]

Members of psnw.com, agree to abide by our Terms of Service.
© 2006 ProtoSource Network.

7100