HTML Posting Techniques

HTML Posting Techniques

Contents of this Document:

Automatic HTML formatting of discussion comments
Custom HTML formatting of discussion comments by posting in HTML
Setting up hyperlinks in posted text
How to set up hyperlinks to other discussion threads using Word
Saving discussions as a Word document
Composing HTML messages offline with Word
Referencing Specific Responses
More HTML tips
How to learn HTML
Word Macro for multi-format document saves (SaveDocTxtHtm)

From: Miles Research v.20000115

Automatic HTML formatting of discussion comments

HTML=HyperText Markup Language. The "Markup" is the insertion of 'tags' in otherwise ordinary ascii text file. Discussion questions and the follow-up responses are formatted in HTML code. Submitted text is scanned and formatting is applied in a conditional way. If no HTML tags are included, the formatter will try to make the encoded response look like the submitted text. This is the standard and best method of posting for most people, most of the time; let the formatter do the work.

However the use of HTML to mark up internet references is a good idea to improve the usefulness of the given information, and to take advantage of the hyperlink technology. If any HTML tags are included in the submitted text, the formatter assumes the entire submission is in HTML. The entire response is enclosed by blockindent tags by the reply formatter. To get familiar with how discussion text is formatted, view the source from the browser. This notepad-editor view of the source HTML code can be saved to a document directory for later review and use. For future editing or code review, save the discussion page with the .txt suffix so it will open with Notepad.

Custom HTML formatting of discussion comments by posting in HTML

If you do use any HTML at all, make sure to start each paragraph with a paragraph starting tag and end it with the closing which is the same but with a forward slash before the p: . These are sometimes referred to as container tags because it always takes two of them, a starting tag and a closing tag. Boldface text is enclosed by and its closing tag, the . Use i for italics ( text to be italics ), and u for underline ( text to be underline ). Don't forget a closing tag must appear for each opening tag, and if you don't close all your tags the format will extend through all added replies until someone includes the missing closing tag in their post. Over-use of markup tags decreases their effectiveness. For a bulleted list, use <ul> before and its closing tag </ul> after the section, and use <li> with its closing around each item. For numbered list use </ol> (ordered list) instead of </ul> (un-ordered list). As an example of one of the few non-container type tags, for a line break with no vertical space, use the break tag, which is: .

Setting up hyperlinks in posted text

If you want to reference an URL you enclose the link text with anchor hypertext reference tags. The opening tag is <a href=" the URL to reference ">. This expression beginning and ending with angle brackets and including the Reference URL enclosed in the double quote character, is the opening tag. The closing tag is: </a> ( forward-slash, 'a' inside angle brackets).

How to use HTM
Follow this pattern:
<a href="URL-to-reference-goes-here">Display text for hyperlink goes here</a>
As an example, this is the text entered (source code) for the previous heading:
<a href="http://www.milesresearch.com/main/howtohtm.htm">How to use HTM</a>

To avoid formatting surprises when you're posting in HTML (and to make sure your message is coming across the way you intend), preview your HTML message text from a browser window before posting. Make use of keyboard shortcuts such as Alt+Tab and Alt+Shift+Tab to flip between application windows, and Alt+LeftArrow and Alt+RightArrow to move backwards and forwards along your browsing window history. If you want to review other responses while posting, open the discussion topic in another window.

How to set up hyperlinks to other discussion threads using Word

Reference other discussions by including hyperlinks, which is the logical basis for the web, in your response text. A simple way to prepare links in posted text is as follows. Create a Word document with a name such as Y2kDiscussions.doc and have it open beside the IE4 web browser. From the browser window, type Alt+f, n, w to start a new window, and open the Iris Analysis (right-click this link for a new browser window).

From the New Questions (or the New Answers) window, drag the discussion headings that you want to track from the browser window to the Word Doc. This creates an absolute hyperlink in the document with the caption the same as the URL.
Above each one (Enter, UpArrow), type in the Discussion Topic.
The easy way is to Alt+Tab back to the browser, carefully highlight the Text line that gives the Topic, Poster, and Date.
Ctrl+c, Alt+Tab, Ctrl+v, creating a hyperlink in the Word document with descriptive text, normally a relative URL, which can be fixed in a later step. When you pull discussion topics from Category listings, the URL will be relative also need editing.
To add the plain text version use Enter, UpArrow, Alt+e, s, DownArrow (Unformatted text), Enter.
To make the second hyperlink in the Word document absolute select the 'www.greenspun.com/bboard/' part of the text and copy it to the clipboard, Ctrl+c, Alt+Tab to the Word document, then RightClick the second hyperlink, select Hyperlink, Edit Hyperlink. The relative URL type of link needs what's on the clipboard, so use Home, Ctrl+v , Enter.
Then Ctrl+End to go to the bottom of the doc, and add a blank line for the next Topic.
Alt +Tab back to the browser window (New Questions), and repeat with Step 1 until done.

This Word doc becomes a custom view launching pad for stepping through the discussion you are tracking, or it can serve as a scratchpad for holding links to discussion threads you may want to reference in another place. You can organize it to suit your needs. When you save this document, save the Word doc, then Save As HTML, then Close it, rename the .html file as a .txt file, open it with Notepad and copy the source code of any discussion shortcut that you want to use, to the clipboard with Alt+e,a, Ctrl+c. When you are writing a discussion response, you can copy discussion references in HTML from this text file in Notepad view, then Alt+Tab back to the input text box where you are posting. Note: there is a simpler method described below where you don't have to direct-type the HTML.

Save discussions as Word documents

In addition to setting up Word docs that are serving as link pages to relevant discussion threads (like a table of contents), you will also want to build up a collection of document files for discussions that you want to keep. Each discussion can be saved by the web browser as an HTML document, specifying a location such as 'My Documents\HTML Docs' instead of the default Temp directory. However, it's often more convenient to store the document as a word file. One advantage is you can convert to many formats beyond HTML (such as RTF, which is good for sharing with Macs), but you can also leverage the Macro capabilities available in Word to automate editing processes. To save the discussion as a Word document, Ctrl+a, Ctrl+c in the browser window will capture the web page, then Alt+Tab to Word (or start it if not running), Ctrl+n, Ctrl+v, Ctrl+s to make a new file, paste in the page, and then save it. Give the file a good name. Later you can reference it with Hyperlinks in other documents, but plan to keep it in one place.

Composing messages offline with Word

If you prefer to compose your messages offline, use a Word document to write your message. This way you can easily check the appearance of your post ahead of time to make sure it looks right. It is a good way to add in links and tables, etc. Discussion references can be dragged into the new response Word doc window, but use the right-click drag to make a copy instead of a move.

Method 1: Use Word for writing messages, then use the HTML converter to format your text. (Note: Word97 works better than Word2000.)

Here is a simple method for writing formatted replies that does not require direct-typing HTML. Use Word to make a new document (Alt+f, n), but choose the Blank Web Page template. [At this point appears an error in Word97-SR2: Ctrl-PgDn does not move through the tabbed dialog pages, it is not differentiated from PgDn which moves the icon selection to the last in the current column. So you have to use the mouse/pointer to go to the WebPages window. Perhaps there will be a fix in the third bug patch (aka MSO2000) from Microsoft.] Write your reply in this document window. You can drag in URLs and shortcuts or you can manually insert them with Alt+i, i. Use all the familiar Word text controls. Proofread your reply for how it looks overall. Then save the file, give it a descriptive name, such as 'How to format with Word'. When the message is complete and looks correct from the Preview mode, go to the View HTML Source mode with Alt+v, s. (When finished with this mode, use Alt+v, s again to exit the source code view.) From the View HTML Source mode, select the part of the text that you want to post, starting right after the opening body tag (whjch is: <body>) and its parameters, and stopping right before the closing body tag (whjch is: </body>), then copy to clipboard (Ctrl+c), then flip to the browser (Alt+Tab), and go to the posting reply input text box and paste (Ctrl+v). Check through the text (especially the opening and closing) to review for missing tags. Put in carriage returns (what a concept) before each anchor hypertext reference tag, both the opening and closing, to improve BBS reply formatter survival. These types of source code changes do not survive the Word formatter, so they need to be done in the input box. Hit submit, and when done right, your reply will look exactly like it does in Word.

Method 2: Use Word for composing HTML source code directly.

The more advanced technique is to write HTML code in a Word doc and always save it three ways, as a Word Doc, as a text file (.txt), and as a text file having a name with an .htm extension. This gives the most control over appearances. When typing literal HTML text, the autocorrect feature, if switched on, will try to reformat a completed URL into an implicit hyperlink. To undo this when it happens, type Alt+e, u (or switch off Autocorrect). After saving it as a text file with a .htm name, preview it in the browser. It is often convenient to start with the first method to generate starting code, then copy it via the clipboard from the Notepad view of the generated code into a Word document window, and touch up the HTML as needed. For Word Macro source code, see: Word Macro for multi-format document saves (SaveDocTxtHTM)

Referencing Specific Responses

Specific responses in other discussion topics can be selectively referenced by the use of name tags. When posting a message that you want to reference later, start it with the an HTML name tag. Give the tag a meaningful name, such as your name, the topic, and follow it by the digits '01' if it's your first response in this discussion (for the second, use '02', etc. remember the "Response100 Problem" and if you expect less than 10 responses needed, skip the leading zero). Insert this line for example:

This precedes the reply text. For extra convenience, use a Heading, and make the Heading an absolute URL hyperlink so others can drag it onto a Word document or other Automation Client. To do this use the following HTML to set up a self referential absolute hyperlink:

A Reference Heading which is also a self-referential absolute hyperlink
HTML code for previous line (with brackets quoted):
<a name="example2"></a><a href=" http://www.milesresearch.com/main/howtohtm.htm#example2">A Reference Heading which is also a self-referential absolute hyperlink</a>
You can drag a copy of this type of 'bookmark' to a word doc and then clicking on it will bring up this text at the top of the browser window.

For Discussion Starting Messages, the message number is unknown, but no nametag/bookmark label is needed, since the URL will default to the top without the '#mynametag', however it's often convenient to include a top label (as an a-name equal to '#top') before the starting message in case you want to set up a 'Return to Top' link later on in the discussion page. URLs that end with '#top' will generally work even with no explicit declaration of the name tag ('#top is default').

More HTML tips

HTML=HyperText Markup Language. The "Markup" is the insertion of 'tags' in otherwise ordinary ascii text file.
Remember that all tags are enclosed in angle brackets, therefore avoid using angle brackets for other purposes in your text, because the reply formatter will try to interpret anything between a less-than symbol and the next greater-than symbol as a tag. HTML systems normally will ignore any tags that are not recognized, and suppress whatever text is typed in between them.
Remember also that most tags come in pairs, so a tag such as <tag-keyword> has a matched closing tag, which typically consists of </tag-keyword>. The is a common counter-example, as it does not require a closing tag.
Tags can be nested. It is good style to have your tags nested properly! This means before closing a starting tag, make sure you close any more recent tags first. The Save As HTML option in Word is not smart enough to follow this rule, but it is not critical and the more recent versions of Word have fixed some of this type of error.
To write HTML for a link it is a good idea to display the URL as well as link to it. This means, after grabbing an URL from a browser Address box to the clipboard with Ctrl+c for example, you will need to insert this into your reply twice, first inside of the anchor hypertext starting tag (in between the angle brackets after the 'a href='), then again as the link text (between the starting tag and the closing tag). For example if you want to link to this discussion go to a browser window that has it open, and copy the URL to the clipboard. Then type <a href=", then paste with Ctrl+v the URL such as http://greenspun.com/bboard/q-and-a-fetch-msg.tcl?msg_id=000EhD, then (very important) type another double quote symbol, followed by >. At this point you are not done, you have only completed the starting tag. Next is the link text which is displayed in color with an underline (insert the URL again with Ctrl+v) and then the closing tag, which is </a>.
Example of absolute URL with URL as the displayed link text: http://greenspun.com/bboard/q-and-a-fetch-msg.tcl?msg_id=002KEU
Example of absolute URL with a caption for displayed link text: Seeking Digital SLR
Example of relative URL with a caption for displayed link text: Tips on posting HTML
Among these, the third one is fast since the whole page does not need reloading. Try it, and then type Alt+LeftArrow to return to this point. If you click on either of the other two, you will have to wait for a database query and browser page reload. The absolute links however can be dragged over to a Word document and they will still work, assuming an open internet connection.
Practice creating HTML text this way in any text editor and save with both a .txt extension and a .htm extension. Preview it by clicking the htm file, and resume editing by clicking the txt file.
To make a link for the current browser page, get the HTML address by clicking the icon just in front of URL address in the browser, and dragging over to the Word Doc. Type in a plain text description above it. If the web page has a title, select it with the pointing device and Crtl+c, Alt+Tab, Alt+e,s,DownArrow, Enter.
For Mac you may want to use Office98 to do Word-Notepad-IE document management.
Note that if you do not close an anchor text tag, it will get closed by the 'Answered by' text that is followed by a <a mailto:userid@hostname>userid@hostname</a>. Other tags such as ~~strikeout~~ will be started by an s in angle brackets and closed with a slash s in angle brackets (example: <s>this text would have the strikeout line through it</s>). If you don't close it, all subsequent text is marked up with a strikeout until someone types </s>.
For different fonts use the tag before the text to change, and the closing tag after the text to change. As with all tags, the first word inside the angle brackets is the tag identifier (in this case 'font'), and for this type of tag, you supply additional parameters by inserting them (separated by space) between the identifier and the greater-than symbol at the end of this starting tag. For the font tag, the most common parameters are 'face=', 'size=', and 'color='. When you type the parameters, they will not be in quotes, but the values assigned to these parameters will be enclosed in the double-quote symbol. Default font size is 3 which corresponds to 12 point font, default face is Times, and default color is black. You can choose a different size in two ways with 'size="+1"' which is the same as 'size="4"' (14 point) or 'size="-1"' which is the same as 'size="2"' (10 point). In some cases the quotations are optional, but it's best to use them by default, enclosing any parametric values in them. The color parameter may be specified as 'color="red"' etc. and the face can be changed with 'face="Arial"' for a sans serif font. Some browsers or platforms sucha s the Mac, may need more than one choice of a sans serif font, so to allow for this you may type 'face="Arial,Helvetica"', etc. There are many other subtleties to setting the font appearance, but this is the basic idea.
Examples: Little Red Sans Serif Big Blue Sans Serif.
HTML code for the above is: Little Red Sans Serif Big Blue Sans Serif</font'>. The   is to force a nonblank space.
Do not overuse the tags! When word processors first became popular in the early 90's, many newbies would go hog-wild and use fifteen different fonts on one page. This creates a very amateurish effect, and web pages that do this are not observing proper netiquette. It turns out that the standard Times New Roman is the easiest to read for running text (which is why newspapers always use it), and the Sans Serif such as Arial is generally reserved for section headings and sometimes titles. The rule of thumb is to use only two different faces and two or three sizes per document. The idea is to create a professional easy-to-read appearance.
The main reason for posting these instructions is so people can add hypertext links to references and resources that they are posting, making it easier to follow the link. This adds richness to the Y2k database that we are all building up. You can also reference pictures in your posted message, but be conservative about this because messages are loading slow enough as it is (even with ISDN), and graphics will really make it sluggish. The method for doing this is <img src="URL-for-pic" border="0">, and make sure to reference pics that are in the .gif or .jpg file formats. Gif's are good for animated pics, pics with transparent areas, and cartoon like figures with large solid areas; jpg's are best for photographic images.

How to learn HTML

The designer of the LUSENet has a good book online that covers many levels of HTML:
Philip and Alex's Guide to Web Publishing
http://photo.net/wtr/thebook/index.html

For other web page tools check out:

The CGI Resource Index: Programs and Scripts: Perl: Form Processing
http://www.cgi-resources.com/Programs_and_Scripts/Perl/Form_Processing/

Free webpage counter and statistic service
http://www.thecounter.com/

Word Macro for multi-format document saves (SaveDocTxtHtm)

To use the Word-Notepad-IE4 method of writing HTML more efficiently, put the following macro into your Normal.dot and link it in to a button on the toolbar. Choose an icon or use the caption 'SaveDocTxtHtm'. When clicked, it will save your HTML as Word doc, then as a .txt file, then as a .htm file. This is the most reliable way of creating HTML pages with Word.

Sub SaveDocTxtHtm()
'
DocPath = ActiveDocument.Path
DocName = ActiveDocument.Name
'
If DocName = "" Then Exit Sub
FileName = Left(DocName, Len(DocName) - 4)
FilePath = DocPath + "\" + FileName
'
'
    'Save first as a Word File
    '
    ActiveDocument.SaveAs FileName:=FilePath + ".doc", FileFormat:= _
        wdFormatDocument, LockComments:=False, Password:="", AddToRecentFiles:= _
        True, WritePassword:="", ReadOnlyRecommended:=False, EmbedTrueTypeFonts:= _
        False, SaveNativePictureFormat:=False, SaveFormsData:=False, _
        SaveAsAOCELetter:=False
    '
    'Save next as a Text File
    '
    ActiveDocument.SaveAs FileName:=FilePath + ".txt", FileFormat:=wdFormatText, _
        LockComments:=False, Password:="", AddToRecentFiles:=False, WritePassword _
        :="", ReadOnlyRecommended:=False, EmbedTrueTypeFonts:=False, _
        SaveNativePictureFormat:=False, SaveFormsData:=False, SaveAsAOCELetter:= _
        False
    '
    'Save next as an HTM Text File
    '
    ActiveDocument.SaveAs FileName:=FilePath + ".htm", FileFormat:=wdFormatText, _
        LockComments:=False, Password:="", AddToRecentFiles:=False, WritePassword _
        :="", ReadOnlyRecommended:=False, EmbedTrueTypeFonts:=False, _
        SaveNativePictureFormat:=False, SaveFormsData:=False, SaveAsAOCELetter:= _
        False
    ActiveDocument.Close
End Sub