<html><!--includes material (c) G.C. '97, '98 A.R.R.-->
<head><title>The basics of HTML</title></head>
<body background="images/tile">
<h3>HTML tutorial</h3>
<p>
<h4><ul>
<li><a href="#Introduction">Introduction</a><br>
<li><a href="#WhatIs">What is HTML?</a><br>
<li><a href="#Basics">The basics of HTML</a><br>
<li><a href="#Paragraphing1">Text paragraphng and delineation</a><br>
<li><a href="#Anchor">The Anchor Tag</a><br>
<li><a href="#Linking">Linking to other HTML files and beyond</a><br>
<li><a href="#Paragraphing2">Further paragraphing features</a><br>
<li><a href="#Individual">Formatting individual strings</a><br>
<li><a href="#Images">Images - making your page look pretty</a><br>
<li><a href="#Lists">Lists of all kinds</a><br>
</ul></h4>
<p>
<a name="Introduction"><h4>Introduction:</h4></a>
 The number of people on-line continues to grow (ever since I brought some obscure piece of DOS software, CompuServe and AOL regularly throw me free Internet Software for <a href="Editorials/PC-OS">Windows</a>) and web authors now have a far greater audience for their work than ever before. Putting something on the internet is not all that complicated, either. It just requires a text editor and a few tools, including a web browser, to get started, along with an internet account at an Internet Service Provider.
<p>
<b>NB: Aliquid Novi is written in HTML, and the interface is based on Doggysoft's Webite HTML reader. If you want to try out your HTML documents, drag them to Aliquid Novi's window.</b> 
<p>
<a name="WhatIs"><h4>What is HTML?</h4></a>
<p>
 HTML is not a programming language; it's a <i>markup</i> language: you tell the software which displays the HTML file what the text means by use of a series of tags, embedded in the HTML text. It is the job of the browser to display that data as appropriate.
<p>
 HTML stands for HyperText Markup Language. Those first two letters are very important. Hypertext means that you can, include in you text, the ability to direct the reader to another page, just like a page reference in some notes. In the case of a web browser on a computer displaying HTML, clicking over some text (or an image) designated in this way loads up the file linked to.
<p>
<a name="Basics"><h4>The Basics of HTML:</h4></a>
<p>
 At the core of an HTML file is just plain text. However, HTML files use (and, indeed, sometimes require) special delimiters, called tags, to indicate how the browser  should interpret the text. Generally, tags are indicated with &ltTAGNAME&gt in the text. Most tags occour in pairs, to show the start and end of what they indicate; end tags are normally the same as the start tags, but with the / character just before the name, giving &lt/TAGNAME&gt. Tags (usually only the start tags) may also include special attributes, but we'll deal with those later. The tag names are case-insensitive, but I always use capital letters to make it easier for eyes to seperate tags from plain text, as well as to seperate tag names from attributes within them.
<p>
 To begin with, I'll show you how to put the bare essentials of a page down. HTML files are totally enclosed in one tag pair: the &lt HTML &gt and &lt\HTML &gt pair. This is all you need to have a real HTML file; you could just copy your text inside this tag pair and call it a day. Thankfully, there are far more imaginative things you can do with HTML.
<p>
 Within the &ltHTML&gt &lt/HTML&gt tag pair, the file is further split into two sections, each enclosed by its own tag pair. The upper is the &ltHEAD&gt pair, the lower, the &ltBODY&gt pair. The latter tag pair encloses all of the text of the file, along with any tags it might include. &ltHEAD&gt can only contain a few select tags, most of which we will cover at a later stage. However, the one tag we can safely use is the &ltTITLE&gt pair. The text between this tag pair is displayed by the browser, usually in the window title.
<p>
&ltHTML&gt<br>
&ltHEAD&gt &ltTITLE&gt This text probably appears in the browser title &lt/TITLE&gt &lt/HEAD&gt<br>
&ltBODY&gt<br>
This is the text in the file.<br>
&lt/BODY&gt<br>
&lt/HTML&gt<br>
<p>
<a name="Paragraphing1"><h4>Text Paragraphing and Delineation:</h4></a>
 In HTML, unless you specify otherwise, all line breaks are ignored. This allows browsers to flow text in their display windows as necessary. To indicate a pure line break, use the &ltBR&gt tag. This is the first tag you have met which is not part of a tag pair and is used alone. If you want to subdivide you page into proper paragraphs, however, use the &ltP&gt &lt/P&gt pair, with the starting tag at the top of the paragraph and the closing tag at the foot. This tag does not follow HTML standard patterns in that, on most browsers, you don't actually need to supply the closing &lt/P&gt tag and many people simply leave it out. However, if you are going to use HTML checking utilities, they may require the use of the closing tag and you will need to keep it in.
<p>
<a name="Anchor"><h4>The Anchor Tag:</h4></a>
<p>
 I started off by exholting the virtues of a hypertext system and how it allowes a user to simply click on a selected word and jump straight to another page. Until now, I have left discussion of how to do that in HTML out; now that the groundwork has been laid, we can really make HTML work. At least, on your own hard drive.

 To allow the user to click on some text to jump to somewhere, the text must be enclosed in the anchor tag pair, &ltA&gt &lt/A &gt. This is the first tag we have used that also takes an attribute. As with all attributes, this is enclosed within the braces of the opening tag, after the tag name. The attribute is href and takes a string after it, such as in &ltA href="#other_text"&gt. This use of the # symbol in front of the link name tells the browser to search for it inside the HTML file itself; the text in the href string tells the browser to link to the &ltA&gt tag pair elsewhere in the file with the same name attribute the link tag's href.
<p>
 You might get something like:
<p>
 ...which allows the <A href="#definition_of_compiler">compiler</A> to convert loops into repeated sequences of commands...
<p>
 ...<A name="definition_of_compiler">A compiler</A> is software to convert a high level language to machine code. It uses...
<p>
<a name="Linking"><h4>Linking to other HTML Files:</h4></a>
 The anchor tag can also be used to link not to another part of this file, but to another file entirely. To do this, you need to know the URL of the file you want load in relation to the HTML file you're putting the link in. All URLs in anchor tags are relative to the current file: if the file to link to is in the same directory, you just use the filename (remembering UNIX-style extensions); if the file to link to is further into the directory structure, you'll need to list the directory names that follow on from this file; if you wish to go back toward the root directory, use the <code>..</code> notation to step down from the directory the current file is in.
<p>
 Once you know the URL, you can put it into the <code>href</code> attribute, as you would with a link to somewhere within a file, but with the URL instead of the link name and without the <code>#</code> on the front.
<p>
 Take, for instance, an HTML file <code>ADFS::4.$.Apps.HTMLUtils.HelpFiles.arcweb.text</code>. If you wanted to jump to the file <code>proxy</code> in the same directory, you'd use something like:
<p>
<code>Info on &ltA href="proxy"&gtproxy&lt/A&gt servers.</code>
<p>
 To link to <code>ADFS::4.$.Apps.HTMLUtils.HelpFiles.arcweb.imagetest.b5</code>:
<br>
<code>An &ltA href="imagetest/b5"&gtimage test&lt/A&gt.</code>
<p>
 To link to <code>ADFS::4.$.Apps.HTMLUtils.HelpFiles.webite.!Help</code>:
<br>
<code>See here for &ltA href="../webite/!Help"&gtother web browsers&lt/A&gt.</code>
<p>
 Finally, you can use <code>&ltA href="URL#link"&gt</code> to load up <code>URL</code> and jump to <code>&ltA name="link"&gt</code> within the file.
<p> 
When building your web site, you'll probably (almost certainly) do it off-line, on your own hard drive, before you upload it to your web space. Given the filenaming differences between RISC OS and Unix, there are a few things to rememer:
<p>
 Don't forget that these Unix-style features are used at all times in HTML, even if it's local and working off your RISC OS hard drive. Just map the RISC OS relative pathname into Unix formating.
<p>
 Never forget that, unlike RISC OS, Unix filenaming is case sensitive. Also, remember that Unix filenames can go as long as 255 characters, while RISC OS names (normally) cannot exceed ten characters. Also, Unix and DOS-style <code>.ext</code> extensions are commonly used on the internet and are represented in RISC OS with <code>/ext</code>. HTML files are <code>.htm</code> or <code>.html</code>; GIFs (as you will later discover) are <code>.gif</code> (woah!) and JPEGs are <code>.jpg</code>. While working on your site on your hard drive, you'll not be able to get names of files longer than six characters, becuase the rest will be taken up with the file extension. Unless you use something like Longfilenames, you won't get filenames of more than six letters to work on RISC OS, however many the (probably) Unix server can handle.
<p>
 All web sites' root directories (indeed, most subdirectories of web sites) have a starting place for the user called <code>index.htm</code>. If a user types in a URL without specifying an actual <i>file</i> to use, the browser will probably find and load <code>index.htm</code> or <code>index.html</code>.
<p>
  Of course, there's a lot more than HTML files on the Internet. All of these can, of course, be linked to from Web pages. For example:
<p><ul><dl>
<li><dt>Inviting mail: 
<dd><code>&lta href="mailto:edmund@aol.com"&gt Edmund Richardson&lt/a&gt</code>
<br>
Clicking on <code>Edmund Richardson</code> would bring up a mailto dialogue box, addressed to <code>edmund@aol.com</code>.
<li><dt>Linking to a newsgroup:
<dd><code>&lta href="news:alt.startrek.creative"&gt Star Trek novels&lt/a&gt</code>
<br>
Clicking on <code>Star Trek novels</code> would, if your newsreader was configured, bring up articles in the <code>alt.startrek.creative</code> newsgroup.
<li><dt>Commencing a Telenet session:
<dd><code>&lta href="telenet://acorn.co.uk"&gt Acorn&lt/a&gt</code>
<br>
If your browser is configured to launch a Telenet client, clicking on <code>Acorn</a> would initiate a Telenet session with <code>acorn.co.uk</code>
<li><dt>Linking to a Gopher:
<dd><code>&lta href="gopher://gopher.scs.unr.edu"&gt Old technology&lt/a&gt</code>
<br>
Clicking on <code>Old technology</code> would take you to the Gopher at <code>gopher.scs.unr.edu</code>.
<li><dt>Commencing FTP:
<dd><code>&lta href="ftp://ftp.bath.ac.uk/~masdr/edmund/demo.zip&gt Earth in Space demo&lt/a&gt
<br>
&lta href="ftp://ftp.nasa.gov"&gt NASA FTP&lt/a&gt</code>
<br>
Clicking on <code>Earth in Space demo</code> would commence the download of <code>demo.zip</code>, and clicking on <code>NASA FTP</code> would open the root directory of <code>ftp.nasa.gov</code>.
</dl></ul>
<p>
<a name="Paragraphing2"><h4>Further Paragraphing Features:</h4></a>
<p>
 One thing must be understood before embarking on an exploration of HTML display features: the author has very little control of what the output actually looks like, only on what it is meant to say. Browsers themselves decide how to actually display the text; all the author can do is use tags to indicate the meaning of the text enclosed within them and leave the actual selection of how best to plot that particular idea with a font to the browser. Indeed, for HTML portability, it is essential that HTML files do not enforce any special formating constrictions on the displaying browser.
<p>
 There are several ways to change font style in HTML. The one you'll probably use first is the heading tag pair. These come from <code>&ltH1&gt &lt/H1&gt</code>, the most prominent heading, to <code>&ltH6&gt &ltH6&gt </code>, the most simple. Heading tags should be follow in strict sequence in HTML and it is not good practice to leave out a level; as such, the lowest heading levels are rarely reached.
<p>
 Many paragraphs are delimited with a <code>&ltP&gt &lt/P&gt</code> tag pair, but there are several other types of paragraph or block format tags to replace <code>&ltP&gt</code> or go within one.
<p>
 The <code>&ltPRE&gt</code> tag pair tells the browser to ignore all standard HTML tags (except, of course, for <code>&lt/PRE&gt</code>) within the block of text and just send text to the screen in a monospaced font. This is quite useful for displaying tables without using the <code>&ltTABLE&gt</code> tag (something for another time).
<p>
 The <code>&ltBLOCKQUOTE&gt</code> pair delimits a larger quote (usually more than one line). The <code>&ltBR&gt</code> linebreak tag is often used in such constructions.
<p>
 Addresses, either email or otherwise, are contained within a <code>&ltADDRESS&gt</code> tag pair; again, such pairs often use <code>&ltBR&gt</code>.
<p>
  A horizontal line, useful for breaking up your text into sections, can be created using the <code>&lthr&gt</code> tag, or if more control is required, <code>&lthr width=x% align=y size=z&gt</code>, where x is the percentage proportion of page width, y is its positioning (<code>center</code>, <code>left</code> or <code>right</code>), and z is its thickness. The default, what the plain &lthr&gt tag produces, is 100 percent, <code>center</code> and 1. Also, <code>noshade</code> inserted in the tag (eg. <code>&lthr width=50% align=center size=2 noshade&gt</code>)turns off the 3D-style bars which Netscape and other advanced <a href="NetTerms/Browser">browsers</a> use as the default. This is, in my opinion both tasteless and pointless - the 3D bars look far better than the <code>noshade</code> options. Or, of course, you could <a href="#Images">insert an image</a> of a line or bar. 
<p>
 Finally, to further enforce sections of an HTML file, the <code>&ltHR&gt</code> single horizonal rule tag instructs the browser to draw a line under the text finishing above.
<p>
<a name="Individual"><h4>Formating Individual Strings:</h4></a>
<p>
 As well as formating large blocks of text, there are several tags to format individual words or small strings of characters. These split sharply into two classes: physical tags and semantic tags. Physcial tags are similar to those found in DTP packages, where direct font weights and styles are selected. Semantic tags, however, describe what the text within the tag means, rather than how it should be displayed.
<p>
 To put stress on text, use the <code>&ltEM&gt</code> emphasis tag pair; even stronger emphasis can be gained with the <code>&ltSTRONG&gt</code> pair.
<p>
 The <code>&ltCODE&gt</code> tag pair is used to indicate chucks of computer code; variables outside of such blocks are indicated with the <code>&ltVAR&gt &ltVAR&gt</code> pair. For examples of user keyboard input, use the <code>&ltKBD&gt</code> pair.
<p>
 To quote small sections within an HTML file, the <code>&ltCITE&gt &lt/CITE&gt</code> tag pair can be employed; larger quotations are handled with <code>&ltBLOCKQUOTE&gt</code>. In a similar vein, the <code>&ltAMP&gt</code> tag pair indicates text to be displayed as given in the HTML file, just as <code>&ltPRE&gt</code> delimits a paragraph of pre-formatted text.
<p>
 HTML contains three main physical tag pairs: <code>&ltB&gt</code> for bold text, <code>&ltI&gt</code> for italics and <code>&ltTT&gt</code> for a monospaced output.
<p>
 Don't try to embed a tag pair from one font type into another, such as:
<p>
<code>&ltB&gtThis is bold, but now &ltI&gt it's bold italic &lt/I&gt, until we get to here.&lt/B&gt</code>
<p>
 On some browsers, this may work, but, on many, you'll either get a continual line of bold, a small section of just italic, a small section with neither of the effects or, most seriously, nothing at all. Above all, don't even think about effects such as:
<p>
<code>&ltB&gtThis is bold, but now &ltI&gtit's bold italic&lt/B&gt, until we get to just plain italic.&lt/I&gt</code>
<p>
 This is simply incorrect HTML and will (thankfully) fail totally, with an error, or a crashed browser, on most machines.
<p>
 As you can see, semantic tags are much more useful than physical tags; they describe the function and not the effect. The entire concept of allowing individual browsers interpret the style of text allows a browser user to get a very uniform feel to the internet, while allowing individual pages their own styles.
<p>
<a name="Images"><h4>Adding images</h4></a>
<p>
  The first point is that these should always be GIFs (.gif) or JPEGs (.jpg). These are viewable by just about any web browser on any platform, and are also very small, which, with bandwith as small as it currently is, is essential. If you can't produce GIFs and JPEGs, get a program like Creator, which can convert Acorn Sprites to these and other formats; <a href="Reviews/PD/InterGif">InterGif</a> comes highly recommended. If you put non-standard formats on your web page, be prepare for large amounts of complaining email - people don't like waiting several minutes to download an image, only to find that their computer can't display it.
<p>
  The smaller the filesize of the images are on your webpage is, the faster the page will take to load, and the more chance you have of someone actually seeing them (as opposed to hitting the <a href="NetTerms/Browser">browser</a>'s Stop button midway through download. It is in your best interest to reduce the images as much as possible. It is generally possible to acchieve a large file size reduction without overly sacrificing image quality.
<p>
  The simplest way to display an image is to place it with in the <code>&ltimg&gt</code> tag like this: <code>&ltimg src="image location"&gt</code>. This will display it full size, bottom aligned with any text also on that line. More tags can be inserted between <code>img</code> and <code>src</code>. For example:
<p>
<ul><dl>
<li><dt><code>height=xxx</code>
<dd>This displays your image with height xxx pixels.
<li><dt><code>width=xxx</code>
<dd>This displays your image with width xxx pixels.
<li><dt><code>vspace=xxx</code>
<dd>This separates your image from the text by xxx pixels vertically.
<li><dt><code>hspace=xxx</code>
<dd>This separates your image from the text by xxx pixels horizontally.
<li><dt><code>border=xxx</code>
<dd>Gives your image a border of xxx pixels.
<li><dt><code>align=right</code>
<dd>Aligns image with the left margin. The text wraps on the right.
<li><dt><code>align=left</code>
<dd>Aligns image with the right margin. The text wraps on the left.
<li><dt><code>align=middle</code>
<dd>Aligns the baseline of the text with the middle of the image.
<li><dt><code>align=absmiddle</code>
<dd>Aligns the middle of the text with the middle of the image.
<li><dt><code>align=baseline</code>
<dd>Aligns the bottom of the image with the baseline of the current line.
<li><dt><code>align=bottom</code>
<dd>Aligns the bottom of the image with the bottom of the current line.
<li><dt><code>align=texttop</code>
<dd>Aligns the top of the image with the tallest text in the line.
<li><dt><code>alt="image description"</code>
<dd>Provides an alternate text version, stating what the image was, for browsers with Image Autoload switched off. This is especially important if the image is a self-contained link.
</dl></ul>
<p>
  For example, <code>&ltimg height=300 width=400 align=top vspace=60 hspace=70 border=100 src="images/alpha"&gt</code> would display <code>alpha</code> in the <code>images</code> subdirectory 300 high, 400 wide, align its top with the tallest text in the line, give it a border of 100 and separate it from the text by 60 vertically and 70 horizontally.
<p>
<h4><a name="Lists">Lists of all kinds</a></h4>
<p>
  One of the best ways of setting information out on a page is using a list. HTML offers three types.
<p><ul>
<li>Unnumbered lists work within the <code>&ltul&gt &lt/ul&gt</code> pair. Within that, <code>&ltli&gt</code> produces a bullet. 
<br>
<code>&ltul&gt Suspected carcinogens:<br>
&ltli&gt Most disc-based magazines<br>
&ltli&gt <a href="Reviews/Demos/JoJo">JoJo</a><br>
&lt/ul&gt</code>
<br>
Produces:
<br>
<ul>Suspected carcinogens:
<li>Most disc-based magazines
<li><a href="Reviews/Demos/JoJo">JoJo</a>
</ul>
<p>
<li>Ordered lists work within the <code>&ltol&gt &lt/ol&gt</code> tag pair. Eash item preceeded by <code>&ltli&gt</code> will be given a sequential number.
<br><code>
&ltol&gt The things Tony Blair will cut:<br>
&ltli&gt Education<br>
&ltli&gt Education<br>
&ltli&gt Education<br>
&lt/ol&gt</code>
<br>
Produces:
<ol> The things Tony Blair will cut:
<li> Education
<li> Education
<li> Education
</ol>
<p>
<li>Definition lists are enclosed by the <code>&ltdl&gt &lt/dl&gt</code> pair. Within that, <code>&ltdt&gt gives the title of the item to be defined, and &ltdd&gt gives the definition.
<br><code>
&ltdl&gt Commonly misunderstood acronyms:<br>
&ltdt&gt MS DOS<br>
&ltdd&gt Maybe Some Day an Operating System<br>
&ltdt&gt IBM<br>
&ltdd&gt Idolised by Morons<br>
&lt/dl&gt</code>
<br>
Produces:
<dl> Commonly misunderstood acronyms:
<dt> MS DOS
<dd> Maybe Some Day an Operating System
<dt> IBM
<dd> Idolised by Morons
</dl>
</body>
</html>