CodeLair scripts and tutorials; click to return to home page

HTML Basics

All you need to know to get you started writing your own web pages. Includes syntax and the most common HTML tags.
Last updated: January 07, 2007

This tutorial is not intended to make you into an expert HTML writer, but tell you how to write simple HTML code.

NOTE: several of the example listed on this page are now 'deprecated' - this means that they are no longer part of the official spec for HTML. All browsers should still support them for means of backwards compatibility, but it is recommended to use CSS alternatives.
See the Deprecated HTML elements tutorial for more information.

Contents

 

 

What is HTML?

HTML stands for Hyper Text Markup Language. This means that it "marks up" the text where you want certain effects to apply. The basic syntax for HTML is a pair of greater than/less than symbols: < and >. In between these is the name of the tag. Most tags will also have an associated closing tag. If the tag is <TAG> then the closing tag will be </TAG> -- with the / symbol before the tag name.

 

So how do you write a web page in HTML?

First up, you will need a text editing program, such as Notepad or TextPad (I prefer TextPad since it has syntax highlighting). To save a file as a web page, type the HTML and then click "Save As..." in the File menu. Type the name of the file, and then add .html after it, as the file extension. The file will be saved with this extension instead of the usual .txt extension.

As HTML is a Markup Language, you will mark text as to how you would like it formatted/edited. To start writing a web page you will first need to tell the browser the language is HTML. You do this by typing <HTML> at the start of the document. When you have finished your page, finish the file with a </HTML> tag.

<HTML>
Page code
</HTML>

Another thing to note is that HTML is ignorant of white space. White space is a sequence of any spaces, tabs or new lines. So if you type some text of several lines in your text editor, unless you add certain HTML tags then all the text will appear in one block. As you will see below there are two easy ways to write HTML so that it appears on multiple lines.

 

From head to body

A HTML document is split into two parts: the head and the body. The body basically contains what you see on the page: the text, pictures, etc. The head is used for setting up the document. The only thing you will need to use in the head at this stage is the <TITLE> tag. This displays the title of the page in the bar at the top of the window.

<HTML>

<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>

<BODY>
<P>Your text for you page goes here...</P>
</BODY>

</HTML>

This is pretty boring. Below are many ways to add effects and spice up your page a little.

 

Basic HTML writing

The first way you might want to make your page more interesting is some color.

<BODY BGCOLOR="#C6D9F2">
<P>Blah blah blah</P>
</BODY>

This changes the background color of the page. You can use a color name (e.g. red, yellow) or a number (e.g. #C6D9F2). To find out what the number for a particular color is, you will need a graphics program. Paint Shop Pro (and probably most other good graphics programs) will tell you the number for any color you choose in the chart. Failing that, you can use this Color Wheel at the Java Script Source.

You can also have a background image:

<BODY BACKGROUND="image.gif" BGPROPERTIES="fixed">
<P>Blah blah blah</P>
</BODY>

The "bgproperties" attribute means that the background will remain in place when you scroll down the page. Remove this if you want text to scroll with the image. Also remember to replace "image.gif" with the name of your image file.

<P>Paragraph tag</P>

Wondering what that P was in the first examples? It is used to define the start and end of a paragraph. A new paragraph will have a gap before and after it, as you are able to see on this page. You can also add the attribute "align" to change the justification. Text will be aligned left by default.

<P align="left">Left aligned</P>

<P align="center">Center aligned</P>

<P align="right">Right aligned</P>

Line<BR>
break.

This last tag moves the text to the next line. It has no closing tag.

<B>Bold text</B>
<I>Italic text</I>
<U>Underlined text</U>
<STRIKE>Strikethrough text</STRIKE>
<CODE>Code text. Uses a fixed-width font.</CODE>

Formatted text.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading levels 1 to 6, where 1 is largest and 6 is smallest.

 

Font styles

There are several ways you can change the font. You can change the font face, color, and size. The basic tag is <FONT> but you must add definitions to it to make it change the text, as shown below.

<FONT FACE="Verdana">Text in the Verdana font</FONT>
<FONT SIZE="3">Size of the font (1-6)</FONT>
<FONT COLOR="red">Red text</FONT>

Or try a combination:

<FONT FACE="Verdana" SIZE="3" COLOR="red">Red text, size 3, in Verdana font.</FONT>

You can set up a font for the whole page by typing this after the <BODY> tag:

<BASEFONT="fontname" SIZE="3" COLOR="#color">

It is best to stick with universal (common) fonts, such as Arial, Verdana, Comic Sans MS, or Trebuchet MS (what I use). I would advise you against using Times New Roman, it's not very pretty.

 

Images

<IMG SRC="image.gif">

Include an image in the page. The image must be a separate file, and should be in GIF (.gif) or JPEG (.jpg) format. "image.gif" is the address of the image. There is no closing tag for IMG.

There are several attributes you can add to images such as size, justification and ALT text (text displayed when the visitor holds their mouse over the image):

<IMG SRC="image.gif" WIDTH="300" HEIGHT="150" BORDER="1" ALIGN="left" HSPACE="8" VSPACE="10" ALT="Image Title">

WIDTH: The width of the image in pixels.
HEIGHT: The height of the image in pixels.
BORDER: The border in pixels.
ALIGN: The alignment of the image: left or right (see below). To align an image to the center, enclose it in a pair of paragraph tags with the align set in there (see above).
HSPACE: The horizontal space between the images.
VSPACE: The vertical space between the images.
ALT: The ALT text.

The width and height images really only need to be used when you are resizing an image. Note that if you use this to make an image smaller, the download time will still be the same. The best thing to do is to resize the image in a graphics program.

A note about aligning: If you align the image left or right, the text will wrap around it:

appleNot aligned (i.e. default)

pearAlignment is specified
Lalala Lalalala
Lalala Lalalala
Lalala Lalalala
Lalala Lalalala

 

Hyperlinks

Hyperlinks link pages on the Web. They can be implemented using the <A> tag:

<A HREF="http://www.your-url.com">Link Text</A>

If you want to make an email link, type "mailto:email@address.com" instead of the URL, obviously using your email address.

You can make images into links - just put your image tag between the hyperlink tags:

<A HREF="http://www.your-url.com"><IMG SRC="image.gif" BORDER="2" ALIGN="center"></A>

The default color for links is blue, purple for visited links and red for active links. You can change these colors by adding these attributes to the <BODY> tag:

<BODY LINK="blue" VLINK="purple" ALINK="red">

You can also add ALT text to text links:

<A HREF="http://www.your-url.com" TITLE="alt text">Link Text</A>

Now, when a visitor holds their mouse over the text link, an alt text box will appear.

You can also use a button for a link:

<FORM METHOD="link" ACTION="http://www.your-url.com"><INPUT TYPE="submit" VALUE="button text"></FORM>

You will want to change the URL and button text.

 

Anchors

An anchor (a.k.a. bookmark) is a place on a page which can be directly jumped to. It saves having to scroll down to find the information you want.

<A NAME="anchor">Anchor</A>

Type this where you want the anchor. To link to this anchor, simply type "#anchor" after the URL:

<A HREF="http://www.your-url.com/index.html#anchor">Link</A>

Or if the anchor is on the same page:

<A HREF="#anchor">Link</A>

 

Conclusion

There you are - all the basics of HTML you need to make a simple web site. Of course, you can use a WYSIWYG web page editor to do all the coding for you, but it helps a great deal if you know the basics and the HTML syntax so you can spot errors if your page does not work correctly.