*Another* programming(ish) text I wrote. I might as well share it with the world.


Easy HTML by Jethro
-------------------------------

HTML Programming. I use the term "programming" lightly hre in this case
because some people would argue that HTML is not a programming
language, it is a formatting language. This is true, but I don't want
to call HTML Formatting.

HTML stands for Hyper-text Markup Language (stupid name, I know) and it
is the main structure behind all websites. To take a look at what HTML
looks like before we start, go to any website you want and then (in
Microsoft Internet Explorer) click View > Source. See all <HTML><HEAD>
stuff? That, is HTML!

If you have no knowledge of HTML (which I am assuming you don't) this
will all look like gibberish. But believe me, it's real easy once you
get the hang of it.

In this tutorial I will be taking you through the beginnings of your
first HTML page.

*************************************
Note: A great resource for anyone interested in learning HTML (and web
design in general) is HTMLGoodies (http://www.htmlgoodies.com). A
college lecturer called Joe Burns started it up, then Internet.com
bought it and now a guy called "Curtis" owns it. It's a great resource
and they also have a fantastic newsletter. Just thought I'd give it a
quick mention.
*************************************

HTML works in <tags>. These are commands inside the "more than" and
"less than" brackets: > and <. All open <tags> have to be closed: </tags>.
Of course there are a few exceptions to this rule, which we will encounter.
Here is a really basic HTML page.

************** firstpage.html *******************

<HTML><HEAD>

<TITLE>My first HTML webpage</TITLE>
</HEAD>
<BODY>
<H1>Big Writing</H1>
<H2>Smaller Writing</H2>
<h3>Smaller Still...</h3>
<h4>You get the idea!</H4>
</BODY></HTML>

**************************************************

Save that as firstpage.html (.html or .htm are the default extensions for HTML
pages, original aren't they? ) and open it in your web browser.
Double-clicking it will probably do that for you.

Here's what it does:

+++++++++++++++
<HTML>...</HTML> - This tag opens a HTML page. You put
this at the start of every HTML page you make. you don't have to, but
it's best that you do.
+++++++++++++++
<HEAD>...</HEAD> - Notice the way I put the HEAD tag on
the same line as the HTML tag. I wanted to show you that you an do
this, but you don't have to. HTML is a very slack language, not like
one of the regular languages like C++. Inside the <HEAD> and </HEAD>
tags goes the TITLE, any METAS (we will talk about these later) and a
few other things which are a bit advanced for this tutorials like CSS
Stylesheets and JavaScripts...etc
+++++++++++++++
- This is a comment. In every language,
there are comments/remarks and HTML is no exception. The HTML
interpreter (aka, your browser) will ignore anything put in these
comments so the only people who can see them are the people who look
at your source code. Why add them, I hear you ask? You decide.
+++++++++++++++
<BODY>...</BODY> - This is the main body of the webpage.
Most of your stuff goes in here, like your text, your images, links,
whatever.
+++++++++++++++
<h1>...</h1> - This puts the writing really big. H1
through to H6 are different sizes of text. H1 being the biggest, H6
being the smallest.
+++++++++++++++

********************************************
Note: As you can see, HTML is not cAsE-sEnsItIvE either, so <h1> is
the same as <H1> and <body> is the same as <BodY>!
Note #2: To tweak a tag you can add attributes to some of them. Attributes
come in the format <tag attribute="value">. Different tags supports different
attributes, some of which we will be covering shortly. </closing> tags never
take
attributes, even if the <opening> tags do.
********************************************

Here is another example of a basic HTML page. In this example, I will
be including links, images, background color and tweaking the font.

******************** secondpage.html *************************

<HTML>
<HEAD>
<TITLE>Page #2</TITLE>
</HEAD>
<BODY BGCOLOR="red">
<p align=center><font color="white" size=5 face="Verdana">
Welcome to Page #2</font></P>
<p align=center>
<font color="black" size=4 face="Comic Sans MS">Created by Me</font></p>
<p align=center>
<font color="blue" size=2 face="Terminal">For you!</font></p>
<HR>
[img]image1.jpg[/img]

[img]image2.jpg[/img]

<hr>
<a href="firstpage.html" title="Click it!">Click here to go the First
Page</a>

[img]image3.jpg[/img]
</BODY></HTML>

***************************************************************

Horrible Page isn't it? A lot of new stuff there, *sigh*, here we
go
+++++++++++++++++++++++++
<BODY BGCOLOR="red">...</BODY> - We have already learnt the BODY tag,
now we learn BGCOLOR, one of BODY's many attributes. This changes the
background of the webpage to whatever value you give it. I think it's
pretty easy to spot that substituting "red" for "blue" would result
in a blue background. Another of BODY's attributes is BACKGROUND.
This is if you want to use an image as the background. For example:
<BODY BACKGROUND="image1.jpg"> would use "image1.jpg" as the
background.
+++++++++++++++++++++++++
<p align=center>...</P> - The

tag starts a new

aragraph. The
align attribute aligns the text left, right or center.
+++++++++++++++++++++++++
<font color="white" size=5 face="Verdana">...</font> - This changes the
font. We are using three attributes here: color, size and face.
"color" changes the color of the font, size changes the size of the
font face changes the actual "font" of the text. There are only a
handful of different types of font faces you are meant to use, just
because a font is installed on your computer, doesn't mean it's
installed on everyone's though. Here is a list of a few common ones:

o Times New Roman o Arial
o Comic Sans MS o Tahoma
o Fixedsys o Verdana
+++++++++++++++++++++++++
... - This is one of the no-attribute one-letter text-formatting
tags. There are four of these to my knowledge. Here's a list:

o ... - This puts the text in bold
o <U>...</U> - This puts the text in underline
o ... - This puts the text in italics
o <S>...</S> - This puts a line ("strike-though")through the text
+++++++++++++++++++++++++
<HR> - This puts a HoRizontal line in the webpage to divide it. <HR>
is one of the exceptions to the </closing> tag rule. It tags no
closing tag.
+++++++++++++++++++++++++
[img]image1.jpg[/img] - This inserts
an IMaGe. The src attribute specifies the image to include. If the
image isn't found it will give you the horrible square with the X
thing in it. The alt attribute is a message which pops up when you
hover over the image (it appears in a yellow box which disappears
after you move your cursor away from it). The border attribute
specifies the border width. 0 is the default. So why add it you say?
Well, when an image is included in an <A> tag (explained below) it is
given an ugly blue border which border=0 gets rid of (makes it look
more crisp, in my opinion).
+++++++++++++++++++++++++

- Line break. Another no </closing> tag. This just goes to the
next line, directly under whatever was before it.
+++++++++++++++++++++++++
... - This is called
a hyperlink and this is how webpages are linked together, how you
get from one page to the other. A stands for Anchor (link) and
href stands for Hypertext REFerence, another stupid name. Basically
the href attribute tells the browser where to go when you click
on the link and the title attribute (no-one really uses this much
but I just decided to add it anyway) acts much like the ALT
attribute in the IMG tag. Another small pop-up box-messagey
thing. I don't like it, but maybe you do. You can put anything
in an Text Here tag. For example you have it
a text link, like the first example, or you can even put an image
in between the two tags, like in the second example, or you can
put a mixture of both.
++++++++++++++++++++++++

And that's that. Now remember, this is a very basic tutorial. I will
release a more advanced HTML tutorial, covering layers, CSS, frames,
tables and all that messy stuff.

Have fun coding,
Jethro

******** EOF **************