HTML: Tutorial Part 2

Now that you have seen how to take textual code and make it work in a browser, let us see what options we have available to us. Let us first make a few changes to our previous code.

<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <p>This world is your world!</p> <h1>Hello State!</h1> <p>This state is your state!lt;/p> <h1>Hello City!</h1> <p>This city is your city!lt;/p> </body> </html>

There are two things that you should have noticed. First of all was the paragraph tag denoted by <p>. A paragraph tag does just what it sounds like it should. A paragraph of information is the meat of a website, and divided by headings. The second thing you should have noticed is that we have several repeats of the same heading. Not a big deal you think, but let's say that we wanted to make every heading aligned to the center. How would you do it?

<html> <head> <title>Hello World</title> </head> <body> <h1 align= "center">Hello World!</h1> <p>This world is your world!</p> <h1>Hello State!</h1> <p>This state is your state! </p> <h1>Hello City!</h1> <p>This city is your city!lt;/p> </body> </html>

That was simple enough, but if you preview it in your browser you will notice that it only changes text alignment for the first heading. We wanted all of the headings to be colored red. You may be thinking "why can't I just put 'align = "center" 'in each heading tag. This is correct, but not the most correct way of doing it. The most correct way to do this task would be to use what is called CSS or Cascading Style Sheets. Fear them not, as they will soon turn into your best friends.

To view this section as a flash tutorial, click here.