follow me!HTML stands for Hyper Text Markup Language, and there is nothing mysterious about it - if you can read this, you can write HTML.
Oh - so you don't believe me, eh? Well, I'll prove it: I'll make the word "big" BIG - then I'll show you the code which displayed this very sentence!
...and here's the code:
Oh - so you don't belive me, eh? Well, I'll <I> prove </I> it: I'll make the word "big" <FONT SIZE=+3>BIG </FONT> - then I'll show you the code which displayed <I> this very sentence! </I>
See? It's just english with some modifying "tags" thrown in to tell your browser how to display the document (you're reading the output of an HTML document right now - and you thought it was just a web page!)
Okay, now that you're certain that there is nothing to fear from HTML, and you are certain that you can indeed code it yourself (pssst...! you are certain of these things, right?), I'll explain what all these HTML doohickys mean.
This is going to be fun - trust me!
The first thing you will need is a word processor of some sort - Word Perfect, Word for Windows, whatever - so long as it is capable of saving a document as a TEXT document. This is because wp packagaes such as Word Perfect imbed hidden codes within documents to control how the document is displayed in that wp package, or how it will look when it is printed. Saving the document as a TEXT file removes those annoying codes.
An HTML document has THREE important sections, all of which are required in order for the document to be handled corrrectly by a web browser. These are:
<HTML>...</HTML>
<HEAD>...</HEAD>
<BODY>...</BODY>
A simple example of HTML "source code" (a whole sentence - one word would be a little too simple!) appears below, and explains an HTML document in a nutshell:
<HTML> <HEAD><TITLE>HTML DOCUMENT SKELETON</TITLE></HEAD> <BODY> The HEAD tells the browser about your document; the BODY is where you put the interesting stuff that you want to share with the rest of the world. </BODY> </HTML>
Okay, there's more to it than that - obviously. But it's all very simple once someone explains it to you - and that's why we're here.
We'll start with what should be the very first line of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">This one blurb tells us lots of things about the document which follows:
Okay---now, what is a tag? You already know this one: an HTML tag is that goofy couple of letters - or sentences, in some cases - between the greater-than and less-than signs. <I>, <BODY>, and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> are all HTML tags.
You probably noticed in the previous examples that some tags have "/" in them and some don't. Those tags which have the "/" in them are called container tags - the code which they affect is contained between the opening and closing elements.
There are also tags which have only opening elements; these are called (how's this for clever?) open tags.
BASIC TEXT-FORMATTING "CONTAINER" TAGS <CENTER>...</CENTER> <FONT>...</FONT> <B>...</B> <I>...</I> BASIC STYLE-CONTROL "OPEN" TAGS <BR> <P>
Well, I don't know exactly which tag is more important that the others, so I guesss I'll just show them to you in the order I think of them. We'll begin with creating line breaks:
| <BR> | This "open" tag causes subsequent text to begin on a new line without skipping a line. |
| <P> | This "open" tag causes subsequent text to begin on a new line after skipping one line. |
... </CENTER> |
Anything between these two tags - text and / or images - will be centered on the page, even
if the line breaks; the next line will be ceneterd and will contain as much data as possible before yet another
line begins - and is centered on the page. Allow me to demonstrate:
This text is centered using the <CENTER>...</CENTER> tags. Using line break tags - paragraph or "hard return" - can create some interesting results. See? This line was started using <BR> And this one was started with <:P>. EVERYTHING is centered relative to the preceding lines. Pretty cool, huh? And now we're back to "normal" (uncentered) format. Pardon me while I ramble on about nothing in particular to demonstrate that the centering tag is, indeed, inactive. See? These lines are left-justified. |
Okay.... that was sort of dull. Let's jazz it up some with what is, IMHO (that's e-mail-speak for In My Humble Opinion), the most powerful basic HTML tag: <FONT>.
| <FONT SIZE=value COLOR="#hhhhhh" FACE="name">...</FONT> | |
|---|---|
| defines the size of the font relative to the base font. Netscape's default base font size is
3 (3 what I don't know...). The value specified following SIZE will cause subsequent text
to be displayed in a type size relative to the base font size.
This is Netscape's defualt font size. You should notice a difference in the height and width of the letters and the spacing between the lines.
|
|
| you can change the color of a sentence, a word, or individual letters within a word for effect,
or just because you want to. There's no law that says your text all has to be same color - so why shuld it be?
C o l o r can be fun to play with - experiment!
There are two ways to specify the color value: either as a name or as a six-digit hexadecimal number.
The names used to specify colors are standardized for Netscape - Netscape 2 and earlier can only display 16 colors, but Netscape
3.0 and later can display 256 colors. A list of these colors, with both the names of the colors and the hexadecimal numbers, is available at .
|
|
| This attribute is tricky, because if the computer of the person viewing your document doesn't have the typeface you've
specified, they will either see a default font - or they'll see nothing. Not cool!
For example, this is in the Lincoln font . If you can see it, great; if you can't...sorry; just proving a point.
(Oh...if you don't see it, the font is called Lincoln and is the sort of typeface one sees on diplomas and things of that sort).
Note that the sizes of fonts stored in the target computer is irrelevant to this function; the size of the font displayed, whatever the typeface may be, will conform to the BASFONT and/or any <FONT SIZE=...> tags used. I'll now demonstrate this last statement with a common typeface, TIMES NEW ROMAN. This is Times New Roman, size -4 The proof of my statement is this: my computer's font library contains TIMES NEW ROMAN - but the smallest point value it contains is 12-point - which is the size of the typeface used to display this line. As with c o l o r, experiment with typefaces and have fun! |
|
An important tag for controlling the appearance of the text in a document is the BASEFONT tag. This tag controls the size of all text following it. It should be the very first tag in the BODY if it is to affect the entire document, as it does for all the pages of this tutorial. The BASEFONT tag may include any of the attributes allowed for the FONT tag - face, color, size. The only difference is that, where <FONT SIZE=n> sets a font size relative to the base font, the SIZE attribute of the BASEFONT tag is ABSOLUTE.
The format of the BASEFONT tag is:
In the BASEFONT tag, the value of n in the SIZE attribute is an integer between 1 and 7.
An important point to remember is that the BASEFONT size attribute does not affect the text displayed in tables; therefore the <FONT SIZE=value> must be used when defining the table.
Well, my friend, you now know all you need to write a web page. Really! Of course, it'll be incredibly dull with just text (words), so you'll probably want to add some pictures, maybe a background song for mood; you may even have someplace you want your visitors to visit.
follow me!
Back to Navpooh's Home Port
Back to HTML tutorial index