2-May-11 (Created: 2-May-11) | More in 'Computing For Teens'

05 Basic HTML for Teens

You will learn the basics of html here. At the heart html is this simple.

HTML is a document

When you use microsoft word to create a file you have created a document that has paragraphs, headings, images, bullet lists, tables etc. HTML is JUST another way of creating a similar looking document.

HTML is a text file

HTML is a text file on a computer that has the following text in it. 


<html>
<head>
<!-- This is a comment in the document. this is not visible -->
<!-- Here you describe the document -->
</head>
<body>
<!-- This is your body. Everything you put here is visible -->
</body>
</html>

The words between angular brackets are called tags or html tags. All your information in this document must be between these html tags. There are lots of tags. Each tag means something. Learning html is learning these tags to write your document.

Each tag opens and closes. Everything inside those two tags belongs to that tag.

In this example you have learned 3 tags. These are 


html
head
body

The fourth one you learned is a comment tag.

A simple document that says "Hello World"


<html>
<head>
</head>
<body>
<p>
Hello World.
</p>
</body>
</html>

In this example the tag 


<p>

represents a paragraph. Other useful tags are 


<h1>
<h2>
<h3>
<h4>
<h5>

All these are various heading tags. You can use them like this 


<h1>Heading1</h1>
<p>Main heading</p>
<h2>Sub heading</h2>
<p>A paragraph under that heading</p>

Example of list tags

Here is how you write an unordered list 


<li>
<ul>Item1</ul>
<ul>Item2</ul>
<ul>Item3</ul>
</li>

Change ul to ol to make it a numbered list

Here is how you create a table

Basic structure of a table 


<table>
<!-- row 1-->
<tr>
    <td>column1</td><td>column2</td>
</tr>
<!-- row 2-->
<tr>
    <td>column1</td><td>column2</td>
</tr>
</table>

How can I test this

Create a file with these tags on your windows computer and use internet explorer to open these files and you should see the document. Or you can use any online editors on facebook or drupal to type this html and test it

where to go from here

Learning html is learning more and more tags. Go to w3c schools html reference page to learn about more tags.

Next important topics on this site


HTML styles for smart teens
HTML links for smart teens

Conclusion

Do not spend a whole lot of time more than this to understand the basics.