[TUTORIAL]Basic HTML

To build a website, your gonna have to learn some basic html. Nowerdays you can get software such as dreamweaver or frontpage which lets you design a page visually, while it deals with the html. Even with this technology, it doesnt always get it right, and a basic knowlege of html will really help you when dreamweaver doesnt do what you want it to. To write a page in html, all you really need is notepad. Lets look at a basic page -

Click here

As you can see, it isnt a really nice webpage, but it does display the text "This is a simple webpage!", and if you look at the top of the explorer bar, it says "Test Page"

I made this page in notepad. I created a blank document, and then typed this -

<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
</HEAD>
<BODY>
This is a simple webpage!
</BODY>
</HTML>

If you right click on the page, and then select "View Source" this is what you will see. All i had to do then, was to save the file, rename it to simple1.htm, and upload it to my webspace. Lets have a look at what these codes actually mean...

Tags

Html works with tags. A tag defines what a command will do. Tags can do all sorts of things from -

Formatting Text - Bold, ittalic, underline
Inserting Tables
Inserting Pictures
Inserting Media
Changing the Scroll bar colours
Etc....

There are 2 types of tags, open and close. To make a tag work, you have to insert whatever you want the tags to effect inbetween an open and close tag of the same value.

Lets take that page i created....

The first tag we see is <HTML>, and the last tag we see is </HTML>. This is becuase it is saying everything written between these tags is in html. You will notice that the last tag has a forward slash in it and the first one doesnt. This is the difference between open and close tags.

The next tag we see is <HEAD>, this tag tells the browser that the next comands define certain things within the browser itself, such as the title of the page, the scroll bar colours,background colour, etc... As you can see, the next tag is <TITLE>Test Page</TITLE>, now the page is named test page and will show up at the top of the explorer, as well as in the task bar. That is all i wanted to set for the heads, so i now close these comands with </HEAD>

The next tag is <Body>, anything that fits between these tags is to be displayed, of have something to do with what is being displayed, on the page. So on this page, all i have being displayed is "This is a simple webpage!", and so that is all that i have put between the <body> tags. I then close my first tag </HTML> and that is a finished webpage.

This is about as basic as you will get with html, but all html works in the same way. If you know the tags, then you can create what you want. With some tags, you can define settings in more detail with adding numbers and extra text to them.

Click Here

Now you see the text is centred in the page. Id did this by adding the code
<div align="center">This is a simple webpage!</div>

If you change the word "center" to left or right, then it will move the text whichever way you set.

This is how basic Html works.