Introduction to HTML

What is HTML?

HyperText Markup Language or HTML as it's better known is the language used in the displaying of web pages.

A HTML document is always in two sections, the HEAD section which contains information for the web browser and for search engines, and the BODY section which contains most of the information about how the page is to be displayed. You always start off a HTML document by using the <HTML> tag and you end the document by closing the tag. If you want to make your HTML valid you should also specify a DOCTYPE which tells the browser what language the page is in and the charset meta tag which tells the browser what character set the page was made in. Don't worry about making your page valid for now just concentrate on how your page looks. Your HTML document should be layed out like this...

<HTML>
<HEAD>
<TITLE>PAGES TITLE HERE</TITLE>
</HEAD>
<BODY>
...
Everything in here is what gets displayed.
...
</BODY>
</HTML>

HTML is made up of tags which are commands placed between angled brackets such as <B> which is the bold tag. The tags tell the web browser how to render, or display, the following text or tags. For example if I wanted to display the sentence "In the end" in bold you would use the following:

<B>In the end

This would display as In the end

Now some HTML tags require closing tags to show where to stop the effect. A closing tag is always the opening tag but with a / at the start. So the closing tag for <B> would be </B>. You must always close any tags you have opened. So our example now becomes

<B>In the end</B>

There are two main types of tag, those that have to do with how the page is rendered and those that just give information. For this part of the introduction we will just concentrate on those tags that affect the way the page is displayed. This group of tags is it's self divided into two groups, those that affect the appearance of the information and those that affect the way the page is laid out.

The main tag you will come across is the FONT tag. The FONT tag is used to tell the browser which font to use, what colour to make it, and what size. It does this by using attributes. An attribute is placed in a tag after the command using the format attributesname="attributesvalue" and is used to specify various things. In the case of the three attributes I mentioned for the FONT tag they are face="", color="" and size="".

The main tags used to format text are <FONT for setting the font values, <B> for making the text bold <I> for making the text italic and <U> for underlining the text. These are not the only tags but are the main ones you would be using. With all these tags you must always remember to close them after the text you want the effect applying to by using the same tag but starting with a /. So to close <U> we use </U>. You probably noticed that I didn't put a > after the <FONT, this is because you will always use attributes with the FONT tag because <FONT> will have no effect without it's attributes being defined.

A couple of other tags you will need to know are <IMG src="" alt=""> which is for the placing of images and <HR> which places a horizontal bar on your page. In the IMG tag you put the location of the image into the src="" attribute and give some text explaining what the image is of using the alt="" attribute. It is very important that you always supply some alternative text for images incase the image path is broken or for people using text only browsers. Neither of the two tags just mentioned require closing. Finally in this text formatting section are the header tags. The header tags are <H1>...</H1> down to <H6>...</H6>. I say down because H1 is the biggest header tag. Text within header tags is large and bold and will start on a new line with any text after it being on a new line as well.

Now I'm going to quickly talk about tags used to control the layout of your page. These range from simple things such as <P>...</P> which puts things in a paragraph, <BLOCKQUOTE>...</BLOCKQUOTE> which puts things in a block, <OL> and <UL> which are used to start a list with each list item being placed within there own <LI>...</LI> and then the list is closed by using either </OL> or </UL>. You also have <PRE>...</PRE> which displays all text within the tags using a monospaced font such as courier and <BR> which starts a new line and does not get closed. For controlling the layout on a larger scale you have such tags as <DIV>...</DIV> and <TABLE>...</TABLE>. The correct use of the table tag is

<TABLE>
<TR>
<TD>Text or image tag here</TD>
</TR>
</TABLE>

The <TR> tag is used to start a new row and the <TD> tag is used to start a new column.

And thats pretty much that. Remember this was meant as an introduction to HTML and not a tutorial. If I have whetted your appetite and you want to learn more then you will find the links to a couple of online HTML tutorials below. Please note that these links will open in a new window.

Another good, basic introduction to HTML is http://www.delta-knight.co.uk/bodytag.shtml.



Fancy learning C, C++ or Perl? The have a look in our tutorials section.