[Home]Html Format

HuSi Wiki | RecentChanges | Preferences


NOTE for Wiki editors: Everything below these initial notes is raw HTML. This means that you can't use wiki formatting to edit it without breaking back out using <html></html> tags. Given the tag soup involved, this isn't recommended. It occasionally breaks out of html, but only to preserve wiki-internal links, and then breaks back in. Cheers Hulv.

HTML (HyperText Markup Language) is the structural language from which web-pages are built. In most web browsers, you can click something like "View > Page Source" to see the HTML for any web-page that you're looking at. A more advanced version of HTML has been developed called XHTML (Extensible HyperText Markup Language), based on a combination of HTML and XML (Extensible Markup Language). All of these languages were developed by the Worldwide Web Consortium (W3C).

HuSi allows you to use a limited subset of the HTML language to format your comments, stories and diaries. This is by far the most powerful of the formatting options, and learning just a few simple tags can help make your contributions better organized, and much better looking. Some of the basic ideas are outlined below. If you're interested in learning HTML / XHTML in greater depth, there are hundreds of tutorials available online, such as those at w3schools.

 

Allowed HTML on HuSi - Quick List:

<b></b> <strong></strong> <i></i> <em></em> <cite></cite> <tt></tt> <code></code> <strike></strike> <sub></sub> <sup></sup> <big></big> <small></small> <br> <p></p> <center></center> <hr> <a [href] [name]></a> <blockquote [type]></blockquote> <ol [value] [type] [start]></ol> <ul [type]></ul> <li></li> <dl></dl> <dt></dt> <dd></dd> <pre></pre> <ecode></ecode>

 

Allowed HTML on HuSi - Details:

 

Bold / Strong tags

The <b></b> and <strong></strong> tags have the same effect. They make your text really stand out when it needs to. For example:

This is <b>bold</b> text. This is <strong>strong</strong> text.

will result in:

This is bold text. This is strong text.

top

 

Italic / Emphasis tags

The <i></i> and <em></em> tags have the same effect. They are useful for when you feel it is necessary to stress certain words. For example:

This is <i>italic</i> text. This is <em>emphasised</em> text.

will result in:

This is italic text. This is emphasised text.

Note: In most browsers the <cite></cite> tags will produce an identical effect to the italic and emphasis tags. The <cite></cite> tags are also allowed on HuSi, but were designed to be used for citation and machine-parsing purposes and, in truth, there's probably not much reason to use them.

top

 

Teletype / Code tags

The <tt></tt> and <code></code> tags are similar, and in most browsers have an identical effect. They are used to format text in a monospaced font, such as that used in a text editor. They are often used to print programming code, or quote from technical sources (you've already seen this tag used on this page). For example:

This is <tt>teletype</tt> text. This is <code>code</code> text.

will result in:

This is teletype text. This is code text.

top

 

Strike tags

The <strike></strike> tags are used to create a strike-through effect on text, as if someone has made a mistake and crossed it out. On HuSi, they are often used for stupid or comedic purposes. For example:

I <strike>hate</strike> love HuSi. It is full of <strike>idiots</strike> wonderful people.

will result in:

I hate love HuSi. It is full of idiots wonderful people.

top

 

Subscript / Superscript tags

The <sub></sub> and <sup></sup> tags are similar and affect the vertical position of any text you write. They are often used for mathematical symbols, footnotes, and clowning around. For example:

This is <sub>subscript</sub> text. This is <sup>superscript</sup> text.

will result in:

This is subscript text. This is superscript text.

top

 

Big / Small tags

The <big></big> and <small></small> tags are similar, and affect the size of any text you write. The <big></big> tags will increase the font size by +1, whilst the <small></small> tags decrease it by -1. For example:

This is <big>big</big> text. This is <small>small</small> text.

will result in:

This is big text. This is small text.

You can nest these tags, to cause an enormous change in size. For example:

This is <big><big><big><big><big><big><big>massive</big></big></big></big></big></big></big> text.

will result in:

This is massive text.

Important Note: Be considerate when using these tags! The editors have the ability to remove this facility, and will do if you abuse it. It is considered very bad manners to use over-the-top tricks like this in the intro text of a diary or story, so don't be surprised if the editors remove it. Play nice: Don't be an idiot. In addition, you will not know the font size at which other people are viewing the site, so don't assume that the font size you can see on your screen is the same as what everybody else can see.

top

 

The Break tag

Unlike most other tags, which come in pairs, there is only one break tag. It comes in 3 different forms: <br>, <br/> and <br />. HuSi will allow all three. The second and third versions of this tag are XHTML-legal, the first is not. Some browsers have problems with the second form, so use either the first or third.

These tags insert line breaks into your text. For example:

This is line one.<br>This is line two.<br />This is line three.

will result in:

This is line one.
This is line two.
This is line three.

top

 

Paragraph tags

The <p></p> tags can be used to wrap your content into different paragraphs. For example:

<p>This is the text in paragraph one.</p><p>This is the text in paragraph two.</p>

This markup will produce the following effect:

This is the text in paragraph one.

This is the text in paragraph two.

top

 

Center tags

The <center></center> tags can be used to align your text centrally. For example:

<center>This should be in the middle.</center>

will result in:

This should be in the middle.

top

 

The Horizontal Rule tag

As with the Break tag, the Horizontal Rule tag doesn't come in pairs. It comes in 3 different forms: <hr>, <hr/> and <hr />. HuSi will allow all three. The second and third versions of this tag are XHTML-legal, the first is not. Some browsers have problems with the second form, so use either the first or third.

These tags insert horizontal lines into your text. These are useful to separate different sections of text. For example:

Section One.<hr>Section Two.<hr />Section Three.

will result in:

Section One.


Section Two.
Section Three.

top

 

Links (the Anchor tags)

HuSi allows direct linking to external websites. This is accomplished with the anchor tag. The anchor tag has the form:

<a href="http://address.of.website/file.suffix">the text you want to be a link</a>

For example:

There is a <a href="http://www.google.com">link to Google</a> in this sentence.

will result in:

There is a link to Google in this sentence.

Note: You must use absolute URLs as the link string, even if linking to a page within HuSi, otherwise an error will result. Experienced HTML users should note that you can also use the name attribute of the anchor tag, if required.

top

 

Blockquote tags

The <blockquote></blockquote> tags increase the 'padding' for a given amount of text and, as a consequence, offset it slightly into the middle of the screen. This is tricky to explain, so we'll use an example. Let's say we take the classic block of Lorem Ipsum text. If we format it normally, using <p></p> (paragraph) tags, it looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If we format it inside blockquote tags instead, it looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The blockquote tags are often used to "quote" other posters or sources.

top

 

Lists (the <ol>, <ul> and <li> tags)

Lists are a way of organising information. There are two kinds of list: Ordered Lists, which use the <ol> tag, and unordered lists, which use the <ul> tag. Ordered lists provide a number count next to each point you wish to make; unordered lists use 'bullets'. Within each kind of list, you delimit each list item between <li> and </li> tags. This sounds quite abstact, so here is an example. If you write the following:

<ol>
<li>This is point one.</li>
<li>This is point two.</li>
<li>This is point three.</li>
</ol>
<ul>
<li>This is point one.</li>
<li>This is point two.</li>
<li>This is point three.</li>
</ul>

the result will be:

  1. This is point one.
  2. This is point two.
  3. This is point three.

There are all sorts of other tricks you can do with lists, such as using roman numerals, changing the shape of the bullets, starting the count from a different number etc. - far too many to go into here. For the complete picture, consult the HTML specification.

top

 

Definition Lists (the <dl>, <dt> and <dd> tags)

Definition Lists are specified with the <dl> tag, and are very similar to general Lists. Instead of list items consisting of one element, they are divided into term and definition pairs, represented by the <dt> and <dd> tags. An example illustrates this better than text. If you do the following:

<dl>
<dt>Term one.</dt>
<dd>Definition one.</dd>
<dt>Term two.</dt>
<dd>Definition two.</dd>
<dt>Term three.</dt>
<dd>Definition three.</dd>
</dl>

the result will be:

Term one.
Definition one.
Term two.
Definition two.
Term three.
Definition three.

top

 

Preformatted tags

Usually, when you write HTML, characters like newlines, carriage returns, tabs and spaces have no meaning. For example, if you write this code:

<p>Here are ten spaces:          and now I'll press 'return'
and continue on the next line.</p>

it will come out like this:

Here are ten spaces: and now I'll press 'return' and continue on the next line.

This can be very frustrating if you're trying to post text from a document, or especially computer code, and you need to preserve the formatting. This is where the preformatted tags - <pre> and </pre> - come in. Anything between these tags should preserve the importance of the original formatting. If we adjust the previous code so it reads as follows:

<p><pre>Here are ten spaces:          and now I'll press 'return'
and continue on the next line.</pre></p>

It comes out like this:

Here are ten spaces:          and now I'll press 'return'
and continue on the next line.

Note: You may notice that the above code comes out in a monospaced font, much as if it had been put between <code></code> tags. This is perfectly legitimate and one of the quirks of using the <pre></pre> tags. They were originally designed to be able to put to put programming code straight into a web page, hence this behaviour. It is a good idea not to rely on preformatted tags; they render differently in different browsers, and no particular outcome can be guaranteed. For the complete picture, consult the HTML specification.

top

 

Ecode tags

the <ecode></ecode> tags are not part of the HTML specification. They are a HuSi-specific tag, built into the website by one of the editors. They function in the same way as the preformatted tags with other functionality built-in. The workings of these tags are best explained by viewing the original comment.

top

 

Image tags

You can not use the classic <img src="..."> tag to post images, however images are allowed. Have a look at Post Images to find out how.

top

 


HuSi Wiki | RecentChanges | Preferences
This page is read-only | View other revisions
Last edited May 19, 2005 5:23 pm by Hulver (diff)
Search:
All your Wiki entries are belong to Hulver See the Wiki Copyright page