All you ever wanted to
know about HTML and more....!

Part 1

By Mark Wherry

Welcome to the first part of a tutorial that will show you everything you ever wanted to know about HTML. You will realise it's potential, and soon be a master of the hypertext domain.
The tutorial is geared, and will be geared towards the latest version of the Crystal Atari Browser, currently version 1.5. If you don't have a copy......Get one now!
I. All about HTML.
II. What you need.
III. Using the command syntax.
IV. URLs.
V. The structure of an HTML document.
VI. The text header tags.
VII. The format tags.

All about HTML


HTML stands for HyperText Mark-up Language, and that's exactly what it is, a way of "marking up" a text file with the appropriate language to turn it into a hypertext file.
We've all seen the product of HTML, infact we're all using the product of HTML, this article! It was devised at NCSA as a means of communication through a program called Mosaic and evolved into what we use today as the World Wide Web on the internet. However, it became apparent that HTML was useful for all sorts of things, disk magazines, interfaces and so on. At some stage through your web browsing carreer you will probably think that either you wouldn't mind creating your own pages, or that you could do better than that! This article will hopefully give you the know how to do just that.

What you need


To get into HTML authoring there are several key items of software you should have:

Using the command syntax


HTML commands are referred to as tags and to show some text is a tag it is enclosed in less than and greater than signs, like this: <tag_name>
Each tag usually consists of a tag to turn something "on" and a tag to turn something "off". For example, to allow you to make certain text bold and certain text not. An "off" tag is identical to an "on" tag, except for one thing, it has a / symbol before the name of the tag like this: </tag_name>
The tags for making text bold are: <b> ... </b>
The tags for making text italic are: <i> ... </i>
And finally, the tags for making text underlined are: <u> ... </u>
This is fine, but the real power behind HTML is when you realise that tags can be written inside other sets of tags, like this: <tag_one><tag_two> ... </tag_two> ... </tag_one>
Or even like this: <tag_one><tag_two> ... </tag_one> ... <tag_three> ... </tag_three></tag_two>
So if we replace the dummy names for the tags we have already learnt this is what we would get: Text<b><i> Text</i> Text</b> Text
Text Text Text Text
<b><i>Text</b> Text<u> Text</u></i> Text
Text Text Text Text


URL's


URL stands for Universal Resource Locator and is an address which tells the computer where to find something. In an HTML file this could be used to tell the browser where a link, or image is. For our example, we will use an image, but, don't worry about the image command just yet, we will be covering it in more detail later. eg. <img src="images/picture.gif">
With the above example, "images/picture.gif" is the url and the browser would load the file 'picture.gif' from the directory 'images', but, the directory 'images' must be in the same directory from where the HTML file was loaded originally. eg.
-X:                        (A Drive)
 |
 |
 +a_folder                 (The folder in which the data is contained)
 |     |
 |     -page.htm           (The HTML file)
 |     |
 |     +images             (The images directory)
 |         |
 |         -picture.gif    (The picture file to be loaded
 |         |

However, if our tree looked like this:
-X:
 |
 |
 +images
 |   |
 |   -picture.gif
 |   
 +a_folder
 |     |
 |     -page.htm
 |     |

Our url would look like this; "../images/picture.gif". So, just as in many operating environments, you access the previous directory by using the two dots. But, remember, this doesn't permenantly change the directory, so you you have to use the full filename every time.

The structure of an HTML document



<html> Start of HTML in document.
<head>
<title> ... </title>
</head>
Header.
<body>

...text and <tags>...

</body>
The main part/body of the document.
</html> End of HTML in document.

An HTML document must have a rigid structure, but the layout does not matter as it is the web browser that does the formatting. As you can see from the above diagram, an HTML document is held between two tags: <html> ... </html>
After the HTML "on" tag, we write a header, again contained within two tags: <head> ... </head>
Within the header tags is a title tag, this declares what the title of the page will be. But, this information will not appear on the page, it will appear as the title of the window in which the page appears in. eg. <head> <title>The title of my page</title> </head>
You will notice that we finish the header with an "off" tag.

The next tag we use is the body tag. This indicates the start of the main body of text. So the hypertext you are writing is enclosed also between the body tags, as you will see on the diagram at the start of this section. eg. <body> The hypertext </body>
However, the body tag is a little more interesting as it can have many attributes which specify how the text will appear. If a tag has attributes they are evaluated like this: <tag_name attributes>...</tag_name>
So for the body tag you can use the following attributes:

background=url

This specifies a background image which will be tiled across the whole HTML document. eg. <body background="images/tile.gif">

bgcolor=rrggbb

Sets the background colour for the page. The colour value is made up of three two digit hexidecimal numbers, so for example ffffff would be white. From v1.3 CAB supports the basic colour names as well so you could do this: <body bgcolour=white>

text=rrggbb

Sets the colour the text will appear in, on the page. The format for setting the colour is exactly the same as for the bgcolour tag.

link=rrggbb

Sets the colour the text will appear in if it is a link on the page. So if you are suppose to click on a word to take you to another page (a link), this tag specifies what colour the word appears as. We will be looking at links later on. The format for setting the colour is exactly the same as for the bgcolour and text tag.

The text header tags


For headings in your text you use the text header tags. There are 6 sizes of headers availiable through the numbers 1 to 6, where one is the biggest. The tag is called like this: <hn>The title of my text</hn>
The character 'n' is replaced with a text size when you use it normally. It is important to remember that a text header tag enforces line breaks automatically, so the following HTML... Here is the text above. <h1>Here is the title</h1> Here is the text below.
...produces this on the page:

Here is the text above.

Here is the title

Here is the text below.

The most important thing to say, is not to use text header tags as tags for getting different font sizes, you will run into all sorts of problems with text formatting if you do. There is a set of tags dedicated to font handling which we will look at later.

Finally here is an example of what the headers look like:

<h1>...</h1>

Text Header Size 1

<h2>...</h2>

Text Header Size 2

<h3>...</h3>

Text Header Size 3

<h4>...</h4>

Text Header Size 4

<h5>...</h5>
Text Header Size 5
<h6>...</h6>
Text Header Size 6

The format tags


There are many tags in the HTML language for altering the formatting of text, eg. for line breaks, paragraphing, alignment...
For paragraphing we can use the <p> tag, which forces a line break in the text, so for example; the following HTML... <p> blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, <p> blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
...produces this on the page:

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,

But, we can also use the the <p> tag as alignment tools because of it's attributes. So for example; the following HTML...

<p align=left> Text aligned to the left. <p align=right> Text aligned to the right. <p align=center> Text aligned to the center.

Text aligned to the left.

Text aligned to the right.

Text aligned to the center.

To turn the allignment effects off (back to default) we simply use the 'off' paragraph tag, </p>. But, it is important to remember that web browsers default to aligning the text to the left.

However, you don't have to use the paragraph tags, you can just do it all manually with the <br> tag. This is a simple one call tag, (ie. you don't have to turn it off) and it just inserts a line break where ever you place it. So for example; the following HTML... This<br>is<br>a line break<br><br>demonstration.
...produces this on the page:

This
is
a line break

demonstration.


I hope you have enjoyed this article and found it useful, in part two we will be looking at; lists, advanced text styles, horizontal rulers, images and links. See you then.
This article was written for the Falcon FacTT file for their AtariPhile magazine, but the author retains the copyright. All trademarks are acknowledged.