smiling.gif (1578 bytes)             display(2).gif (5028 bytes)     

PART 1

1. Getting Started

Okay. There are many ways of writing HTML... this is my way. It may not be the easiest, but it's not bad. I like it.

This is very important to understand: Everything inside of the brackets "< ... >" is called a tag. There are open tags: <blah> and close tags: </blah>. 99.9% of HTML needs to have open and close tags. Whatever is between the open and close tags, is being affected by the tags. The proper way to close the tags goes like this:

<TAG1><TAG2>Stuff being affected by tags</TAG2></TAG1>
Notice that TAG2 was opened second and closed first, and TAG1 was opened first and closed second.

Here's another important idea to understand: HTML is CAP-SENSITIVE. You should get used to either ALL UPPERCASE or all lowercase with tags and sources. It will save lots of trouble in the long run.
Let's begin...

  1. The first thing to do is to open either "Notepad" for PCs (or "Simple Text" for MACs). Save the blank file as ALL FILES (*.*) [instead of a Text Document (*.txt)] and name it whatever you want to call it plus the extension " .html ". An example is this: " mypage.html " You can write, edit, and save your HTML file in "Notepad". Then you can view it through Netscape 3.0 . (You can also view through other browsers, but I can only guarantee that what is in this tutorial will work in Netscape 3.0 or better.) (Don't forget to RELOAD the page through your browser, to see your updates.)
  2. <html> on the top line and </html> on the last line.
  3. On the second line: <title>My Page</title>. You can call your page whatever you want, I'm just using "My Page" as an example that will be used for a while. (This page's title is "Learn HTML : PART 1". You can read it at the top of the page right now.)
  4. On the third line goes <body>, and then, </body> on the second to last line of the page. Whatever goes between these two tags is the main part of the HTML document and what is seen on the page.
  5. Now, on the fourth line, type: Hello. This is my first webpage.
So at this point, your "Notepad" page would look like this:
<html>
<title>My Page</title>
<body>

Hello. This is my first webpage.
</body>
</html>
If you were to view this in Netscape, it would only show the TITLE at the top of the page, and the line "Hello. This is my first webpage." would be in black text in the upper left corner of the page.
BACK TO MENU

2. Body Tags

There are several tags that can be typed into the body tag. These tags are very important because they will affect the main part of the HTML page. (The "#"s stand for numbers 0 - 9 and letters A - F. It will be explained in Section 3.)
text= ###### =this dictates what color the text will be. (if this is not set, the default color is black)
bgcolor=###### =this dictates what color the background will be. (if this is not changed, the default is light gray)
background= "imagename.extension" =this dicates the background source to be tiled. HTML only supports image extensions that are J-PEGs (.jpg) or GIFs (.gif). Also, for tiles, try to use small pictures. Large ones take too much time to be downloaded via modems. (there is no default background tile)
link= ###### =this dictates the color of hyperlinks before they are clicked. (default is blue)
alink= ###### =this dictates the color of hyperlinks while they are clicked. (default is red)
vlink= ###### =this dicates the color of hyperlinks after they are clicked. (default is purple)
Here are examples of some body lines:
<body text= ###### bgcolor= ######>
The body line above only specifies text color and the color of the background. Everything else is default.
<body text= ###### background= "imagename.extension" >
The body line above only specifies text color and the image to be tiled as a background. Everything else is default.
<body text=###### link= ###### alink= ###### vlink=###### bgcolor= ######>
The body line above has no background other than the specified bgcolor.
So, if you were to add the third body line to the "Notepad" document called "mypage.html" from the above Getting Started example, it would look like this:
<html>
<title>My Page</title>
<body text=###### link= ###### alink= ###### vlink=###### bgcolor= ######>

Hello. This is my first webpage.
</body>
</html>
Please do not see what this looks like in Netscape, yet.
We still need to give the #'s some colors...so let's see how.
BACK TO MENU

3. HexColors

HTML uses a color system that uses 6 digits... hence HEX. The first two digits stand for RED. The second two digits stand for GREEN. The last two digits stand for BLUE.

The digits used are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 0 is the darkest digit, and F is the lightest digit.
So... 000000 is the darkest possible color, black.
And... FFFFFF is the lightest possible color, white.
Absolute Red is FF0000, Absolute Green is 00FF00, and Absolute Blue is 0000FF

I'm not going to explain everything about the colors and the conversions, I'll just give an idea and some examples. One way to figure stuff out is to just try out different ideas. Here is a list of some colors and what they look like.
 

ffdab9 Peach Puff  00bfff Sky Blue  00ffff Cyan  7cfc00 Lawn Green  ffff00 Yellow
daa520 Goldenrod  ffa500 Orange  ff1493 Deep Pink  da70d6 Orchid  aeeeee Pale Turquoise 
458b74 Aquamarine  ee7942 Sienna  cdba96 Wheat  ff83fa Light Orchid 
HTML also has some set colors for written out colors. They can just be typed in instead of the HexCode. Some of these colors are as follows:
Red Blue Green Purple White Black Yellow Gray Aqua

Now, let's fill in the #'s from the Body Tags example with hexcolor digits nd see what happens...
<html>
<title>My Page</title>
<body text=red link=blue alink=00ffff vlink=00bfff bgcolor= 000000>

Hello. This is my first webpage.
</body>
</html>
So, if you see this in Netscape, the TITLE is still "My Page". The TEXT ("Hello. This is my first webpage.") is now red. The pre-clicked links (LINK) are blue. The clicked links (ALINK) are cyan, and the post- clicked links (VLINK) are sky blue. [The only thing is that I haven't shown you how to do HyperLinks yet, so you can't see the LINK, ALINK, and VLINK changes yet... But trust me you're learning.] The background color (BGCOLOR) is black.
BACK TO MENU

4. Text Tags
 
HTML's default text looks like this sentence. It can be altered... 
To make something bold: <b>DUDE</b> = DUDE
To make something italics: <i>Wow!</i> = Wow! 
To make something underlined: <u>Stuff</u> = Stuff
To make something small: <small>REAL small</small> = REAL small
Example: You can also combine, or maybe not.

The line above's HTML looks like this: <b><i><u>You can also combine</u>, or</i> maybe</b> not.
Also...

The CENTER, LINEBREAK, PARAGRAPH, and BLOCKQUOTE tags are useful.
CENTER
<center>This text is centered.</center>

This text is centered.
LINEBREAK
If you use the BR [also known as LINEBREAK] tag it starts another line. This sentence doesn't have the BR tag at the end. This one does.
Now the text begins on the next line. You can also use it to add empty lines on the webpage.

Here is the HTML for that LINEBREAK explanation:
If you use the BR [also known as LINEBREAK] tag it starts another line. This sentence doesn't have the BR tag at the end. This one does. <br>
Now the text begins on the next line. You can also use it to add empty lines on the webpage. <br><br><br>

PARAGRAPH. (This is the HTML for the following paragraph:)
<p>All of this text is a seen as a paragraph. What is neat about this tag is that it adds a vertical line above and below the affected text. All of this text is a seen as a paragraph. What is neat about this tag is that it adds a vertical line above and below the affected text.</p>

All of this text is a seen as a paragraph. What is neat about this tag is that it adds a vertical line above and below the affected text.All of this text is a seen as a paragraph. What is neat about this tag is that it adds a vertical line above and below the affected text.
BLOCKQUOTE.
Hello. This is a test. It is only a test. I forget the rest of the message.

A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE. A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE. A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE.
Hello. This is a test. It is only a test. I forget the rest of the message.

The HTML for the above blockquote message goes like this:

Hello. This is a test. It is only a test. I forget the rest of the message.
<blockquote>A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE. A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE. A blockquote is indented on both sides. A blockquote also has a vertical line above and below the the BLOCKQUOTE.</blockquote>
Hello. This is a test. It is only a test. I forget the rest of the message.

(Hint: LINEBREAK, CENTER, and PARAGRAPH BREAK can also be used with tables, lists, images, headlines, hyperlinks, and others... explore the opportunities.)

Next...
HTML text has a few restrictions such as:
1. HTML does NOT recognize extra spaces.
2. HTML does NOT recognize "carrier returns".
3. HTML does NOT recognize tabs.
Well, there is a way to beat the system. There is a neat tag, <pre> and </pre>. It means "PREviously Formatted Text". By using the <pre> and </pre> tag, you can take text with extra spaces, tabs, and "carrier returns" and have HTML recognize it. The only possible draw-back to this tag is that you cannot change the typeface. It always uses the default, which is a Courier-style typeface. Here's an example: 

This is a PREVIOUSLY FORMATTED TEXT  looks like.  It was    made to show
that   when using   the PRE TAG,   more than  1       space can be   recognized
by    HTML.  Also, such things as       tabs and   "carrier returns" are being
recognized...     and   it is easy   to notice  the change in      typeface.
                One of the neat                 aspects of this  tag
                is that you can      try to     use it to substitute
                such things  as                 tables  and columns.
The SUB and SUP TAGS:

SUB: subscript

The number seven after this sentence is inside a <sub> tag: X7
The HTML for that looks like this: X<sub>7</sub>

SUP: superscript
The number seven after this sentence is inside a <sup> tag: X7
The HTML for that looks like this: X<sup>7</sup>

BACK TO MENU

5. Headlines
Headlines are simple, and they work like this <H#>Whatever your headline is</H#>, and you have six #'s to choose from 1-6, 6 being the smallest and 1 is the largest.

This HEADLINE uses H6
This HEADLINE uses H5

This HEADLINE uses H4

This HEADLINE uses H3

This HEADLINE uses H2

This HEADLINE uses H1

NOTE: All headline tags automatically add vertical space above and below the headline. You do not need linebreaks or paragraph breaks after them unless you want the additional vertical space those tags provide.
BACK TO MENU