Welcome to the Tactical Panda HTML Pages - 4
 
  Home Page •  About Us •  Search •  Contact Us •  Bookmark  
"Helping you to help yourself to the internet!"  
 
Contents
Colour
Forms
Free Stuff
Graphics
HTML
Javascripts
Cascading Style Sheets
Tables
Website Templates
 
In Brief...
 
HTML (4)

Hyper-Text Mark-Up Language (HTML)

<HTML>, <BODY> and Header Commands
At the top of your HTML editor page you should have a <HTML> and <BODY> tags. At the bottom of the page you should have </HTML> and </BODY>. These simple commands tells the browser that the document it is being asked to load is an HTML document.

The <BODY> tells the browser that the <HEAD> command has finished and it should start looking at the guts of the script. The HEAD section carries all the hidden commands that don't normally show up on a WYSIWYG (what you see is what you get) page. A lot of 'function' commands are hidden in the HEAD while the 'action' commands are in the BODY.

For example, in the head of this page is the command that makes the hyperlink change color when you pass the mouse over it. It looks like this <style><!--a:hover{color:"#00aa00"; }--></style>. In the body is the other link commands, the HEAD command over-rides this command and makes the 'hovered over' link go green. As I have said before the hover command is different from the ALINK command which is in the BODY section.

In the head section are deliberately hidden lines of text. These can be see in the source code by the line starting with <!-- and ends with -->. Everything between these tags is highlighted in yellow and cannot be seen on the WYSIWYG.

These lines of script do not affect the pages at all and are often used to hide the author's name and website from display, but can be seen in the source code.

Fonts
Now we will look at font faces. Please be careful in your choice of fonts as not all computers have all the sets that maybe you have! Try to use an alternative font face if you can, but don't overdo it! The ideal sets to use are:

  • Arial
  • Verdana
  • Tahoma
  • Times New Roman
  • Courier new
  • Helvetica
  • serif

The best way to write a font face is like this (showing them in your preferred order):

<font face="arial,tahoma,helvetica" size="3" color="#4466AA">text</font>

You will have noticed that I have included a colour to the text, this is not required, but I thought I would add it anyway! If the visitor's browser does not have the 'Arial' font installed for some reason, it will go to the next alternative (Tahoma), then the third and so on. If by some chance it doesn't have any of them, it will resort to it's default set. The chances of this though are practically nil. Font sizes and types can be dictated in Cascading Style Sheets (CSS) to save you writing them hundreds of times on your website. Details of CSS can be found here.

Horizontal Rules
The Horizontal rule or <HR> command draws a straight line across the page. There is a problem with the various browser type here as some browsers do not recognise this command to its fullest potential. It's a Internet Explorer invention so it works on most type of IE browser. So what is a horizontal rule? Here is one:


It's a grey line! Well how nice, but isn't it ugly? With IE users we can start to manipulate it so it looks nicer than a grey line across the page. Here's another one:
So how did I do that? The default code is <HR> and this will draw a line across all the available space. Let's play around with it by adding a width limit and a colour. The coding for the red line above is:

<hr width="75%" color="#FF0000">

You can alter the colour to any browser-safe colour you want, plus you can give it a width limit, expressed either as a percentage (as I did) or as so many pixels. Now let's make the line 'fatter' like this:


The code for this one is:

<hr width="75%" color="#FF0000" size="4">

All we have done is added a size="4" element to the script and hey presto!

There is another element that is not used very often, it's the NOSHADE element. To demonstrate this I will use the default <HR> without any colours.



See the difference? This is useful when the rule is on a light coloured background, and you can't see the '3D' effect too well. This is also a way of 'colouring' a line when you are using a browser that cannot see the colours like the IE browser can. So how is this done?

<hr size="5" width="75%">

...is the original command giving you a horizontal rule size 5 and 75% across the browser space. Now add the element 'noshade' and you get the second horizontal rule, like this:

<hr size="5" width="75%" noshade>


...and you get the second horizontal rule!

Now for something really challenging - ISO Value Characters. What are they? Click here to find out!

Top

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

<<< Previous page
 
Home Page •  About Us •  Search •  Contact Us •  Bookmark
© Copyright 2004 Tactical Panda