HTML Primer

So you wanna be able to code html?!

To make something bold: <strong>this text would be bold</strong>
To make something italicized: <em>this text would be italicized</em>
To make something blink: <blink>this text now blinks</blink> [Note: Only works in Netscape!]
To make something underlined: <u>this would be underlined</u>
To make something superscript: <sup>this would be superscript</sup>
To make something subscript: <sub>this would be subscript</sub>

**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 it will mess up your code!

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:

<B>This would be bold!</B>
<I>This would be italics!</I>

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:

<STRONG><EM>this text is bold & italicized</EM></STRONG>

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:

<FONT SIZE="+2">this text is two sizes bigger</FONT>

(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:

<FONT FACE="ARIAL">this text would be in Arial font</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:

<FONT COLOR="RED">this text is red</FONT>

To make your font 2 sizes bigger AND red:

<FONT SIZE="+2" COLOR="RED">this is big and red</FONT>

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

<FONT SIZE="+2"><FONT COLOR="RED">big red text</FONT></FONT>

....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:

<FONT COLOR="RED" SIZE="-2" FACE="COMIC SANS MS"><U><BLINK>this is red, small, underlined, blinking text</BLINK></U></FONT>

And that is that!

ANOTHER IMPORTANT IDEA!!!!!:

You should practice your new skills and test them in a browser before uploading to the web!

  1. Start NotePad (Start Button/Programs/Accessories)
  2. The first line must say <HTML>
  3. The second line must say <BODY>
  4. You can now type and experiment with different text styles
  5. End it with </BODY> on the second last line
  6. 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:

  1. Right before the BODY command, (which makes it right after the HTML command, type <HEAD><TITLE>
  2. 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,
  3. 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 <P>. 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 <br> for the line break. Line breaks can be used collectively to add more than one line return.

Other Helpful Tricks to Know

To post a picture, type:
<img src="then the URL of the pic you want to post">

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!!!!

Web Publishing Made Simple (For Teachers)

Questions? Email: Ms. Powell