HTML Primer for STLIMC This is a quick summary on how to compose 'pages' on the new STLIMC website, with simple, consistent protocols for preparing uploads.

The concept: Raw Text entries don't look very good, and full HTML docs are complex, cumbersome, and slow. An intermediate "Mark-up" (pseudo-html) format uses a simplified HTML code that allows some basic enhancements without bogging down the writing & loading.

HTML works by placing codes, called "tags", in plain text. These tags are interpreted by the browser or other program, which shows the text according to what tags are used.

---

Have you ever wondered how some people

… indent quotations from other posts, or

make bold or Italic text, or link [1] to other documents? This brief post will explain how.

It is done with something called HTML, or HyperText Markup Language, which defines how text is formatted on the Web. There is a lot one can learn about HTML (actually, XHTML and CSS these days), but it is very easy to get started and do simple things. This post will show you how to enhance your comments here on STLIMC.

HTML works by placing codes, called "tags", in plain text. These tags are interpreted by the browser or other program, which shows the text according to what tags are used.

An HTML tag looks like this:

<b>

Tags are basically keywords between angle brackets. One can also put certain kinds of instructions inside the angle brackets, as we will see below. Tags always need to be closed, that is, turned off. For example, the tag <b> will turn on bold type; when you want to turn bold off, you close the tag by typing the same tag with a slash in front of the key word, like this:

write <b>bold</b> words

If you don't "close" the tag, the instruction given by the first tag will just keep being executed.

Here are the tags that can be used on this site.

TAGS AVAILABLE IN STLIMC

<em> – the "emphasis" tag, which in most cases means italic (it is deliberately called "emphasis" and not "italic" because the words will be emphasized if the text is read by a text reader). Type this:

emphasize words <em>like this</em>, but remember to close your tags<

And you will get this:

emphasize words like this

<i> – this is the "italic" tag. Use it just the same way as the <em> tag above.

<strong> – the "strong" tag, which usually means bold.

Type this:

make bold words <strong>like this</strong> but remember to close your tags

And you will get this:

make bold words like this, but remember to close your tags

<b> – this is the "bold" tag. Use it the same way as the <strong> tag above, it will do the same thing.

<strike> – the "strikeout" tag. Ever wonder how Wannabe Newbie Anglican makes his blog title do that? This tag is how. Type this:

you can <strike>strike words out</strike> or just not type them.

And you will get this:

you can strike words out or just not type them.

<blockquote> – the "blockquote" tag (you're getting the hang of this, aren't you?). This tag sets quoted text apart from "regular" text; it can be defined so as to do this in a number of ways; you have probably seen the STLIMC style already and will see it again below.

<blockquote>
this is blockquoted text</blockquote>

And you will get this:

this is blockquoted text

<a> – the "link" tag – actually, the official name is the "anchor" tag. This one will be a bit different from what we've seen before.

Among other things, the anchor tag points to links on other pages (or, within the same page). Of course, to do this you have to actually provide the link you are pointing to. To do this, the anchor tag uses another statement inside the tag, like this:

<a href="LINK GOES HERE">text describing link</a>

The anchor tag has to be closed just like any other tag we've looked at. Let's say you wanted to link to the main page at STLIMC, the link (technically, URL) for which is http://stlimc.org [2]. You would type:

Here is a <a href="http://stlimc.org">link</a> to St. Louis IMC main page.

And you would get this:

Here is a link [3] to the St. Louis IMC main page.

I won't describe URLs (links) or other uses of anchors at this time, but you can also link within a website or page if another type of anchor has been set.

SPECIAL CHARACTERS

Remember that I said above I'd tell you how to type a < character without the program thinking you were opening a tag? Here it is. In most kinds of programming, one sometimes wants to actually use a character that is normally used for some special purpose in the program, so special kinds of characters (often called 'escape characters') are used. In HTML these are called "character entities". There are a good number of them, and I don't know which are supported in STLIMC comments, (I know that not all are) so I'll just mention a few.

Making a character entity is like making a tag, but you don't put the name between <brackets>, you put it between and ampersand & and a semicolon ;. The way to type the left angle bracket, which is called by its other name of "less than", you would type &lt;. Here are some characters I've found useful:

&lt; gives you <
the less-than sign.

&gt; gives you >
the greater-than sign.

&hellip; gives you …
an ellipsis.

&mdash; gives you —
an em dash.

&ndash; gives you –
an en dash.

&amp; gives you &
an ampersand.

&auml; gives you ä
an a with umlaut. Most other letters can be umlauted the same way.

There are many more of these which you can find here [4].

SOME PARTING THOUGHTS

If you want to learn more, try a web search for "HTML tutorial", you'll find plenty. The official standards (and some basic tutorials) can be found at the World Wide Web Consortium [5].

If you are new to this, remember to TYPE CAREFULLY and review your comment before you make it. I assure you that it is very easy to make typing mistakes when you are typing tags by hand, even these few simple ones.

There are lots of other tags, character entities, and cutesy-tricksy things you can do with HTML. Unless you know what you're doing, please stick to the simple list above when posting to STLIMC (maybe try a character entity for another language if you must). Many tags not listed above probably just won't work (which is deliberate).

And most important of all, always remember that CONTENT IS MORE IMPORTANT THAN STYLE! Making your comment look good is no substitute for making a good comment. Better you should say something helpful and edifying MiSPeLeD aN POreLy TiPEd than something unseemly, presented beautifully.

Modified from the following source: http://titusonenine.classicalanglican.net/?page_id=15953 [6]