Basic HTML Lesson 1

Go To... (2) (3) (4) (5)

ello there! My name is Bill, and if you want to learn how to make a web page your way, then you've come to the right place. So without any further palaver, let's get started.

The Bare Essentials: Tags

This is what an HTML page starts with:

<HTML>

The two brackets '<' and '>' indicate that this is an HTML 'tag', and this particular tag is a 'Start Tag'. This tag let's the user's browser know that it will be reading a web page, and it is the first thing you must write to begin making a HTML page. And this:

</HTML>

...is an 'End Tag', signified by the forward slash. When a browser "views" a website, these two tags let it know that everything in between them is HTML code that tells the browser what should be displayed on the user's screen.

Here are the minimum necessary tags for any HTML page:

<HTML> ....Start of the HTML document

<HEAD> ....Start of the Head tag

<TITLE>Page Name goes Here</TITLE> ....Page Title

</HEAD> ....Closing the Head Section

<BODY> ....Start of the Body tag

--Your Text, Pics, etc. all go here-

</BODY> ....End of the Body tag

</HTML> ....End of the HTML document

The above is a complete website page, but with nothing in it. But before we get to putting something in it, here are a few points you may want to know:

1- If you have looked at the source code for this page, you may be wondering about the difference in case-sensitivity. Well, whether you find it easier to use capital letters or not in your own code is mostly up to you; HTML is not case-sensitive for the most part, except for a few tags like the "Embed" tag, which we'll get to later.

2- If you don't know how to view the source code, just right-click anywhere on a web page except over a link or image and select "view source" and notepad should pop up and display the source. (Assuming you use Windows). 'Source code' is simply the text that makes up an HTML page, and requires the code shown above and also all the commands that make up your page.

3- Tags are simply words that 'tell' the browser what to do.

4- If you print this page, remember to set your printer so it doesn't print the background.

What You'll Need

First, open up Notepad or a text editor with Wordwrap turned off. My personal choice for HTML coding is NoteTab because I can have many separate pages open at the same time, and it's one of the very few text editors that will alow you to have wordwrap turned On, without messing up your code. If you want to try NoteTab yourself you can download the Lite version for free Here.

You may have one of the many fancy HTML editors that claim to do everything but make the page for you automatically, but if you really want to learn HTML my advice is to use a text editor, the way most of the pros do. Besides, some of those bloated HTML editors will change your code for you whether you want it changed or not... Front Page Express is a good (bad?) example. But if you feel you must use one, try Arachnophilia (free).

You've Lost Me!

Open Windows Explorer and make yourself a new folder to store your web page in. Name it 'HTML' or whatever you like. Now copy the following code and paste it into Notepad.

You can now save the file in your new folder with the name index.html and not .txt. The extension .'html' identifies it as a web page and not a text file. Be sure that when you go to the Notepad menu to save it that you have 'Save As Type' set to 'All Files', or you may find that it has been saved as index.html.txt which will not do at all.

Open your new folder in Windows Explorer and you should see your newly-saved file residing there. Double-click on it and your default browser will start up and display a blank HTML page. Now, we are ready to put something into that page. All set?

Adding some substance

Be sure you still have your browser and Notepad open. In notepad, first we'll give our document a title.

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

We have now given the document a title, and that title will show in the upper frame of your browser window; but remember that the title of your document may or may not be the name of your document. The name of our document is 'index.html'. And in between the Body tags, write something like 'Hello World!" or 'This is Joe's web page'.

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
</BODY>
</HTML>

Save your document and hit the Refresh or Reload button of your browser and you should see something like this:

This is Joe's web page

Congratulations! You're now a web author... well technically, anyway. Remember the steps we just took: When you make changes in your document, re-save it with Notepad, then bring your browser to the top of your desktop and hit the reload or refresh button to see your changes.

Positioning

Now we'll learn a little formatting. Formatting is a term for placement of things on your page. Suppose you wanted to put your text in the middle of your page. To do that we can use the <CENTER> tag, like so:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
<CENTER>This is Joe's web page</CENTER>
</BODY>
</HTML>

Notice that the two tags of the center command are a little different; the ending tag has a / (forward slash) before the word CENTER. This tells the browser that the command to center the text is over, and any text that comes later will start out at the left side of the page- which is the default position for text and images. Go ahead and save your work with Notepad, refresh your browser and take a look. Your text should be centered at the top of the page.

Now let's take our center tags out for now, and add another line of text:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
This is line 2
</BODY>
</HTML>

Save the changes and refresh your browser to see the result... Didn't get what you expected, did you? Don't worry, that's just one of the oddities of how browsers interpret what you want them to show. If you type a line of text that you want displayed in your program and hit the 'ENTER' key to start a new line, you won't see that on your browser screen...the browser simply interprets it as a space, and displays it as one continuous line.

But you'll be glad to know there is a solution. In html, we have to tell the browser when one line of text is over and when to start a new line. We can do this with the BREAK tag: <BR> which needs no closing tag.

Now add the Break tag, and view your page again.

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page<BR>
This is line 2
</BODY>
</HTML>

That's more like it, eh? By now, you should have a handle on this business of html tags. Most of the time you must have a beginning and an ending tag around what you want to display on your page- but not all the time, as we are about to see. For instance, there is the Paragraph tag: <P> There are times when this tag must have an ending tag, but we won't go into that right now. The paragraph tag is used mainly just for what it implies, to start a new paragraph. Let's try this:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
<P>
This is line 2
</BODY>
</HTML>

I'll save you the trouble of using your browser this time and we can use mine. Notice how the P tag skips a line the same as if we had used 2 Break tags:

This is Joe's web page
This is line 2

So maybe you want to skip more than one line? Try this and check it in your browser:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
<P>
<P>
<P>
This is line 2
</BODY>
</HTML>

Another surprise, huh? Well, that's the way the Paragraph tag works, unfortunately. If you need to skip a few lines in a document, you'll have to rely on the good old Break tag:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
<BR>
<BR>
<BR>
This is line 2
</BODY>
</HTML>

Check it in your browser. While this will work fine with Internet Explorer, it may not work with other browsers, notably Netscape.

A Special Character

There are a lot of Netscape browsers out there, and for them you will have to insert a special character. This is simply a 'Character Code' for a space, because a line (or a table, for that matter, which we won't get into here) must have something in it for certain browsers. Here's how you use this character code:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
 <BR>
 <BR>
 <BR>
This is line 2
</BODY>
</HTML>

Go ahead and check it with your browser. Character codes work in all browsers and you will sometimes find a need for them. The '&' character, or ampersand, tells the browser that special a code is immediately following, which is the 'nbsp' part. And the semicolon tells the browser that this is the end of the special code. For instance, you can use another character code, '"', which is the character code for a quotation mark. Try this:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page<BR>

And this is really "
Sp    
a    
c    
ed" out!

</BODY>
</HTML>

.....and get this:

This is Joe's web page
And this is really "Sp a c ed" out

Here are some quick examples of underlining, italicizing and making bold text:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#00ffff" TEXT="#000000" LINK="#0000FF" ALINK="#FF0000" VLINK="#FF80FF">

<CENTER>

<U>Underlining Text</U><P>
<I>Italicized Text</I><P>
<B>Bold Text</B><P>
<U><B><I>All three</I></B></U><P>

</CENTER>

</BODY>
</HTML>

Underlining Text

Italicized Text

Bold Text

All three

Notice that all the tags in the last example are 'nested'. This simply means that they have to be in a certain opposing order; the closing tags should be in the opposite order of the beginning tags. You can add as many text attributes as you like if you remember to nest the tags properly.

Go ahead and do some experimenting with what you've learned so far. That's the best way to retain what you've seen. And don't be afraid of making mistakes- they are common even with the pros, and mistakes can help you learn more than you realize they might.

Fonts

If you don't specify a font in your document, the user's browser will automatically display the default font. But suppose you want to use a different font? Well, you can, but only in a limited way.

Since the user's browser uses only the fonts that are installed on the system, if you have a favorite font- named maybe 'Cool.ttf', and you use that font in your document, if the user viewing your page doesn't have your font on their system what he/she sees may not be very cool at all. The safest fonts to use, if you want everyone else to see your page the way you see it, is to stick with fonts that are commonly available on all operating systems, such as Arial, Verdana, Helvetica etc. Remember, there are folks out there usimg several different browsers, and a good many who don't use the Windows system.

Anyhoo, you'll need to know how to specify a font. Here's an example of the Font tag <FONT></FONT>:

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
This is Joe's web page
<P>
<FONT FACE="Times New Roman" SIZE="6">
This is line 2
</FONT>
</BODY>
</HTML>

This is what you should get:

This is Joe's web page

This is line 2

Go ahead and save your work, hit the Reload button on your browser, and check it yourself.

I added a little something extra in the basic Font tag: the Size attribute. The sizes of fonts as we are using them here can have sizes from 1 to 7, like so:

SIZE "1"
SIZE "2"
SIZE "3"
SIZE "4"
SIZE "5"
SIZE "6"
SIZE "7"

Another way of displaying fonts is with the Heading tag: <H></H> You can use this tag to make your font stand out.

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<H2>My First Web Page</H2><BR>
This is Joe's web page
<P>
<FONT FACE="Verdana" SIZE="4">
This is line 2
</FONT>
</BODY>
</HTML>

This is the result:

My First Web Page

This is Joe's web page

This is line 2

Sizes for the 'H' tag also range from 1 to 6, but the result is the opposite of that of the regular font size attribute. For instance:

<H1>Size 1</H1>

<H4>Size 4</H4>

<H5>Size 5</H5>

<H6>Size 6</H6>

Please don't ask me why.... You'll run into other oddities such as this when you get deeper into HTML programming, but don't look for reasons as you'll just be disappointed. Moving right along- While we're adding things, we might as well put a little color into the picture.

<HTML>
<HEAD>
<TITLE>My First Website</TITLE>
</HEAD>
<BODY>
<H2>My First Web Page</H2><BR>
This is Joe's web page
<P>
<FONT FACE="Verdana" SIZE="4" COLOR="#FF0000">
This is line 2
</FONT>
</BODY>
</HTML>

No, we won't use my cheap browser this time; I don't want to spoil you. Check it out in your browser this time.

Here are a few basic colors on gray and blue backgrounds:

<FONT COLOR="#000000">Black<FONT>
<FONT COLOR="#FFFFFF">White<FONT>
<FONT COLOR="#FF0000">Red<FONT>
<FONT COLOR="#00FF00">Green<FONT>
<FONT COLOR="#0000FF">Blue<FONT>
<FONT COLOR="#FFFF00">Yellow<FONT>
<FONT COLOR="#00FFFF">Cyan<FONT>

The importance of the font to background color should be apparent. And don't be mystified about the color coding system- it's really very simple.

Decimal
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
0 1 2 3 4 5 6 7 8 9 A B C D E F
Hexadecimal

The set of six numbers used to create the different colors are in what is called the RGB format. That simply stands for Red, Green and Blue. Virtually all possible colors can be produced with varying mixtures of those three basic colors, by changing the values of each set. They are in hexidecimal format, but don't worry too much about hexadecimal yet- just remember that a low value starts with the number Zero and the highest Value is the letter F. Here's a little chart to illustrate:

RR	(Red)	GG	(Green)	BB	(Blue)
00		00		00
44		44		44
88		88		88
AA		AA		AA
CC		CC		CC
FF		FF		FF
F7		9A		B3

And this might clarify some more:

RGB Value	Color
#88A0C8
#E0D0C0
#FFA0FF
#FFFF00

Now hexadecimal color coding should be a little more clear... it's just a matter of the right mix and match.

Congratulations! You've finished your first lesson in HTML.
Now on to Lesson Two.

Contents

(2) (3) (4) (5)

HOSTING: