In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.
Now in this second part I am going to deal with the most important tags in your body element. This lets us design our body a little bit, rather than just having a plain bunch of text running down the page.
So in this page we will cover the most basic tags for the body section. This is the stuff that you will see displayed in the browser:
1. Paragraph tags <p>Paragraph Tag</p>
2. Header tags <h1>You get from h1</h1><h6>Through to h6</h6>
3. Division tags <div>Division Tag</div>
If you read the previous HTML tutorial on this blog, then this becomes rather easy to implement. However, there are a few new things to learn about how these tags are used.
Paragraph Tags
Lets start with the Paragraph Tag <p>As mentioned above, this tag goes into the body part of your html document. This tag is rather simple, it is for distinguishing one paragraph from another. Let's create a simple example and then I want you to try it out in your text editor and see if you can get it to work:
<html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
Okay, lets learn a few things. First of all, you should notice that we don't have the <body> and </body> tags on the same line any more. This is important, so pay attention: In HTML spaces are ignored except for spaces between lines of text, which simply add an additional space.
Also important is that in a line, only one space is used. Therefore, if you look at the way that I have written he HTML code above, after the end of each sentence there is a little bit of 'code' in there, . This little bit of HTML code means "please add another space here." It is very useful, because you can put in multiple spaces wherever you need them in your text. It is the only way to get a double space.
You can do the same thing with a line return and then the peace of code. Experiment and see if you understand how it works.
The paragraph tag, and same with the header tags below, take you onto a new line and divide the text from other text in the page.
Therefore, if you did this:
<p>I am going</p><p>break up this little</p><p>peace of text</p>
It would do the same as if you had written the code on different lines. It is so important to 'get' the concept of spaces in html versus what you will get on the page, that you should play around with a few example of it...try it out and see what you get. The more you practice at this stage, the more firm your foundation will be once we start adding style and later scripting to your HTML page.
Header Tags
If you understood the paragraph tag, then the header tags are really easy to understand as well. They are for making headers in your page. Of course.
There are six levels of tags, and for a number of reasons it is usually best to start with the biggest..the <h1> tag (perhaps if you use it for the actual title of your page) and then work your way down the list. It is not a hard and fast rule, simply a good idea. You will find you seldom come to the <h6>. Most of the time you will probably be fine with <h1>, <h2>, <h3> and <h4>.
Just like the paragraph tag, these header tags all start on a new line, and the lines themselves correspond to the size of the lettering in that title tag. Again, play with them and see what happens.
The actual style of these tags are not set, and so different browsers display the tags slightly differently. That's an important thing to start to learn about HTML, that you need to try to always develop your pages as a compromise between different browser. That discussion belongs more in the styling section, when we will learn CSS.
Division Tags
The previous two tags seem functional right from the beginning. In fact, just learning the little bit of html you have up to here, you could produce a web page, that you could put up online, and show nicely separated text and titles as a peace of written work.
But the Division or rather 'div' tag actually does very little by itself. However, think of it as a marker for the different parts of your page. This is going to become more important as you learn styling and eventually scripting later on. It gives you sections of your text to work on...So you could have a header section, a main body section, a navigation section (we'll talk about navigation in a tutorial soon), a footer and so on. Each of these bits can be styled differently or told to do different things. For now only worry about remembering to put them in as you divide up the different parts of your HTML document.
<div>Division</div>
