LinkExchange Member

Free Home Pages at GeoCities

PART 1 OF THE ABSOLUTE BEGINNER'S GUIDE TO HTML

If you've got this far, you'll have no trouble with the rest!

If there's anything on this page that you don't understand, then just use the new form to ask me about it.

This page is for any beginner who wants to learn HTML. It's perfect if you want to know the vital basics before starting a page of your own, or if you just want to know what this HTML thing is that keeps coming up on web pages. Before we start our engaging tour of HTML basics, I think I should tell you what HTML stands for, although you'll probably never need to know; but then again, if you find yourself on a quiz show in years to come... Anyway, it stands for ......... HyperText Mark-up Language.

There's quite a lot of text here, so allow me to give you a menu in order that sir or madam may select at his or her leisure. Click on whatever you want to go there. If you want to learn HTML from the beginning, then it makes far more sense to go throught the page in the order I've written it, but it's up to you.

Where to write the HTML you'll learn Some people prefer to skip this, and return to it at the end.

What tags are A very simple explanation.

The start of an HTML page How to tell a computer that your creation is written in HTML.

The very basic stucture Must-read essentials.

Putting headings on a page Make sure that all-important text stand out.

Size, font, and colour of text How to change the afore mentioned stuff.

Part 2 If you wanna move on, hit this link.

You can write the HTML you'll soon learn in two places:

• If you have a page on Geocities then:
  1. Goto your file manager.
  2. Check the box next to "index.html".
  3. Make sure the editor is "Advanced HTML". You can change it with the pull-down menu if it is the wrong editor.
  4. Click on edit.
  5. Delete all text in the box provided. This is where you will write the HTML.
• If you do not have a page, then open Notepad. This is a standard Windows bit of kit. If you have Windows 95, you can reach it by clicking on Start, then Programs, then Accessories. If you're not lucky (or rich) enough to have Windows 95, then you can find Notepad in Accessories, which is in Program Manager. It's icon is a light blue notepad. You can write HTML here, and do anything you want with it later (well, not ANYthing. eg, you couldn't buy a car with it). To make sure you can open it later as a file that browsers can read, you have to save it as an HTML file. To do this, you have to type the extension "html" when you save the file, or the extension "htm" if you're stuck in the gutters of non-Windows 95 land. If you don't do this then Notepad will think that you want to save the file as a standard text file, and in this format the HTML tags are meaningless and impossible for a browser to understand. (Perhaps they're meaningless and impossible to understand for you at the moment, but if that is the case, then I'm sure it will soon change... hopefully.)
  For example, when you've finished your HTML file, you might want to call it something like Webpage. To do this, you should type the filename Webpage.html (or Webpage.htm - see earlier explanation), and click Save or OK. When you like your little bit of creativity enough for to want the world to see it, you can arrange to get some free web space on the Net. You can then send your file to the group who agree to display (what we usually call "host") your page. They will give you details on exactly what to send them, and how to do it. I recommend Geocities as a free host. There is a link to them at the top-right of this page. I expect you'll want to have a look at your page as it would appear on the Net, before you send it off. You can do this easily by opening a new web browser or new window. This is done by pressing Ctrl and N, or finding the "New Window" or "New Web Browser" command (under the File menu on most browsers). Then open your file in the browser. You can do this using Netscape by clicking on "Open File in Browser..." under the File menu and then looking for your file. Remember to save your Notepad file first! If you've decided to punish yourself by using Microsoft Internet Explorer (it's not that bad really, but I prefer Netscape), then you have to click on File on the menu bar, then "Open...", then type in the location of your htm or html file. So if, for example, you have saved (and make sure you do save) your Notepad file in "C:\web", and you called it "webpage.html" (or "webpage.htm"), then type in "C:\web\webpage.html" (or use ".htm", if that is how you saved it). Press Enter, and away you go. I hope it looks as good as this one!

A page written with HTML is made up of two types of writing: the text that the whole world's gonna see, and what are called "tags". Tags are often thought of as stage directions for the browsers, explaining to the browser how and where to present text. (A browser is a piece of software that interprets HTML, and turns it into a page.) These stage directions (or tags) are always placed in the signs "<" and ">". It is the addition of these tags to text that makes HTML what it is, and not just a text document. There are two types of tags; they follow one of these patterns:

1. <SOME KIND OF TAG> text affected by tag <CLOSING TAG> following text is unaffected by the tag.
   (This is often called a "wrap-around tag" because it "wraps around" the text.)
2. <TAG THAT DOES SOMETHING WITHOUT AFFECTING THE TEXT>.

The very first tag that you need to learn is the HTML tag. This follows pattern number 1. The text inside the two tags is always the whole document. The purpose of the tag is to tell the browser that it is reading HTML.

eg. <HTML>
     The whole page, including everything, goes here.
     </HTML>

1. The tag used to stop the effect of the opening tag is the same as the opening tag, but there is a slash (/) before the command.
2. The commands can be in CAPITAL LETTERS, lower case, oR a MiXtUrE. As a rule, it's best to use capitals because they STAND OUT, and look different from the text. This makes it easier to spot them when you're writing the HTML, but if you're feeling lazy you can use lower case letters. (I confess that I use lower case letters usually, but then I'm so hard that my little finger doesn't need the exercise.)

A web page has two main parts. These are the HEAD, and the BODY (I don't know what happened to the legs). The head is small, and describes the page with details like the title. The body is where everything else goes: text, information about graphics, links to other sites - the lot. They are both wrap-around tags, so you can probably guess how they work, but just to make sure, the head works like this:

eg. <HEAD>
     Put stuff that describes the page here.
     </HEAD>

eg. <BODY>
     Put everything else here.
     </BODY>

eg. <TITLE>
     The title goes here.
     </TITLE>

Netscape - [The Absolute Beginner's Guide to HTML]

If, on the other hand, you've taken a left-turn at Browser Junction, and you're using Microsoft's Internet Explorer, the title-bar will say:

The Absolute Beginner's Guide to HTML - Microsoft Internet Explorer

I happen to prefer the latter presentation, but you probably don't care what I think, so I'll get on with filling your mind with HTML.
If you just think up some text that can go in the body, you know everything you need for a super-simple web page. It might go something like this:

eg. <HTML>
     <HEAD>
     <TITLE>The Chocolate page</TITLE>
     </HEAD>
     <BODY>
     I eat seven bars of chocolate every day, and I weigh 24 stone.
     </BODY>
     </HTML>

OK, I expect you can see where we're heading now. I mentioned before that the TITLE tag doesn't produce a heading on the main page. To do this, you need to use a heading tag. For a main heading, you would use the H1 tag. The H stands for Heading, and the 1 indicates that the heading is one of most importance. It's another wrap-around tag, and, like all tags that affect text on the page itself, is contained within the body. Just to demonstrate, this is how it looks in the simple page I showed above:

eg. <HTML>
     <HEAD>
     <TITLE>The Chocolate page</TITLE>
     </HEAD>
     <BODY>
     <H1>The perils of chocolate</H1>
     I eat seven bars of chocolate every day, and I weigh 24 stone.
     </BODY>
     </HTML>

eg. <HTML>
    <HEAD>
    <TITLE>The Chocolate page</TITLE>
     </HEAD>
     <BODY>
     <CENTER><H1>The Perils of Chocolate</H1></CENTER>
     I eat seven bars of chocolate every day, and I weigh 24 stone.
     </BODY>
     </HTML> 

eg. DO NOT TYPE:
       <CENTER><H1>The Perils of Chocolate</CENTER></H1;>

eg. <OPEN TAG 1><OPEN TAG 2><OPEN TAG 3> text goes here <CLOSE TAG 3><CLOSE TAG 2><CLOSE TAG 1>

Now you know about structuring your page with the head and body, and you know about titles and headings. What I think comes next is how to change the way the text looks. Many of the alterations that are available in our old favourite - Microsoft Word - are also available for changing text that goes onto web pages. Lots of these changes are made using the wrap-around FONT tag.

eg. <FONT> text that you want the FONT tag to affect </FONT>

eg. <FONT SIZE=3> I am in size 3 </FONT>

Another thing that can be varied is the typeface. This means the the shape of letters. Examples of different typefaces are Arial and Times New Roman. The command needed to change the typeface is FACE.

eg. <FONT FACE="Arial"> When I'm viewed by a browser, I will be in Arial </FONT>

eg. <FONT COLOR="red"> Red text when viewed with a browser </FONT>

1. Some old browsers do not understand it.
2. It is impossible to make up your own colours - there are only 16 colour names that can be used. They are:
   • Aqua
   • Black
   • Blue
   • Fuchsia
   • Gray (Englishmen - note: it's "gray", not "grey")
   • Green
   • Lime
   • Maroon
   • Navy
   • Olive
   • Purple
   • Red
   • Silver
   • Teal
   • Yellow
   • White

<FONT COLOR=#The 6-digit colour number goes here> Text in the chosen colour goes here </FONT>

                  Decimal        Hexadecimal

                        0                       0
                        1                        1
                        2                       2
                        3                       3
                        4                       4
                        5                       5
                        6                       6
                        7                       7
                        8                       8
                        9                       9       
                       10                      A
                       11                       B
                       12                       C
                       13                       D
                       14                       E
                       15                       F
                       16                      10

10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20...
99, 9A, 9B, 9C, 9D, 9E, 9F, A0, A1, A2, A3...
A9, AA, AB, AC, AD, AE, AF, B0...
F9, FA, FB, FC, FD, FE, FF, 100...

eg. You might find a light-blue colour that you like, made up of:

• Red - 0
• Green - 130
• Blue - 255

Now you need to convert each number to its hexadecimal equivalent:

• Red - 0. This is the easiest number to do - nothing is nothing, however you look at it; so obviously, the equivalent is 0, or as we are using two digits for each number, it is 00.
• Green - 130. This one is the hardest of the bunch. We know that the left-hand column in a two-digit hexadecimal number represents the number of decimal 16's in that number. Well, 130 divided by 16 is (just thinking) 8, and this leaves 2 over, which goes in the unit column. So we have a hexadecimal equivalent of 82. (Just because it has no letters in it, it is still a hexadecimal number. BEWARE: It is not the 82 we know and love, it is a hexadecimal 82, and in our decimal system it is equivalent to 130.)
• Blue - 255. This is another easy one - it is the maximum value, so its equivalent must be FF. We could also say that 255 divided by 16 is (just thinking, for a bit longer) 15, and this leaves 15. We know that 15 in decimal, is represented by F in hexadecimal, so 15 in the left-hand column with 15 left over, becomes F in the left-hand column with F left over, or FF.

<FONT COLOR=#0082FF> text of the chosen shade and colour (this time, a type of light-blue)</FONT>

• Find a calculator that does it for you.
• Search for a colour chart on the Net.
• Give up, and decide that perhaps using the 16 colour names is better.

eg. <FONT SIZE=4 FACE="Arial" COLOR=#0082FF>all three commands apply to this text</FONT>