Ro's HTML Guide for the Psion

HTML is simply a set of instructions about how to display your web page.
You are currently looking at an HTML docment through your browser.

First things first though

Using Word as a HTML Editor
Create an alias list from the system screen by highlighting the word icon and pressing Psion-e. Select a Directory where you are storing your html files, set extension to *.htm, and select text editor as opposed to word processor. Any new documents you write will have the htm, and you can edit your existing ones.

The Coding

The computer recognizes an instruction, often called a tag, when it is enclosed in brackets like this:

<TAG>

There are two important style things to remember about tags

They should be in all capital letters and
They should be at the beginning of a line of text instead of in the middle or at the end.

Web browsers are programs that take the instructions (the HTML) and display your web page properly. Browsers ignore all of the formatting in your HTML document including white space. The following is an example:

	The book

	is red                                  today.

Would look like this in a web browser:

The book is red today.

If you want any formatting in your page at all you have to give the browser instruction by using HTML tags.

There are two kinds of tags in HTML. The first kind stands alone in your document: <TAG>. The second tag has an opening and a closing tag: <TAG></TAG>. Everything in between the tags is effected by the instructions within the brackets. The closing tag only differs from the opening tag by adding a / at the beginning. Some tags have attributes set within the brackets such as <TAG ATTRIBUTE="value"> It is a good idea to capitalize the attributes, put quotes around the value of the attribute and type the value of the attribute in lower case. Don't worry if you are a little lost. We'll learn about attributes later.

Structure

The following is an example of the structure of all web pages:

<HTML>
<HEAD>
head info.you will learn about this soon
</HEAD>
<BODY>
body info..you will learn about this soon
</BODY>
<ADDRESS>
address info..guess what? You will also learn about this later
</ADDRESS>
</HTML>

All HTML documents are enclosed within <HTML>, </HTML> tags and contain a head and a body. HTML documents that follow good style also contain an address.

Text Tags

Since HTML does no formatting for you, you have to tell the web browser where your paragraphs start and end. You begin paragraphs with the opening paragraph tag <P> and you close paragraphs with the closing paragragh tag </P>. All browsers display paragraphs differently, but they all clearly distinguish between paragraphs in one way or another. A paragraph in HTML would look like:

<P>
This is my sample paragraph. There is no need to indent the beginning because the web browser is going to ignore any white space anyway. Creating paragraphs in HTML is easy and it is a good way to make nice web pages.
</P>

You can center text by adding the ALIGN="center" attribute:

<P ALIGN="center">
text to be centered
</P>

Since HTML ignores all extra white space in your HTML document there is an HTML tag for adding white space in the web browser. These tags are <BR> and <BR CLEAR>. <BR> forces whatever comes next in your document to be on the next line. If you have two <BR> tags in a row you get a blank line. Some browsers however condense multiple <BR> tags to one <BR> tag. The following is an example of using the <BR> tag:

I am typing some text
<BR>
<BR>
but I want this to be separated by a blank line.

It would appear as the following in the web browser:

I am typing some text

But I want this to be separated by a blank line.

The <BR CLEAR> will be more useful when we learn about images and other non-text objects that can be added to your web page. The <BR CLEAR>, instead of going to just the next line, skips to the first blank line after an object. So if you want text to appear at the bottom of an image and not next to it, you would need to add a <BR CLEAR> tag. More on this when we learn about images.

The <HR> tag adds a horizontal line or divider to your web site. This is a really common tag. But when you learn how to create your own graphics, it is pretty common to create your own divider so you can add color. More on this later. An <HR> tag makes the following divider:

There are also a number of tags that change the appearance of the text. The tags below have the effect shown on the text in between. It is important to point out that this effect will only show up in a browser and not in Simpletext or Notepad. For example, if you want to make some words bold, you use the bold tags. The words won't be bold in Word, but they will be bold in browsers.
<U>
underlined text
</U>

<B>
bold text
</B>

<I>
Italicized text
</I>

<TT>
Monospaced typewriter text
</TT>

<H3>

Big text

</H3>

<H2>

Bigger text

</H2>

<H1>

Biggest text

</H1>

<H4>

small text

</H4>

<H5>

smaller text

</H5>

<H6>

smallest text

</H6>

A note on the <H*> tags: These tags were originally designed for outlines and really should be used in order which is why H1 is the biggest and H6 is the smallest. Normal sized text is between H3 and H4. Ideally you should have an H1 tag in your document before using an H2 tag but they work regardless of what order you have them. But it is a good idea to keep this in mind and use them correctly when possible.

Lists

There are three kinds of lists in HTML.

ordered lists <OL></OL>
unordered lists <UL></UL>
definition lists <DL></DL>

All of the lists have list items. In ordered and unordered lists, lists items are preceded by an <LI> tag. In a definition list, each list item has two parts: a <DT> element and a <DD> element. A definition list is similar to a definition in a dictionary. The <DT> is like the word and the <DD> is like the definition. Examples of all three types of lists are below:

<OL>
<LI>one element
<LI>two elements
<LI>three elements
</OL>

In your web browser the above HTML would appear as:
1. one element
2. two elements
3. three elements
<UL>
<LI>one element
<LI>two elements
<LI>three elements
</UL>

In your web browser the above HTML would appear as:
- one element
- two elements
- three elements
<DL>
<DT>word
<DD>definition
<DT>word
<DD>definition
<DT>word
<DT>word
</DL>

In your web browser the above HTML would appear as:

word
definition
word
definition
word
word

You can have more than one <DT> tag in a row but you cannot have a <DD> tag unless it is preceded by a <DT> tag. Links

A link is a part of your web page that the user can click on that takes them to another page. It is the part of a web page that makes it interactive. Before you add a link to your page you need a URL of another web site that you want to link to. If you cannot think of something to link to create a link to this site. The URL is http://freespace.virgin.net/ro.cutler/index.htm.

You can add a link by using the link tags. An example of a link to my site is below:

<A HREF="http://freespace.virgin.net/ro.cutler/index.htm">
This can be text or an image. But whatever it is, the user will be able to click on it to go to another page.
</A>

The A tells the browser that it is a link and the HREF tells the browser where to go when the user clicks on the link. Try the example above and then create your own.

You can add an e-mail link by doing the following:

<A HREF="mailto:ro.cutler@virign.net">
E-mail me
</A>

This would appear in the browser like any other link:

E-mail me

But when the user clicks on the link an e-mail window pops up. Try clicking on the above e-mail link. If an email window doesn't pop up, it may be that your browser is not set up to allow you to send email.

You can also create links to different parts of one page, much like large parts of this site. You do this by using <A NAME=""> tags and the typical <A HREF=""> tags. You need to add the <A NAME> tag to the part of your document you would like to link to. Let's say at the top of your page you want to have a link to the menu that is located at the bottom of your page. Right before your menu you need to type <A NAME="menu">. At the top of your page you add the following link: <A HREF="#menu">. The # symbol tells your browser to look for the link within the same document instead of looking for another file. Notice that the <A NAME> tag does not have the closing </A> tag, but the <A HREF> always does.

Images

To add images to your web site you have to do a couple of things. First you have to have an image you want. Second it has to be in the same place as your html file. If your html file is on your disk then your image also has to be on your disk. Your image file must either be a .gif file or a .jpeg/.jpg file. To add the image to your web page you add the following HTML to your page:

<IMG SRC="filename.gif">

The IMG part tells the browser to add an image, The SRC tells your browser where to find the image. All you need to do to add an image to your web page is the above HTML, but there are a few tricks you can add to make your pictures viewable by all and to make them load faster. Faster is better. So keep reading:

The ALT attribute is one of the most important IMG attributes. There are many people who choose not to download images when looking at web pages because they either have text-only browsers or they have slow Internet connections and images take too long to download. Regardless of the reason, you should ALWAYS assume that some people will be viewing your web page without the images. The ALT tag allows people who cannot see your image to see a text version. The following is an example of how to use the ALT attribute:

<IMG SRC="mouse.gif" ALT="[mouse]">

In this example, if someone cannot see the image of a mouse at least they will be able to read the name of the image and know that it would be a mouse. If you want to see an example of how this works, you can change the settings on your browser to not show pictures and then view your web page. Instead of displaying the images, the web browser should display the values of the ALT tags.

Some other important IMG attributes are the HEIGHT and WIDTH attributes. If you know the height and width of your image in pixels include it in the IMG tag like the following:

<IMG SRC="filename.gif" HEIGHT="200" WIDTH="200">

A common mistake by new HTML writers is to use the HEIGHT and WIDTH attributes to resize their images. This is not a good idea. It takes a long time for a browser to resize images and people do not like to wait. If you want to resize your image use a graphics program to do so. The values of the HEIGHT and WIDTH tags should always be the actual dimensions of your image.

There is also an ALIGN attribute. It is used to determine where the text on your page should be in relation to your image. ALIGN can have any of the following values: top, middle, bottom, left and right. Top, middle and bottom refer to where neighboring text will begin. Left and right refer to where the image will be displayed.

Notice that the ALIGN attribute for images does not have the value "center". If you want to center an image, enclose it in <P>...</P> tags and use the ALIGN="center" attribute in the paragraph tag like the folowing:

<P ALIGN="center">
<IMG SRC="mouse.gif" ALT="[mouse]">
</P>

There are more things that HMTL can do: Colour, Tables, but the browser that comes with Psimail internet cannot handle it, so I have left it our for the time being.I hope this has been informative.

Back to Main Page

Models, Models, Models! Free Modeling Portfolio! ModelCoast.

Photographers! Free Photographic Portfolios. Imagegods.

Visit The Best Free Image Hosting.