Kwik-n-free instant HTML tutorial

This page can teach you immediately all the basics about HTML and web page design.

Lesson 1: How to Do It. This is all the HTML you need. (Well, almost.*)

<b> = bold.

<center> = centered <i> = italics
<br /> = line break
<u> = underline
<p> = paragraph = 2 line breaks
<font size = "2"> = small
<fontsize="4"> = big
<font size="3"> = "normal." Not needed. (Or if needed, you will notice!)

One more thing. After <b> you need to put: </b>. This tells the page when to stop making "bold." Similarly, after <i> you need to put: </i>. Etc. (Only the "line break" <br /> does not need this--because the slash is already included right inside the break code.)

Lesson 2: Doing It.

1. Open your "Notepad."
2. "Copy and paste" the following into Notepad:

First Website and<br /> Testament of <b>(put your name here)</b><br /> I hereby give all my money to my favorite pet. If I do not have a pet, then never mind.

3. "Save as" first.htm in your "Documents" folder. (Make sure it is not first.txt.)
4. Open your "documents" folder.
5. Double-click on first.htm. Your Internet Explorer, or Netscape Navigator, or other "web browser" will open. It's a web page! You should see something like this:

6. Return to Notepad. Do this:

• Change the <b> to <i> and change the </b> to </i>.
• Change (your name here) to your name.
• Add <b> before "First Website" and add </b> after your name.
  Result:
  <b>First Website and<br />
  Testament of <i>(your name)</i></b>
• Add <font size="4"> just before <b>. And add </font> after </b>.
  Result:
  <font size="4"><b>First Website and<br />
  Testament of <i>(your name)</i></b></font>
• Add <center> before <font size="4">. And add </center> after </font>.
  Result:
  <center><font size="4"><b>First Website and<br />
  Testament of <i>(your name)</i></b></font></center>
• Add <p> just before "I hereby" and add </p> at the very end.
• Add <br /> after "pet." 

7. "Save" the Notepad. Return to the browser. Click "refresh."
Then you should see:

8. If you do not see the above, then you did something wrong. Well "save" the Notepad again. Then "refresh" the browser again. Is it still wrong? If so, can you find your mistake? If not, erase everything and start over. Persistence is everything.

9. Return to Notepad. Add blank line spaces:
...just after <b>
...just after "of"
...just after </center>
...just after <p>
...just after <br />
Result:

10. "Save" the Notepad. Return to the browser. Click "refresh."
Then you should see:

Right! Haha! It makes no difference. However, the code is easier to read. Now just a couple more tips...

11. To re-edit with Notepad you must:
(a) Open Notepad and select File >open >files of type >ALL FILES.
(b) Or open the file with your browser (double-click) and then select View >source.
(c) Or "right-click" on the file in your "Documents" folder, and select Open with >Notepad.

12. Remember to save as .HTM. To experts, this step can be too obvious to mention. Therefore, some beginners do not get this advice. So they may even buy automatic web design software--but then take days--or weeks--to get started. Listen to the voice of experience...ahem... But get this right, it's downhill from there. (Oh, and .HTML is the same as .HTM. It's your choice.)

That's it! You just made a website! Well, almost. First, you need to learn just a tad about: CSS, PHP, and adding links, colors and pictures. Go next to the Kwik 'n Free CSS tutorial. (You'll find the link below.)

*Notice to nitpickers. Other tutorials may suggest <strong> and <em> instead of <b> and <i>. The differences are non-essential and will be explained one of these days. The use of <center> and <font> are outmoded and will be replaced by CSS commands in my next tutorial.