Introduction to HTML

The HyperText Markup Language (HTML) is a code system used to construct web pages. SOI supports HTML and you can use it to format text in your messages - make links - and post images. The code system is pretty simple - and as soon you've understood the basics - you shouldn't have any problems becoming a more advanced user.

HTML contains a number of tags. A tag is a code that does something either with your web page or the contents of it. With the proper tag you can for example color text characters - make them bigger or smaller - color them - use bold or italic - and so on. This chapter explains some of the HTML tags which can be used at SOI. First some basic rules.

1. A tag always starts with a < (less than) and always ends with a > (greater than) character  - this is for example a tag that inserts a paragraph break in your text: <P>.
2. Most tags have a corresponding closing tag - The <I> tag for example has an equivalent closing tag - </I>. - The <I> tag indicates where italic should start and the </I> tag where it should end. A closing tag always looks like the opening tag - except for the slash in front of it.
3. In a lot of HTML tags there are a set of attributes included -  aand these attributes in it's turn can be given one of a set of predefined values.  The color and size attributes are included in the <FONT> tag - and size  can for example be given any value between 0 and +6 or 0 and -6. You can use all the tag's attributes at the same time in the order you want - like both of the following tags for example <FONT color="red" size="+1">I love you</FONT>  or <FONT size="+1" color="red">I love you</FONT> will both result in I love you

Note 1
HTML makes no difference between lowercase- or capital letters - I've used capital letters just to make it easier for you to detect the code in the text.

Note 2
It isn't necessary to enclose the attribute values between quotation marks when you use them at SOI. If you however are using them in your web page - then you should.

There are a number of HTML reference pages on the net. Here are 2 examples of them:

• HTML for beginners.
• HTML reference

end of this part - click a topic to the right!

Change text style

Note
You can of course combine these tags with each other - like for example: <B><I>Hello</I></B>. The result will be Hello. Just see to it that the opening tags and closing tags are put in the right order in relation to eachother!

end of this part - click a topic to the right!

Change text font

Tag:
<FONT></FONT>

 The main attributes of the font tag are:

• color (values are any color name or color code)
• size (values are numbers between 0 and +6 or 0 and -6)
• face (values are any font face)

Example:
 <FONT color="#FF0000" size="+3" face="Arial">Hello</FONT>

The result:
 Hello

Note 1
Instead of the color code #FF0000 you also could have used the color name red. Most colors have both a color name and a color code.

Note 2
If you're using some special font then the reader of the text must have the same font face installed on his/her computer - else he/she will only see his/her browser's default text. You should therefore always try to use one of Windows standard fonts.

Note 3
If you're using a font with a name containing more than one word - like Bookman Old Style - then you should enclose the name within quotation marks.

end of this part - click a topic to the right!

Text alignment and text breaks

The default text alignment is usually left. These are the tags to change the text alignment.

Note
You also can use these tags to align pictures - either in your posts or on your web page.

You can either use a line break or a paragraph break in your text.

Note
In normal chat you can insert a break with the Enter key - but the break tags above are useful in your room form.

end of this part - click a topic to the right!

How to post a link

The simplest way to post a link - which directs someone to another web page or any other item on the web -  is to post the URL (= web address) of the page or item - Like: http://soi.hyperchat.com

You can however even use the proper HTML tag to make a link. This way you can hide the URL and display a text of your choice instead. The text is usually displayed as underlined text and with a different color to the normal text. This is the HTML tag to make a link:

Tag:
<A></A>

Main attribute:
HREF (value can be any URL)

Example:
<A href="http://soi.hyperchat.com">My favorite chat site</A>

The result of the above tag will be: My favorite chat site

end of this part - click a topic to the right!

Post a room link

A room link is a special kind of tag - and it can only be used within SOI and it's sistersites. With a room link you can direct someone to another SOI chat room. All you need to know is the room ID or room name - which is  never longer than 8 letters and/or numbers.

The code for a room link looks like: #r-roomID -  So if you for example want to direct someone to a room called heaven with a room link - all you have to do is to enter: #r-heaven.

If you however want to hide the code and display text of your own instead - you can enter the code the following way instead:
 #r-roomID(your own text)- like for example: #r-heaven(I'm in heaven!) - The code will be hidden and only the words: I'm in heaven will be displayed instead. The text will look like a link and behave like one.

Note 1: No blank after the code and the enclosed text!

Room link + password
If you happen to have a private room with a password attached to it -  and you want to drop a room link which includes that password  - then you can enter it the following way: 
#r-roomID,password
If you for example have a password nothell attached to your room heaven then the room link which includes the password should  be entered like:
#r-heaven,nothell or like #r-heaven(I'm in heaven),nothell

Note 2: Just be aware that your private room will be wide open for anyone who clicks that link!

Note 3:
If the room is located at one of SOI's sister sites - like for instance The Beware - you need to extend the room name with the sister site extension. This is even true if you visit a chat room at some soi sister site and you want to direct someone there to a soi chat room. - For example:
#r-heaven@bwr or #r-heaven@bwr(I'm in heaven!)

end of this part - click a topic to the right!

How to post a picture

Only citizens can post pictures inline - which means posting a picture directly into a chat room. A visitor can only post a link to picture. This is the proper tag to post a picture of some kind (.JPG or .GIF pictures only).

Tag:
<IMG> (No closing tag is required)

Main attribute:
SRC (value can be any URL)

Example:
<IMG src="http://soiuser.hyperchat.com/teaser/banner.jpg">

The result will be:

Note 1
A picture which you've posted into the room can - depending on its size - slow down the update of the room considerably for all the other chatters in there. So please use this facility with care -- *smile*

Note 2
The picture you want to post must have a valid URL   - which means that the file has to be stored on a web server - like the SOI server or any other web server. You can never post pictures stored on your local hard disk.

end of this part - click a topic to the right!