The purpose of this tutorial is to provide an introduction to building small web sites with a strong emphasis on legal content, for those who have little experience in doing so - it is an introductory course, as it says. With the focus on legal materials comes an emphasis on text - only the most basic aspects of dealing with graphical elements are covered, as most law is conveyed through text.

The tutorial covers the basics of building a simple personal home page, law firm page or page for a university law course. It deals with the basics of HTML, and how it can be created using Netscape Composer. It then covers how various AustLII resources can be used to automated the creation of hypertext links to AustLII legislation, create indexes to legal materials on the web, and search the tutorial web pages.

1.1.2. Choose your tutorial project topic

For the rest of this Tutorial, you need to choose an area of law on which to develop a small HTML application. If it is an area of law with some Australian legislation which is on AustLII, that will make it possible to use the automated links from inferencing dialogues to AustLII databases that are covered later. Otherwise, any legislation can be used - but it is easier if you can find a copy on the web.

1.1.3. Resources

Some valuable resources which are referred to elsewhere in this Tutorial are:

NCSA A Beginner's Guide to HTML [1] (includes additional references at the end)
Howstuffworks.com's How a Web Page Works [2]
RTFtoHTML [3] - the standard program for converting word processing files to HML (Now a commercial product for US$39).
Yahoo's HTML pages [4](standards, editors etc)
You can find other tools and resources to help you build web pages in AustLII's WorldLaw index at World Law >> Categories >> Subjects >> Computerisation of Law >> Web Tools [5]

There are innumerable ‘beginner’s guide to HTML/the web/the internet’ books at any bookstore. Choice is a matter of personal taste, but it is worth buying one.

1.1.4. Conventions in this guide

This Guide refers to the Netscape Composer editor in Netscape Communicator 4.5. Microsoft's Internet Explorer has equivalent functionality.

The contents of square brackets [ ] are instructions for menu selections in Netscape Composer e.g. ‘[File | New Document | Blank]’ means go to ‘File’ menu item, choose ‘New Document’ from the menu list, then choose ‘Blank’ from the pop-up menu.

Icons (e.g.

) are those used in Netscape Composer. Most of the icons displayed are only available in the editor, not the Netscape Navigator browser.

To ‘select’ text is to mark it with the mouse so that it appears black on screen.

Items in underlined italics in explanations of commands and addresses are items for which you must substitute your own account names or file names.

1.2. Writing a simple page in raw HTML

Refer to NCSA A Beginner's Guide to HTML.[6]

1.2.1. Type a simple HTML file (a ‘hello world’ file) using a text editor

First read 'Tags explained'[7] (Beginner's Guide to HTML) for a basic idea of what tags do in HTML documents.

Use a simple text editor such as Notepad (part of Microsoft Windows) to type a modified version of the Minimal HTML Document [8] (Beginner's Guide to HTML) by changing the text so that it refers to some topic in which you are interested.

Alternatively, instead of re-typing, you can cut and paste it into your text editor and make alterations to the text to create your own version. Here is the minimal document from the Beginner's Guide to HTML:

    <html>
    <head>
    <TITLE>A Simple HTML Example</TITLE>
    </head>
    <body>
    <H1>HTML is Easy To Learn</H1>
    <P>Welcome to the world of HTML.
    This is the first paragraph. While short it is  
    still a paragraph!</P>
    <P>And this is the second paragraph.</P>
    </body>
    </html>

Important: After you have created a couple of minimal HTML documents, you should read the full explanation of Markup Tags [9] (Beginner's Guide to HTML), in order to understand all the tags you can use and what they do. It is surprisingly short and easy to understand, so don't avoid it!

1.2.2. Add one link

Type in one hypertext link - for example, it can be a link to Cornell’s Legal Information Institute (http://www.law.cornell.edu/), AustLII’s front page (http://www.austlii.edu.au/), the WorldLaw home page ( http://www.austlii.edu.au/links/) or it can be to some other URL (universal resource locater) of which you are aware. See Linking [10] (Beginner's Guide to HTML) to understand the <A HREF: ....> tag.

A link to AustLII will look like

                  <A HREF="http://www.austlii.edu.au"> AustLII </A>

1.2.3. Save your document

Now save your document, with .htm as a file suffix. Please also use some version of your own surname as filenames (e.g. greenlea.htm). This will avoid you overwriting other student's files when you publish you files onto the Internet, and make it much easier to identify files and ‘clean up’ disk space when needed. Filenames are normally not case-sensitive, except on Unix files servers - which is what we will use in this Tutorial.

If you use a word processor (not a simple text editor) save your file as ‘Text only’ . If you use a word processor (e.g. Microsoft Word), specify that your file should be saved as ‘text only’. HTML browsers like Netscape Navigator can’t read Word files. Always save word processor files of HTML as ‘text only’.

1.2.4. Open Netscape Navigator to browse your document

After opening Netscape Navigator, use [File | Open file in browser] to locate your file and open it to view. Check that the link works.

Congrats! You have created your first page of HTML from scratch. Now to do it a faster and easier way ...

1.3. First steps in using a HTML editor (Netscape Composer editor)

There are numerous HTML editing programs ('editors') available which enable you to create and edit web pages in a WYSIWYG ('what you see is what you get') fashion - see Yahoo's HTML Editors [11] page.

This Tutorial uses Netscape Composer 4.5 (but there has been little change in subsequent versions). Internet Explorer has similar features.

1.3.1. Open a new page to edit [File | New Document | Blank]

This will change you from the browser to the editor, and open a new blank page.

In the editor,

opens a new file to edit.

1.3.2. Give the page a title to go in the title bar [Format | Page Title]

In the ‘Page Properties’ box that appears, complete the ‘Title:’ box with the proper title of your page (e.g. ‘Jane’s FOI Page’, ‘Construction Law Central’ - as distinct from a file name such as ‘JBRADSH1.HTM’). You can complete the ‘Author:’ box if you like. Click OK when finished.

1.3.3. Save the file [File | Save]

Give your file a name with a ‘.htm’ suffix (e.g. ‘construct.htm’, ‘foi_home.htm’) and save the file

. If you are using a shared 'guest' account, it may be best to use your own surname as a file name.

1.4. Adding a heading, list of resources etc

1.4.1. Add and format a heading and an introduction

At the top of your page, type a heading for the page (it can be the same as your title bar heading, or different), followed by a brief paragraph explaining the purpose of the page.

You can select the size and character format

for your text, and even the colour

(use this very sparingly!).

You can centre or otherwise align

your heading and introduction.

1.4.2. Erasing mistakes

If you make a formatting mistake with text, select the text and apply Clear All Styles

to it. This also works when too much text is included in linked text (below).

1.4.3. Add a list of web resources that you wish to link

Type a list of the names of other web pages that you would like list on your page. For example, for a privacy law page (which happens to be a special interest of the author), the list might include:

Privacy Law & Policy Reporter
Privacy Act 1998 (Cth)
NSW Privacy Committee
Commonwealth Privacy Commissioner

Put a heading on the list, explaining what it is. Select the items in the list (not the heading) and make it a bullet list or a numbered list

1.4.4. Add lines

Add a line

to the bottom of your page, or wherever else you think it looks appropriate (use sparingly).

1.4.5. View the page in the browser

View your file in the browser

. If you haven’t previously saved the file, you will be asked to.

1.4.6. View the HTML source from the browser [View | Page Source]

In the browser, [View | Page Source] displays the raw HTML source. You can’t edit it here.

1.4.7. Go back to the editor [Communicator | Netscape Composer: your file name]

From the browser, the Window menu item will list ‘Netscape Composer: your file name’ as one of the options.

1.5. Adding hypertext links

1.5.1. Links to other pages on the web

Browse to the web page of the first resource in your list (e.g. ‘Privacy Law & Policy Reporter’). Copy the URL of the page (e.g. http://www.austlii.edu.au/au/journals/PLPR/ )from the ‘Location:’ or ‘Netsite:’ box at the top of the screen, by selecting the text of the URL and using [Edit | Copy].

Go back to your page in the editor, select the link text (e.g. ‘Privacy Law & Policy Reporter’), and create the link using

The ‘Format’ window appears. Paste the URL into the ‘Link to / Link to a page location or file name:’ box. OK when finished.

1.5.2. View and test the links in the browser

Go the browser and test that your link works

. 'Edit and test' repeatedly.

1.5.3. Fixing faulty links [Remove Link]

If there is something wrong with the link, select the link text, and click on the link icon

to open the ‘Format’ box again, and click on the [Remove Link] button. Paste in a new URL if there is one. OK when completed.

1.5.4. Repeat the link process for the other items in your list

Do as many as you feel like until you are confident.

1.5.5. Links to another page of yours [Choose file ...]

You previously created a HTML file called ‘MYSURNAME.HTM’. Type something like ‘A link to my test file’ into your page, then select it and click on the link icon to open the ‘Format’ box. Type ‘MYSURNAME.HTM’ in the ‘Link to / Link to a page location or file name:’ box. OK to finish.

Alternatively, click on the [Choose file ...] button, and then select the file name of your test file. OK to finish.

1.5.6. View and test the links in the browser

Go the browser and test that your link works.

1.5.7. View the HTML source in the editor [View | View Document Source]

View the source so that you can understand the HTML tags for links. Note in particular the differences between the content of the tags for pages elsewhere on the web (‘absolute addresses’), and your own pages in the same directory (‘relative addresses’) where the full URL does not have to be specified.

1.6.1. Copy a relevant section of an Act

Browse to a section of an Act relevant to your page. Make sure you choose a section that has some hypertext links in it.

Choose [File|Edit Page] to open this page in the editor. Select the text of the section (or part of it that includes hypertext links), and use

to copy it.

IMPORTANT: You must remember that you can only copy documents, or substantial parts thereof - including the underlying HTML markup - if you have the author’s permission to do so, or if your actions clearly come within the fair dealing provisions of the Copyright Act 1968. Do not ignore copyright considerations. If in doubt, ask for advice.

AustLII’s HTML is copyright. For the purposes of this tutorial, you may use small selections of legislation and case law on AustLII, including HTML.

1.6.2. Paste the section into your page

Go back to your page in the editor, and insert the cursor somewhere above the list of resources you have created (this assists with a later exercise). Paste the section you have copied onto your page using

. It will appear as text with all its hypertext links to AustLII intact.

1.6.3. Test that the links to AustLII work

Use the browser to test that the links from the section on your page go to AustLII.

1.7. Adding links to locations within a page (targets)

It is possible to link to specific locations within a page, if those locations are marked as ‘targets’. This is very useful for creating small tables of contents within your own pages, and to allow others to link to specific locations within your pages. It is mainly useful within relatively long pages that you do not wish to break up, but within which you wish to allow some internal navigation. See for example this tutorial page, or one of the High Court Bulletins on AustLII (e.g. http://www.austlii.edu.au/au/other/hca/bulletin/hcab9703.html)

See Links to Specific Sections [12] (and following) in the Beginner's Guide to HTML.

1.7.1. Make the heading of your section a target

Select the title of your section, and use the target icon

to call up the ‘Target’ window. The ‘Enter a name for this target:’ box will suggest the text you selected as the name. Edit the text in that box so that it just contains one string of text (e.g. ‘s7’ or ‘T(I)As7’). OK to confirm. Use underscores to increase readability if necessary.

1.7.2. Make the heading of your list a target

Select the heading of your list of links , and use the target icon to call up the ‘Target’ window. The ‘Enter a name for this target:’ box will suggest the text you selected as the name. Edit the text in that box so that it just contains one string of text (e.g. ‘Privacy_links’ or ‘links’).

1.7.3. Create a table of contents and link each item to its target

At the top of your page, create a table of contents for your page, for example:

Contents of this page -

Telecommunications (Interception) Act 1987 s7
Privacy links

Select each item in your list in turn, and use the link icon to open the ‘Format’ window. The targets you have created will appear under ‘Link to a named target under specified document (optional):’ Select the appropriate target then OK to confirm. Repeat the process for each link.

1.7.4. Test that the links to targets work

Use the browser to test that the links from your table of contents items go to your targets. Use the ‘Back’ icon to check how you go back to the table of contents.

1.7.5. View the HTML source in the editor [View | Page Source]

View the source so that you can understand the HTML tags for targets, and the tags for links to targets within a file.

1.8. Adding e-mail links

Well placed e-mail links can add some useful interactivity to your pages.

1.8.1. Send mail to yourself

If you have your own e-mail address, allow users of your page to send feedback direct to you. At the bottom of your file, or in some other sensible place, type some text like ‘Send comments to [INSERT YOUR EMAIL ADDRESS]’. Mark the text, and use the link icon

to create the link. In the ‘Link to a page location or local file’ box, type ‘mailto:[INSERT YOUR EMAIL ADDRESS]’. OK to confirm. Check that the link does open a mail window to send mail to the correct address. The address that you link to should look like 'mailto:graham@austlii.edu.au' and the way it appears on the page should look like graham@austlii.edu.au.

See Mailto [13] (Beginner's Guide to HTML) for more information.

[1] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

[2] http://www.howstuffworks.com/web-page.htm

[3] http://www.logictran.com

[4] http://dir.yahoo.com/Computers_and_Internet/Data_Formats/HTML/

[5] http://www.austlii.edu.au/links/300.html

[6] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

[7] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#TEM

[8] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#TM2

[9] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#MT

[10] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#LI2

[11] http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/HTML_Editors/

[12] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#LTS

[13] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#M2

Previous Next Title Page