The simple guide to HTML

The simple guide to HTML

Aaron Timbrell explains how to make a simple HTML page

As I am sure most people know by now HTML (HyperText Markup Language) is the language that is used to make pages for web sites, and RISC World too of course! HTML is not a computer language like BASIC, it does not have variables and you can"t write a meaningful program using HTML. A page of HTML should be accurately be called a "script".

When a web browser displays an HTML page it reads down the "script", and follows the instructions, usually called tags. As the web browser reads down the script it simply takes each HTML tag, for example a BOLD command, and renders the page according to the instructions it finds. You can write your own HTML pages very easily, once you understand the HTML tags that make up the script. You can write HTML pages using any text editor, including !Edit. To make a blank HTML page with !Edit all you need to do is load !Edit, click MENU over the !Edit icon on the icon bar, go to the Create sub menu, go down to the writable option at the bottom and type HTML. A blank window will open where you can now type your HTML page.

The easiest way to understand HTML is to take a simple page apart line by line.

   <HTML>
   <HEAD>
   <TITLE>An Example HTML page</TITLE>
   </HEAD>
   <BODY text="Black" bgcolor="White" link="Red" vlink="gray">
   <HR align=CENTER width="75%">
   <H2>This is the main heading</H2>
   <P>This is a simple page of HTML. As we take the page apart we will
   be able to see what each of the commands do. Now we will end this
   paragraph and have a picture</P>
   <P ALIGN="CENTER"><IMG ALT="This is a picture"
   SRC="IMAGES/PICCY.GIF" WIDTH=251 HEIGHT=455><BR>
   <SMALL>Now we could add a caption to the picture!</SMALL></P>
   <P><FONT COLOUR="#FF0000">Now for a red bit!</FONT></P>
   <P><FONT COLOUR="Blue">And a blue bit!</FONT></P>
   <P ALIGN="RIGHT">And we could put some text<BR>over here as well!</P>
   <P ALIGN="CENTER"><B>We can do BOLD, and of
   course <I>Italic</I></B> and normal text to!</P>
   <hr align=CENTER width="75%">
   </BODY>
   </HTML>

The HTML above makes a page that looks like this:

As you can see this doesn't look all that complex. A copy of this HTML file is in the RISC World software directory if you want to have a look at it.

From The Top

The first thing we need to understand are the tags at the top of the page.

   <HTML>
   <HEAD>
   <TITLE>An Example HTML page</TITLE>
   </HEAD>
   <BODY text="Black" bgcolor="White" link="Red" vlink="gray">

The command <HTML> tells the web browser that is rendering the page to expect HTML tags. Web browsers often understand several different languages and need to be told which one they have to use to read the page. All HTML pages must start with this tag before any other HTML commands. Note that HTML tags are not case sensitive.

<HEAD> This tells the web browser that the next set of tags are to do with the page heading. For example the <TITLE> tag is the name of the page as shown in a web browsers title bar. You can see this in the screenshot of the completed page. As you have no doubt noticed the <TITLE> tag is ended with a </TITLE> tag. All on/off HTML tags follow the same format, so for example turns on BOLD, while turns off bold.

The next command is the <BODY....> command, this sets up some basic parts of our page design. For example the text colour will by default be black, the background colour of the page (bgcolour) will be white. Any HTML links will be red, while any HTML links we have already visited will be gray. As you can see unlike the <TITLE> tag the <BODY> tag is not closed after we have set the colours. Instead it is closed at the end of the page after our text.

   <HR align=CENTER width="75%">
   <H2>This is the main heading</H2>
   <P>This is a simple page of HTML. As we take the page apart we will
   be able to see what each of the commands do. Now we will end this
   paragraph and have a picture</P>

This is the next part of our HTML. The <HR ...> command draws a Horizontal Rule across the page using the percentage figure we specify. As shown above it will draw a centered line 75% (three quarters) of the way across the page.

The <H2> command starts a heading, in this case heading number 2. All browsers understand headings from number 1 <H1> the biggest, down to <H5> the smallest. Having finished the text for the heading we end the heading with a </H2> tag.

Now we start a paragraph of text with the tag. The web browser will render the text that follows as one paragraph without any extra line breaks until we end the paragraph with .

Adding a picture

The following HTML tag adds a picture to the page.

   <P ALIGN="CENTER"><IMG ALT="This is a picture"
   SRC="IMAGES/PICCY.GIF" WIDTH=251 HEIGHT=455><BR>
   <SMALL>Now we could add a caption to the picture!</SMALL></P>

The first thing to note is that just like the paragraph of text earlier this starts with a tag. Only this time the tag also includes a command to align the whole paragraph to the center . Before you complain about my spelling of the word "Center" note that it must be spelt this way round rather than the more normal "Centre", otherwise silly American Web Browsers won"t understand it!

Next we have the tag that inserts and image <IMG....> this will display a picture. the ALT section is the text that will appear if the picture file cannot be found, or the persons looking at the page has turned off graphics. The SRC section is the Source of the file, in this case a file called piccy.gif, in a directory called images. When making HTML pages it is good practice to make sure that all file names are lower case. On an Acorn the two files names PICCY.GIF and piccy.gif would point to the same file. On a Linux or Unix machine they would point to two different files, one of which probably wouldn"t exist! So make all your names lower case!

Next we specify the width and height of the picture. We do not have to do this, but it is good practice to do so as it prevents odd page redrawing when a web browser loads a page.

Next we have a tag, not that unlike most HTML tags their is no command. The or Break tag simply puts in a carriage return, so that our next bit of text starts on a new line. Note that you should only use tags inside a tag. The tag ensures that our caption appears under the image and not alongside it (try removing the tag to see what happens).

Next we want to place the caption, we can use the tag to make the text for the caption a bit smaller than the normal body text. If we wanted it smaller still we could use two tags, provided we remember to close both of them with tags.

   <P><FONT COLOUR="#FF0000">Now for a red bit!</FONT></P>
   <P><FONT COLOUR="Blue">And a blue bit!</FONT></P>
   <P ALIGN="RIGHT">And we could put some text<BR>over here as well!</P>
   <P ALIGN="CENTER"><B>We can do BOLD, and of
   course <I>Italic</I></B> and normal text to!</P>

We can use colour in HTML pages in one of two ways. Either by typing in the name of the colour, for example Black, Red or White, as used in the <BODY...> command at the start of the page. However we can also specify the exact 24 bit colour we want, for example the tag sets the font colour to full red. #00FF00, would be green, and #0000FF would be blue. Obviously we can mix any amount of Red, Green and Blue to make any colour using hexadecimal (base 16) numbers. However if you are starting out with HTML, or are not familiar with 24 bit colour handling it is best to just use the colours name, as we do in the next example where we have some blue text. You can see that the change of font colour is turned off with the tag.

The next tag starts a new paragraph, but unlike previous ones this paragraph has all the text right justified, just like your address on a letter. This is done with the tag. Just like any other paragraph we can start a new line with and end the paragraph with .

Finally in the last paragraph we introduce some more tags, is for Bold and is for italic. This final paragraph also introduces one of the most important points about HTML, once a tag is opened it stays open until you shut it. You can see that in this paragraph quite easily. The first part is in Bold, then we insert an tag. However the tag has not yes been turned off, so we actually have both tags. and on at the same time, resulting in a bold italic typeface being used. When we go back to normal text we need to turn both these tags off. However as was turned on last, it needs to be turned off first. If you turn tags off in a different order to opening them then some odd results can happen and it can be difficult to get the page to work correctly on a number of web browsers.

The end

   <hr align=CENTER width="75%">
   </BODY>
   </HTML>

The final section of the HTML page contains another horizontal rule <HR...> and then two final closing tags. One to close the <BODY...> tag we opened at the start of the page, and the final one to tell the web browser that there is no more HTML to read.

That's all there is to making a simple page of HTML. So if you have never tried making any HTML pages before why hot have a go, there really is no black art to doing it, after all if I can do it then so can anyone!

Aaron Timbrell