	Sign In Sign-Up

Welcome to the Tactical Panda Websites HTML Pages

Hyper-Text Mark-Up Language (HTML)

This is a major subject! These pages will touch on the basics of HTML - which if you didn't already know stands for Hyper Text Mark-up Language. If you want to know more there are plenty of online references in our Free Stuff Pages.

At Tactical Panda we like to keep things simple! There are many websites on the Internet that are very pretty, have lashings of very talented Webmaster's creations on them. However, these can at times load fairly slowly, especially if you use a slower speed modem and/or you access the net through a standard telephone line. This can be frustrating!

So, let's keep things simple and follow the KISS principle, at least until you are a webmaster yourself and can make sites you can really write home about! (In case you haven't heard that one before, KISS stands for Keep It Simple Stupid! - no offence intended!)

Let's start with the top of the (blank) page. The first thing you must do is tell the browsers, search engines and spiders all about you and the website. Let's look at the code hidden at the top of this page and analyse it. Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Welcome to Tactical Panda HTML Pages</TITLE>
<META name="description" content="Affordable website designs for the small businesses new to the Internet">
<META name="keywords" content="html, hyper text mark-up language, website, designs, freestuff, free, small business, internet">
<meta name="author" content="Allan Benson - Tactical Panda">
<meta name="publisher" content="Tactical Panda">
<meta name="copyright" content="©2003 Allan Benson, all rights reserved">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Language" content="en">
</HEAD>

Each line starts with an opening tag which is the 'less than' symbol and looks like this <. You then have the instruction followed by the closing tag which is the 'greater than' symbol or >. It is imperetive in HTML to have both the opening and closing tag otherwise it just won't work.

The tags have unusual properties depending upon what is written between the tags. For example, is I was to write a table then the HTML editor automatically detects words like 'table' and changes the colour of the entire script. Here is an example of a table tag: <table>. You will notice that the text is now brown which is how it will appear in your WYSIWYG editor.

The reason for this is so that a table is easily identifiable when you read through the script. The entire table's script content will also be in brown, for example:

<table>
<tr><td>text or graphic</td></tr>
</table>

The same is true of hyperlinks, for example:

<a href="csstp.html" title="Cascading Style Sheets" onfocus="this.blur()" onMouseover="self.status='About Cascading Style Sheets';return true">Style Sheets</a>

...and Javascripts which are also generally brown:

<SCRIPT SRC="ssm.js" language="JavaScript1.2"></SCRIPT>

Now let's have a look at the script above, line by line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The first line will probably be put in by you HTML editor script by default, if not, then it may be a good idea to do it yourself. This identifies the script type and standard - in this case HTML 4.0. Don't forget to change the laguage tag at the very end if the page is not written in English. It is shown here as 'English' (EN). See below.

<HTML>
The second line tells the browser that this is an HTML document, obvious to you and me but not to a machine!

<HEAD>
The third line states that this is the 'HEAD' section of the document, and precedes the 'BODY' where all the blurb is.

<TITLE>Welcome to Tactical Panda HTML Pages</TITLE>
Then we have the TITLE. This is important as it not only reflects the document contents, but it is the line that appear in the very top of the browser window. If you are not sure about this then have a look now. This line should be exactly the same as the top of your browser!

Now for the all-important META TAGS. This is critical if you are looking for search engine rankings, 'spider' searches of your site and so on. A spider, by the way, is the harmless way in which search engines whiz through your site looking for things it can index. It looks for META TAGS and matching keywords to it can tell the search engines what you are all about and where to place you.

<META name="description" content="Affordable website designs for the small businesses new to the Internet">
The DESCRIPTION part is a brief statement about the site that usually is copied by the spiders. If you use a search engine then this is the part that shows up in the site description part. It stands to reason that this must reflect an accurate account of the site contents (there can be penalties inflicted by the search engines if the description does not match the contents!).

<META name="keywords" content="html, hyper text mark-up language, website, designs, freestuff, free, small business, internet">
KEYWORDS are equally important. These MUST accurately reflect the page contents. It's of no use using keywords about fly-fishing if the page contents talk about Formula One racing cars. The search engines don't like it!

If you want help making Meta-Tags please click here, for our free online Meta-Tag Creator.

So much for the HEAD section. Let's move on to more basic HTML where we will look at opening (<) and closing (>) statements, body color (BGCOLOR) and more!

Click here please...

[1] [2] [3] [4]