To view a local (ie. on your computer) file through Netscape, go to the FILE menu and select OPEN FILE. Then select the file name of the document you've been working on, and voilá! there's your page. As you keep working on it, you can save your document at any time, then select the RELOAD button in Netscape to see your changes.

Now you've got that in your heads, on with the lesson! ...

What are HTML tags?

As an example, <h3>text here</h3>, the <h3> tag is what makes the words "text here" big and bold.

HTML tags are used to tell a browser to bold the text, italicise it, make it into a header, or have it be a link to another document. It's important to remember that the ending tag, </tagname>, contains the "/" backslash character. This "/" backslash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document, which can be really confusing!

OK, that out of the way... on to:

Creating your HTML Document

The next thing to do is to tell the browser the title of the page, which is the name that appears at the top of the browser window in the title bar. It's NOT your main header on your web page - you won't see it on your page at all..... look up to the very top of your screen to see it! For this exercise, you're going to be creating your own home page, so try something like this ... give the page a title, then type a bit of text.

This is Mildred's homepage. Here you will find out about what makes Mildred tick. What she thinks about food and animals, and some cool places she goes to on the internet.

Now save your file. Because it's an HTML document and it will be picked up by WWW browsers, you need to name it like this :

Check out your page now by opening into Netscape. You'll notice that it's pretty boring really, no colours, no spaces, no pictures. We'll change all that soon.

Return to your file. Under the text you typed before, press return a few times, then type some more text.

Save your file again and reload it into the browser. What happened?

By now you will have realised that the browser hasn't recognised the formatting you did when you were typing before - there are still no spaces.

Modifying your HTML Document

Paragraphs and Line Breaks

If you just want a return with no space, use this tag: <br>
You don't need an end tag for this one either.

There is one more kind of break, this one creates a line across the page: <hr>
You don't need an end tag for this one either. But you can change its length and thickness like this:

Try these, saving and reloading to view your document.

Headings

Fonts

The tag you use is:

<font size=5>This is size 5 font</font> <font size=2>This is size 2 font</font>

because the default is <font size=3>, you don't need to tell it to be this size. I have made all the text on this page <font size=4>.

I use this most often to create different kinds of headings like this:

<font size=6>T</font><font size=4>HIS IS</font>
<font size=6>M</font><font size=4>ULTISIZING!</font>

THIS IS MULTISIZING!

You can also define text size using the <font size=+3> tag. A <font size=+1> tag tells the font to be one size larger than the default size, a <font size=+2>, tag tells the font to be two sizes larger than the default size, and so on. You can also use <font size=-1> to make the font smaller than the default.

Style

<b>bold</b>
<i>italics</i>
<tt>typewriter style</tt>

you can mix these tags around too.

Lists Lists Lists

1. Unordered

<ul>
<li>item one
<li>item two
<li>item three
</ul>

and it will look like this:

• item one
• item two
• item three

2. Ordered

<ol>
<li>item one
<li>item two
<li>item three
</ol>

and it will look like this:

1. item one
2. item two
3. item three

3. Indented

<dl>
<dt>A 'dt' tag will run the text against the margin
<dd>But a 'dd' tag will indent the text
<dt>You can mix
<dd>and match them
</dl>

and it will look like this:

A 'dt' tag will run the text against the margin

But a 'dd' tag will indent the text

You can mix

and match them

you can mix up the lists too, and have lists within lists, have a play!

Graphics

There are also a few things to keep in mind when you're designing pages with graphics.

Large images and lots of images may look great on a high-end computer, but they will frustrate users who must wait for the images to be downloaded over a network. A single image can be displayed several times, and once it's loaded in the first time it's in the memory and will download much more quickly.

The basic HTML for a graphic is

This tag will align the picture to the left, and run the text along the right of the picture:

Anchors & Links

Links to Local Files

The simplest anchor is one that opens another HTML file in the same directory or folder as the presently displayed WWW page. The code for this is :

If the page you want to link to is in a different directory, you can still direct the browser to find it:

If the page is back one directory, use the ../ command:

Links to The Internet

It's pretty much the same as for local files, except you use the web address of the page you'll be linking to.

AN ASIDE......

What is a URL?

The "http" stands for HyperText Transfer Protocol, it's the part that tells the browser to look for a web page.

The "www.interlink.org.nz" is the domain name of the address. It gives the browser directions to the server where the pages are held.

The "/index.html" gives directions to the particular file.

Now have a practice making links from your homepage to some of the other sites you've found.

You can make your links for any text in your page, or you can make links around pictures, just the same way as you do around text. Like this:

A linked picture has a blue border around it by default. If you want to take the border off, use:

You can also make the border thicker by increasing the number following the border= command.

Links within your page

To tell the browser to link within a document, the tag is a bit different:

Extras

Colours

It's a good thing to do, because the default colours are grey, black and blue.

The colours are depicted by six figure codes (called a Hex), they go from WHITE ffffff to BLACK 000000. There are all sorts of crazy formulae for working out the colours between white and black, but personally I use a programme called HTML Color Picker which makes life a lot easier.

So, to have a page with a white background, green text, red links and blue visited links, it goes like this:

Images

Centered text

Formatting using tables

Conclusion