Guide to Using HTML in your Messages -- Great North Road (GNR, Northern Rhodesia, Zambia)

The Great North Road. Click here to go to the home page.

Northern Rhodesians Worldwide

User ID: Password:

Guide to Using HTML in your Messages

MESSAGE BOARD MENU:
[ Post a message ] [ Current messages ] [ Archived messages ] [ Add photos ] [ Important notes & tips ] [ Lost passwords ]

Some people have asked how they can enhance their messages posted on the message board in various ways. While I'm not going to give an exhaustive lesson in HTML (Hyper Text Markup Language, the "programming" language used to create Web pages), I will point out a few of the more common ways you can improve the readability of your message if you are so motivated. There are hundreds, if not more than thousands of sites on the Web where you can find information on how to write HTML ranging from basic to advanced. A good place to start if you want more information than I am going to give here is the HTML Writers' Guild at www.hwg.org.

These instructions also assume that you are familiar with several aspects of the operation of your personal computer (which is assumed, for the most part, to be a Windows-based machine) such as the desktop and how to save files to it. If all of this is just too much for you to be bothered with, that's just fine. Well written messages posted in plain text are more expressive than badly written messages displayed using all sorts of fancy formatting, which can sometimes detract from the message.

One word of caution about using HTML in your messages -- if you mess something up, every message on the rest of the page below yours will probably suffer. I'm not even going to give an example, as it will happen soon enough that you will know what I mean. That's alright though, as I have screwed-up on the message board on more than one occasion. The only difference is that I have direct access to the file that creates this page, so I can fix my mistakes. Periodically I will fix any glaring errors on the message board but until I do, the person responsible for the mistake will have to sit in the corner wearing the dunce cap for everyone to see. C'est la vie. Some people who run message boards like this don't let the people participating on the board use HTML (and set up the software to prevent it), but I'm sadistic and like to watch people learn.

Please note that when you see "Type... to get..." this means that you need to type everything you see (except, of course, "type" and "to get"). Even leaving out a seemingly insignificant colon ( : ) will mean that whatever you are trying to achieve will fail. Remember too that angular brackets and double quotation marks need to be balanced (i.e., closed once opened). If you don't do that, the results will be unpredictable.

HTML Tags

Let's start with a bit of terminology. HTML uses "tags", which are placed around an item on a page that is "marked up". For example, the title at the top of this message (Guide to Using HTML in your Messages) is marked up with a "strong" (or "bold") tag. Tags are enclosed in angular brackets (< and >). For most tags there is an opening and a closing tag. Most of the mistakes that I referred to in the previous paragraph will happen when someone forgets to insert a closing tag or a closing angular bracket (which are two different things). Here's how I made the title:

Guide to Using HTML in your Messages

The first "strong" tag is the opening tag and is enclosed in opening and closing angular brackets. The second "strong" tag is the closing tag and is also enclosed in angular brackets.

Note that the closing tag looks the same as the opening tag, except that the first character inside the opening angular bracket is a forward slash ( / ). The angular brackets on most QWERTY keyboards (at least in North America) are located on the comma key for the opening bracket (also called the "less than" sign in maths) and the full stop or period key for the closing bracket (also called the "greater than" sign in maths). To make these characters, hold down the "Shift" key while pressing the appropriate other key (comma or period). The forward slash is the one on the same key as the question mark (?). The tags do not have to be capitalised as I have done here, however, I do capitalise my tags as it helps me easily locate them when I am creating or editing a message so that I can ensure I have a closing tag for every opening tag.

These tags will "disappear" when you submit your message, and in their place on the message board you will see that the text that you marked up will be appropriately formatted. A good way to learn HTML is to look at the code that creates the pages that you view. To do this with Internet Explorer and Netscape Navigator, right-click on a blank area of the page for which you want to view the source (not on top of a graphic) and select "View Source" from the menu that pops up.

Some tags also have "attributes" and some are even useless without attributes. An example would be the "font" tag; on its own it does nothing, but once you define certain attributes it can modify the style, size and/or colour of the letters it affects. For example:

This text is not modified by a font tag.
This text is one point bigger than the rest of the unmodified text on this page.

This text is one point bigger than the rest of the unmodified text on this page.

This text is one point smaller than the rest of the unmodified text on this page.

This text is one point smaller than the rest of the unmodified text on this page.

This text is red.

This text is red.

This text should appear in the "Comic Sans MS" font.

This text should appear in the "Comic Sans MS" font.

This text is one point bigger, red and in the "Comic Sans MS" font.

This text is one point bigger, red and in the "Comic Sans MS" font.

The tag in the above examples is the "font" tag. The attributes are "size", "color" (note the American spelling) and "face". Notice that the value of each attribute is enclosed in double quotation marks ( " ) and that there is a closing tag at the end of the string of text that you wish the "font" tag to modify. (The "font" tag and its attributes are discussed in more detail below in the "List of HTML Tags" section.)

Tips for this Message Board

The software that runs this message board automatically does a couple of things for you. Normally HTML requires that you insert "break" tags in your message to create a new paragraph. The software does this for you, so you only have to hit the Return or Enter key twice to skip a line. The software also automatically adds your name, e-mail address, city, state / province and country (as you entered them) at the bottom of your message. It also adds the precise day, date, time and time zone (in this case the Pacific time zone on the west coast of North America) so that people know when you posted the message.

When posting a longer message, especially ones that uses HTML, it is often easier and wiser to compose your message off-line in a plain-text editing programme such as Notepad, which comes with Windows. If you follow this advice, please use Notepad or some other plain-text editor. Please do not use Microsoft Word, Corel WordPerfect, or a similar word processing programme. There is no advantage for you in using such word processing programmes, as your formatting does not transfer to your message. What does transfer, however, are certain embedded codes which prevent the indexing of the message board so that people using the search feature will have problems. Besides, using a plain-text editor uses far fewer resources on your computer and is much faster.

Back to the tips. It's easier to use a plain-text editor to initially compose your message (rather than the box on the posting page) for the following reasons:

You generally have a bigger window than the little box provided on the message posting page in which to get a broader view of your text, which makes reading and editing your message much easier.
You can save your message to a file and preview it in your browser, although since you won't be using "break" tags (as they are inserted for you by the message board software) all of your text will appear in a single paragraph. To preview your message in your browser, save the file with a ".htm" file extension (without the double quotation marks, of course) in a place you can easily find it. I recommend the desktop. Then you just have to double-click the file to open it in your browser. If you can't find the file, try clicking the Start button, moving your mouse to Documents and then clicking the name of the file if it appears in the list of files that pops up. While you will just see a big clump of text in your browser window, you will at least be able to see if a "strong" tag (for example) was not properly closed, resulting in all of your text after the opening "strong" tag being bolded.
You can save money if your ISP and/or telephone company charge you for the amount of time you are connected to the Internet.
You can refer to messages on the main message board page while you compose your message, so that you don't have to try and remember what someone said.

It's wiser for the simple reason that if your computer crashes while you are composing a message, you will have the file that you saved to your hard drive before you crashed. If you crash while you are composing something in the little window on the message posting page, everything you typed is gone and you will have to start over because there is no way to save what you have typed for editing at a later time. I can't tell you how many times that has happened to me, and it's very frustrating.

To transfer your message from your text editor to the message posting page, simply follow these steps:

Highlight all of the text in the text editor window by following these instructions:

Place your mouse pointer to the left of the first character in your message.
Click and hold the left mouse button,
Drag the mouse over the text to a point to the right of the last character in your message.
Release the mouse button.
(If you have a more advanced text editor than Notepad, you can accomplish the same thing by holding down the "Ctrl" key on your keyboard then pressing and releasing the "A" key. However, due to Microsoft wisdom, you can't do this with Notepad.)

Hold down the "Ctrl" key on your keyboard then press and release the "C" key.
Bring the browser window with the message posting page to the front.
Click your mouse inside the text box where you would normally type your message.
Hold down the "Ctrl" key on your keyboard then press and release the "V" key.

The text, including the HTML tags, will magically appear inside the text box. Then all you need to do (after ensuring you have filled in the other boxes with your name, e-mail address, etc.) is click the "Submit your message" button to add your message to the message board.

List of HTML Tags

With all of that information, all you really need now is a list of some of the more common tags that you can use to enhance your message. Despite all of my dire warnings above about screw-ups, please feel free to enhance your messages however you like. As I said, I will fix any mistakes a couple of times a month. If someone does something to make the message board unreadable, please e-mail me and I'll have a look right away.

Please note that the tags and attributes unfortunately use the American spelling of any words that are spelled differently (read "incorrectly") by the Americans. Hence the "centre" tag is really the "center" tag and the "colour" attribute is actually the "color" attribute.

BOLD

Bolds the text around which the "strong" tags are placed.

Type Bolded Text to get Bolded Text.

ITALICS

Italicises the text around which the "emphasis" tags are placed.

Type Italicised Text to get Italicised Text.

UNDERLINE

Underlines the text around which the "underline" tags are placed.

Type Underlined Text to get Underlined Text.

COMBINATIONS

It is possible to combine the above tags to produce a cumulative effect.

Type Bold, italicised, underlined text to get Bold, italicised, underlined text.

FONT

Changes aspects of the appearance of the font in ways other than the three previous tags. The "font" tag requires the use of attributes. Usual attributes include "size", "color" and "face".

Type Bigger, red text using the "Comic Sans MS" font to get Bigger, red text using the "Comic Sans MS" font.

Note that, as in the examples using the "font" tag earlier in this document, you can use just one attribute, or you can use several, but you must use at least one. Normally, for the purpose of posting messages on the message board, the "strong", "EMphasis" and "Underline" tags are sufficient. Additionally you should note the following points about the various attributes:

Size -- There are practical limits on the size of the font you can use. Using a size of "+200" will not actually give you a font that large, and similarly a size of "-200" will not give you microscopic or invisible text (although someone with bad eyesight might disagree).
Colour -- There are other ways to specify colour, but that's another several pages of information. Just stick to the more well-known primary and secondary colours and you will be safe. Please also note that the spelling of the attribute is American (i.e., "color", not "colour").
Face -- As with the colour attribute, stick to well-known font "faces". The problem with specifying a font is that the person viewing your message must have the font you have specified installed on their computer. If they do not, they will see your message in a different font. Since there are some fonts that come installed with Windows and Macintosh operating systems, it's usually safe to use those. If you have a fancy word processing or greeting card programme installed on your computer that also installed a zillion cool fonts that you'll never use in a hundred lifetimes, don't use one of those as few people will have the same font on their computers.

LINKS

To create a link to a page on another Web site, you need to use the "anchor" tag.

Type <A HREF="http://www.greatnorthroad.org/books/index.php" TARGET="_new">GNR Book Store</A> to get GNR Book Store.

The tag in this case is simply "A" and the attributes are "href" and "target". The "href" attribute is the Web site address (or URL) of the document to which you wish to link. It is best to copy and paste this from the address bar of your browser to avoid making a mistake while retyping (as I often do). The "target" attribute is not necessary, but using it with the value of "_new" (note the underscore before the word "new") will open a new browser window when the link is clicked on, so making it easy for people to return to the GNR message board when they are finished looking at whatever was on the page you sent them to. The underscore ( _ ) is made by holding down the "Shift" key and then pressing and releasing the dash or hyphen ( - ) key, which is between the 0 (zero) and "equals" ( = ) keys.

The text that is between the opening tag (<A HREF=....>) and the closing tag (</A>) is what will appear as the link. You can put whatever you want here but you must put something, otherwise there will be no link on which to click. You can even just put the actual Web site address instead of descriptive text. For example, instead of the example above you could:

Type <A HREF="http://www.greatnorthroad.org/books/index.php" TARGET="_new">www.greatnorthroad.org/books/index.php</A> to get www.greatnorthroad.org/books/index.php.

To create a link to an e-mail address it's almost the same.

Type <A HREF="mailto:john@domain.com">john@domain.com</A> to get john@domain.com.

Or type <A HREF="mailto:john@domain.com">John's e-mail</A> to get John's e-mail.

Note that the only attribute in this case is the "href" one. Do not use any other attributes when linking to e-mail addresses.

IMAGES

At the moment there is no facility to upload images from your computer for inclusion in a message. If you would like an image posted on the message board, please read Arthur's notes.

Because I would prefer that in-line images not be posted on the message board, I have removed the instructions for doing this. However, if you are already familiar with the necessary HTML for doing this, I would ask that you read and adhere to the notes below.

There are three points I'd like to make about including images in messages. The first is about size, both file size and dimensions. It has been my experience that people often scan images using the default settings on their scanner, which often results in huge file sizes that take a very long time to download, and that are also so big that people must scroll left and right and up and down to see the whole image. I can't go into a lesson on how to use your scanner and its software (especially as every scanner and software package is different) but please consult your scanner and software documentation for instructions on how to scan pictures that are suitable for the Web, not for printing.

The second point is about dead links. The Web is a living and breathing creature and such a large one that parts of it die, while other parts live on. If the image that you are including in your message is one over which you have control (i.e., it's on your Web server) please do everyone who is viewing your message six months or six years from now the courtesy of leaving that image on your Web server, and not deleting it. If you don't have control over it, then there's not much you can do to ensure it's still there in the future. In that case, please consider providing a link to the picture (previous section) rather than including it inside your message. I will delete messages (when I have the time) that include a broken image. Please also consider linking to keep from slowing down the loading of the message board, which already takes a while to download towards the end of the month.

The last point I'd like to make is about copyright. If you do not own the copyright on the image you want to use, please link to it rather than including it in your message. If I receive notices of copyright violations, I will have no choice but to delete any message that is infringing on someone's copyright. In a similar vein, some people consider it theft of bandwidth if you pull an image from Web site A to be displayed on Web site B. In fact, some Web sites are programmed to display an image alleging theft if you do this. Again, if I receive complaints about this I will have to delete the offending message. I'm not trying to be a stick in the mud here, but just telling everyone in advance of some of the possibilities that are not always that obvious.

CENTRE

You can centre a distinct line of text by marking it up with "center" tags.

Type <CENTER>This text is centred</CENTER> to get

This text is centred
Note the American spelling of "center".

LISTS

You can easily create numbered or bulleted lists.

Type:

<OL>
<LI>First item</LI>
<LI>Second item</LI>
<LI>Third item</LI>
</OL>

to get

First item

Second item

Third item

Or type:

<UL>
<LI>Item</LI>
<LI>Item</LI>
<LI>Item</LI>
</UL>

to get

Item

Item

Item

OL stands for Ordered List (hence it is numbered) and UL stands for Unordered List (hence it is not numbered). The "LI" tag is an example of one of the few tags that does not need a closing tag. However, both the "OL" and "UL" tags require closing tags. Note that the numbering in the ordered list is automatic (i.e., you do not have to number the items yourself, leaving you free to insert a new item in between two other items without renumbering every item below).

TABLES

The last item I will address, but only briefly, is tables. Tables are really only used for complex formatting, so should not be necessary in messages. I am actually not even going to explain how to make a table here. If you are advanced enough to be using tables in your message and you are going to do so, I ask that you keep in mind the fact that each individual message on the board is contained within its own table. While this sounds inefficient it actually speeds the loading of the page, especially later in the month when it tends to get rather large, while preserving the formatting that is common to the rest of the site.

Since each message is already enclosed in "table", "table row" and "table data" tags, please format your message accordingly. In other words, if you don't want to use the default table layout, close the "table data" and "table row" tags (and even the "table" tag if you are going that far) before starting your message with its unique formatting. Then, at the end of your message, don't close your last "table data" and "table row" tags (and "table" tag if you did that too) as they will be closed for you when you submit your message for processing.

If my explanation doesn't make sense, simply view the source of the message board page to see how each message is formatted, and format your message accordingly to fit within the HTML tags that are placed between each message. For your convenience, the following HTML is placed after every message submitted:

<hr /></td></tr></table><table border="0" width="100%" cellpadding="4" cellspacing="0"><tr><td>

Thanks for your consideration.

3790
Members
Join us now!

Updated
December 30th, 2007

The Jozi Jol, 1st-3rd August, 2008, Johannesburg, South Africa.

New members today: No new members today. Entries updated today: \| Trevor Clements \| Today's birthdays: \| Otto Bousema \|\| Grant Brooklyn \|\| Andy Cruickshank \|\| Anne Doherty \|\| Athal Jones \|\| Wendy Rankin \|\| Jeremy Tucker \|\| Philippa White \|	Home
This page or script (/bboard/html.php) last updated 2005:03:04:08:34:09 UTC. Original graphics and concept copyright © 1995-2008 Dave Cooper. All rights reserved. Website layout and design copyright © 1996-2008 NinerNet Communications. All rights reserved.