©Copyright SoftQuad Inc., 1995. This document may be reproduced in whole or in part provided that this copyright notice is reproduced on each copy made.
If you're new to creating web (HTML) documents, you may want to follow this short tutorial. This tutorial aims to teach the fundamentals of HTML as well as the mechanics of using HoTMetaL PRO. If you are not using HoTMetaL PRO, we don't want to discourage you from reading this tutorial, but you should be aware that the instructions repeatedly refer to HoTMetaL PRO commands. Naturally, we encourage you to purchase HoTMetaL PRO, or at least download HoTMetaL, the free version of this product.
You should open this document with the web browser of your choice, while simultaneously running HoTMetaL PRO.
The tutorial covers the following topics:
The tutorials don't cover each topic exhaustively, but give you enough information for you to master a topic after obtaining additional details from the HTML Quick Reference which you'll find after the tutorial.
The first part of the tutorial may be used as a "quick start" that shows you how to create a file with HoTMetaL PRO. When you've finished that section, you can continue with the other sections or, if you feel comfortable using or experimenting with HTML on your own, you can skip over the rest of the tutorial and refer to the HTML Quick Reference section when you need to find out something about HTML.
You will see a dialog box containing a list of elements that are valid at this point in the document. Elements are the "building blocks" of your document. Since the document is empty right now, any element is valid. However, we'll start by inserting the top-level element, which should be highlighted.
HoTMetaL PRO now inserts an HTML element by inserting start-tag<HTML> and end-tag</HTML> icons. (Sometimes tags are called "commands", but this isn't really accurate.) HTML surrounds all the other elements in the document.
Notice that HoTMetaL PRO has also inserted a HEAD element inside HTML, and a TITLE element inside HEAD. These elements are required in this context in the document. The insertion point is inside TITLE. The words "Document Title" are not part of the text of the document: this is a prefix which is for screen display only.
When you display this document in a browser, the contents of this element will be displayed in the title bar.
The main part of your document is the body, contained in the BODY element.
If you look at the Insert Element dialog box, you'll notice that you have many choices of elements to insert. However, it's normal to start your document with a heading. Web documents have six levels of headings, represented by the elements H1 through H6.
An H1 header will be used for major divisions in your document.
George Orwell
Now you're ready to insert some text.
George Orwell is best-known as the author of "Animal Farm" and "1984", and these books gave the language the overused adjective "Orwellian". However, these books were written relatively late in his life, and followed an impressive body of work that included accounts of his experiences as a soldier in the Spanish Civil War, and as a "down and out" tramp roaming the English countryside."
You can begin smaller subdivisions of the document with lower-level ( H2 through H6) headings. You can skip levels if you want, but your documents will usually look better if you don't.
Early life and education
Orwell, whose real name was Eric Arthur Blair, was born in India in 1903. He was brought to England, along with his mother and older sister, in 1907. His early education was at a village school, and later at a private preparatory school. At the age of 14 he won a scholarship to the prestigious Eton College.
Now perhaps you'd like to see what this document will look like when it's published on the Web. But first, save the file:
HoTMetaL PRO will invoke a browser displaying the file you're editing.
As we suggested at the start of this section, you may wish to skip directly to the HTML Quick Reference, or continue with the extended tutorial.
The techniques in this section are for formatting inline text--text that's embedded a paragraph or some other block of text. Techniques for formatting blocks are covered in the next section. In an HTML document, you add emphasis to a piece of text by surrounding it with an element. This is a little different from the approach of many word-processors, in which you would, for example, highlight a piece of text and choose a type style from a menu.
The list in the Surround dialog box gives all the elements that can surround the selection.
The selection is now surrounded by < I> and <I> tag icons, and, depending on which style sheet you've chosen, should be formatted in italic. In any case, a browser will format it in italic--you can use Preview to try this out.
Of course, you don't always have to surround the text after you've typed it--you can insert an I element with Insert Element... and just type the text between the tags.
For more information on character formatting, see the section Character formatting in the HTML Quick Reference.
There are several elements that you can use to surround parts of your document that require special formatting. For example, suppose you wish to add a block quote to the sample document you created above:
Orwell portrayed his prep school days in harsh terms in the essay "Such, Such Were the Joys...". This may have been the result of interpreting his early experiences in the light of his later political consciousness. (B. R. Jones)
Notice that the text is indented slightly to set off the quotation. A browser will display a block quote with similar special formatting.
For more information on block formatting, see the section Block formatting in the HTML Quick Reference.
You can insert five different types of lists in your document.
Ordered lists are lists with numbered items. You don't have to add the numbers yourself--a browser will add these for you.
Orwell's Four Great Motives for Writing
When you do this, HoTMetaL PRO automatically inserts an LI (list item) element. With one exception, all lists consist of one or more LIs.
Sheer egoism
Here is a convenient place to introduce a useful technique for adding elements: splitting the current element.
HoTMetaL PRO splits the LI element, in effect creating a new, empty LI element after the current one. Splitting an element just before the end tag is a convenient way of inserting a new element that's of the same type as the current element. You can also split an element in the middle of the text: in this case, everything before the insertion point goes in one element, and everything after goes in the other one.
Aesthetic enthusiasm
Historical impulse
Political purpose
To really see how ordered lists work, you should preview the document:
As you can see, the browser has inserted the list numbers automatically.
An unordered list is one whose items aren't numbered, but instead start with bullets of some kind. Actually there are several kinds of unordered lists available to you: here we'll use the most common and general-purpose list element, UL (unordered list). In this section you'll also learn a new markup command.
The dialog box that appears is similar to the one you saw when you used the Insert Element... and Surround... markup commands. This time the list contains all the elements that can validly replace the current element. (The current element is OL.) Not surprising, your choices are all types of lists.
The OL start- and end-tags have changed to UL tags.
The browser now displays the list items with bullets rather than numbers.
You can nest lists by inserting a UL, OL, etc., inside a list item (LI). Some browsers will account for this by changing the list bullet for the nested list.
A third type of list is the definition list (DL). This list is different from the others because it doesn't consist of list item (LI) elements. Rather, it consists of a series of terms and definitions. As the name implies, this list is intended to display definitions, though you can use it for any list that requires two-part entries. When a definition list is displayed in a browser, a definition is typically displayed on a separate line from the corresponding term, and indented slightly.
Orwell's novel "1984" described the use of a lexicon called "Newspeak" that was designed to give the appearance of real content while actually allowing the authorities to succesfully lie and obfuscate. Some examples:
The valid elements inside a DL are DT (definition term) and DD (definition). Although you're allowed to arrange them however you like, the normal ordering would be to have one DT (or more, if, for example, you are defining several words with the same meaning), followed by one or more DDs.
Prolefeed
Mass entertainment
Now create two more definitions:
Goodthink
Orthodoxy
Joycamp
Forced-labor camp
To see how this list is displayed in the browser:
Notice that the definitions are set off from the terms.
(This section is an "aside": you don't have to complete it as part of the tutorial.)
You may have seen web documents that use list bullets with different sizes and colors than the browser normally displays. Some documents may even use graphics as list bullets. In general this effect is not achieved by using the usual list elements. Rather, such lists tend to be "manufactured" using elements that were not originally intended to be list elements.
For example, a list could be simulated as follows:
For each "list item" do the following:
Through experimentation (or web browsing) you can probably come up with other techniques for creating this kind of list.
Some browsers (though at the time of this writing, not many) will allow you to customize the style of list bullets associated with unordered lists (note that this must be done in the browser, not in HoTMetaL PRO).
For more information on lists, see the section Lists in the HTML Quick Reference. To see examples of lists, you can use the Open Template... command to open the templates lolist.htm, lulist.htm, solist.htm, and sulist.htm.
It is normal for HTML documents to contain links to other documents, which can be located anywhere on the WWW. These links are provided by Universal Resource Locators (URLs), which name the location and filename of a document, and the protocol used to access it.
When you want to create "hot text" that someone can click on in a browser and cause a document to be accessed, you use an "anchor" (A) element.
See also the
bibliography
The word "bibliography" is hot text. In a browser it will be displayed in a different color from surrounding text.
The second step in creating an anchor is creating the URL. A URL is not part of the content of the element, like hot text is. A URL is an attribute of the element. HoTMetaL PRO has a URL editor that lets you easily create and modify URLs.
The dialog box that appears has several parts.
Next to the label Attribute there is an option menu whose items are all the attributes of the element that can describe a URL. In this example there is only one such attribute, called HREF.
Next to the Protocol label there are a text box and an option menu that let you choose a protocol (also called a "scheme"), which describes how the file referred to in the URL will be accessed by a web browser. For example, if the document were on a web server, you would choose the protocol http. Each protocol has a template associated with it: this tells the URL editor the structure of the URL so that the proper text boxes (Host, Port, and Name) can be activated.
You are using this protocol because the file you're going to choose is on your local filesystem. Notice that the Host and Name text boxes are now activated. Actually, in this example you don't need to enter a host, just a filename:
This causes a file chooser dialog box to appear.
The file you should choose is located in the same directory as the tutorial file (the directory doc underneath the directory where HoTMetaL PRO is installed).
Notice that the file name has been inserted in the text box next to the [Choose File...] button. You could have typed the file name there directly, but it's probably more convenient for you to use the file chooser dialog box.
What this all means is, when someone clicks on the hot text (the word "bibliography") in a browser, the browser will attempt to locate the file (works.htm) referred to in the URL.
To see how this works, you should view the document in a browser:
The browser will now display the file works.htm.
It's possible to make a link between two anchors in the same document. Then, when you click on one of the anchors (call it the "source") the browser window will scroll to the location of the other anchor (the "destination").
One of his well-known essays is
Why I Write
#WHY
You have now set up the "source" anchor. Now you have to set up the "destination" anchor:
In this instance you're not going to create a URL for the anchor, rather, you're going to give this anchor a "name" by editing one of its attributes.
The dialog box that appears contains text boxes for each of the elements attributes, labeled with the attribute name.
WHY
Now you're ready to see the effect of what you've just done.
The browser window will now scroll so that the location of the "destination" anchor is visible.
In general, you can set up a "source" and "destination" anchor pair by setting the NAME attribute of the destination anchor to `string' and setting the URL of the source anchor to `#string'. This sets up a one-way link. You can set up a two-way link by editing the two anchors so that each one's NAME attribute corresponds to the other's URL.
Web documents often include graphical images. Images are inserted in a document using an element that is similar to the A element.
When you insert an IMG, the Edit URL dialog box will appear automatically. In this dialog, you will construct a URL for the image.
When you do this, a graphical image will be displayed inline, in the HoTMetaL PRO document window. (This is not really George Orwell, but another writer whose work you know if you're reading this manual.)
The inline image will be displayed in the browser, too.
See the section Link elements in the HTML Quick Reference for more information on images; in particular, you will find information on "hot images" and images with hot spots.
There are certain elements that a browser will display as graphical widgets, such as text boxes or drop-down list boxes, that can accept input from a user. A form in an HTML document is a set such elements that let the user enter some information and then call a program, located on a web server, that processes the information. For example, you could create a form that lets a user order a product that you're selling: you can set up the form so that when the user clicks on a "submit" button, the order is sent to your order-processing program.
To implement this, you have to:
The second of these two steps is beyond the scope of HoTMetaL PRO. You will have to obtain supplementary documentation that explains this mechanism, which is known as the CGI (Common Gateway Interface). If you open the file faq.htm in the directory doc underneath the directory where HoTMetaL PRO is installed you will find a reference to a document on this topic.
This tutorial explains how to properly set up a sample form.
We've noticed that many browsers still have bugs in their support for forms. If something that you create in this tutorial doesn't look the way it should when you display it with your favorite browser, the problem may be with the browser.
We suggest that for this exercise you create a new HTML document.
Buy my book!
Do I have a deal for you! Just click on the "Submit" button in the form below to order any or all of these best-sellers at a fraction of the regular cost!(N.B.: This is not a tutorial on sales pitches!)
Now you're ready to start constructing a form.
In addition to insertion the element, HoTMetaL PRO will give you the "Edit Attributes" dialog box.
This gives you a dialog box in which you will give a value for the ACTION attribute.
www.sq.com
cgi-bin/quagmire
The "action" you've just specified refers to a program, located on SoftQuad's HTTP server, that can process the data entered in the form. At the end of the tutorial, you can submit the form to this program. In a "real-life" situation, you would probably specify a program on your own server, though in fact you can specify programs located anywhere on the Web.
This brings up a dialog box that lets you edit the attributes of the current element.
(This is another "aside": you don't have to complete it for the tutorial.)
Another action that you can use is mailto: this causes the form to be e-mailed to a specified address. (For the purpose of this tutorial, however, please use the action described above.)
To make use of this feature:
Some browsers do not support mailto. Also, in order for this feature to work if your system is behind a firewall, you may need to configure your browser to use the correct proxy server.
Now you'll enter the first element that generates a graphical widget in the browser:
Name:
You can now preview the file to see what this looks like in a browser:
Notice that the browser has placed a text box next to the word "Name:".
You're not done with this INPUT element yet.
This brings up a dialog box that lets you edit the attributes of the current element.
cust-name
This value is used when the browser sends the form's data to the server, in order to identify which text box, drop-down list box, etc., a particular piece of data came from.
Another attribute, SIZE, is used if you want to specify the text box's length in characters. If enter some text for the VALUE attribute, this text will be displayed in the text box by default.
A text box in a form just lets you enter one line of text. If you need to allow your users to enter several lines of text at once (to enter an address, for example), you should use the TEXTAREA element.
Address:
If you want a TEXTAREA to contain some default text, enter it between the start- and end-tags.
Now you may want to see how the browser renders this object:
The browser generates a multi-line field, which may also have scroll bars.
Sometimes you will want the user to make one choice from a list of choices. In this example you'll see how to represent this with a pop-up menu.
Credit Card:
HoTMetaL PRO will ask you if you want to edit the attributes of this element.
Visa
The OPTION element represents one choice in the pop-up menu. The text you typed inside the element is a label that will appear in the menu.
To see what this looks like in the browser:
Notice that the text you typed inside each of the OPTION elements appears as labels on the drop-down list box.
When the form is submitted, the "value" associated with this list, which the browser sends to the server, will be the label of the list item that was chosen. You can override this by setting values for the VALUE attributes of the OPTION elements.
If you wanted, you could have represented this list of choices as a scrollable list rather than a drop-down list box. To do this, you would set the SIZE attribute to 2 or greater; this value would specify how many list items are shown at a time. If you want to be able to choose more than one item from this kind of list, set the MULTIPLE attribute to "MULTIPLE".
Just to complete this section of the form:
Card number
So far you have used the INPUT element only to represent text boxes. Actually, this element can be used for a variety of purposes. One of these is representing check boxes: you would use this kind of box if you wanted the user to make a "yes/no" choice. (This is different from a radio button , which you would use when you wanted the user to choose one from a group of choices.)
Check one or more titles:
The Dentistry of Frederic Chopin
Now add two more titles in the same way:
Motors and Such by Eddy Schneider
HTML for Travellers
To see what this looks like in the browser:
Try clicking on the buttons with the mouse. You can turn on all, any, or none of the buttons.
When the form is submitted, the default value associated with turned-on check boxes is the string "on" (turned-off check boxes are not submitted to the server). If you want to override this default, give values for the VALUE attributes of the INPUT elements. If you set the CHECKED attribute to "CHECKED", the corresponding check box will be turned on by default when the form is displayed in a browser.
As we said above, you can also use the INPUT element to represent radio buttons. A group of radio buttons lets the user make one (and only one) choice from a group of choices.
Preferred language:
English
Now add two more choices in the same way (keep all three choices in the same paragraph):
French
Spanish
Notice the following things about the attribute values you've just entered:
To see what this looks like in the browser:
Try clicking on the buttons with the mouse. You can turn on only one of the radio buttons at a time. The button labeled "English" is initially turned on by default.
You can use the INPUT element to generate a button that restores all the form's controls (text boxes, radio buttons, etc.) to their default values:
To see what this looks like in the browser:
The form's controls revert to their default values. The text boxes are all blank and the check boxes are turned off. The radio button labeled "English" will be turned on.
Your form is almost complete. All you need to do is create a button that causes the browser to submit the form.
To see what this looks like in the browser:
The form will now be submitted to a program on SoftQuad's web server. This program doesn't actually process an order, it just echoes back the information that the browser sent it. This information will appear in the browser window: you can return to the form by clicking on the button that takes you to the previous document.
The information is presented in pairs containing a "name" (corresponding to the NAME attribute of the text box, check box, etc.) and a "value" (for text boxes or "text areas ", this will be the data you typed in; for check boxes the value "on" is submitted--check boxes that aren't turned on are ignored; for radio buttons the value of the VALUE attribute is sent). You may notice a couple of unusual things about the format of the text: spaces are replaced by a `+' sign, and some special characters (notably newline, `=', and `&') are replaced by `%nn', where the n's are digits from 0-9 and/or letters between `A' and `F'. This is the standard form that browsers use for submitting data to the server.
You've completed the tutorial and now (we hope!) understand the fundamentals of HTML. There's additional information in the HTML Quick Reference, e.g., different types of lists, emphasis elements, and block elements.
HoTMetaL PRO was not designed primarily as a document conversion tool. However, it is possible to employ it for this purpose. HoTMetaL PRO does not perform auto-conversion: there are some commercially available filters that do.
The file should conform to the following guidelines before you try to convert it.
If your file contains these characters, you should edit it before trying to open it with HoTMetaL PRO, and do one of the following:
When the file conforms to the above conditions, it's ready to be opened. There are two commands you can use for this:
Now you can start to add more markup. It will probably make the file easier to work with, initially, if you do the following:
This will enable you see the line breaks in that were present in the original file.
The commands you will rely on most now are Surround..., Change..., and Split. For example:
Later you can add more complicated markup such as anchors and images. At any time, you can use Preview to see what the document looks like in a browser.
If you see a web page that contains a typographical effect, form, etc., that you like, then the easiest way of achieving the same thing yourself is to save the file with the browser (make sure you save it in HTML format) and then open it with HoTMetaL PRO.
The file faq.htm in the same directory as this tutorial contains titles and URLs for documents that contain information on HTML usage. Open this file with a browser and retrieve the documents that you're interested in.
A number of HTML tutorials, of varying quality, are usually available on the web. The relevant Usenet newsgroups (those in the comp.infosystems.www hierarchy) are also a source of information.
