MommyAnn's HTML Primer

HTML Primer

So you wanna be able to speak in style in the chatrooms!

To make something bold: this text would be bold

To make something italicized: this text would be italicized

To make something blink: <blink>this text now blinks</blink>

To make something underlined: this would be underlined

To make something ^superscript: ^{this would be superscript}

To make something _subscript: _{this would be subscript}

**IT IS VERY IMPORTANT THAT YOU PUT IN THE END TAGS!!!!** The tag is the part inside the <pointy brackets> and the ending tag is the part that has the slash (/) in it. If you don't have that, all of the rest of the text on the page will continue to be of that changed style and people will yell at you! LOUDLY!!!!

One thing that I should mention here is that there are some alternate commands that work with many browsers, but not all! They are simpler to type and easier to remember, but to be safe, the standard HTML commands are given above. But just in case you want to try (which I do lots of times, and it usually works), you can use these alternate commands for bold and italics:

This would be bold!

This would be italics!

Now you can mix those up, as well, but you have to be careful of the order in which you put them or else the text style will continue. For example, if you want something bolded and italicized, it would be like this:

this text is bold & italicized

See how the tags look? They have to be in the near-same place on either end of the text, so if the bold tag is first, it has to be last. If the italics tag is second, it has to be second-last, and so on. Think of the tags as different brackets and braces in mathematics. They have to match up. You can't have [(2+2]). See how the brackets are reversed? It has to be [(2+2)]

Other stuff you can do:

You can change the font size. The text can be up to 4 sizes bigger and 2 sizes smaller. You can also change the color of the fonts to 256 different colors. It helps to know the hexadecimal color codes. You can click HERE for a good colorchart of hexadecimal numbers. You can also just experiment with the color words and see what you get: red, blue, green, yellow, purple... etc. But don't do white! To do this, you start with the <font... tag, but more stuff can go inside. To change the font to 2 sizes bigger, it goes like this:

this text is two sizes bigger

(Some browsers do not require that you put the +2 inside quotation marks, but to be safe, it doesn't hurt to get in the habit!)

If you want to change the style of font that people are looking at, we'll use the font FACE switch. To change to Arial font:

this text would be in Arial font

(Again, you may not need to type "Arial" inside the quotation marks, depending on your browser.)

To change the color of your text to red:

this text is red

To make your font 2 sizes bigger AND red:

this is big and red

NOTE: If you use two separate font commands like this:

big red text

....notice how you have to put 2 separate closing tags! You need one closing tag for each item enclosed in <brackets>!

Now, to get complicated, suppose you want it to be red, 2 sizes smaller this time, underlined, blinking and Comic Sans MS font:

<BLINK>this is red, small, underlined, blinking text</BLINK>

And that is that!

ANOTHER IMPORTANT IDEA!!!!!:

You should practice your new skills where they do not annoy other chatters! (Plus, this is the way you'd write a web page from scratch using merely your notepad!) So before you try them in a chat room:

Start NotePad (Start Button/Programs/Accessories)
The first line must say <HTML>
The second line must say <BODY>
You can now type and experiment with different text styles
End it with </BODY> on the second last line
End the whole document with </HTML> on the last line.

Now save it, but when you do, click on the bar at the bottom so it shows all file types. Then save it with a .html extension. So if you called your file test, you would type in test.html and then save that. Now start NetScape, click on the File menu, then Open file. Then find where you saved it and open it up. NetScape will show you how your text will look!

If you want to try your hand at building web pages from scratch, (It's not that scary, really!) just do what's outlined above, plus a few more commands:

Right before the BODY command, (which makes it right after the HTML command, type <HEAD><TITLE>
then type what you want to show up in the blue bar across the top of your screen in Windows when that page is displayed,
then type</TITLE></HEAD>

Sidenote: If you want to add blank lines in your text, you have to "program" them in. You can't just hit the enter key a bunch of times while you're typing it because html is a markup language, not a WYSIWYG language. To add a blank line, do a . The P stands for "P"aragraph. It gives you a blank line like you would find in block style typing.

Also, to make a hard line break, you type for the line break.

Other Helpful Tricks to Know

To post a picture, type:

For example, to post the pic of my lovely mug on my main page, I typed:

Another nifty thing you can do is to post links to other places or pics on the web! To do this, you simply type:

<a href="the URL of the pic or page you want to link to">Then type some clever words like CLICK HERE and don't forget to close your tag with</a>

This will magically wisk your reader to wherever you want him to go, that is, if he clicks where you tell him to click!

Got it?

Good!

Don't forget to practice and
CLOSE THOSE TAGS!!!!

When you're ready for more advanced tricks than are taught on this page (like the scrolling Java message on the bottom of the page): I found what I needed at

Click here for easy return to
MommyAnn's Meeting Place

Web Publishing Made Simple (For Teachers)

(All of this hoopla began because I wanted to be able to talk "prettily" in the chat room at CEA, like my friend FALCON! He taught me my first HTML lesson, how to write in my signature blue! FALCON is always there to provide assistance and answer my questions about 'puter stuff! He was my first and best teacher on the net! Thanx, J! *hug*)

This page is a designed and maintained page.