Introduction to HTML for beginners

In any web page document you will find HTML codes. HTML codes are made up of tags. Tags come in pairs. There is an opening tag <html> and a closing tag </html>. Notice how the closing tag has a forward slash in it and the opening tag does not.

Example: to create BOLD text you would use the <b></b> tags

Code:
<b>text here</b>
Results:
text here

Standard Code That You Must Include

When you create a new document here is the standard code that you will need to use for every web page that you create.

Code:

<html>
<head>
<title>Web Page Title Here</title>
</head>

<body>
Your content goes here
</body>
</html>


Lets break this down. The <html> tag will always be towards the top of the document while the </html> will be at the bottom. Think of tags as if they were mirroring one another. For every opening tag you need a closing tag.

Next, is the head tag. The head tag will consists of the <title> tag and the <meta> tags. Inside the title tag will be the name of your web page. If you look at the very top left hand corner of your browser you will see where the title tag appears. The Meta tag will include a description about your website, keywords, etc. More about meta tags in further chapters.

Let's Make a Web Page!

Open up your code editing program. If you do not have Abode Dreamweaver simply use notepad on a PC.

* Notepad can be found through (Start > All Programs > Accessories > Notepad). Please be sure not to use Microsoft Word as this will save additional markup that servers do not know how to read.

Enter the following into your editing program. When you are finished click (File > Save As), give your document a name of test followed by .html, and click save.

It should look like this test.html

Example:

Code:

<html>
<head>
<title>Make up a title here</title>
</head>

<body>
This is my first test
</body>
</html>

Results:
This is my first test


Once saved double click on the file to view your results.

Congratulations! You have just created your first webpage.

If you are having trouble creating this test Right Click Here and "Save Link As" to your desktop. You can then open it up using your editor and see what is going on behind the scenes.

Latest Blog Entries

Subscribe to RSS headline updates from:
Powered by FeedBurner

Website Resource Links

SBI (Site Build It) | Build Quality Sites With Simple Tools
Godaddy | Buy a Domain Name

My Top 3 Website Hosting Companies
Host Gator | Affordable Website Hosting
Blue Host | Website Hosting
Fat Cow | Eco Friendly Hosting