For The People - Bringing our World Together - One Voice At A Time

In this lesson we will discuss the following topics:

  • What is HTML?
  • The two parts of an HTML document (heading and body).
  • The use of HTML tags.
  • Formatting and aligning of text (headings, paragraphs, line breaks, ordered and unordered lists).

What Is HTML?

The achronym HTML stands for hyper text markup language. Many people believe that HTML is a programming language. In fact it is simply what it claims to be, a markup language. A typical HTML document is a simple text file with special sequences of text here and there known as tags. These tags contain information that tells a web browser how a document should be formatted, which graphics to include when displaying a document and so on. Mastering the use of these HTML tags is most of what this course is all about.

You will not need any special software for this course that you don't already have on your computer. Although there are fancy tools for creating HTML documents such as Frontpage from Microsoft, Pagemill from Adobe or Dreamweaver from Macromedia, all you really need to create an HTML document is a simple text editor such as Notepad which comes with your Windows operating system.

The Two Main Parts Of An HTML Document

An HTML document usually contains two main sections, the heading and the body. As a minimum, the heading section contains the document title which is displayed by your browser at the top of the screen above the menu bar. The body as its name emplies, contains the body of the document. At this point, let's dive right in and look at an example of a basic HTML document. Examine the following: 

   
<html>
<head>
<title> A Sample HTML Document </title>
</head>
<body>
This is where the main content of the document goes.
</body>
</html>

An HTML document always begins with the <html> tag. This tag and most others are refered to as containers because they have a beginning and ending tag. Ae container is ended by using the same tag with a forward slash (/). So it follows then that a </html> tag would appear at the bottom of the document. The second line in the document contains the <head> tag. The third line contains the document title. Note the the <title> </title> tags make up another container. The fourth line terminates the heading section. Line five starts the body section. Line six contains some body text. Line seven terminates the body section and line eight signals the end of the document.

Using HTML Tags

You have already seen some examples of the use of HTML tags. From this point onward I will be talking about the various types of tags and what they are used for. By no means will I discuss every tag in HTML. If there is something you want to do with your site that I haven't covered in the course, your textbook will probably have the information you need to at least get started. For the remainder of this lesson, I will discuss some of the more important tags used to format and align text.

Formatting And Aligning Text

Here is a list of HTML text formatting tags you can use to get started:

  • <h1> through <h5> - Creates subheadings.
  • <p> - Signals a new paragraph.
  • <br> - Forces a line break.
  • <ul> - Starts an unordered list.
  • <ol> - Starts an ordered list.
  • <li> - Starts a new ordered or unordered list item.
  • <b> - Signals that text is to be bolded.
  • <i> - Signals that text is to be italicized.
  • <u> - Signals that text is to be underlined.
  • <hr> - Draws a horizontal line.

Now here is an example of how to use the tags listed above. 

 <html>
 <head>
 <title> An Example Of How To Use Text Formatting Tags </title>
</head>
                                                          <body>
<h5> The Smallest Subheading </h5>
<h4> A Somewhat larger Subheading </h4>
<h3> A Midsized Subheading </h3>
<h2> A Subheading On The Larger Side </h2>
<h1> A Very Large Subheading </h1>
<p>
The tag on the line above signaled a new paragraph.
<b> This text is bold.  </b> Bolding is turned off.
<i> This text is italicized.  </i> Italics is turned off. 
<u> This text is underlined. </u> Underlining is turned off.
<br>
The tag on the line above signaled a line break.
Now lets create an unordered list.
<ul>
<li> This is the first list item.
<li> This is the second list item.
<li> This is the third list item.
</ul>
<hr>
The tag above drew a horizontal line.
<p>
The tag on the line above signaled another new paragraph.  Now let's create an ordered
list.  Here the list items will be numbered.
<ol>
<li> This is the first list item.
<li> This is the second list item.
<li> This is the third list item.
</ol>
</body>
</html>

Aligning Text

Text can be left justified, right justified or centered. You align text by using the align attribute like this: 

<h3 align=center> A Centered Subheading </h3>
or 
<p align=right> A right justified paragraph. </p>

Notice my use of the word "attribute". An attribute is an additional piece of information included in a tag to invoke a given browser behaviour. The align attribute is an example of an attribute. The align attribute is supported in several HTML tags as you will soon see.

Preformatted Text

Another useful tag is the <pre> tag. You use The <pre> tag when you want your browser to format the text just as you typed it including spaces and line breaks. Examine the following: 

<pre>
This
text 
appears
just
as
it
is
entered.
</pre>

Sometimes for documentation purposes you might want to put comments in your HTML documents. A comment is there for the author's benefit and will be ignored when the browser displays the document. You enter a comment by first entering the sequence <!-- followed by the comment followed by the sequence --> like this: 

<!-- This is a comment and will not be displayed by the browser. -->

Conclusion

In this lesson, you learned about the two parts of an HTML document. You learned how HTML tags are used and how text can be formatted and aligned. Now try creating your own sample web page using what you have learned. You can save your file in a folder on your hard drive i.e. c:\myfolder\myfile.htm and then open it with your browser. Make sure the file has an .htm or .html extension or your browser won't recognize it as an HTML document. For useful background material, I recommend that you read chapters 4, 5 and 9 in your textbook. In the next lesson you will learn about the use of fonts and colours, how to place graphics on your pages and how to link HTML documents together.

Lesson 2 For-The-People Back To Course Home Page