Get Reliable web hosting from Yahoo! Web Hosting - 35% off for a limited time!

Make Your Own Website

HTML Primer

This basic tutorial will teach you to take a simple text editor like NotePad, make a web page and preview it in a browser. The process is a lot easier than you might think. I urge you to at least try. You could be a natural!!

HTML or Hyper Text Markup Language was developed in the early days of the internet. In its earliest form it was simply used to put words on a page and then link those pages together. There were no pictures on the first websites, just words.

HTML has evolved over the years. Today you can put pictures on your pages, add fancy borders and color and even make forms like guestbooks and polls to impress your visitors. There is even code to add music.

HTML is a tag based language. Tags are made by placing words or letters between brackets like these; . There is usually an open and a close tag for each element of your page. The letters in the close tag are always preceded by a forward slash; /.

The basic code for any HTML page is shown below:
<html>
<head></head>
<body>
</body>
</html>

If you look at the code you'll see an open and close HTML tag. Between the HTML tags you'll see 2 head tags and 2 body tags. I should state here that HTML is not case sensitive. HTML, Html and html are all the same to an HTML interpreter. I prefer lower case, you might prefer upper case. It's your choice.

Every HTML page is divided into 2 sections. There is a head section and a body section.

The head section at the top of the document contains information that is useful to browsers and search engines.

The body section of the HTML page will contain the actual code that makes text and images appear on your web page.

You'll always have a body section unless you choose to build your website with something called frames. Frames are a little too advanced for most beginners.

Making The Body Section

Since the purpose of this primer is to teach you how to make words appear on a web page, I'll focus on the body section of the document. I'll introduce you to 3 basic tags that you can use to build an entire website.

The Header Tag

When you read a magazine or a newspaper there are headings or headlines that introduce each page or paragraph. Web pages use the same technique.

Headings or headlines are placed on a web page using the header tag. Header tags come in 6 default sizes: h1, h2, h3, h4, h5 and h6. h1 is the largest and h6 is the smallest.

The code for the h1 tag would look like this: <h1></h1>
Text that you want to appear on the page is placed between the tags: <h1>Header Tag h1</h1>
If you placed this code on a web page in its default form it would look something like this:

Header Tag h1

If you decide to pursue the art of making your website with HTML code after this lesson, I'll show you how to make your header tags look a little more interesting. The web page you are reading uses 3 different sizes of header tags. The size and color are set using CSS style sheets.

Make Your First Web Page

Whenever you make a website, it's best to store all of your pages in one location. Create a new folder on your C drive and name it htdocs. Every time you save a web page , you'll want to save it in this folder. This will make the pages easier to find when you preview them with your browser.

Let's make our first page using just the code you've been shown so far:

<html>
<head></head>
<body>
<h1>Header Tag h1</h1>
</body>
</html>

Windows users open NotePad or Wordpad. Mac users will use TextEdit. Copy the code and paste it into the text editor window. Save the file in the htdocs folder as firstpage.html.

The .html extension is very important. If you save the page with the default .txt extension you'll see code when you look at it with your browser.

Now open a browser. Any will do. You can use Internet Explorer, Mozilla, even an AOL browser. Click File in the upper left corner. Click Open. Browse or navigate to the htdocs folder and open firstpage.html.

If you followed the directions to a T, you'll see the words Header Tag h1 in large letters in the browser window. If you see code, you saved the page with a .txt extension.

It's not very pretty, but believe it or not, this is what web pages looked like back in the 80s. HTML has come a long way since then. Now let's edit the page and add a paragraph.

Add a Paragraph to a Web Page

Paragraphs are added to web pages using the paragraph tag: <p></p>. Text that you want to add to the page is placed between the open and close tag. <p>Paragraph text goes here.</p>

If you closed it, open firstpage.html in your text editor.

First find the line of code for the header tag that looks like:
<h1>Header Tag h1</h1>
and change it to:
<h1>My First Website - Page 1</h1>

Now create a space below the header tag code by using your Enter key and add the following code.
Copy and Paste:
<p>This is my first website. I can make it if I only try. If I don't try I will not fail, but I will never know if I could have succeeded!</p>

Save firstpage.html

If your browser is still open hit the refresh button. If you closed it, open firstpage.html in your browser and take a look. You should see the new heading and the paragraph under it.

There it is. A typical 1980s web page. Now all we need to do is create a second page, link the two together and we've got a typical 1980s website.

Make a Second Page and Add Hyperlinks

Hyperlinks in their basic form are the underlined words that you click on a web page that send you to another page.

In order to link pages together, we need more than one page. Let's use firstpage.html as a template to create a second page.

Open firstpage.html in your text editor. Click File then SaveAs.

In the Save As Filename: box change firstpage to secondpage.html and Click Save

The changes that you make will now be to your second web page named secondpage.html
Find the line of code for the header tag:
<h1>My First Website - Page 1</h1>
and change it to:
<h1>My First Website - Page 2</h1>

Save secondpage.html

Before we look at secondpage.html with the browser, let's create a hyperlink that we can use to access page 1.

Hyperlinks are created using the anchor tag.
The code for the anchor tag in its most basic form looks like this: <a></a>

We need 2 things. We need text to tell the user where this hyperlink will take them and we need to tell the browser where to go.

Like all other HTML tags the text goes between the tags as shown: <a>Go to Page 1</a>

Since we're sending our users to Page 1 of our website, that is the text that we put between the tags. Now we just need to tell the browser where to go when the text is clicked.

Many html tags use what are called attributes. Attributes are always placed within the brackets of the open tag. In this case we will add an href attribute to the open tag which will tell the browser where to go when the text is clicked. By itself the attribute code would look like this href="firstpage.html"

The completed hyperlink with its text and href attribute would look like this:
<a href="firstpage.html">Go to Page 1</a>

Copy the code for the hyperlink and Paste into secondpage.html under the paragraph code.

Save secondpage.html. Preview the page in your browser. Click the hyperlink. Does it take you to Page 1? If not, repeat the entire lesson and find what you missed.

If your hyperlink worked all you need to do is add a hyperlink to Page 1 which takes your user to Page 2 and your 2 page website is complete.

Open firstpage.html in your text editor. Add the code shown below under the paragraph:
<a href="secondpage.html">Go to Page 2</a>

Save firstpage.html and preview it in your browser. You should now be able to use your hyperlinks on each page to access the other.

Things to Try

1...Edit the paragraphs on each page, save them and preview them with your browser.

2...Add a second paragraph to a page and preview in your browser.

3...Add some different size header tags to the pages and put some paragraph text under them.
For example: Add <h2>This is a Sub Title</h2>
Note the difference in default sizes.

4...Use one of the pages as a template to make a third web page. Then create the hyperlinks to navigate to the third page.

Going On

If you've reached this point in the lesson there are 2 possible states of mind that you may be experiencing.

You may have breezed through the lessons and your confidence is exploding. You realize that you can make a website of your own with no problem.

You may also be confused and ready to give up. Don't Quit!! There's HOPE on the horizon.
Proceed to choosing The Right Tool


Home

The Right Tool

Adding Content

Make Your Template

Publishing

Additional Helps

Modifying Your Template

More HTML Code

Color Schemes

Color Code Chart

Graphic Headings

Recommended Products

I Need Help


Make My Own Website is the Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset, KY 42502 USA
Copyright © 2007
Last Modified: July 5, 2007