West Dorset Community Articles

Articles & Contributions

Understanding HTML

Learning HTML may seem like a difficult language to learn, but it is very simple to master. HTML is a basic programming language and once you start to understand the basics, you will discover there isn't much more to learn.

Why learn HTML?

If you use an HTML editor like dreamweaver or Frontpage, you will know that these programme's write the HTML for you, so why learn HTML? If you have used an editor like those mentioned, you will probably have come across a problem that the editor can't solve, and you need to view the source code to see what is happening. This can be a problem if you can't understand what the source code means. It may look like a jumbled mess of letters but it is quite easy to make sense of. Another reason to learn HTML is that it is a MUST if you plan on learning any other, more complex, languages (perl, php, etc).

The Basics
All HTML code had an opening and a closing tag (label). There are a couple of exceptions to this rule which we will discuss later.
Lets look at some text tags below:

This text is Bold
The html for the bold code above is : This text is Bold

See the opening tag then the text you want to make bold, then the closing tag The closing tag is always the same as the opening tag but with a " /" in front. Notice also that "b" is an addr' for bold!!
Same for below

This text is Italic
HTML code : This text is Italic

This text is Underlined
HTML code : This text is Underlined

We can also add more than one tag at a time. Lets look at this text : This is bold, italic AND underlined

HTML code for above : This is bold, italic AND underlined Always good practice to open and close tags in sequence. Notice underline is last to open so should be first to close.

Lets start at the top
Lets start at the top of a web page. Every page should have a head section and a body section. The head section is mainly info relating to the web page and instructions to the browser. Nothing in the head section is outputted to the browser so is isn't displayed.
The body section contains all the text and design displayed on the web page and is outputted in the browser.
Typical web page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head>

<body>

</body>

</html>

Notice the opening and closing tags. The top line tells the browser what type of page it is. Then open the html tag then the head tag.

You can insert various info between the head tags. I won't go into it here, suffice to say the most important is the name of your web page. <title> my web page </title>

Lets create a table then insert some text

<table width="100%" border="1"> <tr> <td>Welcome to my Web Site </td> </tr> </table>

As you can see, creating a table starts with opening the table tag. If we want to define the width of the table, whether it has a border or not, we include it in the table tag. There are more options available to define our table but for the purpose of this article we will not include them here <table width="100%" border="1"> Table with width of 100% and a border of 1 pixel.
The next tags <tr><td> means open a table row then a table cell. We cannot simply create a table then insert text, we must open the table, then create a table row, then create a table cell. We can only add text and images inside cells : <td> Welcome to my Web Site The (paragraph tag) starts a new paragraph. As you can see, we can also define how are paragraph will look. Here we want our text to align in the centre of our table and the text to be bold .
Then we close the cell, row, and finally the table </td> </tr> </table>

This is how our table above looks!

Welcome to my Web Site

We mentioned table cells above, what is we wanted to split the cell into two! We would include another cell opening and closing tag <td> some text </td> so our code becomes :

<table width="100%" border="1"> <tr> <td>Welcome to my Web Site </td><td>Another cell added </td> </tr> </table>

Welcome to my Web Site

Another cell added

If we wanted to add another row :

<table width="100%" border="1"> <tr> <td>Welcome to my Web Site </td></tr> <tr> <td> another row </td> </tr> </table>

Welcome to my Web Site

another row

I know we have concentrated on tables quite a bit in this article, but tables are one of the most difficult aspects of learning HTML. I hope I have helped to show you that there is nothing difficult in coding tables, or HTML in general. There are more in depth definitions like setting width of cells, floating tables and having tables within tables, but it is all simple enough once you understand the basics of how HTML is written, I hope this article has provided you with that.

OOPS! almost forgot,
Some tags that are an exeption to the rule and do not have a closing tag
 This is a line break and doesn't require a closing tag. A line break means start a new line, as opposed to start a new paragraph
<hr> is another than doesn't need a closing tag. <hr> is a horizontal rule across the page

Reference:

Here is a list of common HTML tags

Written by jr (2007)

Back to West Dorset Articles menu