{"id":102,"date":"2011-11-15T21:48:09","date_gmt":"2011-11-15T21:48:09","guid":{"rendered":"http:\/\/www.binarydevotion.com\/?p=102"},"modified":"2011-11-15T21:48:09","modified_gmt":"2011-11-15T21:48:09","slug":"html-howto-amiga-computing-87-june-1995","status":"publish","type":"post","link":"http:\/\/www.binarydevotion.com\/?p=102","title":{"rendered":"HTML Howto, Amiga Computing 87, June 1995"},"content":{"rendered":"
(Editor’s note: this was published in June 1995.\u00c2\u00a0 Things have changed a lot!)<\/address>\n

By now, you’d have had to be completely cut off from the world not to have noticed that the World Wide Web (hereon known as the Web) has been growing at a rate bigger than exponential. We’re talking explosion proportions, here. Massive does not really come close…<\/p>\n

However, you may still be wondering something along the lines of “Yes, but how do I get involved and publish on the Web?” in which case this article should answer your question.<\/p>\n

The World Wide Web uses a standard language to transfer it’s hypertext data around the net called HTML, short for Hyper Text Markup Language. HTML is a subset of SGML (that’s Standard General Markup Language) and was brought into being by CERN where they also play with particle accelerators and other expensive toys. You can tell this is new because the acronyms have moved from being three letters to four – must be something special…<\/p>\n

The Web is basically a huge example of client\/server computing: multiple clients can be furnished by one server. There are many different clients that can be used to interpret the data sent to them by the server, and the Amiga has an excellent one of these.<\/p>\n

\"\"<\/a>The most popular client has to be Mosaic, which has been already described as the Internet’s killer application and with good reason – the use of the Web rose by 300,000% in 1993 and is still rising.<\/p>\n

AMosaic is a port from the NCSA Mosaic package, originally found in the *NIX world with X Window systems. The beauty of this package is that it will run with practically any protocol stack (such as AmiTCP or DNet) seamlessly, meaning you can use AMosaic on an ethernet network or via your dialup SLIP\/PPP link from a service provider.<\/p>\n

On the other side of things, publishing Web data means that you need a server to listen for requests for pages to be sent. Again, NCSA’s HTTPdaemon has been ported across to the Amiga but before you start rushing for your copy of httpd, think if you’d really want your Amiga constantly connected; just imagine the phone bills! The only current way to get Web space is to pay a provider to store your data for you which is slowly coming down in cost. Alternatively, if you’re at an academic establishment you may just be able to persuade the powers that be to attach your pages to the WWW. You’d be amazed how much the application of beer to support staff makes them more amenable to this sort of suggestion.
\n<\/p>\n

“So what is it?”<\/h2>\n

HTML is simply standard ASCII text as produced by any half decent text editor with embedded commands (called tags) to allow all sorts of fancy things to happen to your text such as include graphics, change the font, embolden things and link to other resources on the Web when viewed through a Web brower.<\/p>\n

Tools of the trade<\/h3>\n

To edit your HTML, you’ll need a text editor – ED on your workbench disks will do though my favourite editor is VIM which can be found on Aminet, like all the files listed below.<\/p>\n

Graphics can be included in your documents too, and for best compatibility these really should be in GIF format as while the Amiga Mosaic supports all file formats known by your datatypes selection, other Web clients do not have this facility and are stuck with GIF.<\/p>\n

A conversion program to produce GIF files is therefore essential. There’s plenty out there to do this but for shareware I’d recommend ImageStudio as found on Aminet.<\/p>\n

You’ll also need the GIF datatype: As AMosaic uses datatypes you’ll need OS 3.0 or better to get inlined images, too.<\/p>\n

JPEG files are common as well, so you’ll need the JPEG datatype and some IFF to JPEG converter should you want to produce your own.<\/p>\n

\"\"<\/a>If you want to annoy other users, sound links can be made too so you’ll need a conversion program to produce .au files and play them back. Playback can be handled by the AMS suppliment from Commodore which can be again found on Aminet.<\/p>\n

Less common over the Web is use of animation, though it is supported by some machines in the form of MPeg or Quicktime files. MPlay will play back mpegs fairly well and XAnim supports mpeg along with Quicktime files too, though is buggy at the moment.<\/p>\n

A nice tool to aid HTML composition is called HTML-Heaven from Paul Kolenbrander. This is a program which interfaces to any AREXX compatible editor (like ED) and allows tags entry to be replaced with a single click of the mouse.<\/p>\n

Finally, you’ll need AMosaic along with MUI 2 or above.<\/p>\n

Now you’re tooled up, let’s actually take a peek at what this HTML stuff is then, shall we?
\n<\/p>\n

Writing WWW Pages<\/h2>\n

WWW pages are made up of HTML, which is just ASCII text with embedded commands called tags.<\/p>\n

Tags for HTML are embedded in between less than and greater than signs (<>) and control the appearance of the document on screen. Some require switching off after their usefulness is finished, for example the title of a document is set by <TITLE> and the end of the title is designated by <\/TITLE>. We’ll take a look at quite a few of these tags in turn.<\/p>\n

First of all, all Web pages should be enclosed in an outer tag showing that they’re HTML. For this, the <HTML> tag is used as the first element of your document, with <\/HTML> at the end. On some browsers this is not necessary but for future compatibility it really should be included.<\/p>\n

Web pages currently have two sections within them, these being the header and the body section.<\/p>\n

First comes the header of your page which tells your browser about the title of the document as appears in document title (surprisingly) and other data such as the absolute path for this document. This is enclosed in <HEAD> and <\/HEAD> tags. Inside the head, you’ll want to give your document a title, an example being <TITLE>Home brewing for the hard of thinking<\/TITLE>. There are more elements that can be put in the head. For a full list, see the URLs provided in the references section.<\/p>\n

\"\"<\/a>Next off comes the body of the text, and this is where it all happens. The <BODY> and <\/BODY> tags should be used to define the start and end.<\/p>\n

Inside here, all text is freeform which means that entries such as tabs, multiple spaces and carriage returns are translated into a single space which can be useful most of the time but a right pain for some things.<\/p>\n

To get around this, a paragraph break is inserted into the text using <P>. This is an HTML tag that does not have to be turned off as it merely specifies a break, not a paragraph. Similarly, the <BR> tag forces a line break in your text but does not insert a blank line like <P> does.<\/p>\n

For text formatting, HTML doesn’t allow you to specify explicitly the name of the font and size of font to use, but has a range of predefined styles. For headings, there are five levels of strength, ranging from <H1> to <H5>, all of which must be turned off with <\/Hn> when finished.<\/p>\n

Bold and Italicised text are also available in more than one way. HTML defines logical styles as well as physical, so for bold text either <STRONG> or <B> can be used. Italics has the same strangeness, with either <CITE> or <I> being used. We’ll look at the whys and wherefores of this later.<\/p>\n

Pretty pictures in your text<\/h3>\n

To insert an in-line image into your text, the tag <IMG n> is used, with n being either one or many subtags. The most important one is SRC=”filename” where filename is the name of the file to use. This brings up the important topic of relative filenames: to go back a directory, you MUST use the *NIX ‘..\/’ to go back otherwise some systems will interpret ‘\/’ as the equivalent of ‘:’ on the Amiga – ie the root directory. For HTML, the directory separator remains ‘\/’, though.<\/p>\n

The other two important tags that can be defined inside <IMG> are ALIGN=pos to align the text following the image with either the top, middle or bottom of the picture (with pos being TOP, MIDDLE or BOTTOM) and the other being ALT=”text”, where text is the text that will appear on a non-graphical Web browser, such as Lynx.<\/p>\n

Note that the inline graphics files have to be in GIF format to be decoded by all viewers.<\/p>\n

Lists, lists and lists<\/h3>\n

Mosaic supports various formats for lists, too. The most common are the ordered list, unordered list and definition list.<\/p>\n

Ordered lists are started with the <OL> tag, have the entries preceeded by <LI> (with no <\/LI> tag) and the list is finished with <\/OL>. An ordered list is a list that has a number preceding all list entries.<\/p>\n

Unordered lists are exactly the same, with <UL> and <\/UL> replacing the <OL> and <\/OL> along with bullets replacing the numbers.<\/p>\n

Definition lists allow a definition title followed by a description of that title to be listed. <DL> starts the process off, <DT> defines the definition title and <DD> describes the definition linked to that title. <\/DL> turns off the list and as before there is no need to use <\/DT> or <\/DD> at the end of the titles or definitions.<\/p>\n

Making the links<\/h3>\n

The anchor tag allows for points inside a document to be labelled and for links to other URLs (uniform resource locations) to be made. To define a label inside a document, <A NAME=”name”> is used, and I’ll leave you to guess what replaces name.<\/p>\n

The interesting bit is making links: this is done by <A HREF=”url”>, where URL is either a full URL (such as http:\/\/agora.leeds.ac.uk\/csznml\/Intro\/author.html”> or relative, such as ..\/beer.html. The elements then to make the link follow, and the link command is closed with <\/A>.<\/p>\n

A URL does not have to be an HTML document – it could be a picture, sound file, postscript file, an FTP link, GOPHER link or many more. See one of the references for more information.<\/p>\n

Other Bits<\/h3>\n

Horizontal rules run a line horizontally across your document and are used with the <HR> tag. Another useful tag is the <ADDRESS> tag, which is a logical text style that should be used to sign your documents. This one needs turning off after use.<\/p>\n

There are many, many more tags but these are the ones that see most use. For more, see the references again.<\/p>\n

A Question of Style<\/h2>\n

So far, so good. You know what makes up HTML, but what makes good HTML? The Web’s explosion has been likened to the desktop revolution that occurred when DTP packages became available to all and sundry – all of a sudden, unreadable documents appeared without structure or a defined style.<\/p>\n

Despite the fact that HTML trys to set a style for things such as paragraph formatting, it is very easy to make ugly HTML documents. Very easy. Just wander for a few minutes around the Web and you’ll see plenty.<\/p>\n

The best way to develop a style is to consciously think about how you will lay things out and then start writing – plan first, then stick to your guns. This keeps a feel to your Web site that should be acceptable if you’ve thought about it.<\/p>\n

I’m not going to try and preach and say that this is right, that’s wrong but rather point out some common pitfalls that plague the web at the moment and give some tips so everyone who’s paying to look at your information will not be sending you a bill for timewasting.<\/p>\n

Always give some sort of reference for your documents. Really every document should be signed by using the <ADDRESS> tag with your name, email address and the last modification date inside it. People know who to praise or blame then…<\/p>\n

When in-lining graphic images, stop and consider the size of the file before including it. 15K seems to be about the acceptable limit for modem access, as this will take around 10 seconds to download with a 14.4KBaud link. Of course, if the document is intended for local use on a LAN then this is less of an issue. However, a good way to deal with the problem is to inline a thumbnail and use this as a link to the larger version to be displayed on your external viewer.<\/p>\n

One thing that seems universally hated is the infamous “Click here” statement to make a link. It is considered to be much better practice to avoid this. For example, instead of saying “Click here for information on xxx”, the phrase “More information concerning xxxx is available” makes more sense on all browsers.<\/p>\n

A problem when developing on the Amiga is file name capitalisation. Whilst the Amiga will take a file originally called `AcHomepage.html’ and access it as `acHomePage.HTML’, *NIX will not. This is not an issue if using the Amiga to serve information, but as most people will be relying on a service provider who probably installs the pages on a *nix box it suddenly becomes one. In short, check all capitalisations or simply always use lower case for file names and upper case for directories (or whatever takes your fancy – the point being stick to it). As a diversion, if using *nix also make sure that the file permissions for your pages and all graphics are set to globally readable, otherwise other people will not be able to access them.<\/p>\n

The argument between logical and physical styles is set to run and run, though many will advocate the use of logical only where necessary. This seems justified as it leaves the door open for a better way to present a piece of information marked as STRONG or as a citation. If you definitely want bold or italics, use them though.<\/p>\n

Getting it Up<\/h2>\n

So then. These pages that you’ve written on your trusty Amiga, checked with AMosaic and found to be good – you want to publish them.<\/p>\n

Discounting the dedicated, constantly dialed up connection as far too expensive, what else is there?<\/p>\n

As mentioned previously, members of Academia may be able to persuade their support team to help but for the rest, some other method needs to be found. The solution is the providers that can supply Web space, normally at a cost ranging from not really cheap to remortgage the dog.<\/p>\n

The two most common providers who allow WWW storage are Demon, who will soon be giving subscribers limited WWW space free and Cityscape who give subscribers 500KB free. Demon charge \u00c2\u00a325 per month for up to 5MB of space whereas Cityscape charge what appears to be a more reasonable \u00c2\u00a360 per MB for a year’s storage – however Cityscape do not give technical support to Amiga owners and you have to be a Cityscape IPGold subscriber to make use of their servers. Check with them for more information, though.
\n<\/p>\n

Conclusions<\/h2>\n

Many more references than this article are available on the Web – check the boxout if interested.<\/p>\n

You now know how and why to write good HTML and how to get your minor works of art on the net. If you can justify any cost involved, then go to it!<\/p>\n

There’s plenty more you can do that hasn’t been covered, such as forms and scripts or running executables using the cgi. When AMosaic 1.3 is available and supports FORMS, perhaps it’ll be worth another article…<\/p>\n

Cityscape can be contacted on 01223 566950, email sales@cityscape.co.uk, URL http:\/\/www.cityscape.co.uk\/
\nDemon 0181 371 1234, email sales@demon.co.uk, URL http:\/\/www.demon.co.uk\/<\/p>\n

Should you want to contact Nick Lines, the author of this article, you can do at csznml@scs.leeds.ac.uk. You can also visit his homepage at the URL http:\/\/agora.leeds.ac.uk\/csznml\/homepage.html. Bear in mind that this was intended for use over a LAN so has plenty of image files in it. If you do visit it, please do mail a comment as this would be very helpful. Thanks!
\n<\/p>\n

Jargon Stuff<\/h2>\n

The Comms world seems to thrive on jargon just to keep it’s image as being rather sad. Here’s some of the more important ones:<\/p>\n

NCSA
\nAmerica’s National Centre for Supercomputing Applications, where Mosaic was developed.<\/p>\n

CGI
\nCommon gateway interface: An interface allowing HTML pages to call executable scripts and return the results to the browser.<\/p>\n

WWW
\nYou jest, surely?<\/p>\n

URL
\nUniform Resource Location: a way of accessing a file that tells the browser what method of contact to try and where to find the file once connected to the right server.<\/p>\n

References on the Web<\/p>\n

For places to start looking for information on writing good html, try the following URLs:<\/p>\n

A Beginner’s Guide to HTML
\nhttp:\/\/www.ncsa.uiuc.edu\/demoweb\/html-primer.html<\/p>\n

HTML Design Notebook
\nhttp:\/\/www.hal.com\/~connolly\/drafts\/html-design.html<\/p>\n

Style Guide for Online Hypertext
\nhttp:\/\/www.w3.org\/hypertext\/WWW\/Provider\/Style\/Overview.html<\/p>\n

HyperText Markup Language (HTML): Working and Background Materials
\nhttp:\/\/www.w3.org\/hypertext\/WWW\/MarkUp\/MarkUp.html<\/p>\n

This are just starting points! There’s plenty of links to take from them. Be warned that you could be there for a long time.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

(Editor’s note: this was published in June 1995.\u00c2\u00a0 Things have changed a lot!) By now, you’d have had to be completely cut off from the world not to have noticed that the World Wide...<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11,10],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-amiga","category-howtos","category-reviews"],"_links":{"self":[{"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=102"}],"version-history":[{"count":0,"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=\/wp\/v2\/posts\/102\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.binarydevotion.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}