Basic HTML
On this page I will try to describe some of the basic concepts of HTML, or Hyper text Markup Language, one of the languages used to write web pages for the Internet.
You can do a wide variety of things with html, including use it to change text size and appearance and change colors. This can be very useful for writing your own web pages manually, if you like to do things "the old-fashioned way".
In addition, in chat rooms where HTML is enabled, you can change some of the characteristics of your messages. HTML can also be used to post pictures in chat rooms. All instructions below are generated as a reference to help teach people how to use HTML in chat rooms where HTML is enabled.
All "code" is typed in the message box of the chat room, or in the User name box at the entrance to the chat room. In order to be able to get the "code" to display correctly on this instruction page, I have had to a "space" after the " <" character. When you type your messages, you can omit the extra "space".
I will start with some simple examples and work up from there:
Center
Bold
Italics
Font Size
Font Color
Font Face
Color Fades
Headings
Combinations
Break
Pictures
Links
CENTER
Suppose you want to the phrase "Hello, how are you?" to appear centered on the page or screen. Just use the "CENTER" tag to center the text. In the message box of the chat room, you would type:
<CENTER> Hello how are you?</CENTER>
The <CENTER> is the "code" to start centering text, the </CENTER> is the "code" to end centering of text. Every thing that is "between" the "code" that starts the centering, and the "code" that ends the centering, is displayed as text centered on the page or screen. The result would look like this:
Hello how are you?
The same sentence written without the centering would default to "left justified" and it would look like this:
Hello how are you?
(Note that most of the "EXAMPLES" shown on this page have been centered just to make it easy for you to read this page.)
Remember that EVERYTHING between the CENTER tags will be centered, so always close your CENTER tags.
BOLD
Suppose you want to the phrase "Hello, how are you?" to appear bold. In the message box of the chat room, you would type:
<B> Hello how are you?</B>
The <B> is the "code" to turn on bold, the </B> is the "code" that turns bold off. Every thing that is "between" the "code" that turns the bold on, and the "code" that turns the bold off, is displayed as bold text. The result would look like this:
Hello how are you?
ITALICS
Suppose you want to the phrase "Hello, how are you?" to appear italicized. In the message box of the chat room, you would type:
<I> Hello how are you?</I>
The <I> is the "code" to turn on italics, the </I> is the "code" that turns it off. Every thing that is "between" the "code" that turns the italics on, and the "code" that turns the italics off, is displayed as italicized text. The result would look like this:
Hello how are you?
FONT SIZE
"FONT SIZE" is one way to make the text larger or smaller. You can either set the font size to an abolute number from 1 to 6 or you can set the font size "plus" or "minus" relative to the standard size. The limits of sizes are dependent upon the web page or the chat room.
Absolute Size
You can define the size of the font directly. Suppose you want to the phrase "Hello, how are you?" to appear large. In the message box of the chat room, you would type:
<FONT SIZE=6> Hello how are you?</FONT>
The <FONT SIZE=6> is the "code" to set the font size to "6", the </FONT> is the "code" that turns off the font tag. The result would look like this:
Hello how are you?
Notice that you only need to close the "FONT" tag, you don't need to be specific about the "SIZE" part of the "FONT" tag.
Let's try that again but make the text smaller. Type in the code
<FONT SIZE=3> Hello how are you?</FONT>
The <FONT SIZE=3> is the "code" to set the font size "3", the </FONT> is the "code" that turns off the font tag. The result would look like this:
Hello how are you?
Relative Size
You can also specify the size relative to the standard size for the web page. Suppose you want to the phrase "Hello, how are you?" to appear very large. In the message box of the chat room, you would type:
<FONT SIZE=+4> Hello how are you?</FONT>
The <FONT SIZE=+4> is the "code" to set the font size 4 steps larger than standard, the </FONT> is the "code" that turns off the font tag. The result would look like this:
Hello how are you?
Let's try that again but make the text a bit smaller. Type in the code
<FONT SIZE=+3> Hello how are you?</FONT>
The <FONT SIZE=+3> is the "code" to set the font size 4 steps larger than standard, the </FONT> is the "code" that turns off the font tag. The result would look like this:
Hello how are you?
Exactly how each size and each relative size will display is dependent upon the web page. The best thing to do in a chat room is to experiment a little, until you figure out what works best for you. You can also make the text smaller by using smaller absolute size or by using minus "-" instead of plus, but people in chat rooms rarely seem to use smaller fonts.
FONT COLOR
You can also change the colors of the text in the chat using the "FONT COLOR" tag. To do this you can use Color Names, such as "orange", "gold", "blue", "green", etc. or you can use the Hexidecimal numbers for colors.
Click here to see a hexidecimal color chart.
Suppose you want to the phrase "HELLO!" to appear in just ONE color. Let's try red. In the message box of the chat room, you would type:
<font color ="red"> HELLO </font>
The result will look like this:
HELLO
Notice that you only need to close the "FONT" tag, you don't need to be specific about the "COLOR" part of the "FONT" tag.
Suppose you want to the phrase "HELLO" to appear with different colors. In the message box of the chat room, you would type:
<font color ="blue"> H </FONT>
<font color ="RED"> E </FONT>
<font color ="yellow"> L </FONT>
<font color="green"> L </FONT>
<font color="orange"> O </FONT>
The result would look like this:
H
E
L
L
O
As you may have noticed, I "turned" off or "closed" EACH font color tag before setting the font to another color. If I had not closed any of the tags, there would be "open" tags, and the results could be unpredictable. It is a must to remember to CLOSE all tags with a </font>
Remember to select colors that will be visible against the background in the chat room or the web page that you are "working" on.
FONT FACE
The "FACE" tag is similar to the "SIZE" and "COLOR" tags. "FACE" is used inside the "FONT" tag. You just specify what font face, or font style you want used. Of course not every font style will work in chat rooms. You will need to experiment with your favorite chat room to see what works.
Suppose you want to the phrase "Welcome to My World" to appear in a different font style. Let's try Helvetica. Helvetica (helv) is a very common font style, and will work in most chat rooms. In the message box of the chat room, you would type:
<font face ="helv"> Welcome to My World </font>
The result will look like this:
Welcome to My World
Notice that you only need to close the "FONT" tag, you don't need to be specific about the "FACE" part of the "FONT" tag.
That was not very different from normal text, so let's try another example. Let's try Comic sans ms (one of my favorites). In the message box of the chat room, you would type:
<font face ="comic sans ms"> Welcome to My World </font>
The result will look like this:
Welcome to My World
Let's try one more example. Let's try Courier. In the message box of the chat room, you would type:
<font face ="courier"> Welcome to My World </font>
The result will look like this:
Welcome to My World
Let's try one last example. Let's try New Times Roman. In the message box of the chat room, you would type:
<font face ="New Times Roman"> Welcome to My World </font>
The result will look like this:
Welcome to My World
You get the idea. Now experiment with different fonts in your chat room until you find one that you like. Try Wingdings. Add some colors. Have fun with it.
FADES
Fades are just a more complicated series of font color tags strung together. These can be generated manually, but it is a difficult and time-consuming process.
Here are a couple of examples of two color fades:
Two Color Fade
Another Sample Fade
The easiest way to do color fades are to download a program called "HFC". That stands for "HTML Font Colorizer". You can download the program from
here and then you can create fades of many colors. The program will generate the code, and allow you to easily paste the generated code into web pages or into chat messages.
HEADINGS
"Headings" are another way to make the text larger or smaller. There are 6 different heading sizes, ranging from H1, the largest, to H6 the smallest.
Suppose you want to the phrase "Hello, how are you?" to appear very large. In the message box of the chat room, you would type:
<H1> Hello how are you?</H1>
The <H1> is the "code" to turn on "Heading 1", the </H1> is the "code" that turns "Heading 1" off. The result would look like this:
Hello how are you?
Let's try that again but make the text a bit smaller. Type in the code
<H2> Hello how are you?</H2>
The <H2> is the "code" to turn on "Heading 2", the </H2> is the "code" that turns "Heading 2" off. The result would look like this:
Hello how are you?
Let's try that again but make the text even smaller. Type in
<H3> Hello how are you?</H3>
The <H3> is the "code" to turn on "Heading 3", the </H3> is the "code" that turns "Heading 3" off. The result would look like this:
Hello how are you?
Let's try that again but make the text even smaller. Type in
<H4> Hello how are you?</H4>
The <H4> is the "code" to turn on "Heading 4", the </H4> is the "code" that turns "Heading 4" off. The result would look like this:
Hello how are you?
Before you think the text can't get smaller, IT CAN! Let's try that again but make the text smaller still. Type in
<H5> Hello how are you?</H5>
The <H5> is the "code" to turn on "Heading 5", the </H5> is the "code" that turns "Heading 5" off. The result would look like this:
Hello how are you?
Let's try it one last time.. this is the smallest text you can type in the chat. Type in
<H6> Hello how are you?</H6>
The <H6> is the "code" to turn on "Heading 6", the </H6> is the "code" that turns "Heading 6" off. The result would look like this:
Hello how are you?
It is important to note here that "headings" makes the text larger or smaller, but also sets the specified text apart from all other text as a heading. Text typed after the closed heading tag will start a new line of text.
COMBINATIONS
Before I show you how to post a picture in the chat, I bet you're wondering if you can combine any of these codes.. YES you can!
Suppose you want to the phrase "Hello, how are you?" to appear bold and italicized. In the message box of the chat room, you would
type:
<B><I> Hello how are you? </B> </I>
The <B> is the "code" to turn on bold, the <I> is the "code" to turn on italics. The </B> is the "code" that turns it off the bold, the </I> is the "code" that turns off italics.
The result would look like this:
Hello how are you?
Suppose you want to the phrase "Hello, how are you?" to appear bold and italicized and HUGE red letters. In the message box of the chat room, you would type:
<H1> <B> <I> <font color = "red" > Hello how are you? </font> </B> </I> </H1>
The <H1> is the "code" to make the text huge, <B> is the "code" to turn on bold, the <I> is the "code" to turn on italics. The <font> is the "code" that alters the font. The </font> is the "code" that resets the font. The </I> is the "code" that turns off italics, the </B> is the "code" that turns off the bold, the </H1> turns off the HUGE text The result would look like this:
Hello how are you?
You can of course use any combination of text size with the bold and italics. BE SURE to close all "code tags" ! If you don't, after you have typed your text and hit enter or submit, Everyone else's text will be bold, italicized, large or small, or red, depending on whatever you did not "turn off".
BREAK
If you want to end a line, and start a new line, then you may be able to use the "BREAK" tag. If you wanted to Display an series of lines in a chat message, you could use the "BREAK" tag to do that (maybe). For example, if you wanted to display a poem, you could enter this "message":
Roses are red<BR> Violets are blue<BR> I can write code<BR> and so can you.
The result would look like this:
Roses are red
Violets are blue
I can write code
and so can you.
Of course, this poem would have more impact if you used colors and a larger font size.
Some chat rooms will not recognize the line break. Most will not recognize two or more line breaks in a row, it will treat them as a single break.
POSTING PICTURES
All pictures posted in a chat room or on a web page MUST have the extension .jpg or .gif. So far all of the chat pages that I have used will only work with .gif images. They also MUST be stored on the Internet somewhere. You can scan a pic and upload it to the Internet and use it, but you CANNOT access or post a pic directly from your hard drive.
I will use a pic that is in one of my pictures directories of my web server. The picture is that of a skull and crossbones.
To post this crossbones.gif in a chat, it has to be on the Net, as I mentioned. I have it stored in my directory of my homepage, so I must type in the entire location "address" or URL (Uniform Resource Locator).
The code I would type in to show this .gif would look like this: (remember you can use .jpg files in web pages and you may be able to in some chat rooms)
<img src="http://www.schultheis.org/jms/chat/pictures/crossbones.gif">
The "IMAGE" tag tells the web page or chat room to display an image, and the "SRC" defines the "source" of that image. That "source" needs to be someplace that the web page or chat room can access. They cannot access your hard disk drive, but they can access the server where my web page (and yours) resides.
The resulting pic would look like this:
In some chat rooms, the above code would give you a broken pic and not display the image properly. To fix this, in some chat rooms, you must put a space after the "SRC", like this:
<img src ="http://www.schultheis.org/jms/chat/pictures/crossbones.gif">
Please be respectful of those people on the Internet who have either a slower computer or a slower modem and do not post large pics in the chat rooms.
You can also alter the size, the height and the width of pics posted in chat rooms, but if you are that far along, then you don't need my help.
LINKS
Do you have a web page you would like linked with your name? (Or a page you would like folks to visit?) This will show up the page address if people run their mouse over your name and the page address will appear in the bottom bar of Netscape. I'll use this page as an example. In the User name box at the entrance to the chat room, I would type the following:
<A href="http://www.schultheis.org/jms/chat/html.html"> Chatmaster</A>
It would appear like this:
Chatmaster
Anyone clicking on this "LINK" would be taken to this page.
As with the pictures, there are some chat rooms where this would give me a broken link. :-( To fix this, in some chat rooms, you may have to put a space after the "a href", like this:
<A href ="http://www.schultheis.org/jms/chat/html.html"> Chatmaster</A>
If you are using chat rooms that are html-enabled, you must use the space before the = sign.
If you are using the Webnautics Cafe Chat rooms, they do not seem to require the space, but you may have to experiment around a little bit.
Remember than when you are "testing" you should post to yourself using a PRIVATE Whisper so that you are not bothering the other chatters.
One other note: If someone were to click on your name or message when you have linked it to a page on the Net, it will bring up the page in the same Browser window as the chat room you are in. When they are finished looking at the page, they must then hit the chat room's RELOAD button. In MY favorite chat room, it can be time consuming to "reload" and it crashes sometimes when it is very busy. To avoid this, you can add the following code to open the page in another browser window. The code would look like this:
<A href ="http://www.schultheis.org/jms/chat/html.html" target=new > Chatmaster</A>
The result would be that they will still end up at the same place, but it would be in a new browser window, and it would not alter their chat session.
One last note. If someone in the chat room forgets to close a tag, be it is for BOLD. Italics a HEADING, a font COLOR, tag, or forgets to close a LINK to a page, just type in the appropriate closing tag in the text message box like this:
</b>
</i>
</h3> (or /h2 or whatever)
</font>
</a>
If doing this ONE time doesn't take the text back to normal, try typing it in several times in the text message box. They COULD have possibly left multiple font colors turned on etc.
Back to my Chat Page
| 
