HTML TagWriter 3.8HTML TagWriter 3.8
E-mail: see the "Contact" section
Website: https://www.dr-lex.be/
TagWriter-site: http://go.to/tagwriter
This is a brief tutorial which demonstrates the features of HTML TagWriter. If you're new to HTML, you may want to read "A short intro to HTML" first, although this tutorial will also give you an idea of how HTML works.
Mind that this tutorial is a little outdated, it may refer to features no longer supported or omit some of the new useful features, and it will most likely cause you to make HTML documents that violate the HTML 4.01 standard.
The easiest way to use this tutorial is to print it, since you'll need your browser for the tutorial itself.
You don't need to go through this entire tutorial, or follow the numbers. If you already know the basics, you can just pick the paragraphs that interest you.
Before we start: with a lot of buttons, extra features can be accessed by pressing the 'Command' key on your keyboard. This key looks like this: 
and is not to be confused with the 'Option' key which looks like this: 
or the 'Control' key which has the letters "ctrl" printed on it.
Of course, don't forget to launch HTML TagWriter, you might have some problems if you forget this important step... :)
HTML TagWriter has a concise "online help system". If you don't know what a certain button is good for, hold down the mouse on it while pressing the Option key. You'll see a short description popping up at the top of the window.
We'll start with a simple document: click the 
button. You may then be asked the following things:
-Title: you can use anything here (in case of lack of inspiration: "Tutorial" will do)
-Background, text, link... colors: you can set these to your taste, but try to choose 'em so that text remains visible (don't use a white background with yellow text!)
-Keywords & description: click "No" (unless you really want to).
If you want to skip all these 'questions' when creating a new document, you can hold down the mouse on the button and choose "Minimal", which will create the simplest HTML file possible.
Before you can do anything useful, you need to type some text in the file. If you're really out of inspiration, you can copy the "Your HTML here" sentence a few times to fill the screen... Make sure to split up the text (or whatever it is) into paragraphs.
When you have typed your text, click the 
button to show the page in your browser (you'll be asked if you want to save the file first, of course you do). You'll notice that any paragraphs you may have created, will be gone. The reason for this, is that in HTML, a simple carriage return has no value. If you want to start a new line, you need to insert a <br> tag. Luckily, HTML TagWriter allows you to do this easily: instead of just pressing return, press Shift-return and a <br> tag will be inserted! Another way to insert these tags, is first typing your text as usual, and after selecting it, clicking the 
button in the "Objects & Tags" palette.
There's a limit to the amount of text that can be edited; this limit is 30000 bytes (29.3K). The size of the current file is shown by the little number at the bottom left corner of the window. If this comes close to 30000, it's time to think about splitting up your file or using an embedded file (see below).
Next to this number is a pop-up menu which contains the name of three operating systems (one of which you probably don't like too much). This pop-up menu determines the format in which your file will be saved. Mac OS, Windows and UNIX have different ways of starting a new line, and they use different character sets. The character set used in webpages is ISO-8859-1, but the Mac OS uses a different set. Therefore, it is highly recommended to save your files in either Windows or UNIX format, unless you are sure that when uploading your documents to the server, the character sets will be converted. However, when viewing Mac format files locally, characters like §, é or ¥ will be displayed incorrectly in your browser: ß, È or •, so it's a better idea to save your files in non-Mac format from the start, and use binary transfer in your FTP application...
We'll show the use of the 3 other small buttons further on.
The palettes can be used as floating palettes, or as a fixed button bar. It depends on the size of your screen and your personal taste what will be the most suitable for you. Use the "Palettes" menu to experiment with them, but make sure all the palettes are visible at the end.
There are two ways in which styles can be applied to HTML documents: the old way and the new way. The new way is called "Cascading Style Sheets", and is more powerful than the "old way". But you can mix both up, or use the CSS to redefine the "old way" tags. I'll start by explaining how styles were used in the good ol' times. If you wish, you can just skip this section.
The first 9 buttons (with the super- & subscript buttons counted as one) of the "Text palette" apply styles. The 
button has multiple functions, and therefore you must hold down your mouse on it until a pop-up menu appears. In this pop-up menu, text size and face can be chosen. There are 7 text sizes in HTML, which correspond to the point sizes 9, 10, 12, 14, 18, 24 and 36 (unless you changed this in your browser's preferences). The font faces can be chosen from a preset list (see preferences) or typed on-the-fly as a comma-separated list of font names, with the most preferred fonts first.
The 
button applies header styles, which create headers like the ones in this document.
The 
stands for "Logical Styles", which are predefined styles or special text formattings. For example, "<PRE>" sets the text in a monospaced font and keeps the formatting of the source file while keeping multiple spaces and carriage returns in account. The best way to learn what these styles do, is just experimenting with them (actually, this is true for everything!)
Text colors can be chosen from the pop-up menu which appears when holding down the mouse on the "Text color" button 
, or from the standard color picker. Colors can be color names (16 in total) or 3-hex number codes (16777216 in total).
A difference between styles in HTML and styles in a word processor, is that you can't remove a style by selecting the styled text and applying the same style again. As you can see, tags like <B> and </B> or <FONT ...> and </FONT> were added while applying the style. To delete the style, you must delete these tags. An easy way to delete many style tags at once is using the "Nuke" button 
in the "Objects & Tags" palette: select the text to de-style and choose "Text styles & sizes" from this button's pop-up menu!
Styles can be "nested" at will, but there is a problem when trying to overlap styles: for example, the following HTML:
<B>This is an <I>example of</B> overlapping</I> styles
won't result in the expected
"This is an example of overlapping styles",
but in:
"This is an example of overlapping styles"!
The reason for this, is that in HTML, every font-related ending tag is of equal value. In fact, you could replace all ending tags by "</FONT>", it wouldn't make any difference. The solution to the previous problem, is re-writing the HTML as:
"<B>This is an </B><I><B>example of</B> overlapping</I> styles".
That was the "Old way". It still works and strictly spoken, there's no objection against still using it. But Cascading Style Sheets offer far more possibilities. There are three ways to use style sheets:
-Local: this means that you add a style="..." attribute to a tag, which makes the text between that tag show up in that style,
-Global: this means that you define the styles in the header of the file so you can use them multiple times in the document. E.g. if you have defined a style ".myStyle", you can apply that style to any tag by including the attribute class="myStyle" in the tag!
-Linked: this means that you have definied the styles in an external document, which is linked to the current document. You then can use the styles from that document like with global stylesheets, but now you can do this in as much separate files as you want.
If you think CSS are complicated, don't worry: HTML TagWriter does most of the work for you! In fact, you only have to choose how your styles should look like. Here's how to do it:
To apply a local style, choose the "Style" item from the -button's pop-up menu. Or use the contextual pop-up menus to edit the "style" attribute of an existing tag. I won't explain you how to edit a style. As soon as you're doing it yourself, you'll see why. You'll also see that you can do much more with style sheets than with classic formatting. Try making text as big as your screen: it's possible!
To use global styles, choose "Style Sheet Editor..." from the "HTML Tools" menu, or choose "Styles..." from the Document Properties 
button's pop-up menu. The latter method will send all styles already defined in the document to the style sheet editor. You then can add, remove or edit styles at will, by holding down the mouse on the field at the bottom. Most of the functions are self-explanatory, in doubt just use the Option-click! When ready, insert the fresh styles in the document with the "Insert" button. You then can apply the styles by choosing them from the "class" item of the Font pop-up menu, or from the "class" property of the contextual pop-up menus.
To use a linked style sheet, choose the appropriate command from the "Document properties" button's menu, and select the file which contains the styles. That's it! Don't tell me it's hard...
Note: CSS also allows to use so-called "IDs" next to classes. For instance, while P.fat {...} defines a class "fat", P#fat {...} defines an ID "fat". Instead of using the 'class="fat"' attribute, you can then use 'id="fat"'. The difference is that you can only use an ID once, i.e. an ID is unique. Mostly you'll only want to use classes, because they have the same functionality and more. However, it can be useful to use IDs to better structure your document.
<P>" tag starts a new Paragraph and aligns it to the left, center or right (hold down the mouse on the 
button to choose). There's always some space before the start of a new paragraph or after the end of one. The "<DIV>" tag (
button) also aligns text, but without starting a new paragraph.<P align="center"> tag:Example text
<DIV align="center"> tag:
The third way is to specify the alignment with style sheets. E.g. if you place text between <SPAN style="text-align: center"> ... </SPAN> tags, it has the same effect as <DIV align="center"> ... </DIV> tags.
Make sure that you have at least one document aside from the one you're working on now, to link to (if you're too tired to make a new one, just copy the current one and rename it). You can put it in the same folder, or in a new folder, as long as it stays on the same disk.
Links can be made to lots of different 'targets', like local files (which can be reached by jumping through some directories only), http:// links, which point to a different server, ftp:// links, which point to an ftp server, mailto: links which start up an e-mail program... Links to parts of the same document are also possible.
A link always consists of a piece of text or an image which can be clicked, and an URL which is embedded in the tag, which tells the browser where to go to. Example:
<A href="http://www.apple.com">Apple Site</A>
becomes
We'll start with a local link: type some text which will function as link, and select it. Then hold down the mouse on the "Link" button 
in the "Objects & Tags" palette. Choose "local link" and "Choose file..." in the submenu. Then select the other file you just created. The whole tag + URL will be inserted automatically, and the link is ready to use! If you don't believe it, launch the file and click...
Http:// links and other types work the same way, except that instead of selecting files or something else to link to, you need to type the URLs or e-mail addresses yourself in most cases. If you have some commonly used URLs or addresses, however, you can add these to your "favourites" list in the Preferences to make them available in the submenus. And, if the URL or e-mail address has been typed in the text already, like in "Mail me at some.address@somedomain.com", you only need to select the URL/address, click the link button once and TagWriter will make the appropriate link at once. Try it!
To make a link to a part of the same document, you first need to mark the place to link to. Since this only makes sense with large documents, first fill your document with <br> tags or duplicate text until it doesn't fit in one browser window anymore. At the bottom of the document, type some text you'll want to link to. Then, select that text and hold down the mouse on the "Link" button again, but this time choose "object name". A tag will be inserted and you need to type a name for the object. This name can be anything, but it can't contain returns or other unusual characters. It's a good idea to always use only letters, numbers and dashes in object names.
Now you can link to the object you just named: go back to the top of the document, and create a new link. This time, choose "#anchor link", and choose the name of the newly created object from the submenu... ain't that easy? If you now launch the file, and click the link you just added, your browser will jump to the named object at the bottom. You can imagine that, if your document becomes really large (like the help file), it can be very useful to use such links...
You can also use these named objects to make it easier for yourself to navigate through your document while working on it: if you hold down the mouse on either the "Anchor" button 
or the 
button at the bottom, you'll get a list of all named objects. If you select a name, TagWriter will jump to it. A similar thing exists for local links to other files too: if you hold down the Shift key while pressing the "Anchor" button, or you simply use the Links button 
, you get a list of the local links in the document. You can also click in a local link in the document, and press Command-L, which has the same effect!
Inserting an image is as easy as making a link. First of all, make sure you have a GIF or JPEG image in the same folder as (or in a subfolder of) the file you're working on. If you don't have any, copy one from the "imgs" folder in the Documentation folder.
To insert the image, just click where you want it, and hold down the mouse on the "Image" button 
in the Objects & Tags palette. Choose "File...", and if you want a border around your image, choose one from the submenu. Guess what you need to do next... just open the image and all the necessary stuff is inserted!
If the image you want to insert is on another server, you can work this way: search the image in your browser, copy it to the clipboard, click in your document where you want it, and click the "Image" button. You will be asked to use the dimensions of the image you just copied, and since this improves the rendering speed of your page, choose "Yes". Next, go back to your browser and copy the URL of the image, and paste it at the place of the insertion point in TagWriter. Ready!
Inserting other objects, like embedded objects (movies, sounds...) works in the same way, except for that you only need to copy their URLs.
The other objects in the O&T palette are: JavaScripts, Applets, Movies and other objects 
, Lists 
and Forms 
. Read the help file or a HTML reference for the specifications of these.
Of course images can be used as links too, by just selecting their tag and using the same procedure as described in 5. You can even define different clickable regions in an image (a so-called "ImageMap"). Read the documentation for more details.
You probably know the contextual pop-up menus in the Mac OS 8 Finder which show up when you Control-click somewhere. A similar thing exists in HTML TagWriter, and it allows you to edit tags very easily. This is how it works:
First search a tag you want to change, like an image you want to align to the right of the page with the text running around it, as shown here. Hold down the Control key on your keyboard (the cursor should change to a hand) and hold down your mouse on the tag. A pop-up menu with lots of editable attributes will show up. In our example, we wanted to align an image to the right, so we choose "align" and "right" in the submenu. The attribute will be added to the tag. While you're busy anyway, you can set the horizontal and vertical spaces for the image to 8 and 4 (otherwise the text will stick right against it and that's ugly), by changing the "hspace" and "vspace" attributes respectively. Don't forget to look at the result in your browser!
Of course this doesn't only work with <IMG> tags, it actually works with every common tag (see the documentation for a complete list). Just try it out, there's no better way to learn what attributes a certain tag can have, and what effect they have in your browser!
In most submenus for the attributes, the first item is "Default" or "None". If you choose this, the attribute will be removed and the default will be used. The last item is commonly "Edit..." or "Other...", and it allows to enter a custom value which is not in the pop-up menu.
You'll notice that in lots of the pop-up menus, for tags like H1 … H6, EM, STRONG, FONT, ..., there will be an attribute "style" and "class". These can be used to define or apply a local or global stylesheet. For example, you can define a stylesheet in the header of the file that says that every H1 tag of class "head1" should be in Helvetica Black, 24 points, underlined. If you then ctrl-click a H1 tag in the document, you'll be able to choose "head1" from the "class" submenu. That H1 tag will then have the style as defined in head1... capito? If you want to have more detailed information about style sheets, read the documentation, the HTML tips, or a HTML reference.
Lots of people claim that tables in HTML are the most awful thing to do. That's why this program offers some options which generate instant tables for you. In this paragraph, we'll make a multi-column table from a list of names - without typing any tags!
Inserting an empty table from the "Table" button 
and then copying & pasting all names, would be a way to achieve this, but could be pretty cumbersome: imagine you need to edit that list of names frequently, and the table has 3 columns. It would require lots of cut & paste work to keep it right.
Generating such a table instantly is already a lot handier: you don't need to type or insert any tags, or split up the list of names yourself! Let's try it: here's a list of names, in random order:
Will Bill John Alexander Thomas Patricia Stan Ann Boris Frank Steve Mark Peter Monica
Copy them into a new file. Make sure there is a "<br>" tag after each name. A very simple way to do this, is just selecting the entire list + the next line, and clicking the "HTML-ize" button. Now select all names, starting with the "W" from Will and ending with the ">" of the "<br>" tag after "Monica". Hold down the mouse on the "Table" button and choose "3" from the fourth option's (Generate static…) submenu. You'll be asked "Sort table's contents?", choose "Yes". You'll see the necessary table tags being inserted immediately. The columns are created according to the carriage returns in the list, not the "<br>" tags.
But this still doesn't solve our problem of adding new names without having to redo the whole operation. That's why there's a fifth option in the "Table" menu. Select the entire table you just generated and hold down the mouse on the "" button and choose "Table tags". This will remove only the table tags in your selection. Now re-select the same text as before (starting with the "A" from Alexander and ending with the ">" after "Will", because the names have been sorted) and this time, choose "3" from the fifth option's submenu in the "Table" menu. Answer "Yes" again to the "sort" question. You'll see that this time, only "<!MULTICOL..." and its corresponding ending tag are inserted. The list of names just remains the same. Now save your file and launch it: the result is identical to the previous! If you now look in your browser at the source of the page, you'll find the table tags which were inserted while saving the document. The next time you open the file again, these tags will be stripped automatically, so you can edit your list at will without bothering about the tags, and then have the table re-generated & sorted automatically when saving again. Just try it: add a few names, remove some, and see how the table adapts to your changes.
To train the use of contextual pop-up menus, try changing the number of columns in the table, adjusting the width, setting a table border, ... without typing anything! Any attribute you apply to the "<!MULTICOL>" tag will be used for the "<TABLE>" tag when saving.
While embedded files originally were a workaround for the 30K-per-file limit, they can be very useful to save you from a lot of work. A concrete example is this very Tutorial file and all other documentation files from TagWriter: the header you see at the top was actually made only once and then embedded in all the files (open them in TW, you'll see the <!-%HTML-TW ...> tag which does this). This doesn't only avoid having to copy & paste the header manually 4 times, but if I now change the header, all files which have it embedded will be changed automatically!
To demonstrate the power of embedded files, you should create a few different files (or copies of the same file), like 3 or 4.
Next, you must create the embedded file itself. Very important: an embedded file must never contain a <HTML> tag. The reason for this, is that embedded files always are parts of a file, never an entire file. If you embed a file with a <HTML> tag into another HTML file, weird things may happen, like sudden appearances of mysterious blue screens with white characters saying "An error occured in module NETSCAPE.EXE at registers 57 69 6E 64 6F 7A 65 20 46 69 6C 74 68 21", or so.
So the morale of the story is: if you are about to create an embedded file, always choose "Blank document (embedded file)" from the "New" button's pop-up menu. This will create a document with absolutely nothing (so no HTML header) in it and that's just what we need.
In the embedded file, type anything you want. If you want to insert images or local links, there is a precaution: you must save the embedded file in the same folder as the file(s) you'll embed it in. Otherwise the URLs for the images and links will be incorrect. You'll see that TagWriter proposes an extension ".emb" when saving. This is not required: you can use anything or no extension at all. But it's a handy way to recognize embedded files.
Next, go to each of your previously created (or copied) files, and select a place to embed the file. Then choose "Embed file" from the "HTML Tools" menu and open the file you last created. You'll see that a tag like "<!-%HTML-TW includeFile=...>" is inserted. If you want to remove the embedded file afterwards, you need to delete this tag. When you now save the file, the other file will be embedded while writing the file. You won't see this until you launch the file in your browser. Repeat these steps for all files you want to embed the file in, and check the results in your browser.
So now you have the same file embedded in several other files without any copy & paste juggling. Doesn't look too exciting, but now we'll do something more interesting: re-open the embedded file in TagWriter. You'll see that at the bottom, a tag like "<!-%HTML-TW includedIn=...>" has been added. This tag keeps track of all files in which the file was embedded, so don't delete it. You'll understand why after doing the following:
Change something clearly visible in the embedded file (like setting the text size to 7) and save the file. You probably understand that, if you just had only copied & pasted the file's contents into the other files, you now would have to re-do that all over. But... open all files in your browser and behold: they are all updated with the changes you just made!
That's what the includedIn tag serves for: when saving the embedded file, TagWriter looks for this tag and updates all files listed within it automatically. Of course there is one drawback: if you rename or move one of the files, it won't be found until you open and save that file again, so the dynamic link can be restored.
You can easily jump to embedded files by choosing their name at the bottom of the "Anchor" pop-up menu. The Embedded Files button 
offers the same functionality, but it also works in the reverse way: when you're in an embedded file, you can go back to any of its "parent" files with this button. Also, if you're editing an embedded file, and you click the "Launch" button, you can choose to launch any of the "parent" files, or open one in the editor.
If you often create large text files with several paragraphs in it, you'll want to create a table of contents at the top, with anchor links that point to the paragraphs, just like this very tutorial file (all right, you probably printed it, but it won't hurt opening it in your browser and trying the TOC yourself...) Of course it's quite a lot of work to generate such a TOC yourself. Luckily, there are several ways to generate such a list automatically.
First make sure you have a pretty large document with lots of named objects. Because it takes a while to make such a thing, you can simply take a copy of a few of this tutorial file's paragraphs to play with.
Click at the place you want to insert the TOC (logically, this should be somewhere at the beginning of the document). Next, hold down the mouse on the "New List" button in the Objects & Tags palette. Next to the three "ordinary" lists, you have 6 menu items for making TOCs. We'll start with a "static" TOC. Choose one to your taste, and you'll see the TOC appear at once, without any typing! The advantage of this, is that you can edit the list afterwards, e.g. split it up, add text, or omit some links. The disadvantage is that, if you change or add a paragraph afterwards, the list will be outdated and you'll need to change or re-generate it manually.
That's why there are dynamic TOCs too. These work in the same way as an embedded file: they are generated at the moment you save the file. Try it: remove the old list, and this time choose one of the last 3 items in the List pop-up menu. This time only a tag like <!DYNLIST ...> will be inserted. Of course you can put this tag between other tags, which will then be applied to the list itself. If you now launch your file, you'll see that the list will be visible in your browser! If you now add, remove or change a paragraph's title, the list will adapt automatically.
The drawback of these dynamic lists is that you can't manipulate their contents directly. If you have a document with several different sections, you probably would like to have their TOCs separated by a line or a title. Don't worry: this is possible! The trick is to define several sections in the document with the SECTION tag. This tag is not defined in any standard, but it's a TagWriter feature which allows you to create lists that are limited to only a part of your document:
To define a section, select the desired part of your document and choose "Document section" from the -popUp menu, then type a name for the section. When you have created the sections you want, make a dynamic list for each one. Hold down the mouse on each of these !DYNLIST tags with Ctrl held down to make the attribute pop-up menu appear, and choose under "section" the name of the section that should be listed. This "section=..." attribute tells TagWriter to only list the objects in that section. You now have separate lists for each section, so you can do with them what you want!
Examples of section-limited TOCs can be found in these very help files. If you look at e.g. the source of the "Using_TagWriter" file, you'll see that the section "UsingStack" is split up over the main file and the embedded files, which is no problem at all!
A section can consist of several separate parts: just use the same name for all those parts and they'll be considered as one large section. This can be useful to exclude certain named objects inside a section from the TOC.
You can also achieve interesting results by combining dynamic TOCs with embedded files: try making an embedded file with a dynamic TOC in it, and then embedding it in 3 totally different files with named objects... the embedded file will adapt itself to the file it's embedded in!
A note about choosing the position of the named objects: the titles used in the automatically generated TOCs, are the pieces of text between the <A name=...> and </A> tags. So if you want your TOC to look right, put only the paragraph titles between these tags. Any styles or images in the named objects won't be visible in the list itself. If there's no text between the tags, the object name itself will be used.
Congratulations, you made it through this tutorial! If you understand everything explained here, you're ready for the real thing. Otherwise, re-read the section(s) you don't understand, and experiment with the features explained there until you get the hang of it. Of course, if you really have a problem you can mail me.