HTML For Beginners

HTML is the language of websites.
It can change the "font style".
It can change the font colors.
It can make text bold, underlined or italic.
It can make the text big,
OR Shrink it down to barely readable,
OR bring it back to regular size.

So, let's see what an HTML program looks like.

<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR ="FFFFFF">
<FONT COLOR="FF0000">
<FONT SIZE=7>
<FONT FACE= "Courier New">
<CENTER><B><U>HTML For Beginners</U></B></CENTER>
<FONT SIZE=4>
HTML is the language of websites.<BR>
It can change the <FONT FACE="Arial">"font style".<BR>
It can change the<font color="0000FF"> font colors.<BR>
<B> It can make text bold, </B> <U> underlined</U> <I>or italic.</I><BR>
<FONT SIZE=7> It can make the text big,<BR>
<FONT SIZE=1> OR shrink it down to barely readable,<BR>
<FONT SIZE=4>OR bring it back to regular size.<P>
So, let's see what an HTML program looks like.<P>
</CENTER>
</BODY>
</HTML>


Those 21 lines of text (directly above in red) are exactly what were used to create the first 9 lines at the top of this page. Plunging immediately into HTML might seem drastic but we think that by showing an entire program, you can learn the basics very quickly. As you read this tutorial, it will be helpful if you scroll back to the 21 lines of HTML and the 9 lines of text they create. In this way, you will see precisely what the commands do.

All HTML commands are put inside 'less than' and 'greater than' brackets <   > and when a command is inside of it, the whole thing is called a "tag". All HTML programs always include the following 8 tags (in this order):

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

All text that you are seeing on your screen was typed between the
<BODY> and </BODY> tags.

Whatever text is placed between these 2 tags:   <TITLE>     </TITLE> will be displayed in the upper left corner of your browser.

Have you noticed that some tags (for example </U>) have a "slash" inside of them? These are called "closing tags". The <U> tag as you might have noticed, will underline text and it will continue underlining until it encounters </U>, the closing tag. The same applies for these tags:

<CENTER> </CENTER>     <B> </B>     <I> </I>

You certainly can guess what the <CENTER> tag does, the <B> tag makes the text bold and <I> is for italics.

The <BR> and <P> tags require no closing tags.
<BR> at the end of a text line, starts a new line of text directly below the previous line.
<P> at the end of a line will also start a new line of text but it will leave a blank line in between.

Font Face, Font Color and Font Size

In the HTML example program at the top of this page, there is a font change. The text starts out being displayed as "Courier New" and then changes to "Arial". The exact instructions for these changes are:

<FONT FACE="Courier New">   <FONT FACE="Arial">

How do you know what font name to put between the quotation marks? If you go to this link: Core Fonts, you will see the fonts that everyone will have on their home computers.
Going to this link: 100 Fonts, will show a great many more font choices but not everyone may have those.

If you wanted to change the font color to red, you would use this command:

<FONT COLOR="FF0000">

The six characters between the quote marks make up a "hex" number that can be anything from 000000 (black) to FFFFFF (white). A 6 digit hex number can have 16,777,216 different values which gives you a HUGE color selection. We suggest going to this link: 216 Colors which will show you 216 colors for fonts and backgrounds.
The background color is set by a command in the "body" tag. For example, changing the background color to white would be done in this way:
<BODY BGCOLOR="FFFFFF">

Font size goes from 1 to 7. If you go to the top of the page, that very large type is size 7 and that very small font is size 1. Just as an example, if we wanted to change the font to size 4, the command would be:

<FONT SIZE=4>


Putting It All Together

There is a lot more to learn about HTML, but you have now learned enough to start writing some web pages. We suggest using Internet Explorer and Notepad, which is a VERY simple word processor that has been included for free with every version of Windows™. Yes, there are many good HTML editors available, but why not start simple? That way, you can see if you have the interest and ability to write and design webpages.

Consider those 21 lines of HTML as your first web page project. Copy those 21 lines into Notepad, then save that file.

IMPORTANT !!! Make sure you save the Notepad file with an .htm extension !! Notepad has a tendency to default everything to a text file. Let's say that you have saved your file as number1.htm. If you have NOT changed that Notepad box from Save As Type Text Documents (*.txt) to All Files, then your file will become number1.htm.txt - a TEXT file. This will not work as an HTML file.

To see if you have saved it properly, go to Internet Explorer and click FILE...OPEN...BROWSE then click on the Notepad file you just saved. The screen should display the 9 lines of text that you have become very familiar with. NOW you can have fun making your own changes to that HTML. When you want to see the effect of your changes, save the Notepad file, hold the SHIFT Key down and click the refresh button on Internet Explorer. You will now see what your new file looks like.

Putting It On The Internet

Yes, you have written an HTML file but you will be the only one who can see it. In order to put it on the World Wide Web, you will need a webhost. Again, we suggest taking the free route.
Webs
Bravenet
110MB
Weebly
(and a great many others) offer websites for free. You will have to learn about using their editor and uploading files, etc but if you've come this far, you should be able to do this too.
Once you have done that, you will now be among the other 4 billion webpages on the Internet. Congratulations !!!

As we said, there is MUCH more to learn about HTML and when you think you are ready, move on to Part 2.

________________________________________________________

Made With Notepad!
Yes, not only this webpage but this entire website was written using Notepad™ as the only editor.

________________________________________________________

Return To Home Page

Copyright © 1999 -     1728 Software Systems