Make this a favorite place!...Click------->

		HTML Lesson One

Back to Main Menu

THE BASICS
[Headings] [Alignment] [Text Style] [Fonts] [Lists]
(SURFING TIP: It's quicker to scroll down than click on these links! All of this stuff is on THIS page.)

BEFORE WE GET STARTED...
SPECIAL NOTE TO AOL WEB-AUTHORS-IN-TRAINING:
Most HTML codes that you will learn here can be used in the HTML box option of Personal Publisher. In fact, the key way to break free from using PP is to convert your page to HTML boxes. Once you understand these basics, you're only a lesson away from Total Freedom!

SPECIAL NOTES TO ALL WEB-AUTHORS-IN-TRAINING:
My recommendation? Print out all the tutorials to read at your leisure and have as a reference as you play!

If you have Internet Explorer or Netscape on your machine and if you want to play with these codes as you learn, type them into simple ol' Notepad and save it with a .html extension. To do this, first read the next section about "What is HTML?" then type your code into Notepad. Click on File, then Save As, then type in a file name.

MAKE SURE you choose the "All Files" option in the "Save as file type:" box. Otherwise Notepad will add a .txt extension to your file. And trust me, this is not a good thing! Your filename will end up being "filename.html.txt! And no browser is going to know it's a web page.

Special Note:
When working offline on your page you can use Notepad and a browser to build your page. However, it is important that ALL files that your page calls for (pics, wavs, etc.) be in the same directory on your hard drive as the page (.html) file!

WHAT IS HTML?

HTML stands for"HyperText Markup Language" (there will be a quiz later... just kidding!)
HTML is one of the easiest "languages" to learn. I took a course in Pascal and absolutely hated it... any idea of future programming caused me to break into a cold sweat and shudders to course through my entire body, followed by severe PMS no matter what time of the month it was.

However... as I write this page, the whole process of starting my first web page began less than a month ago and I'd never even heard of HTML before...so take heart! You don't have to be a rocket scientist to write your own web pages!

To write HTML code there are a couple basic things to know first. HTML codes are enclosed in brackets like these: < >. Whatever is inside the brackets is an instruction to the browser and will not appear as text on your page. Most HTML codes have a begining and an ending.

The beginning (turn it on) code looks like this: <codehere>
The ending (shut it off) code is written with a slash: </codehere>.

Every web page needs three sections: HTML, HEAD and BODY.

The HTML section just tells the browser to open the page as a set of HTML codes. All that means is that the very first code on your page will be:

<HTML>
which tells the browser, "Hey, YOU! I'm going to talk HTML now!"

and the very last code on your page will be:
</HTML>
which tells the browser, "Ok, I'm done talking HTML now, bye!".

The HEAD section comes next. To keep things simple, all you need to do in the HEAD is tell the browser what to put in the blue title bar at the top of the page using the <TITLE> code (illustration follows).

The BODY section is where you put everything you want on your page. Now, that doesn't sound too hard, does it?

Basic web page code so far:
<html>
<head>
<title>My Home Page
</title>
</head>
<body>I'm writing a home page with Jayne's help! (She's so nice.)
</body>
</html>

First, a note about caps vs. lowercase letters.
HTML code can be written in either or both. You will see professional web pages written in all caps code and in all lowercase code. It doesn't make any difference at all. It's a matter of personal preference. I like lowercase letters because my opinion is that it takes less key strokes. Just make your choice and BE consistent! Otherwise you'll look like a (shudder) "newbie."

Ok, what does the above code MEAN already?!!!

Well... all you've done so far is create a page with the words "My Home Page" in the blue title bar way up at the top of the browser and these words on the page itself:

"I'm writing a home page with Jayne's help! (She's so nice.)

HEADING CODES

Heading codes are just a quick way to specify a size for a line of text.

You type <h#> at the beginning of the line and remember to close it with </h#>.
(Just replace the "#" with a number from 1 through 6 (1=BIG and 6=small).

Enter this: To get this size heading:
<h1>H1 Heading</h1>
H1 Heading

<h2>H2 Heading</h2>
H2 Heading

<h3>H3 Heading</h3>
H3 Heading

<h4>H4 Heading</h4>
H4 Heading

<h5>H5 Heading</h5>
H5 Heading

<h6>H6 Heading</h6>
H6 Heading

Of course you enter your own text between the heading codes!

ALIGNMENT CODES

To:	Enter this:	To get this alignment:
Center	<center>TEXT</center>	TEXT
Center	<p align="center">TEXT</p>	TEXT
Left	<p align="left">TEXT</p>	TEXT
Right	<p align="right">TEXT</p>	TEXT

NOTE: As you can see, the first two alignments bring about the same result - text centered!
Either one works.

Other Spacing Codes

To:	Enter this:	To get this result:
Go to next line	TEXT<br>HERE	TEXT HERE
Skip a line	TEXT<br> <br>HERE or TEXT<p>HERE	TEXT HERE
Insert one blank space	TEXT` `;HERE	TEXT HERE

Note:

Hitting the spacebar inserts only ONE blank space. You can hit it 15 times but you'll still get just one space on your page.

Hitting the enter key doesn't insert ANYTHING. If you want to go to the next line, you MUST use codes to wrap to the next line or skip a line.

Also, these codes do NOT need a closing HTML code.

TEXT STYLE CODES

To:	Enter this code:	To get this result:
Bold	<b>TEXT</b>	TEXT
Italics	<i>TEXT</i>	TEXT
Underline	<u>TEXT</u>	TEXT

FONT CODES

The <font> code can be used to change the size, color and appearance (or "face") of your text.

You can also change them all at once by stringing the changes together in ONE <font> command.

Font Size Examples

Enter this:	To get this size text:
<font size="1">TEXT	TEXT
<font size="2">TEXT	TEXT
<font size="3">TEXT	TEXT
<font size="4">TEXT	TEXT
<font size="5">TEXT	TEXT
<font size="6">TEXT	TEXT

Font Color Examples

Enter this:	To get this color text:
<font color="000000">Black	Black
<font color="FFFFFF">White	White
<font color="FF0000">Red	Red
<font color="FFFF45">Yellow	Yellow
<font color="0023C5">Blue	Blue
<font color="0B6300">Green	Green

Note about color codes:

These same codes (and many more) can be used to change the colors of many things on your page, not just text! Use these color numbers to change the color of:

Page background
Table backgrounds
Links
And more!

GREAT RESOURCE!!!!
Here's a COLOR CODES CHART with descriptions -print it out as a reference!!!

Font Face Examples

Enter this:	To get this font face:
<font face="arial">This is ARIAL	This is ARIAL
<font face="times roman">This is TIMES ROMAN	This is TIMES ROMAN
<font face="comic sans ms">This is COMIC SANS MS	This is COMIC SANS MS
<font face="verdana">This is VERDANA	This is VERDANA

NOTE ABOUT COMIC SANS MS:

Change Several Font Codes At Once

Ok, what if you want to specify all three font options at once? Do you have to enter three separate <font> codes? Nope. Just one will do! Remember to put whatever follows the equal sign in quotes and skip a space between the different font options: color, size, face. If you only want to change one of these font options, just type the one you want to change.

The best way to learn is to see for yourself so here's a series of font changes. Pretend you're typing in all the following codes with the words "Kilroy was here." after each code.

The first code will make sure that the font is black and size"1" (itsybitsy). We won't state a font face, we'll just leave it as the default (Times Roman) at first. Here we go!

What to change? What's the code? Result:
Start with: <font color="000000" size="1"> Kilroy was here.
Just size <font size="4"> Kilroy was here.
Just color <font color="660099"> Kilroy was here.
Just face <font face="arial"> Kilroy was here.
(Notice that the Arial font is now slightly larger than Times Roman
and we did not change the font size.)

Face AND color <font face="comic sans ms" color="FF0066> Kilroy was here.
(The comic sans ms font is the same size as Arial.)

Face, size & color <font face="arial" size="3" color="0000FF"> Kilroy was here.
Just color <font color="FFFF45"> Kilroy was here.
NOTE: Be careful when choosing colors!
See how hard it is to read a light text (like yellow) on a light (like white) background?
Same goes for dark text on dark background.

LIST CODES

Two List Options:

Bulleted
Numbered

Code for bullet list:	How it will look:
<ul> <li>This is cool. <li>This is cool too. <li>This is way cool! </ul>	This is cool. This is cool too. This is way cool!
Code for numbered list:	How it will look:
<ol> <li>Creating lists <li>gives you control <li>over how your text appears! </ol>	Creating lists gives you control over how your text appears!

HTML LESSONS
One	Two	Three	Four	Five	Six

(Hold cursor over clickbox to see what's covered in each)