HTML Tutorial #2

Now you know a little about HTML, it might be nice to be able to create a template file that you could use each time you wanted to create a new page. Here's what it looks like:-

Each line is part of a nested section. The HTML starts as before followed by the HEAD section which contains things like the page TITLE (as shown), META tags (see later tutorials), scripts (they have their own tutorials) and comments. The TITLE is essential as it is displayed in the title caption at the top of the browser window and is used by most Search Engines to locate your page in it's database (this is an enormous subject by itself so I'll be devoting another set of articles exclusively to this topic). The TITLE is then closed off (using the / slash) as is the HEAD section. The BODY is then opened and will contain the main body (unsurprisingly) of your text. More on that in a minute. To complete our template file, we'll add some comments.

<HTML>
<HEAD>




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

</BODY>
</HTML>

Comments do not appear on the printed page but help you to keep track of when a particular page was written or updated and by whom (if the web pages are being written by more than one person) along with any helpful comments. Once uploaded onto the web, you can view the source by right-clicking on the main page and selecting View Source. In fact, there is nothing to stop anyone viewing your pages from reading the source and indeed nothing to stop you reading other peoples source (in fact it is a good way to learn new techniques). However, no one can overwrite your pages because they are on your ISP's server and only you (and your ISP of course) know the password. Loading pages onto the web is beyond the scope of this tutorial but there will be further tutorials on the subject on the main site soon.

Save this template file as something meaningful (TEMPLATE.HTM would be good) and you can use it as the basis for all future pages. I'll leave you with a few extra tags to experiment with. I won't be displaying the entire template file just the BODY tags for you to cut and paste into a new file each time. Take a look at this.

<BODY>
<b>Hello</B> World!
</BODY>

On the page, this becomes:-

Hello World!

Note that the B (for BOLD) can be upper or lower case (indeed all HTML tages can be mixed case, the only exception being the text you want displayed) and can be switched off in the usual way with the / slash character. A similar tag is STRONG as in:-

<BODY>
<STRONG>Hello</STRONG> World!
</BODY>

which does much the same thing. You can also draw a very nice Horizontal line (or Rule) using:-

<BODY>
<HR>
</BODY>

It looks like this:-

Note that this does not need a closing / slash character and it automatically resizes to the browser window. Finally, to make life easier, there are some built-in headline tags as follows:-

<BODY>
<H1>Hello World!</H1>
<H2>Hello World!</H2>
<H3>Hello World!</H3>
<H4>Hello World!</H4>
<H5>Hello World!</H5>
<H6>Hello World!</H6>
</BODY>

These look something like this on the page:-

Hello World!

Note how they diminish in size (you only have 6 sizes to choose from). The advantage of using these is that they will be interpreted in much the same way in all browsers (rather than using specific font sizes which I'll cover in a future tutorial).

That's it for this tutorial. Try constructing a page using a centred, large font, bold headline, some text seperated by paragraphs with some letters and words in bold (check the previous tutorial if you've forgotten how to do some of this). Also see what effect blank lines in the code have on the printed page (hint: none whatsoever). See you next time...

Back

Written by Nick Cheesman. Last updated: 01/04/2004
Please eMail me at: nickjc@nickjc.co.uk if you need help