Basic HTML tutorial for web editors

This tutorial will cover the basic HTML tags that will enable you to edit HTML documents. It will also provide the building blocks to build your own web pages, should you wish to discover more about publishing on the web.

Web pages are split into two distinct parts. The Head and the Body. Within the Head of the HTML page is the Title, which will appear on the blue bar at the top of the browser.

Here's a basic HTML page, which says "hello world!"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>This is my first web page</TITLE>

</HEAD>

<BODY>

<P>Hello world!</P>

</BODY>

</HTML>

Type this into Notepad and save it as example.html, then you can double-click on its icon to see it in your web browser.

In HTML there are two types of tags, container tags, and empty tags.

An example of a container tag is the <title></title> tag. Whatever is contained within this tag is assigned to the title. Notice that the closing tag has a slash in it.

An example of an empty tag is the break tag <br>. This forces the cursor to a new line. There is no closing tag for this type of tag.

The first line of the code above looks a bit daunting, but it just tells your web browser what version of HTML you are using. This needs to be written exactly as is. This, unlike the rest of the HTML language is case sensitive. You can write all the other tags in upper or lower case.

Following the doctype tag is the <html> tag, this is now the beginning of the document. The <head> tag always follows the <html> tag and contains in this case just the <title> tag. That's the end of the Head section of the page.

The Body section of HTML contains the tags which will display text, images, links and multimedia.

In the page above all that's contained within the <body></body> tags is a paragraph. Whatever is placed within a paragraph tag <p></p> is formatted as a paragraph.

<p>Hello World!</p>
or
<P>Hello World!</P>

This is all very well and good, but this is a very boring page!

Let's make the text larger.

<p><font size="10">Hello World!</font></p>

Using the <font> tag we can format the text. Lets try making the text blue.

<p><font size="10" color="blue">Hello World!</font></p>

As you can see in HTML you can add attributes to tags to alter the way things are displayed.

Note: color has to be spelt in American English, and won't work otherwise

Lets change the font to TAHOMA. To do this we need the face parameter.

<p><font size="10" color="blue" face="Tahoma">Hello World!</font></p>

Note: Most websites stick to fonts like Times Roman and Arial, because most computers have these fonts installed. If you were to use an elaborate font and your viewers didn't have that font, it will revert to Sans-Serif or Helvetica, as default.

Now lets see how to format these two lines in HTML.

Welcome
This is my first web page, isn't it great!

<p><font size="10"><i>Welcome</i></font>
<br>
<font size="3">This is my first web page, <b>isn't it great!</b></font>

This piece of code introduces two new tags the italic tag <i></i>, and the bold tag <b></b>.

HTML Basics for Web Editors part 2