Welcome to the Introduction to HTML
course! Welcome to the Introduction to HTML
course!This course was developed at The University of Melbourne as part of the IT training program. It is a self-contained HTML course that can be completed entirely on-line. The course is designed to completely conform with the HTML 2.0 specification.
The course includes information on HTML as well as extensive examples that can used as a guide for creating your own HTML documents. Each major section concludes with an exercise to test your understanding. Solutions are provided for each exercise.
Feedback on the course would be most welcome! Please direct your comments, via email, to the maintainer (shown below). The home page for this course can be found at:
http://www.its.unimelb.edu.au:801/courses/publish/HTML/IntroHTML.html
Section 1 : Introduction
Section 2 : Tags for basic document layout
Section 3 : Visual effects
Section 4 : A more sophisticated HTML document
Section 5 : Creating hypertext links
Section 6 : Including multimedia objects
Section 7 : Document structure
Section 8 : Wrapping up
Section 9 : Solutions to Exercises
HTML stands for Hypertext Markup Language. It is an example or instance of a more general portable document language known as SGML (Standard Generalized Markup Language). Markup languages are characterised by describing document content or structure rather than appearance.
For example, a main heading in HTML is described as <h1>, for heading1. This description does not supply any information on how a heading1 should appear. The decision on the appearance of a heading1 is left to the HTML viewing program.
One viewer may display heading1 text as 24 point bold Times, another as 18 point bold underlined Helvetica. The original HTML document does not describe its appearance.
This is in direct contrast to the WYSIWYG word processors we have become accustomed to. A word processor document will exactly specify the appearance of all the text contained within it. Usually this specification is in a proprietary format and cannot be understood directly by other word processors. This in turn leads to the problems that we have all experienced in trying to exchange a word processed document with someone else that uses a different system.
HTML, by avoiding the description of appearance, overcomes these problems. HTML documents are plain text - with special tags to describe the document structure. This means that they can be easily transmitted from one computer to another, one platform to another.
HTML describes the structure of a document using special markup tags. All markup tags consist of HTML elements enclosed in < > symbols. Examples include <html>, <h1> and <body>.
Most HTML tags are used to enclose a section of text. The enclosing tags consists of a starting element and a closing element. Generally the end tag is the same as the starting tag with the element preceded by a /. For example, a main heading is specified as:
<h1>HTML elements - markup tags</h1>
The heading "HTML elements - markup tags" is enclosed within a starting tag of <h1> and an end tag of </h1>.
There are a number of HTML elements that should be included in every HTML document. They are:
Note that markup tags are not case sensitive, <title> is equivalent to <TITLE>.
Perhaps the most commonly used element inside the <body> section is the paragraph tag. The latest definition of the paragraph tag defines a start tag <p> and an end tag </p>. The tags are used to enclose a paragraph of text.
The </p> is optional and may be omitted. If the tag is omitted, correct usage requires the <p> to be used to begin a paragraph, not end it. Many guides suggest using the <p> tag as an end of paragraph marker. This is not correct usage, although most HTML viewers will correctly display this format - indeed some expect it. In fact a number of HTML viewers do not correctly handle enclosing paragraph tags. Even so, you should follow the correct syntax.
An example of a correctly marked up paragraph is as follows:
<p>Paragraphs are enclosed in an opening paragraph tag and a closing paragraph tag. The closing paragraph tag may be omitted.</p>
Unlike documents created using a word processor, carriage returns in HTML documents are not significant. The width of lines displayed by a viewer will be determined by the width of the viewer window - not where carriage returns are entered in the HTML file. The exception to this is preformatted text, which is covered in a further section.
The <br> tag forces a line break with no extra space between lines. (By contrast, most browsers format the <p> paragraph tag with an additional blank line to more clearly indicate the beginning of a new paragraph.) Note that the <br> is not a container. There is no </br> tag.
For example the following lines are separated using the <br> tag.
<p>The first line of text.<br> The second line of text.</p>
This displays as:
The first line of text.
The second line of text
This is in contrast to:
<p>The first line of text.</p> <p>The second line of text.</p>
Which displays as:
The first line of text.
The second line of text.
The following sample document incorporates the tags discussed so far.
<html> <head> <title>A simple HTML document</title> </head> <body> <h1>A simple HTML document</h1> <p>HTML paragraphs should be contained in a starting paragraph tag and an end paragraph tag. Blank lines or spaces in a document will be ignored by HTML viewers.</p> <p>Some documents describe the paragraph tag as an end of paragraph marker. This is not the case! If the end paragraph tag is omitted, the paragraph tag should be seen as marking the beginning of a paragraph - not the end.</p> <hr> <p>Created: 18 Oct 1994<br> Last modified: 25 Oct 1994<br> Authorised by: Manager, CSG1, ITS<br> Access: No restrictions<br> Copyright © 1994, The University of Melbourne.<br></p> <address>Maintainer: David Morton, CSG1, ITS, d.morton@its.unimelb.edu.au</address> </body> </html>
View the sample document. (Use the back button in your browser to return to this document.)
Note that the width of lines is determined by the width of your viewer, not where the line breaks appear in the HTML document. You can verify this by viewing the document again and changing the width of the screen.
This document includes a standard footer that is recommended for inclusion in all documents published on servers at The University of Melbourne. This contains information that is regarded as mandatory on all documents published by the university.
A standard template is available. The URL is:
http://www.unimelb.edu.au:801/cwis/policy/template_general.html
.
(URLs will be covered in greater detail in a further section.)
In this exercise you will manually mark up a simple text file using the markup tags you have already seen. Work through the following steps to complete the exercise.
Save a copy of the text file, locally, on your own hard disk. Save the file as "Ex1.txt".
Use a text editor to add appropriate HTML tags to mark up the text for display on your browser.
Hint: Be sure to include the required tags already discussed as well as the standard footer.
Save the modified text file as "Ex1.html".
View the marked up file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 1. The solution shows you the markup tags and then the appearance of the code.
This section covers the tags used to control the layout or structural appearance of HTML documents. These include headings, lists, preformatted text and blockquotes.
These structural elements can be used to improve the 'readability' of the HTML document. They provide guides or 'markers' for the eye that give clues on the importance of different parts of the text.
Although the functions available may appear limited when compared to a word processor, it is still possible to produce an HTML document with a pleasing layout. A well structured HTML document is much easier to read than a simple 'slab' of plain text.
HTML provides six levels of headings, labelled <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The first heading in each document should be <h1>. In many cases, this heading will be the same as the document title.
Use of the heading tag has already been covered.
It is considered a matter of good style to use headings progressively. This means that after you have used a <h1> you should use a <h1> or <h2> next. You should not skip directly from <h1> to <h3>. You can, however, use a series of headings of the same level.
The following shows the appearance of each of the heading tags:
There are three types of lists available in HTML. They are ordered lists, unordered lists and definition lists. Ordered lists provide an automatically numbered list of items, unordered lists use a bullet mark to identify each separate list item. Definition lists provide a list of items along with descriptive paragraphs for each list entry.
Ordered lists are contained within <ol> and </ol> tags. Each list item is contained within a <li> and </li> tag. The syntax is:
<ol> <li> list item </li> <li> list item </li> . . </ol>
For example the following HTML code:
<ol> <li> Apologies </li> <li> Minutes of the previous meeting </li> <li> Installation of CD-ROM network </li> </ol>
produces formatted output as:
Unordered lists are contained within <ul> and </ul> tags. Each list item is contained within a <li> and </li> tag. The syntax is:
<ul> <li> list item </li> <li> list item </li> . . </ul>
For example the following HTML code:
<ul> <li> 12 lords a leaping </li> <li> 11 pipers piping </li> <li> 10 maids a milking </li> </ul>
produces formatted output as:
In this exercise you will add ordered and unordered lists to an HTML document that you will first download. Work through the following steps to complete the exercise.
Load the html file for the exercise. This file contains the HTML for the header and footer of the document and the text of the lists so you don't need to type them yourself.
Save a copy of the html file, locally, on your own hard disk as "Ex2.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor. Otherwise you may need to add the header and standard footer yourself.
Open the saved html file using a text editor. Remove the <pre> and </pre> tags at the top and bottom of the text for the lists (preformatted text will be discussed in a further section). Add the html code to make lists that appear similar to the following:
Macintosh browsers:
Mosaic Netscape - a fully featured browser. Current version is version 1.1N. Prefers 3MB of RAM to run.
NCSA Mosaic - a fully featured browser available in a Power Mac and 68K versions. Current version is 2.0beta9. Prefers 3MB of RAM to run.
Macweb - a fully featured browser. Current version is 1.00alpha3.2. Prefers 2MB of RAM but can run OK in 1.5MB.
Windows browsers:
Mosaic Netscape - a fully featured browser. Current version is version 1.1N. Requires Winsock.
NCSA Mosaic - a fully featured browser available in a Power Mac and 68K versions. Current version is 2.0beta4. Requires Winsock and Win32s installation.
Winweb - a fully featured browser, although lacks telnet URLs. Current version is 1.00alpha2.2 Requires Winsock.
Save the updated html file.
View the modified html file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 2. The solution shows you the markup tags and then the appearance of the code.
Definition lists provide a method to present list items along with one or more indented paragraphs for each list item. Definition lists are contained within <dl> and </dl> tags.
Within the definition list each list item is contained within a <dt> and </dt> tag (standing for definition term). The accompanying paragraphs for each <dt> tag are contained within a <dd> and </dd> tag. The syntax for the list is:
<dl>
<dt> First Definition term </dt>
<dd>
<p> First paragraph </p>
<p> Second paragraph </p>
.
.
</dd>
<dt> Second Definition term </dt>
<dd>
<p> First paragraph </p>
<p> Second paragraph </p>
.
.
</dd>
</dl>
You can have a definition term element (<dt>) without a <dd> element. However, you cannot use a <dd> element without first specifying a <dt> element. (The <dt> element can be empty if required but needs to present to satisfy the HTML syntax.)
The following is an example of a definition list:
<dl> <dt><strong>Gopher</strong></dt> <dd> <p>Gopher was developed at the University of Minnesota in the US. It was designed to provide people with easy access to a variety of different information sources locally or anywhere across the Internet. It provides a simple interface based on menu hierarchies.</p> <p>Gopher clients are available for a variety of platforms including Macintosh, DOS, Windows and vt100 clients for UNIX computers. To a degree it has been superseded by the World Wide Web, but it remains a popular method for delivering information over the Internet.</p> </dd> <dt><strong>World Wide Web</strong></dt> <dd> <p>The World Wide Web originated at CERN, the European Laboratory for Particle Physics located in Geneva, Switzerland. It attempts to unify a variety of different Internet protocols including telnet, gopher, ftp, network news and wais. In addition it incorporates its own protocol known as hypertext transfer protocol (http).</p> <p>The World Wide Web uses hypertext and multimedia techniques to make the web easy for anyone to roam, browse, and contribute to. Information on the World Wide Web is accessed through a web browser. Browsers are freely available on most platforms. Perhaps the best known of these browsers is Mosaic created by the National Centre for Supercomputing Applications (NCSA) in the US. Mosaic is available for Macintosh, Windows and X Windows.</p> </dd> </dl>
The output looks like:
Gopher was developed at the University of Minnesota in the US. It was designed to provide people with easy access to a variety of different information sources locally or anywhere across the Internet. It provides a simple interface based on menu hierarchies.
Gopher clients are available for a variety of platforms including Macintosh, DOS, Windows and vt100 clients for UNIX computers. To a degree it has been superseded by the World Wide Web, but it remains a popular method for delivering information over the Internet.
The World Wide Web originated at CERN, the European Laboratory for Particle Physics located in Geneva, Switzerland. It attempts to unify a variety of different Internet protocols including telnet, gopher, ftp, network news and wais. In addition it incorporates its own protocol known as hypertext transfer protocol (http).
The World Wide Web uses hypertext and multimedia techniques to make the web easy for anyone to roam, browse, and contribute to. Information on the World Wide Web is accessed through a web browser. Browsers are freely available on most platforms. Perhaps the best known of these browsers is Mosaic created by the National Centre for Supercomputing Applications (NCSA) in the US. Mosaic is available for Macintosh, Windows and X Windows.
In this exercise you will add a definition list to an HTML document that you will first download. Work through the following steps to complete the exercise.
Load the html file for the exercise. This file contains the HTML for the header and footer of the document and the text of the lists so you don't need to type it in yourself.
Save a copy of the html file, locally, on your own hard disk as "Ex3.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the saved html file using a text editor. Remove the <pre> and </pre> tags at the top and bottom of the text for the definition list (preformatted text will be discussed in a further section). Add the html code to make a definition list that appears similar to the following:
Magpies are a common sight on lawns, parklands and open spaces over much of Australia, especially in the south-east. They are easily identified by bold white patches on the shoulders and back of the head. The sexes are similar, immatures closely resemble adults, and there is no seasonal variation.
The magpies' voice is a rich mellow flute-like or organ-like carolling by one or several birds, usually best in late winter or early spring. The alarm call is a repeated short harsh shout; also a loud drawn-out descending 'peww'.
Pink below and pale grey above, the Galah is absolutely unmistakable; it is one of Australia's most characteristic and distinctive birds. Males and females are nearly identical in appearance, there is no seasonal variation and immatures, though somewhat duller, closely resemble adults.
The Galah's voice consists of a thin high-pitched splintered call, 'chill chill' along with harsher screeches.
The Galah has benefited from land management practices over the last 100 years and now occurs virtually throughout mainland Australia, but is rare in Tasmania.
Save the updated html file.
View the modified html file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 3. The solution shows you the markup tags and then the appearance of the code.
Lists can be nested. Thus you could have an unordered list within an ordered list or a definition list inside the <dd> element of a higher level definition list. You can nest lists to any level that you wish, although a practical limit is generally nesting down to three levels.
An example of a nested list is:
<ol>
<li> Victoria
<ul>
<li> Melbourne </li>
<li> Geelong </li>
<li> Bendigo </li>
</ul>
</li>
<li> New South Wales
<ul>
<li> Sydney </li>
<li> Wollongong </li>
<li> Newcastle </li>
</ul>
</li>
<li> Queensland
<ul>
<li> Brisbane </li>
<li> Townsville </li>
<li> Bundaberg </li>
</ul>
</li>
</ol>
will appear as:
Note that each of the unordered lists is enclosed within <li>...</li> tags. Many browsers may allow you to have the unordered list outside the tags. For example:
<ol>
<li> Queensland </li>
<ul>
<li> Sydney </li>
<li> Woollongong </li>
<li> Newcastle </li>
</ul>
</ol>
However, this does not conform with correct HTML syntax. By not conforming with the HTML syntax, you run the risk of some viewers not displaying your document as you intended.
This exercise is divided into two parts. Firstly you will correct errors in the code for a nested list. In the second part you will mark up some text as a nested list.
Load the html file for the exercise. This file contains incorrect HTML for a nested list.
Save a copy of the html file, locally, on your own hard disk as "Ex4a.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the saved html file using a text editor and correct the html code so that the nested list appears as follows:
The makeup of an HTML document
The HEAD section.
The HEAD section can contain the following elements:
The BODY section.
The BODY section can contain the following elements:
The HEAD and BODY sections are enclosed in HTML tags.
Save the updated html file.
View the modified html file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 4, part 1. The solution shows you the markup tags and then the appearance of the code.
Load the html file for the exercise. This file contains the HTML for the header and footer of the document and the text of the nested lists.
Save a copy of the html file, locally, on your own hard disk as "Ex4b.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the saved html file using a text editor. Remove the <pre> and </pre> tags at the top and bottom of the text (preformatted text will be discussed in a further section). Add the html tags to the text. Be sure to maintain the nested list structure as best you can.
View the marked up file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 4, part 2. The solution shows you the markup tags and then the appearance of the code.
A segment of text can be separated from the surrounding text using the <BLOCKQUOTE> tag. Most browsers indent the text contained within blockquote tags to separate it from the text above and below it. This may vary with some browsers however.
Like paragraph tags, text contained with blockquote tags will wrap according to the width of the browser window. Line breaks in the HTML code will be ignored. Text contained within blockquote tags should be 'marked up' using paragraph, list or heading tags. The text cannot be contained within blockquote tags alone.
For example, the following HTML code makes use of the <BLOCKQUOTE> tag
<p>Odin is often called Allfather: this means he was not only the actual father of many of the gods, but he was also foremost of the gods. Snorri Sturluson, writing in Iceland in the thirteenth century, is quite clear on this point:</p> <BLOCKQUOTE><p>Odin is the highest and oldest of the gods. He rules all things and, no matter how mighty the other gods may be, they all serve him as children do their father...He created heaven and earth and sky and all that is in them.</p></BLOCKQUOTE>
This is displayed as:
Odin is often called Allfather: this means he was not only the actual father of many of the gods, but he was also foremost of the gods. Snorri Sturluson, writing in Iceland in the thirteenth century, is quite clear on this point:
Odin is the highest and oldest of the gods. He rules all things and, no matter how mighty the other gods may be, they all serve him as children do their father...He created heaven and earth and sky and all that is in them.
Text contained within the <PRE>...</PRE> tags will be displayed in a fixed-width or mono-spaced font. White space, blank lines and line breaks will be honoured. Preformatted text is currently the only method available to display tables.
For example the following table must be entered as preformatted text to preserve line breaks and column spacings.
<pre> ---------------------------------------------------- | Column 1 Column 2 Column 3 Column 4 | ---------------------------------------------------- | Red Green Red Blue | | Yes No Yes Yes | | Apple Orange Banana Grape | ---------------------------------------------------- </pre>
It will then be displayed as entered in a fixed width font, defined on the viewer, as follows.
---------------------------------------------------- | Column 1 Column 2 Column 3 Column 4 | ---------------------------------------------------- | Red Green Red Blue | | Yes No Yes Yes | | Apple Orange Banana Grape | ----------------------------------------------------
You must be careful not to make the lines of preformatted text too wide. In general you should try to confine your preformatted text to less than 80 characters across. This will ensure that people using a terminal-based browser will be able to view the text without the lines wrapping.
HTML offers a number of different ways to change the appearance of text as it is viewed by a HTML browser. These visual effects can be divided into two classes: logical and physical styles. Logical styles mark text according to its meaning, while physical styles produce a specific appearance.
For example the markup <strong>this is an example of
strong text</strong> is rendered as this is an
example of strong text. The <strong> tag is
an example of a logical style.
Similarly the markup <b>this is an example of bold
text</b> is rendered as this is an example of bold
text. The <b> tag is an example of a physical
style.
At first glance, there may not seem to be any difference in these two
styles. However, the similarity of appearance is a function of the
browser. A different browser may be set up to display
<strong> in red and italicized. In general you
should try to use logical rather than physical styles for visual
effects.
Here are the different logical styles, and examples of the renderings:
Emphasis (usually italics). For example the string
<EM>"this is emphasized text"</EM> is rendered
"this is emphasized text".
Stronger emphasis (usually bold). For example the string
<STRONG>"this is strong text"</STRONG> is rendered
"this is strong text".
Example of typed code (usually fixed-width font). For example the
string <CODE>"this is code text"</CODE> is
rendered "this is code text".
A sequence of literal characters. For example the string
<SAMP>"this is example text"</SAMP>
is rendered "this is example text".
Text to be marked as keyboard input: for example, in an instruction
manual this would be the text typed by the user. For example the string
<KBD>"this is keyboard text"</KBD> is
rendered "this is keyboard text".
A variable name. For example, the string
<VAR>"variable name"</VAR> is rendered
"variable name".
A citation (typically rendered in italics). For example
<CITE>"this is a citation"</CITE> is rendered
"this is a citation".
These elements physically determine the desired renderings. Please try and use the logical forms, whenever possible.
The physical style elements, and their renderings, are:
Boldface where available (browser may render this in another
manner if boldface is not possible).
For example <B>"this is bold text"</B> is rendered
"this is bold text".
Italics (may be rendered as slanted in some cases). For example
<I>"this is italic text"</I> is rendered
"this is italic text".
Fixed width typewriter font. For example <TT>"this is
typewriter text"</TT> is rendered
"this is typewriter text".
Some ASCII characters normally cannot be used because they are used for special purposes when writing HTML. They are the left angle bracket (<), the right angle bracket (>), the ampersand (&) and the double quote ("). (For an extensive example of the use of special characters, view the source of this document.)
If you wish to display one of these characters you must enter a special escape sequence instead of the character. They are as follows.
<
>
&
"
A full list of supported characters can be found at CERN. The URL is:
http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html.
If you don't know what a URL is yet - read on!
NOTE: Unlike the rest of HTML, these escape sequences are case sensitive. You cannot, for instance, use < instead of <.
In the first part of this exercise you will add visual effects to an existing HTML file. In the second part, you will specify the code needed to provide special character formatting of some text.
To complete the exercise, work through the following steps:
Using a text editor, open the file "Ex4b.html".
Add character formatting and other visual effects to improve the appearance of the document. At a minimum, you should format the document to highlight the main items on the program.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 5, part 1. The solution shows you the markup tags and then the appearance of the code.
Write down the HTML code to display the following paragraphs. Be sure to include the correct escape sequences where required.
A number of tags used in the BODY section do not require end tags. They are <BR>, <HR> and <IMG>.
Our latest release is "Parrots & Pigeons of Australia" and is available now in good bookstores (rrp $74.95).
The escape sequence for the & character is "&".
When you are finished you can check your code by viewing the solution to exercise 5, part 2. The solution shows you the markup tags and then the appearance of the code.
The following example makes use of the HTML markup tags covered so far. The document is a fragment of an (imaginary) set of notes on using UNIX. Take no notice of the content - the point of the document is to show the use of HTML markup tags.
View Introduction to vi. (Use the back button in your browser to return to this document.)
Below is the HTML code contained in the document Introduction to vi. By using the Forward and Back controls in your browser you should be able to compare the code with the rendered result.
<HTML> <HEAD> <TITLE>Introduction to vi</TITLE> </HEAD> <BODY> <H1>Introduction to vi</H1> <P><STRONG>After completing this chapter you will be able to:</STRONG></P> <UL> <LI><EM>start vi</EM></LI> <LI><EM>create and edit a text file using vi</EM></LI> <LI><EM>save a text file in vi</EM></LI> <LI><EM>quit vi.</EM></LI> </UL> <HR> <H2>Introduction</H2> <P>Vi (pronounced vee-eye) is the standard 'full screen editor' available with the UNIX operating system. It is used to create new text files and to change existing ones. This chapter explains how to use some of the features of vi. In particular, you will learn how to start vi, how to create and then change a text file, how to save the file, how to move around the screen, how to insert and delete text and how to search for a word or group of words.</P> <P>Vi is a text editor, not a word processor. It does not justify margins, centre titles, format text or provide the other features of a word processor. Vi creates files that are unformatted and contain text only. This is useful when you wish to create a file that does not contain the control characters embedded by a word processor.</P> <P>Like other parts of UNIX, the commands in vi are case sensitive. For example, the command <STRONG>x</STRONG> deletes the character <EM>under</EM> the cursor, while the command <STRONG>X</STRONG> deletes the character to the <EM>left</EM> of the cursor.</P> <P><EM>Make sure that the caps lock key is off before using vi.</EM></P> <HR> <H2>Starting vi</H2> <P>To start vi, type:</P> <P><KBD>vi</KBD></P> <P>at the shell prompt.</P> <P>When you do not specify a file name, vi will open an empty <EM>buffer</EM> into which text is inserted. The buffer is an area of memory in which vi stores the text until you actually save the text into a file. Other documentation often refers to this area as the <EM>edit buffer</EM>.</P> <P>To make changes to a file or to create a new file, type <KBD>vi</KBD> followed by the name of the file.</P> <P>In the following example you will use vi to create a new file called <EM>first.file</EM> by typing:</P> <OL> <LI><P><KBD>vi first.file <cr></KBD></P> <P>The vi editor screen will open showing the name of the new file at the bottom of the screen.</P> </LI> </OL> <HR> <H2>Modes in vi</H2> <P>There are three different modes in vi. They are the <STRONG>command mode</STRONG> , the <STRONG>line editor mode</STRONG> and the <STRONG>input mode</STRONG>. While in command mode or line editor mode, vi accepts keystrokes as commands to carry out particular functions, responding to each command as you enter it. In insert mode, vi accepts keystrokes as text, to be entered into your file, as you type it.</P> <P>The majority of editing commands are issued in command mode. Vi will automatically be in command mode when it is first started. Pressing the escape key (<esc>) always puts vi back into the command mode.</P> <P>The line editor mode is accessed from the command mode by pressing the colon (:) key. A colon is displayed at the bottom left of the screen with the cursor. After typing the command press the return key (<cr>) to execute it. When the command has finished executing, vi goes back to command mode.</P> <P>A number of different commands, including the <STRONG>insert (i)</STRONG> command that put vi into input mode.</P> <HR> <H2>Inserting text</H2> <P>To enter text in vi, you must use input mode. The most common command for inserting text is the <STRONG>i</STRONG> (for <STRONG>i</STRONG>nsert) command. Normally, you will not see any change on the screen to show that you have switched to insert mode.</P> <P>If you are uncertain whether you have changed to insert mode, press the <STRONG><esc></STRONG> key. Vi will switch to command mode, regardless of what mode it was in, Press <STRONG>i</STRONG> once again to enter insert mode. When you have finished entering text, press the <esc> key to return to the command mode.</P> <P>In the following example, you will use the <STRONG>i</STRONG> command to insert text into <EM>first.file</EM>.</P> <OL> <LI><P><KBD>i</KBD></P> <P>Vi enters input mode. Text that is entered now will be inserted into the file.</P> </LI> <LI><P><KBD>A simple message to test entering text in vi.<cr><BR> A second test line now follows.</KBD></P> </LI> <LI><P><KBD><esc></KBD></P> <P>After you have pressed the <esc> key vi will return to command mode.</P> </LI> </OL> <P>There are three different commands for inserting text, and these can be remembered by the mnemonics <STRONG>i</STRONG>nsert, <STRONG>a</STRONG>ppend and <STRONG>o</STRONG>pen. The following table shows the differences between the three commands.</P> <PRE> ------------------------------------------------------------------------- | Input mode command | Action | ------------------------|------------------------------------------------ | i | inserts the text before the cursor position | | a | appends text after the cursor position | | o | opens a new line after the current line | | O | opens a new line before the current line | ------------------------------------------------------------------------- </PRE> <P>Each of the insert commands puts you into input mode, and must be finished with an <esc> to take you back to command mode.</P> <HR> <P>Created: 25 Oct 1994<BR> Last modified: 26 Oct 1994<BR> Authorised by: Manager, CSG1, ITS<BR> Access: No restrictions<BR> Copyright © 1994, The University of Melbourne.</P> <ADDRESS>Maintainer: David Morton, CSG1, ITS, d.morton@its.unimelb.edu.au</ADDRESS> </BODY> </HTML>
The exercises to date have concentrated on applying one technique at a time. In this exercise you will code a more complex piece of text. You should use the appropriate HTML code as required. Bear in mind that there is no "right" answer.
Load the html file for the exercise. This file contains the HTML for the header and footer of the document and the text to be marked up.
Save a copy of the html file, locally, on your own hard disk as "Ex6.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the saved html file using a text editor. Remove the <pre> and </pre> tags at the top and bottom of the text (preformatted text will be discussed in a further section). Add the html tags to the text.
To get an idea of how it might appear you can view the suggested solution to Exercise 6. For assistance with the HTML code, use the View Source command in your browser to view the HTML source of the solution.
View the marked up file using your browser by opening it locally and see how your markup looks.
Repeat, if necessary, to improve the appearance of the document.
If you wish, you can check your HTML using our HTML validation service.
Much of the power of the World Wide Web comes through its ability to link to other places in a document or from one document to another. This document makes extensive use of this feature. Different browsers use different techniques to show a link point but most often they are coloured and usually underlined
The following shows the HTML code that was used, in the previous
section, to provide a hypertext link to the document titled
Introduction to vi. Note that the filename of this document
is sample2.html.
<A HREF="sample2.html">View Introduction to
vi.</A>
The text that provides the link ('View Introduction to vi'), is contained within <a> </a> tags. The opening <a> tag also contains the name of the file to be retrieved when the link is activated.
Note that the file name is specified using the 'HREF='
attribute and that the file name is contained within double quotes. Any document
specified using the 'HREF=' attribute must be
contained within double quotes. It is easy, when specifying links, to
omit one or both of the quotes. Some browsers may overlook the error - others
won't.
Note also that this link does not specify a location for the file to be retrieved. Therefore it must be in the same location as the document that contains the link.
You can specify a file that is located in a different directory. For example, if the document sample2.html was contained in a subdirectory called sample-files, below the directory that contains the current document, the link would look like:
<A HREF="sample-files/sample2.html">View the sample
document.</A>
This is a relative reference. By not specifying a / at
the start of the directory path, the path must be located relative to the
document which contains the link.
An absolute directory path can be specified if required. Bear in mind, however, that such a path is still relative to the specified root directory of the server you are using. For example, the link
<A
HREF="/courses/wwwintro/guide.61/guide.toc.html">Guide to
Cyberspace</A>
specifies a link to an HTML file called guide.toc.html. It is found in the directory /courses/wwwintro/guide.61 relative to the server root. That is, there must be a directory called courses, with appropriate subdirectories, directly below the top level directory of the server.
Note that pathnames are specified using standard UNIX syntax. This
means that the / symbol is used to separate different
directories.
For those publishing their documents using a DOS/Windows server, your directory names must still conform with DOS requirements. However when you specify these directories inside your HTML files, you must use UNIX syntax - not DOS.
For those publishing their documents using a Macintosh server, the UNIX directory names you specify will be the equivalent of folders. You should not to use spaces in the names of any folders that will contain your HTML files.
You should also avoid using other special characters that may cause problems across other platforms. In general, you should just use the letters "A ... Z", "a ... z", and "-" or "_" in file names and folder names.
It is recommended that a particular group of HTML files that together comprise a larger or 'meta' document, be grouped together in a single directory. The links between these files should be relative ones - they should not specify a pathname. For example, the following link is to a document that provides a general overview of the World Wide Web.
Guide to Cyberspace (Use the back button in your browser to return to this document.)
It is in fact made up of a set of smaller documents that are linked together. The documents that make up the guide can be seen with the following link.
File list of documents comprising Guide to Cyberspace (Use the back button in your browser to return to this document.)
Here is a small snippet of code from the table of contents document, showing the use of relative links...
<h1>Table of Contents</h1> <ul> <li> <a href="guide.01.html">What is the World-Wide Web?</a> <li> <a href="guide.02.html">What is hypertext and hypermedia?</a> <li> <a href="guide.03.html">What is the Internet?</a> <li> <a href="guide.04.html">How was the Web created?</a> <li> <a href="guide.05.html">How popular is the Web?</a>
These documents can be moved from one directory to another, or one computer to another and the links will still work correctly - as long as the documents are kept together in the same directory.
Additional resources, like images, sounds and video files are often kept in sub-directories below the document directory. References to these resources will also be made using a relative reference.
Links to other documents that are not part of the 'meta' document should be specified using an absolute reference. That way, if the files are moved to a new directory any links to external documents will still work correctly.
In this exercise you will create an HTML document that will contain links to the solutions you have created to the previous exercises.
Create a directory called "HTML_Ex" on your local hard disk.
Move all the HTML files you have created as solutions to the previous exercises in the "HTML_Ex" directory.
Load the html file for the exercise. This file contains the HTML for the header and footer of the document.
Save a copy of the html file as "Ex7.html" in the "HTML_Ex" directory.
Use a text editor to edit the file and add relative links to the HTML files you created in the previous exercises.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 7. The solution shows you the markup tags and then the appearance of the code.
A hypertext link can be to a document that exists on another server anywhere else on the Internet. It can also be in a format other than that used for the World Wide Web. When you link to a document across the network, you must specify the document's Uniform Resource Locator (URL).
A URL is made up of a protocol, a host name with an optional port number, a path an a file name. For example the URL for this document is:
http://www.unimelb.edu.au:801/courses/publish/IntroHTML.html
The protocol is http (the protocol used to transmit World Wide Web documents). The host name is www.unimelb.edu.au. The port is 801 which differs from the default port for the http protocol (port 80). The path is courses/publish and the file name is IntroHTML.html.
In general the syntax for a URL is:
protocol://hostname[:port]/path/filename
Most World Wide Web browsers have built in support for a wide variety of different protocols. They include:
For example:
<a href="http://www.w3.org/hypertext/WWW/TheProject.html">The CERN World Wide Web home page</a>
creates the World Wide Web link:
<a href="gopher://info.anu.edu.au/11/other/by.place">Library OPACs around the world</a>
creates the gopher link:
<a href="wais://archie.au/au-directory-of-servers?research">Wais query on research</a>
creates a link to perform a wais query using the search term 'research':
<a href="ftp://www.unimelb.edu.au/pub/cwis/clients/">World Wide Web client software</a>
creates a link to an anonymous ftp site of World Wide Web client software:
<a href="telnet://library.anu.edu.au/">Australian National University library OPAC</a>
creates the following telnet connection:
<a href="news:comp.infosystems.www.misc">World Wide Web users news group</a>
creates a link to the comp.infosystems.www.misc news group:
<a href="mailto:cwis@www.unimelb.edu.au">Send email to the CWIS Team</a>
invokes an emailer to send email to the address cwis@www.unimelb.edu.au
Further information on URLs is available in the document A Beginner's Guide to URLs. The URL for this document is:
In this exercise you will modify the solution to Exercise 7 to incorporate some additional links. The first will be to this document and the second will be to another document on HTML.
Using a text editor, open the file "Ex7.html" on your local hard disk.
Create a link to the Introductory section of this document. Use the text "Introduction to HTML Course" as the link text.
Save the file as "Ex8.html".
Open the file with your browser and check the link.
If you wish, you can check your HTML using our HTML validation service.
Use your World Wide Web browser to locate the URL of another document about HTML.
Edit "Ex8.html" and add a link to the HTML document using the URL you found.
Use you browser to check the link you have just created.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 8. Your solution may well be different if you located a different document on HTML.
The anchor tag can also be used to create links inside a single document. The <a>...</a> tags are used to mark some text that will become the destination of a link. Often these will be section or sub-section headings. Once you have marked some text you can then specify a link to the marked text.
To mark text, use the NAME attribute in the anchor tag. For
example, the following code creates a named anchor, called 'sample_link' around
some sample text.
<a name="sample_link">Sample named anchor text</a>
Note that the anchor text is contained within the <a>...</a> tags.
To create a link to the named anchor, use a # symbol followed by the named anchor in the link specification. For example to jump to the anchor 'sample_link', create a link as follows:
<a href="#sample_link">You can have links inside documents</a>
When you click on the link created by this code, you will jump to the specified anchor point.
You can also specify a named anchor in another document. For example the following code creates a link to a section on URLs in the document Guide to Cyberspace.
<a href="http://www.unimelb.edu.au:801/courses/wwwintro/guide.61/guide.10.html#2">
About Uniform Resource Locators</a>
The file name is guide.10.html and the named anchor is #2. In this example, a full URL has been used to specify the document location. If the second document, containing the named anchor, resides in the same directory as the first document, a relative reference should be used.
Named anchors have been used extensively in this document to create the
navigational aids that are available in each section. Use your browser's
View Source function to see how they have been implemented.
In the first part of this exercise you will download an HTML file and then add anchor points to the headings. You will then add links at the top of the document to create a table of contents. In the second part, you will create a table of contents as a separate file.
Load the html file for the exercise. This is the Introduction to vi file viewed earlier.
Save a copy of the html file, locally, on your own hard disk as "Ex9a.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the file using a text editor.
Enclose all the headings in anchor points.
Create a new section, just prior to the Introduction section, and put in links to all the anchor points you created. Use the text of the headings as the link text.
Open the file with your World Wide Web browser and check the links you created.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 9a. The solution shows you the markup tags and then the appearance of the code. Only the heading tags are shown, the actual document text has been removed for compactness.
Save a copy of the html file, locally, on your own hard disk as "Ex9b.html". If your browser does not save the html file correctly, try viewing the source and copying this to a text editor.
Open the saved html file using a text editor and add links to all the anchor points in the file you created in Exercise 9a.
Open "Ex9b.html" with your World Wide Web browser and check the links you created.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 9b. The solution shows you the markup tags and then the appearance of the code.
There are several points to keep in mind when creating links. By following the guidelines suggested below, you should ensure that your document can be read properly across any browser that conforms with the HTML syntax.
When you are creating a link, make sure that the text in the link is meaningful. The link text should flow naturally within the document and should not inhibit readability. Early World Wide Web documents often used the text 'click here' as the link text. For example:
To view the sample document click here.
(Created using the following HTML code:
To view the sample document <a
href="sample1.html">click here</a>.)
Bear in mind that not every browser activates links using a mouse. For example, the terminal-based browser lynx requires you to press the return key to activate a link. A better way to create the link is to use the text 'view the sample document' as the link item. For example:
(<a href="sample1.html">View the sample
document.</a>)
Check your links!
It is very frustrating, when you are reading an HTML document, to be given an error message when you follow a link. After you have created a document that contains hypertext links you should follow every one to make sure that you haven't made any mistakes.
Much of the interest in the World Wide Web focuses on its capacity to incorporate images, sound and video into documents that can be delivered across the network to different platforms.
The multimedia capacities of the World Wide Web are probably more limited than specialized multimedia applications developed for specific platforms. The strength of the World Wide Web lies in its capacity to deliver the same minimum standard to Macintosh, Windows and UNIX computers.
This is achieved by the use of appropriate 'helper' applications for each individual platform. The display or playing of a multimedia object is not handled by the browser itself but passed to a specified application that can deal with the format of the object.
The exception to this is the display of in-line images which are reproduced by the browser itself - if the browser is graphical rather than text based.
Many World Wide Web documents incorporate images within the text to add extra flair to the document. On occasion, an image is included that provides extra information beyond the content of the text. However, it is fair to say that many Web documents suffer from 'GUI' - Gratuitous Use of Images.
Using images to 'liven' up a document can be fun but try to keep in mind that there is a network penalty to be paid by people retrieving documents with a large number of images or even a small number of large images.
You should also consider that there will be some people who are not using a graphics-based browser and so will not be able to view images. The vt100 browser Lynx, for example, is widely used but can only display text.
To include an image within your document, use a statement of the form:
<img src="image.URL" [align="..."]
[alt="..."]>
(Items shown within [ ]'s are optional and can be omitted.)
Graphical browsers can display the image within the document if it is a GIF, which must have a file name extension of .gif, or an X Bitmap (extension .xbm). Other types of image formats can only displayed with the help of an external viewer - they will not be displayed in the document immediately.
The following examples show the use of the <img> tag. The examples
display an image called arches.gif which is located in a directory
called images directly below the directory containing this document.
The image is referred to using a relative URL. For browsers that cannot display
images, the text 'example image' will be displayed instead.
<IMG
SRC="images/arches.gif" ALIGN="top" ALT="example
image">
<IMG
SRC="images/arches.gif" ALIGN="middle" ALT="example
image">
<IMG
SRC="images/arches.gif" ALIGN="bottom" ALT="example
image">
Images can also be referenced using a full URL. This means that an image can be sourced from a completely separate World Wide Web somewhere on the network. For example, the following image:
came from the World Wide Web consortium. It was included in this document using the following reference:
<IMG SRC="http://www.w3.org/hypertext/WWW/Icons/WWW/w3c_96x67.gif">
Like text, an image can be used as a hypertext link. The <img> tag should be included inside the link reference. Be sure to include some 'alt' text for browsers that cannot display images. If you don't, the default text (usually '[IMAGE]') will be displayed as the link text. This is not very meaningful to anyone viewing the document and they may not be aware that there is a link there.
For example the following code uses an image as a link to display the first sample file shown earlier.
<a href="sample1.html"><IMG
SRC="images/point.gif" ALT="view sample
document"></a>
The result is the following image acting as a link:
Using an image as a link on its own may not be a good idea. Depending on the browser, there may not be much indication that the image contains a link. It is usually a good idea to include some text in the link to give some idea where the link is leading.
Links to other types of multimedia objects can also be included in your document. You can include sounds, images using formats other than GIF and video. Objects like these are handled by a World Wide Web browser using an external helper application. The browser does not attempt to render the object itself. Instead it passes the downloaded object to an appropriate application for rendering.
A common method for linking to such objects is to use a thumbnail GIF as a link to the external object. For example a small thumbnail GIF can be used as the link to a large JPEG image. This provides a 'preview' of the external image inside the document.
The following code displays a thumbnail GIF of an image and
makes it a link to an external JPEG file. The external JPEG file is called
Parrots.jpg and the in-line GIF image, used as the link, is called
ParrotsThumb.gif. They are both contained within a sub-directory
called images below the directory containing this document.
<A HREF="images/Parrots.jpg"><IMG
SRC="images/ParrotsThumb.gif" ALT="view parrots
image">(Full image 30 Kb)</A>
Note that the size of the file to be downloaded has been shown. This is so people viewing the document can decide if they wish to select the link. Those with a slow network connection may decide not to download a file if they know it is very large.
When you create a link to an external file you must use the correct file extension. Different file types each have their own predefined extension. The following table summarises the most common file types and their appropriate extension.
-------------------------------------------------------- | File Type | Extension | -------------------------------------------------------- | HTML document | .html | | Plain text file | .txt | | GIF image | .gif | | XBM bitmap image | .xbm | | JPEG image | .jpg or .jpeg or .jpe | | TIFF image | .tiff | | Postscript file | .ps | | MPEG movie | .mpg or .mpeg or .mpe | | QuickTime movie | .mov or .moov or .qt | | SUN sound format | .au or .snd | | Adobe Acrobat file | .pdf | --------------------------------------------------------
The following examples show how to create a link to a sound in SUN sound format and a video in mpeg format respectively.
The following HTML code uses an in-line image and text to link to a sound file in SUN sound format.
<A HREF="sound/clunk.au"><IMG SRC="images/snd-icon.gif" ALIGN="middle> Foghorn Leghorn </A> (62Kb)
This is displayed as:
Foghorn Leghorn (62Kb)
The following HTML code uses an in-line image and text to link to an mpeg video file.
<A HREF="video/sun.mpg"><IMG SRC="images/sun-icon.gif" ALIGN="middle"> MPEG movie of the sun</A> (340Kb)
This is displayed as:
MPEG movie of the sun (340Kb)
In this exercise you will modify your solution to exercise 3, which included text on some Australian birds, to include a link to an image of one of the birds and its call.
You will require local copies of three files for this exercise. Links to each of them are provide below. Before selecting the files, you should turn on the Load to Local Disk option. This will cause the selected files to be automatically saved on your own hard disk, rather than be handed over to a helper application.
Netscape users should use the Save this Link as... feature to save each file. In Windows, hold down the right mouse button on the link. On the Macintosh, hold down the mouse button over the link for a second or two.
If your browser does not include a Load to Local Disk option, select the links and then save them from the helper application that is launched to display them.
The files you require are:
Open the file that contains your solution to exercise 3, it should be called "Ex3-soln.html". Save the file as "Ex10-soln.html".
Modify "Ex10-soln.html" to include the thumbnail image of the magpie. The thumbnail should link to the external image file. You should also include a link to the external sound file of the magpies' call. An example of the way the document could appear is shown below
Open the file with your World Wide Web browser and check the links you created.
If you wish, you can check your HTML using our HTML validation service.
When you are finished you can compare your efforts by viewing the solution to exercise 10. The solution shows you the markup tags and then the appearance of the code.
The document could appear as:
Magpies are a common sight on lawns, parklands and open spaces over much of Australia, especially in the south-east. They are easily identified by bold white patches on the shoulders and back of the head. The sexes are similar, immatures closely resemble adults, and there is no seasonal variation.
The magpies' voice is a rich mellow flute-like or organ-like carolling by one or several birds, usually best in late winter or early spring. The alarm call is a repeated short harsh shout; also a loud drawn-out descending 'peww'.
Pink below and pale grey above, the Galah is absolutely unmistakable; it is one of Australia's most characteristic and distinctive birds. Males and females are nearly identical in appearance, there is no seasonal variation and immatures, though somewhat duller, closely resemble adults.
The Galah's voice consists of a thin high-pitched splintered call, 'chill chill' along with harsher screeches.
The Galah has benefited from land management practices over the last 100 years and now occurs virtually throughout mainland Australia, but is rare in Tasmania.
Well structured HTML documents are designed to assist the reader to view them. Large documents should be broken up into smaller sizes and a table of contents should be provided. The following sections provide further details on how to structure larger HTML documents.
Access to HTML documents will almost always be using a network. This places constraints on the structure of your HTML documents. It is not a good idea to create a single, large HTML document for delivery over the network. This can be very frustrating for people reading your document using a slow network connection. Consider, for example, people who are using a modem to access the World Wide Web.
Instead, large documents should be broken up into smaller 'bite-sized chunks'. People accessing your document will then only download one smaller section at a time.
This has several advantages.
Document retrieval time is better due to the smaller size.
People who are only interested in one small section do not need to download a very large document to view the section they want.
Network traffic load is spread - which is more polite when using slow network connections.
You should examine your document and look for logical subdivisions that will allow you to break it up into smaller sections. Each section then becomes one of a number of documents that together make up a 'meta' document.
The components of the 'meta' document will usually reside together in a single directory on the World Wide Web server. Specialized files like graphics, sounds or videos may well reside in sub-directories below the 'meta' document directory.
A 'meta' document that consists of a very large number of smaller files may well have to be split up into sub-directories. This is to assist you, the publisher, and the server administrator, in the organization and maintenance of the files.
For example, the following listing shows the directory and file structure
for the documents that make up this course. Note that separate sub-directories
have been used to store images, sounds and video objects. A directory, called
Exercises has been used to store all the exercises and their
solutions.
The course document itself has been broken up into 8 chapters plus an introductory document. Together they make up the 'meta' document.
Directory listing of HTML-Course/: ---------------------------------- Ch1.html 9 Kb Hypertext Markup Language Ch2.html 24 Kb Hypertext Markup Language Ch3.html 8 Kb Hypertext Markup Language Ch4.html 10 Kb Hypertext Markup Language Ch5.html 19 Kb Hypertext Markup Language Ch6.html 13 Kb Hypertext Markup Language Ch7.html 4 Kb Hypertext Markup Language Ch8.html 2 Kb Hypertext Markup Language Contents.html 2 Kb Hypertext Markup Language Exercises/ 45 Kb Directory HTML2-DTD-referenc... 45 Kb Hypertext Markup Language HTMLQuickRef.html 15 Kb Hypertext Markup Language IntroHTML-long.html 80 Kb Hypertext Markup Language IntroHTML.html 1 Kb Hypertext Markup Language images/ 80 Kb Directory sample1.html 787 bytes Hypertext Markup Language sample2.html 5 Kb Hypertext Markup Language sound/ 1 Kb Directory validate.html 1 Kb Hypertext Markup Language video/ Directory
Once you have broken your document up into smaller sections, you should include navigational tools to help readers make their way through the 'meta' document.
This should include a table of contents with links to each of the individual sections. The table of contents could just provide links to the top of each section of the document or more detailed links that would 'jump' the reader to a sub-section within the document section. This can be done by taking advantage of the facility to provide links to anchor points embedded within an HTML document.
For example, consider the following section of HTML that creates part of the table of contents for this course.
(Full image 30 Kb)
<P><STRONG>Section 2 : <A HREF="Ch2.html">Tags for basic document
layout</A></STRONG></P>
<UL>
<LI><A HREF="Ch2.html#S2.1">Headings</A></LI>
<LI><A HREF="Ch2.html#S2.2">Lists</A></LI>
<UL>
<LI><A HREF="Ch2.html#S2.2.1">Ordered lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.2">Unordered lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.3">Exercise 2 - Ordered and unordered lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.4">Definition lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.5">Exercise 3 - Definition lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.6">Nested lists</A></LI>
<LI><A HREF="Ch2.html#S2.2.7">Exercise 4 - Nested lists</A></LI>
</UL>
<LI><A HREF="Ch2.html#S2.3">Block quotations</A></LI>
<LI><A HREF="Ch2.html#S2.4">Preformatted text</A></LI>
</UL>
<P><STRONG>Section 3 : <A HREF="Ch3.html">Visual effects</A></STRONG></P>
<UL>
<LI><A HREF="Ch3.html#S3.1">Logical styles</A></LI>
<LI><A HREF="Ch3.html#S3.2">Physical styles</A></LI>
<LI><A HREF="Ch3.html#S3.3">Special characters</A></LI>
<LI><A HREF="Ch3.html#S3.4">Exercise 5 - Visual effects</A></LI>
</UL>
Note that each section has a link from the contents page to the top of the section. In addition there are links to all the main sub-sections within each section. This is done by attaching named anchors to all the headings in each section. The table of contents can then be created with links to every heading within each section of the document.
Within each document there should be a link back to the contents page as well as links forward to the next section and back to the previous section. These links should be available at the top and bottom of the document.
In addition you could provide each document with its own table of contents. This will assist readers to move around within the current document. This is fairly straight forward if the anchor points have already been created for an external table of contents.
Other aids could include a searching facility across the set of documents (most browsers can search within a document). However the availability of such a service will depend on the functionality of the server.
This course introduced the HTML tags used to create HTML documents. There are other HTML tags, that have not been covered, that are used for different purposes. In addition, the definition of HTML is under review and a new version with improved functions is in development. In this section, brief mention is made of other tags that have not been covered in the course and some links are provided to find more information on HTML and its development.
HTML includes tags for describing forms that can be used to input data to a program that runs on a WWW server and tags for creating clickable images that perform different functions depending on where an image is clicked.
Forms can contain text boxes, radio buttons, pop-up menus and check boxes. These are all used to allow the user of the form to supply information that will be used by a program on the server that contains the form.
Examples of form elements include:
These elements are enclosed within <FORM> ... </FORM>
tags.
When the required information has been entered, the form is submitted to the server for processing. The type of processing that will be done depends on the purpose of the form.
The processing on the server will be done by a script or program. Therefore, to be able to use forms effectively, you need to be able to create scripts or programs on the computer you are using as a World Wide Web server (or collaborate with somebody who can).
For additional information on the use of fill out forms refer to the NCSA Fill-out Forms documentation. The URL is:
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html
For a more detailed discussion of the programming that lies behind forms see Gleeson M, Westaway T (1995) 'Beyond Hypertext: Using the WWW for interactive applications', presented at the AusWeb95 conference.. The URL is:
http://www.its.unimelb.edu.au:801/papers/AW04-04/
Refer also to the documentation that accompanies the World Wide Web server software that you are using to serve your HTML documents. The server documentation will usually include information on how to process the data that is received from forms.
Clickable images allow people using graphical browsers to click on a portion
of an in-line image to carry out a defined function. That function may be to
proceed to a new document or it may be to run a program on the server. An
image is made 'live' by including the ISMAP attribute in the
<IMG> tag.
Clickable images, like forms, require special programming support on the World Wide Web server they reside on. If you are unable to provide this yourself you should seek the assistance of the person responsible for running the World Wide Web server you are using.
Clickable images work by defining regions within an image that correspond to different actions on the server. The different regions within the image can be rectangular (including square), circular or a more general polygon. The different shapes are defined by coordinates, measured in pixels, starting from the top, left-hand corner of the image.
The shapes that make up the 'live' areas in an image are defined in a special configuration file that resides on the WWW server. This configuration file is used to map each area within an image to a program or to a URL.
The particular implementation of clickable images will depend on the type of WWW server software that is being used. Many servers have minor, or in some cases major, differences in the way they implement clickable images. You should refer to the documentation that accompanies the server software you are using to find specific instructions on how to create clickable images.
For example, the following URL provides a tutorial on clickable images that are served using the NCSA httpd WWW software:
http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html
This document does not provide a comprehensive guide to all HTML tags. In addition, the HTML standard is still evolving. The following links provide starting points for additional information on HTML.
http://ugweb.cs.ualberta.ca/~gerald/guild/html.html
The HTML Writers Guild, containing lists of links to information in a
variety of areas related to HTML - good.
http://oneworld.wa.com/htmldev/devpage/dev-page.html
The WWW and HTML Developer's Jump Station - a well maintained set of links
including information on HTML.
http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_toc.html
A detailed specification of the HTML 2.0 DTD - fairly technical.
http://home.netscape.com/assist/net_sites/html_extensions.html
Information from Netscape on their own extensions to HTML - Netscape browsers
only can use them.
http://www.cs.cmu.edu/~tilt/cgh/
A style guide on writing good HTML.
http://www.hpl.hp.co.uk/people/dsr/html/CoverPage.html
The Internet Draft for HTML 3.0 - fairly technical.
The mark up of the text file should have been as follows:
<HTML> <HEAD> <TITLE>Introduction to HTML - Exercise 1 Solution</TITLE> </HEAD> <BODY> <H1>Installing Campus Wide Information System browsers</H1> <hr> <p>(An edited excerpt from an article in the ITS Newsletter, August - September,1994.)</p> <hr> <p>The World Wide Web (WWW) is a global information delivery system. It provides users on computer networks with a simple and consistent "point-and-click" interface to the variety of media published on the WWW text, graphics, sound and movies. Access to the Web is through browser software such as NCSA's Mosaic (PC, Macs, X-terminals), MacWeb, or Lynx (Unix and Open VMS).</p> <p>Over 20 departments and affiliated institutions are already running World Wide Web servers which are available on the University's Campus Wide Information Server (CWIS). In addition to the CWIS there is of course the huge array of Internet-based resources accessible through the WWW.</p> <p>All campus computer users can benefit from easy access to this rapidly growing information base. Described below are instructions on how to obtain and install the software needed to access the CWIS on PCs, Macintoshes and Unix platforms.</p> <p>Note that WWW browsers need an underlying layer of network-related software to be in place. This means the prior installation of MacTCP for Macs, Trumpet Winsock for Windows, and for all ethernet connected workstations, an IP number must be allocated by Networks.</p> <H1>Installation of MacWeb on Macintoshes</H1> <p>All necessary software is available from the ITS Public Access server (Chooser, zone=unimelb-UCS, server=ITS Public Access, Guest login).</p> <p>Any Macintosh on the Campus network with System 7 and 1.5 Mbytes of free memory can access the WWW. A prerequisite is the installation of MacTCP 2.0.4.</p> <H1>MacTCP installation</H1> <p>Refer to the MacTCP Technical Note 109 if you have not had MacTCP installed before. Technical Note 109 describes how to ask Networks to allocate an IP number to your workstation. This is required before you proceed. The MacTCP technical note is located on ITS Public Access in the folder Macintosh Support/MacTCP.</p> <p>To install MacTCP 2.0.4, the old version must be removed. On your hard-disk find three files, namely MacTCP (in System Folder/Control Panels), MacTCP DNR (in System Folder) and MacTCP Prep (in System Folder/Preferences). Trash them. The version 2.0.4 control panel is located inside the folder Macintosh Support/MacTCP/MacTCP 2.0.4 on ITS Public Access. Drag the MacTCP control panel to your System Folder, and restart.</p> <H1>MacWeb installation</H1> <p>MacWeb is the recommended WWW browser for slower Macintoshes and those with only 4 Mbyte of memory (Note: NCSA Mosaic for the Mac requires a minimum of 3 Mbyte of memory).</p> <p>Installation is simple. Log on to the ITS Public Access server and copy the folder Macintosh Support/CWIS/MacWeb_Starter_Kit, to your hard-disk.</p> <p>You must now rebuild your desktop. Restart your Macintosh holding down the command and option keys. Open the MacWeb_Starter_Kit on your hard-disk and double-click the MacWeb icon. After a short delay, you should see the University's CWIS homepage.</p> <p>The Mac_WWW_Starter_Kit contains a **READ_ME_FIRST** which contains usage guidelines and explains what to do if any difficulties are encountered.</p> <p>Once you can access the CWIS using MacWeb, complete and up-to-date installation guidelines for further customisation and NCSA Mosaic installation are available online (go to the first item on MacWeb's Hotlist menu, named "MAC WWW - COMPLETE INSTALLATION NOTES").</p> <hr> <p>Created: 10 Nov 1994<br> Last modified: 9 Feb 1995<br> Authorised by: Manager, CSG1, ITS<br> Access: No restrictions<br> Copyright © 1994, The University of Melbourne.</p> <address>Maintainer: David Morton, CSG1, ITS, d.morton@its.unimelb.edu.au </address> </BODY> </HTML>
This will appear as:
(An edited excerpt from an article in the ITS Newsletter, August - September,1994.)
The World Wide Web (WWW) is a global information delivery system. It provides users on computer networks with a simple and consistent "point-and-click" interface to the variety of media published on the WWW text, graphics, sound and movies. Access to the Web is through browser software such as NCSA's Mosaic (PC, Macs, X-terminals), MacWeb, or Lynx (Unix and Open VMS).
Over 20 departments and affiliated institutions are already running World Wide Web servers which are available on the University's Campus Wide Information Server (CWIS). In addition to the CWIS there is of course the huge array of Internet-based resources accessible through the WWW.
All campus computer users can benefit from easy access to this rapidly growing information base. Described below are instructions on how to obtain and install the software needed to access the CWIS on PCs, Macintoshes and Unix platforms.
Note that WWW browsers need an underlying layer of network-related software to be in place. This means the prior installation of MacTCP for Macs, Trumpet Winsock for Windows, and for all ethernet connected workstations, an IP number must be allocated by Networks.
All necessary software is available from the ITS Public Access server (Chooser, zone=unimelb-UCS, server=ITS Public Access, Guest login).
Any Macintosh on the Campus network with System 7 and 1.5 Mbytes of free memory can access the WWW. A prerequisite is the installation of MacTCP 2.0.4.
Refer to the MacTCP Technical Note 109 if you have not had MacTCP installed before. Technical Note 109 describes how to ask Networks to allocate an IP number to your workstation. This is required before you proceed. The MacTCP technical note is located on ITS Public Access in the folder Macintosh Support/MacTCP.
To install MacTCP 2.0.4, the old version must be removed. On your hard-disk find three files, namely MacTCP (in System Folder/Control Panels), MacTCP DNR (in System Folder) and MacTCP Prep (in System Folder/Preferences). Trash them. The version 2.0.4 control panel is located inside the folder Macintosh Support/MacTCP/MacTCP 2.0.4 on ITS Public Access. Drag the MacTCP control panel to your System Folder, and restart.
MacWeb is the recommended WWW browser for slower Macintoshes and those with only 4 Mbyte of memory (Note: NCSA Mosaic for the Mac requires a minimum of 3 Mbyte of memory).
Installation is simple. Log on to the ITS Public Access server and copy the folder Macintosh Support/CWIS/MacWeb_Starter_Kit, to your hard-disk.
You must now rebuild your desktop. Restart your Macintosh holding down the command and option keys. Open the MacWeb_Starter_Kit on your hard-disk and double-click the MacWeb icon. After a short delay, you should see the University's CWIS homepage.
The Mac_WWW_Starter_Kit contains a **READ_ME_FIRST** which contains usage guidelines and explains what to do if any difficulties are encountered.
Once you can access the CWIS using MacWeb, complete and up-to-date installation guidelines for further customisation and NCSA Mosaic installation are available online (go to the first item on MacWeb's Hotlist menu, named "MAC WWW - COMPLETE INSTALLATION NOTES").
The code required to produce the lists is as follows:
<p>Macintosh browsers:</p>
<ul>
<li><p>Mosaic Netscape - a fully featured browser. Current version is
version 0.9beta. Prefers 3MB of RAM to run.</p></li>
<li><p>NCSA Mosaic - a fully featured browser available in a Power Mac
and 68K versions. Current version is 2.0alpha8. Prefers 3MB of
RAM to run.</p></li>
<li><p>Macweb - a fully featured browser. Current version is
1.00alpha2.2. Prefers 2MB of RAM but can run OK in
1.5MB.</p></li>
</ul>
<p>Windows browsers:</p>
<ol>
<li><p>Mosaic Netscape - a fully featured browser. Current version is
version 0.9beta. Requires Winsock.</p></li>
<li><p>NCSA Mosaic - a fully featured browser available in a Power Mac
and 68K versions. Current version is 2.0alpha7. Requires Winsock
and Win32s installation.</p></li>
<li><p>Winweb - a fully featured browser, although lacks telnet
URLs. Current version is 1.00alpha2.1 Requires Winsock.
</p></li>
</ol>
They will appear as:
Macintosh browsers:
Mosaic Netscape - a fully featured browser. Current version is version 0.9beta. Prefers 3MB of RAM to run.
NCSA Mosaic - a fully featured browser available in a Power Mac and 68K versions. Current version is 2.0alpha8. Prefers 3MB of RAM to run.
Macweb - a fully featured browser. Current version is 1.00alpha2.2. Prefers 2MB of RAM but can run OK in 1.5MB.
Windows browsers:
Mosaic Netscape - a fully featured browser. Current version is version 0.9beta. Requires Winsock.
NCSA Mosaic - a fully featured browser available in a Power Mac and 68K versions. Current version is 2.0alpha7. Requires Winsock and Win32s installation.
Winweb - a fully featured browser, although lacks telnet URLs. Current version is 1.00alpha2.1 Requires Winsock.
The code required to produce the definition list is as follows:
<dl> <dt><strong>Australian Magpie</strong> <em>Gymnorhina Tibicen</em></dt> <dd> <p>Magpies are a common sight on lawns, parklands and open spaces over much of Australia, especially in the south-east. They are easily identified by bold white patches on the shoulders and back of the head. The sexes are similar, immatures closely resemble adults, and there is no seasonal variation.</p> <p>The magpies' voice is a rich mellow flute-like or organ-like carolling by one or several birds, usually best in late winter or early spring. The alarm call is a repeated short harsh shout; also a loud drawn-out descending 'peww'.</p> </dd> <dt><strong>Galah</strong> <em>Cacatua Roseicapila</em></dt> <dd> <p>Pink below and pale grey above, the Galah is absolutely unmistakable; it is one of Australia's most characteristic and distinctive birds. Males and females are nearly identical in appearance, there is no seasonal variation and immatures, though somewhat duller, closely resemble adults.</p> <p>The Galah's voice consists of a thin high-pitched splintered call, 'chill chill' along with harsher screeches.</p> <p>The Galah has benefited from land management practices over the last 100 years and now occurs virtually throughout mainland Australia, but is rare in Tasmania.</p> </dd> </dl>
The definition list will appear as:
Magpies are a common sight on lawns, parklands and open spaces over much of Australia, especially in the south-east. They are easily identified by bold white patches on the shoulders and back of the head. The sexes are similar, immatures closely resemble adults, and there is no seasonal variation.
The magpies' voice is a rich mellow flute-like or organ-like carolling by one or several birds, usually best in late winter or early spring. The alarm call is a repeated short harsh shout; also a loud drawn-out descending 'peww'.
Pink below and pale grey above, the Galah is absolutely unmistakable; it is one of Australia's most characteristic and distinctive birds. Males and females are nearly identical in appearance, there is no seasonal variation and immatures, though somewhat duller, closely resemble adults.
The Galah's voice consists of a thin high-pitched splintered call, 'chill chill' along with harsher screeches.
The Galah has benefited from land management practices over the last 100 years and now occurs virtually throughout mainland Australia, but is rare in Tasmania.
The code required to produce the nested list is as follows:
<p><strong>The makeup of an HTML document</strong></p>
<ol>
<li><p>The <strong>HEAD</strong> section.</p>
<p>The HEAD section can contain the following elements:</p>
<ul>
<li> TITLE - The title of the document.</li>
<li> ISINDEX - Indicates that the document is searchable.</li>
<li> NEXTID - Used to create unique identifiers for HTML documents
(<em>not in common usage</em>).</li>
<li> LINK - Defines the relationship between the current document
and others (<em>not in common usage</em>).</li>
<li> BASE - The original URL of the document, used when the document
is moved to a different location (<em>not in common usage</em>).</li>
</ul>
<p></p>
</li>
<li><p>The <strong>BODY</strong> section.</p>
<p>The BODY section can contain the following elements:</p>
<ul>
<li> HEADINGS - Six levels of headings H1, H2 ... H6.</li>
<li> HR - Horizontal ruler.</li>
<li> P - Paragraphs containing text or other HTML elements.</LI>
<li> OL, UL, DL - Ordered, Unordered, Definition lists.</li>
<li> PREFORMATTED - Text displayed in a fixed width, mono-spaced
font.</li>
<li> BLOCKQUOTE - A block of text that is to stand out in same way
from other nearby text.</li>
<li> A - Hypertext anchor to some other object or document. Also
marks an anchor point for links.</li>
<li> IMG - In-line GIF or XBM image.</li>
<li> FORM - Sophisticated interface for controlling the action of
scripts running on a World Wide Web server.</li>
<li> ADDRESS - Used for address information, signatures, authorship,
etc.</li>
</ul>
</li>
</ol>
<p>The HEAD and BODY sections are enclosed in HTML tags.</p>
The nested list will appear as:
The makeup of an HTML document
The HEAD section.
The HEAD section can contain the following elements:
The BODY section.
The BODY section can contain the following elements:
The HEAD and BODY sections are enclosed in HTML tags.
The text file could be marked up as follows:
<H1>Bringing the Internet to Your Desktop</H1>
<P>A one day seminar on how to effectively access Internet resources.
This will include discovering information sources on World Wide Web and
Gopher; anonymous ftp using your browser; participating in Internet
News discussion groups. Much of this will be conducted using a World
Wide Web browser.</P>
<HR>
<P>The program will be as follows:</P>
<OL>
<LI><p>Introduction and welcome.</p></LI>
<LI><p>Brief overview of Internet services, including:</p>
<UL>
<LI> World Wide Web</LI>
<LI> Gopher</LI>
<LI> Ftp</LI>
<LI> Internet News</LI>
</UL>
<P></P>
</LI>
<LI><P>Using a World Wide Web browser.</P></LI>
<LI><P>Resource discovery.</P>
<P>The Internet provides many ways of accessing different resources.
This section will cover a number of different stratagies for locating useful
resources in your discipline.</P>
<DL>
<DT>4.1 Useful indexes of World Wide Web documents.</DT>
<DD>
<p>A number of large indexes of documents will be examined, including
the Virtual Library, Lycos and John December's Guide to Internet
Resources.</p>
</DD>
<DT>4.2 Veronica.</DT>
<DD>
<p>Veronica provides an index of information available in 'Gopher
Space'. You will learn stratagies for using Veronica to locate
information you are interested in.</p>
</DD>
<DT>4.3 Archie.</DT>
<DD>
<p>Archie is an index of files held at most anonymous ftp sites
available on the Internet. You will learn techniques on how to conduct
an archie search to locate a program or file you are interested
in.</p>
</DD>
</DL>
<P></P>
</LI>
<LI><p>Internet News.</p>
<P>How to read Internet news. Subscribing and un-subscribing to news
groups. How to reply to a news posting. News etiquette.</P>
</LI>
</OL>
<HR>
<P>A light lunch will be provided, along with morning and afternoon tea.
Places are limited so book early!</P>
This will be displayed as:
A one day seminar on how to effectively access Internet resources. This will include discovering information sources on World Wide Web and Gopher; anonymous ftp using your browser; participating in Internet News discussion groups. Much of this will be conducted using a World Wide Web browser.
The program will be as follows:
Introduction and welcome.
Brief overview of Internet services, including:
Using a World Wide Web browser.
Resource discovery.
The Internet provides many ways of accessing different resources. This section will cover a number of different stratagies for locating useful resources in your discipline.
A number of large indexes of documents will be examined, including the Virtual Library, Lycos and John December's Guide to Internet Resources.
Veronica provides an index of information available in 'Gopher Space'. You will learn stratagies for using Veronica to locate information you are interested in.
Archie is an index of files held at most anonymous ftp sites available on the Internet. You will learn techniques on how to conduct an archie search to locate a program or file you are interested in.
Internet News.
How to read Internet news. Subscribing and un-subscribing to news groups. How to reply to a news posting. News etiquette.
A light lunch will be provided, along with morning and afternoon tea. Places are limited so book early!
The text file could be marked up as follows:
<H1>Bringing the Internet to Your Desktop</H1>
<P>A one day seminar on how to effectively access Internet resources.
This will include discovering information sources on World Wide Web and
Gopher; anonymous ftp using your browser; participating in Internet
News discussion groups. Much of this will be conducted using a World
Wide Web browser.</P>
<HR>
<H2>The program will be as follows:</H2>
<OL>
<LI><p><strong>Introduction and welcome.</strong></p></LI>
<LI><p><strong>Brief overview of Internet services, including:</strong></p>
<UL>
<LI> World Wide Web</LI>
<LI> Gopher</LI>
<LI> Ftp</LI>
<LI> Internet News</LI>
</UL>
<P></P>
</LI>
<LI><P><strong>Using a World Wide Web browser.</strong></P></LI>
<LI><P><strong>Resource discovery.</strong></P>
<P>The Internet provides many ways of accessing different resources.
This section will cover a number of different stratagies for locating useful
resources in your discipline.</P>
<DL>
<DT>4.1 Useful indexes of World Wide Web documents.</DT>
<DD>
<p>A number of large indexes of documents will be examined, including
the Virtual Library, Lycos and John December's Guide to Internet
Resources.</p>
</DD>
<DT>4.2 Veronica.</DT>
<DD>
<p>Veronica provides an index of information available in 'Gopher
Space'. You will learn stratagies for using Veronica to locate
information you are interested in.</p>
</DD>
<DT>4.3 Archie.</DT>
<DD>
<p>Archie is an index of files held at most anonymous ftp sites
available on the Internet. You will learn techniques on how to conduct
an archie search to locate a program or file you are interested
in.</p>
</DD>
</DL>
<P></P>
</LI>
<LI><p><strong>Internet News.</strong></p>
<P>How to read Internet news. Subscribing and un-subscribing to news
groups. How to reply to a news posting. News etiquette.</P>
</LI>
</OL>
<HR>
<P>A light lunch will be provided, along with morning and afternoon tea.
Places are limited so book early!</P>
This will be displayed as:
A one day seminar on how to effectively access Internet resources. This will include discovering information sources on World Wide Web and Gopher; anonymous ftp using your browser; participating in Internet News discussion groups. Much of this will be conducted using a World Wide Web browser.
Introduction and welcome.
Brief overview of Internet services, including:
Using a World Wide Web browser.
Resource discovery.
The Internet provides many ways of accessing different resources. This section will cover a number of different stratagies for locating useful resources in your discipline.
A number of large indexes of documents will be examined, including the Virtual Library, Lycos and John December's Guide to Internet Resources.
Veronica provides an index of information available in 'Gopher Space'. You will learn stratagies for using Veronica to locate information you are interested in.
Archie is an index of files held at most anonymous ftp sites available on the Internet. You will learn techniques on how to conduct an archie search to locate a program or file you are interested in.
Internet News.
How to read Internet news. Subscribing and un-subscribing to news groups. How to reply to a news posting. News etiquette.
A light lunch will be provided, along with morning and afternoon tea. Places are limited so book early!
The HTML code required to display the paragraphs correctly is as follows.
A number of tags used in the BODY section do not require end
tags. They are <BR>, <HR> and
<IMG>.
Our latest release is "Parrots & Pigeons of Australia"
and is available now in good bookstores (rrp $74.95).
The escape sequence for the & character is
"&amp;".
It will be displayed as:
A number of tags used in the BODY section do not require end tags. They are <BR>, <HR> and <IMG>.
Our latest release is "Parrots & Pigeons of Australia" and is available now in good bookstores (rrp $74.95).
The escape sequence for the & character is "&".
This is a sample of the way that the text could be marked up.
<H1>Archie</H1> <P>Archie maintains a world-wide database of the files stored on about 900 anonymous ftp sites around the world. Currently it contains information on approximately 2.1 million files. These files are available by ftp access using the InterNet.</P> <P>There are a number of archie sites around the world, including one here in Australia, called <STRONG>archie.au</STRONG>. When you connect to archie.au by telnet, you will automatically begin using the interactive archie interface. This allows you to search the database to find the location of a particular file you wish to download using ftp.</P> <P>In addition, copies of a number of large overseas archive sites are kept on the archie machine. These copies, known as mirrors, are updated regularly. Often you may find it unnecessary to connect to an overseas archive site to retrieve a file. Instead, you can connect to the local mirror of the site and copy the file you want from there. This will usually be faster and will also reduce the international traffic on the InterNet.</P> <HR> <H2>Using the archie interface</H2> <P>The interactive archie interface allows you to search through the database of files available for anonymous ftp. You can search the database by providing all or part of the name of the file you wish to ftp. If there are any matches, they will be displayed, showing the name of the host machine that has the file and the directory the file is stored in.</P> <P>Using this information, you can then connect to the host and transfer the file using anonymous ftp. If you are using a Macintosh, you can use <STRONG>Fetch</STRONG> to get the file.</P> <HR> <H3>Connecting</H3> <P>To search the archie database you must make a telnet connection to the archie host. The name of the Australian machine is <STRONG>archie.au</STRONG> (IP number 139.130.4.6). Do not make an ftp connection.</P> <P>When you have opened the connection , you will be prompted for a login id. Login as <B>archie</B> (no capitals, no password required). Once you have logged in you can begin to search the archie database.</P> <HR> <H3>A simple search</H3> <P>By default, archie will perform a keyword search of the database. To search for a piece of software, you can type in as much of the name of the software as you know. Searching is done using the <STRONG>find</STRONG> command.</P> <P>For example to search for ftp sites that contain the screen capture program <CITE>Flash-it</CITE> for the Macintosh, you could use the command:</P> <P><KBD>find flash-it<cr></KBD></P> <P>This will produce a listing showing the the ftp sites that contain any files whose name includes the string "flash-it". For each ftp site, the name of the host machine and its IP number are shown. In addition, the directory and name of the matching file (or files) are displayed.</P> <P>You can then use this information to obtain a copy of the file using FTP. If you use a Macintosh, you can use Fetch to transfer the file from the archive down to your Mac. Fetch provides a much easier interface then the normal ftp command line interface.</P> <HR> <H3>Setting the environment</H3> <P>A number of variable are used by archie to control aspects of the way archie operates. For example, the <VAR>maxhits</VAR> variable specifies a limit on how many matches are allowed when you do a search. The value can range between 0-1000. The default value is 100.</P> <P>Another variable controls the type of search carried out when you use the find command. Options include displaying only exact matches to the string you supplied for the search; using Unix regular expressions to specify a search string; specifying case insensitive searches or case sensitive searches.</P> <P>There is also a setting to control the way the results are displayed. By default, search results are displayed in a continuous listing. When you set the <VAR>pager</VAR> option, the display will pause at each full screen. This option also allows you to search through the results using commands similar to the Unix 'more' command.</P> <H4>Show</H4> <P>The show command is used to display the current environment settings. Just type <KBD>show</KBD> at the archie prompt. You will then be provided with a list of your current archie environment settings.</P> <P><KBD>show<cr></KBD></P> <PRE># 'autologout' (type numeric) has the value '60'. # 'collection' (type string) has the value 'anonftp'. # 'compress' (type string) has the value 'none'. # 'encode' (type string) has the value 'none'. # 'language' (type string) has the value 'english'. # 'mailto' (type string) is not set. # 'maxhits' (type numeric) has the value '100'. # 'output_format' (type string) has the value 'verbose'. # 'pager' (type boolean) is not set. # 'search' (type string) has the value 'regex'. # 'sortby' (type string) has the value 'none'. # 'status' (type boolean) is set. # 'term' (type string) has the value 'vt100 24 80'. # 'max_split_size' (type numeric) has the value '51200'. # 'server' (type string) has the value 'localhost'. </PRE> <H4>The set command </H4> <P>The <VAR>set</VAR> command is used to change your current archie environment settings. The following examples show how to set some of the more important environment variables.</P> <DL> <DT><CODE>set pager<cr></CODE></DT> <DD><P>The auomatic 'paging' feature will be turned on. The display of search results will be paused at each full screen. In addition, you can search through the results for a particular string using Unix 'more' commands.</P></DD> <DT><CODE>set maxhits 1000<cr></CODE></DT> <DD><P>The limit on the number of matches from a search that will be displayed is changed to 1000. This is the largest value that you can set.</P></DD> <DT><CODE>set search sub<cr></CODE></DT> <DD><P>Sets the <VAR>find</VAR> command to use a case insensitive substring search. For example, if the 'sub' option has been set, the command</P> <P><CODE>find stuff<cr></CODE></P> <P>will find (along with others) the following files:</P> <PRE>color.stuff STUFFIT.HQX stuffit-expander-3-0.hqx Movie_stuff </PRE> <P>Note that each of these filenames contains the text 'stuff'. Note also that there are matches in both upper and lower case.</P> <P>The default search, if it is not changed to 'sub', will be case sensitive. In the above example, the filename <CITE>STUFFIT.HQX</CITE> would not match.</P></DD> <DT><CODE>set term<cr></CODE></DT> <DD><P>The standard terminal emulation, when you login to archie, is a vt100 using 24 lines and 80 columns. If your screen can display more lines, and your telnet program has been configured correctly, you can use this program to alter this default setting. For example, the command</P> <P><CODE>set term vt100 72 80</CODE></P> <P>will increase the number of rows to be 72. This is suitable for a Macintosh A4 display. Alternatively, you can use this command to choose a different terminal type. For example, the command:</P> <P><CODE>set term xterm 60 100</CODE></P> <P>sets the terminal type to be an xterm with 60 rows and 100 columns.</P></DD> </DL> <HR> <H3>Mailing the search results</H3> <P>When you have finished a search and the results have been displayed, you can have the results sent to you using e-mail. The <VAR>mail</VAR> command can be used to mail you the output from your last command. The e-mail address you use should be a conventional Internet address.</P> <P>For example if the last command that produced output, by user David Morton, was a find command and he wished to have the results e-mailed to him, he could use one of the following commands.</P> <UL> <LI><KBD>mail David_Morton.UCSAMAIL@mac.unimelb.edu.au</KBD> (Macintosh)</LI> <LI><KBD>mail Daid=Morton%ITS@pc.unimelb.edu.au</KBD> (Banyan Vines)</LI> <LI><KBD>mail david@ariel.its.unimelb.edu.au</KBD> (Unix)</LI> </UL> <P>Archie will mail the output to the specified e-mail address. If the output is very large, it will be divided up into smaller pieces. Each piece will be mailed seperately.</P> <P>Note thate the mail command can be used to mail the results of other commands-not just the find command.</P> <P>See technical note 101, 'Network Mail Addressing' for more information on e-mail addresses. Also refer to the appropriate technical note for your mail system.</P> <HR> <H3>Getting help </H3> <P>On-line help on using archie is available. To enter the help system, type <KBD>help</KBD>. The command line prompt will change to show that you are using help. To list the topics that help is available on, enter a question mark (?). A list of subtopics will be displayed.</P> <PRE># Subtopics: # about # compress # bugs # bye # done # email # exit # find # general # help # list # mail # motd # nopager # pager # prog # quit # regex # servers # set # show # site # term # unset # version # whatis # stty # manpage # path </PRE> <P>To find more information on one of the topics listed, enter the name of the topic. At any level, you can enter a question mark to see if there is a list of further subtopics.<P> <P>For example, to get help on the <VAR>set</VAR> command, type in <KBD> set</KBD> at the help prompt. Information on using the set command will be displayed. A list of subtopics related to the set command can be seen by entering a question mark.</P> <P>To exit from the help system, press the return key until you return to the normal archie prompt.</P> <P>Alternatively if you want help on a specific topic or subtopic, enter the command <KBD>help</KBD> followed by the command or topic you wish. For example, to get help on using the <VAR>set pager</VAR> command, enter the following command.</P> <P><CODE>help set pager<cr></CODE></P> <BLOCKQUOTE><P> Takes you directly into the help system and display the available information on using the pager option with the set command.</P></BLOCKQUOTE> <H4>manpage</H4> <P>The <VAR>manpage</VAR> command displays the archie manual page. The command requires that a particular format for the manpage document be specified. To list the document using a plain text format, you can use the <VAR>ascii</VAR> option. The command then takes the form:</P> <P><CODE>manpage ascii</CODE></P> <P>Note that once the listing of the manpage document has finished, you can mail it to yourself using the <VAR>mail</VAR> command.</P>
It will be displayed as:
Archie maintains a world-wide database of the files stored on about 900 anonymous ftp sites around the world. Currently it contains information on approximately 2.1 million files. These files are available by ftp access using the InterNet.
There are a number of archie sites around the world, including one here in Australia, called archie.au. When you connect to archie.au by telnet, you will automatically begin using the interactive archie interface. This allows you to search the database to find the location of a particular file you wish to download using ftp.
In addition, copies of a number of large overseas archive sites are kept on the archie machine. These copies, known as mirrors, are updated regularly. Often you may find it unnecessary to connect to an overseas archive site to retrieve a file. Instead, you can connect to the local mirror of the site and copy the file you want from there. This will usually be faster and will also reduce the international traffic on the InterNet.
The interactive archie interface allows you to search through the database of files available for anonymous ftp. You can search the database by providing all or part of the name of the file you wish to ftp. If there are any matches, they will be displayed, showing the name of the host machine that has the file and the directory the file is stored in.
Using this information, you can then connect to the host and transfer the file using anonymous ftp. If you are using a Macintosh, you can use Fetch to get the file.
To search the archie database you must make a telnet connection to the archie host. The name of the Australian machine is archie.au (IP number 139.130.4.6). Do not make an ftp connection.
When you have opened the connection , you will be prompted for a login id. Login as archie (no capitals, no password required). Once you have logged in you can begin to search the archie database.
By default, archie will perform a keyword search of the database. To search for a piece of software, you can type in as much of the name of the software as you know. Searching is done using the find command.
For example to search for ftp sites that contain the screen capture program Flash-it for the Macintosh, you could use the command:
find flash-it<cr>
This will produce a listing showing the the ftp sites that contain any files whose name includes the string "flash-it". For each ftp site, the name of the host machine and its IP number are shown. In addition, the directory and name of the matching file (or files) are displayed.
You can then use this information to obtain a copy of the file using FTP. If you use a Macintosh, you can use Fetch to transfer the file from the archive down to your Mac. Fetch provides a much easier interface then the normal ftp command line interface.
A number of variable are used by archie to control aspects of the way archie operates. For example, the maxhits variable specifies a limit on how many matches are allowed when you do a search. The value can range between 0-1000. The default value is 100.
Another variable controls the type of search carried out when you use the find command. Options include displaying only exact matches to the string you supplied for the search; using Unix regular expressions to specify a search string; specifying case insensitive searches or case sensitive searches.
There is also a setting to control the way the results are displayed. By default, search results are displayed in a continuous listing. When you set the pager option, the display will pause at each full screen. This option also allows you to search through the results using commands similar to the Unix 'more' command.
The show command is used to display the current environment settings. Just type show at the archie prompt. You will then be provided with a list of your current archie environment settings.
show<cr>
# 'autologout' (type numeric) has the value '60'. # 'collection' (type string) has the value 'anonftp'. # 'compress' (type string) has the value 'none'. # 'encode' (type string) has the value 'none'. # 'language' (type string) has the value 'english'. # 'mailto' (type string) is not set. # 'maxhits' (type numeric) has the value '100'. # 'output_format' (type string) has the value 'verbose'. # 'pager' (type boolean) is not set. # 'search' (type string) has the value 'regex'. # 'sortby' (type string) has the value 'none'. # 'status' (type boolean) is set. # 'term' (type string) has the value 'vt100 24 80'. # 'max_split_size' (type numeric) has the value '51200'. # 'server' (type string) has the value 'localhost'.
The set command is used to change your current archie environment settings. The following examples show how to set some of the more important environment variables.
set pager<cr>The auomatic 'paging' feature will be turned on. The display of search results will be paused at each full screen. In addition, you can search through the results for a particular string using Unix 'more' commands.
set maxhits 1000<cr>The limit on the number of matches from a search that will be displayed is changed to 1000. This is the largest value that you can set.
set search sub<cr>Sets the find command to use a case insensitive substring search. For example, if the 'sub' option has been set, the command
find stuff<cr>
will find (along with others) the following files:
color.stuff STUFFIT.HQX stuffit-expander-3-0.hqx Movie_stuff
Note that each of these filenames contains the text 'stuff'. Note also that there are matches in both upper and lower case.
The default search, if it is not changed to 'sub', will be case sensitive. In the above example, the filename STUFFIT.HQX would not match.
set term<cr>The standard terminal emulation, when you login to archie, is a vt100 using 24 lines and 80 columns. If your screen can display more lines, and your telnet program has been configured correctly, you can use this program to alter this default setting. For example, the command
set term vt100 72 80
will increase the number of rows to be 72. This is suitable for a Macintosh A4 display. Alternatively, you can use this command to choose a different terminal type. For example, the command:
set term xterm 60 100
sets the terminal type to be an xterm with 60 rows and 100 columns.
When you have finished a search and the results have been displayed, you can have the results sent to you using e-mail. The mail command can be used to mail you the output from your last command. The e-mail address you use should be a conventional Internet address.
For example if the last command that produced output, by user David Morton, was a find command and he wished to have the results e-mailed to him, he could use one of the following commands.
Archie will mail the output to the specified e-mail address. If the output is very large, it will be divided up into smaller pieces. Each piece will be mailed seperately.
Note thate the mail command can be used to mail the results of other commands-not just the find command.
See technical note 101, 'Network Mail Addressing' for more information on e-mail addresses. Also refer to the appropriate technical note for your mail system.
On-line help on using archie is available. To enter the help system, type help. The command line prompt will change to show that you are using help. To list the topics that help is available on, enter a question mark (?). A list of subtopics will be displayed.
# Subtopics: # about # compress # bugs # bye # done # email # exit # find # general # help # list # mail # motd # nopager # pager # prog # quit # regex # servers # set # show # site # term # unset # version # whatis # stty # manpage # path
To find more information on one of the topics listed, enter the name of the topic. At any level, you can enter a question mark to see if there is a list of further subtopics.
For example, to get help on the set command, type in set at the help prompt. Information on using the set command will be displayed. A list of subtopics related to the set command can be seen by entering a question mark.
To exit from the help system, press the return key until you return to the normal archie prompt.
Alternatively if you want help on a specific topic or subtopic, enter the command help followed by the command or topic you wish. For example, to get help on using the set pager command, enter the following command.
help set pager<cr>
Takes you directly into the help system and display the available information on using the pager option with the set command.
The manpage command displays the archie manual page. The command requires that a particular format for the manpage document be specified. To list the document using a plain text format, you can use the ascii option. The command then takes the form:
manpage ascii
Note that once the listing of the manpage document has finished, you can mail it to yourself using the mail command.
The following HTML code will provide relative links to the solutions to the previous exercises.
<p>The following are my solutions to the Introduction to HTML Course.</P> <UL> <LI><A HREF="Ex1.html">Solution to Exercise 1</A></LI> <LI><A HREF="Ex2.html">Solution to Exercise 2</A></LI> <LI><A HREF="Ex3.html">Solution to Exercise 3</A></LI> <LI><A HREF="Ex4a.html">Solution to Exercise 4a</A></LI> <LI><A HREF="Ex4b.html">Solution to Exercise 4b</A></LI> <LI><A HREF="Ex5a.html">Solution to Exercise 5a</A></LI> <LI><A HREF="Ex5b.html">Solution to Exercise 5b</A></LI> <LI><A HREF="Ex6.html">Solution to Exercise 6</A></LI> </UL>
This will be displayed as:
The following are my solutions to the Introduction to HTML Course.
The following HTML code will provide relative links to the solutions to the previous exercises.
<p>The following are my solutions to the <A HREF="http://www.unimelb.edu.au:801/courses/publish/IntroHTML.html"> Introduction to HTML Course</A>.</P> <UL> <LI><A HREF="Ex1.html">Solution to Exercise 1</A></LI> <LI><A HREF="Ex2.html">Solution to Exercise 2</A></LI> <LI><A HREF="Ex3.html">Solution to Exercise 3</A></LI> <LI><A HREF="Ex4a.html">Solution to Exercise 4a</A></LI> <LI><A HREF="Ex4b.html">Solution to Exercise 4b</A></LI> <LI><A HREF="Ex5a.html">Solution to Exercise 5a</A></LI> <LI><A HREF="Ex5b.html">Solution to Exercise 5b</A></LI> <LI><A HREF="Ex6.html">Solution to Exercise 6</A></LI> </UL> <p>Another document on HTML is <cite>HTML Documentation and Style Guide</cite>. The URL for this document is:</p> <p><a href="http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html"> <code>http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html</code></a> </p>
This will be displayed as:
The following are my solutions to the Introduction to HTML Course.
Another document on HTML is HTML Documentation and Style Guide. The URL for this document is:
http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html
The following HTML code will create anchor points and links for a table of contents. Note that the text of the document has been removed for compactness.
<A NAME="vi0.0"><H1>Introduction to vi</H1></A>
<DL>
<DT><STRONG>After completing this chapter you will be able to:</STRONG></DT>
<DD>
<P></P>
<UL>
<LI> <EM>start vi</EM></LI>
<LI> <EM>create and edit a text file using vi</EM></LI>
<LI> <EM>save a text file in vi</EM></LI>
<LI> <EM>quit vi.</EM></LI>
</UL>
<P></P>
</DD>
</DL>
<HR>
<P>In this Chapter...</P>
<UL>
<LI><A HREF="#vi1.0">Introduction</A></LI>
<LI><A HREF="#vi2.0">Starting vi</A></LI>
<LI><A HREF="#vi3.0">Modes in vi</A></LI>
<LI><A HREF="#vi4.0">Inserting text</A></LI>
</UL>
<HR>
<A NAME="vi1.0"><H2>Introduction</H2></A>
<P>[Text removed from this section]</P>
<HR>
<A NAME="vi2.0"><H2>Starting vi</H2></A>
<P>[Text removed from this section]</P>
<HR>
<A NAME="vi3.0"><H2>Modes in vi</H2></A>
<P>[Text removed from this section]</P>
<HR>
<A NAME="vi4.0"><H2>Inserting text</H2></A>
<P>[Text removed from this section]</P>
This will be displayed as:
In this Chapter...
[Text removed from this section]
[Text removed from this section]
[Text removed from this section]
[Text removed from this section]
The following HTML code will create a table of contents pointing to anchor points in the file "Ex9a.html".
<H1>Contents</H1>
<OL>
<LI><STRONG><A HREF="Ex9a.html">Introduction to vi</A></STRONG>
<UL>
<LI><A HREF="Ex9a.html#vi1.0">Introduction</A></LI>
<LI><A HREF="Ex9a.html#vi2.0">Starting vi</A></LI>
<LI><A HREF="Ex9a.html#vi3.0">Modes in vi</A></LI>
<LI><A HREF="Ex9a.html#vi4.0">Inserting text</A></LI>
</UL>
</LI>
</OL>
This will be displayed as:
The code required to include the link to the magpie image and sounds is as follows:
<dl>
<dt><strong>Australian Magpie</strong> <em>Gymnorhina Tibicen</em></dt>
<dd>
<p><a href="magpie.gif"><img src="magpie.thumb.gif" alt="view magpie"></a></p>
<p>Magpies are a common sight on lawns, parklands and open spaces over
much of Australia, especially in the south-east. They are easily
identified by bold white patches on the shoulders and back of the
head. The sexes are similar, immatures closely resemble adults, and
there is no seasonal variation.</p>
<p>The <a href="magpie-group.au">magpies' voice</a> is a rich mellow
flute-like or organ-like carolling by one or several birds, usually
best in late winter or early spring. The alarm call is a repeated short
harsh shout; also a loud drawn-out descending 'peww'.</p>
</dd>
<dt><strong>Galah</strong> <em>Cacatua Roseicapila</em></dt>
<dd>
<p>Pink below and pale grey above, the Galah is absolutely unmistakable; it
is one of Australia's most characteristic and distinctive birds. Males and
females are nearly identical in appearance, there is no seasonal variation
and immatures, though somewhat duller, closely resemble adults.</p>
<p>The Galah's voice consists of a thin high-pitched splintered call, 'chill
chill' along with harsher screeches.</p>
<p>The Galah has benefited from land management practices over the last 100
years and now occurs virtually throughout mainland Australia, but is rare in
Tasmania.</p>
</dd>
</dl>
The document will appear as:
Magpies are a common sight on lawns, parklands and open spaces over much of Australia, especially in the south-east. They are easily identified by bold white patches on the shoulders and back of the head. The sexes are similar, immatures closely resemble adults, and there is no seasonal variation.
The magpies' voice is a rich mellow flute-like or organ-like carolling by one or several birds, usually best in late winter or early spring. The alarm call is a repeated short harsh shout; also a loud drawn-out descending 'peww'.
Pink below and pale grey above, the Galah is absolutely unmistakable; it is one of Australia's most characteristic and distinctive birds. Males and females are nearly identical in appearance, there is no seasonal variation and immatures, though somewhat duller, closely resemble adults.
The Galah's voice consists of a thin high-pitched splintered call, 'chill chill' along with harsher screeches.
The Galah has benefited from land management practices over the last 100 years and now occurs virtually throughout mainland Australia, but is rare in Tasmania.
Created: 14 Oct 1994
Last modified: 12 Jun 1995
Authorised by: Manager, CSG1, ITS
Access: No restrictions
Copyright © 1994, The University of Melbourne.