|
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.
HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.
I thought of a hundred different ways to summarise what HTML is and ended up writing pages and pages which when I read it back made sense to me, but not many others who don't do this for a living. Instead I found a summary by Jonathan David VerLee of Active Jump which said it all, and I quote:
"HTML is a computer language. Like other computer languages, it is used to create something. HTML has been designed to create one thing though, and that is web pages. HTML is relatively easy, compared to some other computer languages, and the basics of HTML can be learned in as little as ten or twenty minutes.
Also, anybody is able to create web pages using HTML, as long as they have internet access. The main purpose of HTML is to create web pages. Through a series of commands, known as HTML Tags, the writer creates their web site just by typing in text.
HTML is made up of a series of tags, which are simallar to commands, telling the web browser what to do. These tags can be typed into any normal text editor such as Notepad or Simpletext, and when in the right order, form a web page. Writing HTML then is simply, writing tags."
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="©2004 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 constructing tabs are usually brown in colour, for example:
<table>
<tr><td>text or graphic</td></tr>
</table>
The same is true of hyperlinks, they are also coloured, 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!
<meta name="author" content="Allan Benson - Tactical Panda">
<meta name="publisher" content="Tactical Panda">
<meta name="copyright" content="©2004 Allan Benson, all rights reserved">
The next three lines are not mandatory, but are useful to have anyway. The AUTHOR is you (obviously), as is the PUBLISHER. The copyright belongs to you, as the author and publisher. Putting these lines in won't hurt, but in the unlikely event there is a dispute over ownership, then you are covered.
<meta http-equiv="pragma" content="no-cache">
The next two lines are slightly different in that they are HTTP-EQUIV codes. I mentioned 'PRAGMA NO-CACHE' on another page, but if you haven't read that far yet, here it is again. NO-CACHE means that if someone returns to your page having visited it sometime in the recent past, then a 'copy' of that page has been CACHED into their history files. When they return their computer recognises the page and loads the 'old' version from its memory. This is okay until you want them to see your up-dated page. By installing the NO-CACHE command this ensures they always see the latest version of your work!
<meta http-equiv="Content-Language" content="en">
Finally there is the language. This tells the search engines and spiders what language the site has been written in! In this case we see 'en' which stands for English. It could be 'fr' for French, 'de' for German, and so on.
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!
Top
[1] [2] [3] [4] [5]
<<< Previous page
| 
