Advanced features: HTML stage III

The first bit of this part is not really advanced, but it deals with some things that didn't fit anywhere else: block text, mathematics and tables. The other two sections cover the inclusion of external files and images, and the new form-fill feature of HTML+ which is already included in some clients.

Block text

Block text is text that is set off from the surrounding paragraph by being indented or separated by some space. There are two tags to do this:

Mathematics and Tables

HTML as it currently stands does not define any tags for math or tabulations, so you can't type them in directly like you can in TeX or LaTeX. HTML+ may contain math and tables definitions, but in any event, the jury is still out on math in SGML.

However, there are some simple fixes for this:

Including external files

There are two mechanisms for including other files at a given point in your document. <img> is for including graphic images (pictures) and <inc> is for text files. @ <inc> is not in the original HTML but is a new extension.


Graphics can be included at any point with the <img src="...">: tag (defined empty, so there's no end-tag involved). You supply the URL (in quotes) of the graphics file, which must be in one of the following formats:

For example, the picture above (the main quad at University College Cork) was specified as <img src="" align="top" alt=""> @ The optional align="..." attribute is an addition to HTML and can be either `top', `bottom' or `middle', which determines if the top or the middle of the image is aligned with the preceding text. By default (if you leave out the align="..." attribute), it aligns the bottom of the image with the preceding text. In any case, the text is not moved, it's the image position which is moved.

@ Users with text-only clients will obviously not get the graphics, but the client may display a marker like [IMAGE] where the graphic would normally come. To make this more meaningful, another new optional attribute to the <img...> tag has been proposed: alt="..." which lets you supply alternate identifying replacement text in quotes which non-graphical browsers can display in place of just saying [IMAGE]. Setting it to null (alt="") is a way of preventing non-graphical browsers from displaying anything at all in place of the image.

Take care in including images: many users who are on slow lines or congested networks do not appreciate the wait while their client downloads megabytes of pretty but inessential pictures.

If you include the ISMAP attribute in a <img src="..."> reference, it is possible to arrange for some browsers to transmit mouse coordinates to a mapping server (mapd) which will take appropriate action depending on whereabouts within the graphic the mouse was located when it was clicked.

Other non-text included files

Still pictures are not the only things you can include in your document. If your readers have MPEG viewers or audio support, you can use the <img src="..."> mechanism to refer to movie clips and sound files, which brings W3 into the multimedia field.

The warning above about transmission time applies doubled here: movies over the network take a lot of bandwidth.

@ Including text files

Some systems (notably Mosaic and the NCSA server) allow the in-line inclusion of external files. This is not a part of the original HTML but will likely be included in HTML+.

To include such a file, use the <inc srv "..."> tag (defined empty, so there's no end-tag) giving the name of the file in quotes. The directory and path should be given as from the server-root of the server being referenced. The file will be interpreted as HTML and formatted accordingly: to display it as plain text, enclose the <srv...> tag in one of the fixed-width display elements. Here's a local file I included this way:

An SGML document type definition (DTD) is like the description of a grammar for a programming language. For example, if you are working with poetry, you might define: an <anthology> is one or more <poems> a <poem> is a <title> followed by one or more <stanzas> a <stanza> is one or more lines a <line> is a character string a <title> is a character string Documents are marked up in accordance with the grammar defined in the DTD. @ WARNING: this uses non-standard syntax (there is no `=' sign between srv and the filename argument, so strictly speaking this is not valid SGML. It is also dependent on using the NCSA server. Details of other forms of the tag and how to include the output of server-side commands are in the NCSA's documentation.

@ Form-filling

The form-fill feature is a proposed enhancement in HTML+ which Mosaic, Lynx and some other browsers have started to support.

A form is made up of text interspersed with a series of input areas which the user can fill in, and finally send the completed form to a destination you (the author) specify. In most cases this destination is a HTTP server, which will run a script or program to parse (check) the input data and then file or process it or send it to a specified email address. Details of how to specify processing are complex and beyond the scope of this document: you should read (for example) the NCSA's documentation.

Here is a brief overview of the structure of a form and how to specify the input areas (fields). If you want to use forms, you need to have access to a server where you can place the script or program which you want to process the data.

Form definition

A form must be entirely defined within <form...>...</form> tags. The attributes for the start-tag are:

For example: <form method="POST" action="">

Input areas (fields)

An input area is defined with the <input...> tag (defined empty, so there's no end-tag). This tag takes a variety of attributes which define the name of the field, what type of input it is, the maximum length (in the case of text) or a restricted range of values (in the case of radio or checkbox buttons):

This structure is best shown in an example:

Please answer the following questions:

  1. Name:
  2. Company/Institution:
  3. How did you hear about our product? (check all that apply):
    Newspaper Radio TV Friend/colleague
  4. How many would you like to order?
  5. Credit card: AMEX Visa Mastercard
  6. Number: and expiry date (mm/yy):

Please answer the following questions:

  1. Name:
  2. Company/Institution:
  3. How did you hear about our product? (check all that apply):
    Newspaper Radio TV Friend/colleague
  4. How many would you like to order?
  5. Credit card: AMEX Visa Mastercard
  6. Number: and expiry date (mm/yy):

There's more information on the NCSA's own server.

And now . . .

That's it, there is no more to HTML (yet...wait for HTML+)

Please let me know if you find errors or other deficiencies in this document:

Peter Flynn
Computer Center
University College
Cork, Ireland