HTML Tutorial - So, you want to make a Web Page!

So, you want to make a Web Page!
Lesson 3

A very useful type of text effect is the mono-spaced font, or Typewriter Text.

<BODY>
<TT>Something really cool</TT>
</BODY>

Something really cool

Each letter uses the same amount of horizontal space...

This is regular type `->`	iiiiiiiiii oooooooooo mmmmmmmmmm
`This is monospaced type ->`	`iiiiiiiiii oooooooooo mmmmmmmmmm`

We can change the font size too... It's pretty easy!

First add the  tags...

<BODY>
Something really <FONT>cool</FONT>
</BODY>

Then specify a SIZE attribute.

<BODY>
Something really <FONT SIZE=6>cool</FONT>
</BODY>

Something really cool

Fonts come in 7 sizes:

teeny tiny	small	regular	extra medium	large	real big &	yelling!
1	2	3	4	5	6	7

Two things I want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3.

Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like ARIAL and COMIC SANS.

<BODY>
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>

Something really cool

The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do one of these... Hidee Ho.
For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font.

What are some common fonts that are pretty safe bets?

Andale Mono       Arial       Arial Black
Comic Sans MS       Courier New       Georgia       Impact
Times Rew Roman       Trebuchet MS       Verdana

To see how various fonts might look through your browser, you might want to use the Handy Dandy Font Viewer.

Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important. You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference. I find that the tags stand out more when using all caps. You could just as well use  instead of . You can even use  if that's what trips yer trigger.

Alright, back to the fun stuff...

You can change the font color if you like.

<BODY>
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>

Something really cool

We can, of course use more than one ATTRIBUTE in a  tag...

<BODY>
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
</BODY>

Something really cool

Oh boy we're on a roll now!

<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>   
</BODY>

Something really cool

I feel the need to point out once again that multiple tags should be nested.

<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as...

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

The fastest way to confuse the browser, not to mention yourself is to overlap the tags...

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)

Another occasionally useful tag worth mentioning are section headings. While they're a little obsolete in today's very graphic web, they are still a handy little thing to have in your toolbox. They come in sizes 1-6.

<H1>Something really cool<H1>
<H2>Something really cool<H2>
<H3>Something really cool<H3>
<H4>Something really cool<H4>
<H5>Something really cool<H5>
<H6>Something really cool<H6>

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool

A useful heading attribute is ALIGN... fairly self-explanatory.

<H2 ALIGN="left">Something really cool<H2>
<H2 ALIGN="center">Something really cool<H2>
<H2 ALIGN="right">Something really cool<H2>

Something really cool

Something really cool

Something really cool

One more thing and we'll wrap up this lesson. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...

Text is usually black
Links are usually blue
Active link is usually red
Visited link is usually purple

You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us?

You can change these defaults for the entire document in the <BODY> tag.

<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF">
Something really cool
</BODY>

Something really cool

I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.
    You can see that the background is now black and the text is now yellow.
    Links are now neon green
    Visited links are darker green
    And active links are sky blue.

I've written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and kind of fun) to experiment with different color settings. With it, you can not only pick colors, but you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment with different background images. The <BODY> tag is automagically generated for you.

There! You now know just about everything that has to do with mainpulating the text in your document. You can now make Big red letters or small bold letters You can use other Fonts, or monospaced fonts.
You can even make a rollercoaster!

(Coding for the roller coaster is here if you want to see it.)

Before we wrap up this lesson, there's one little thing I want to bring to your attention. You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. Your browser may word this a little differently, but nearly all browsers have this facility. So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away.

<--BACK NEXT-->

General Table
of Contents Lessons
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 Index and
Quick Reference Barebones
HTML Guide

PROFESSIONAL WEB DESIGN