Friday 25 November 2011

Basic HTML Tutorial: Lesson 1

23:22  Unknown   0

 Back to Introduction

Ok, the lesson 1 begin now. Just as I told in previous, we just using a notepad. So, open your notepad and type the following text:

<HTML>
</HTML>

Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag.

Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser is 'this is the start of a HTML document' (<HTML>) and 'this is the end of a HTML document' (</HTML>). 

Now we need to put some stuff into it.


Every HTML document needs a pair of HEAD tags.
<HTML>
<HEAD>
</HEAD>
</HTML>


The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>


And the bulk of the page is going to be within the BODY tags.


<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Oh, and one more thing, give your document a title.

<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If you a little fuzzy about how to do this then here's what you do.

In your Notepad window click "File" then "Save as".


Where it says "File name:: type in "page1.html" Where it says "Save as type:" make sure it says "All Files(*.*)".

Hit save and you're done!

Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you still don't have your server, just open your saved file with your web browser(Mozilla, Opera etc) and you website should look like this.

(this is an example when you open it using chrome)


You can double click on it now and see the results of your handiwork.

Unfortunately, as you can see, the page is just a little bit blank (but it is still a legitimate HTML document!).

Next lesson we will start learning to put some stuff in your page. Two quick points before we go on to lesson 2:-
  1. What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. 
  2. The document title is what appears at the very top of the browser window.
Till then ^_^

Posted in: ,

0 comments:

Post a Comment