FREE HTML Course for Teachers, Lesson One

Introduction to HTML


For this course, the first thing to do is to open a text editor. On a Macintosh it is a SimpleText file. On a PC, you will use NotePad. Most instructions are directed at using a PC. Generally, Mac users will know how to fill-in. Should you have any problems with the HTML course, please e-mail. This course won't teach you basic computer skills, just the basic HTML skills. Please get help locally for basic computer skills.

Let's get started

When you open your text editor, it may fill your screen - blocking out these instructions. If that occurs, this browser page that you are now reading will still be open under it. You'll need to adjust the size of the page layered on top. First click on the "minimize button" in the upper right corner of the browser page, then drag the lower right hand corner of the page towards the middle of the screen. The two open pages are layered and can both be seen. Re-size and arrange each of them on the screen to allow you to click either of them to the top. You may now work on both of them them like a pro. The page that you click on will come to the front. Eventually, there wiil be a third open working page. When we get there, you will want to be able to click on any of the pages at any time. Sizing and arranging on the screen is key. Leave just a little bit of the page visible around the layers.

Get help locally if you don't master this concept. Someone may need to give you a "hands-on" demonstration. Another trick is to print these instructions, which will allow you to read along while you work on your HTML.

To open your Text Editor:
  1. In Windows on a PC in the lower left corner of the screen, is the "START" button
  2. Move your mouse arrow to "START," a menu will pop up.
  3. Move your mouse arrow to "PROGRAMS," a menu will pop up.
  4. Move your mouse arrow to "ACCESSORIES," a menu will pop up.
  5. Move your mouse arrow to "NOTEPAD, which will open a NotePad file.
Above is the page where you will start your very first HTML coding. You will have success today. It is fun and can be very easy.

Type the following EXACTLY AS SHOWN on your NotePad page (SimpleText for Mac users):
The things I will want you to type will be shown in RED during this course.

<html>
<head>
<title>HTML Course, Lesson 1 - Basic Beginnings</title>
<META name="keywords" content="HTML">
<META name="description" content="HTML Course - Lesson 1">
</head>
<body>
</body>
</html>

 Save the file on your hard drive. Touch "Control S" and save it in the file of your choice. Name the file "HTML-Course-Lesson-One.html". Remember where you save it! Put no blank spaces in the file name and end the file name with: ".html" (leave out the quotation marks).

This is the basic structure that you will use for every HTML page that you make. You may want to save it in another file so that you can copy and paste it easily when building new files.
Everything must be perfect in the code. If you leave out a bracket or quotation mark, your page will not appear as you thought it should. This can be very frustrating. You MUST follow the rules of the code. The internet browser will do what you tell it to do, but it can not guess what you want.

Between the <body> and </body> tags, type:

<b>This is my very first HTML lesson. And I nailed it.</b>

Save your work (touch Control S). Now, let's look at it.

  • Click on the browser page to be sure that you "are in the browser."
  • Touch "Control N" an open a new browser page.
  • Touch "Control O" to start the opening process for your HTML code.
  • Click on "Browse" in the pop up window.
  • Go to where you stored your HTML course.
  • Click OKAY to open the file.
    The page should be blank except for:





    This is my very first HTML lesson. And I nailed it.





    If these words appear on your screen, you are done. The first lesson is over. You did great.

    If you want to play with the code a little before the next lesson, these are the places to type words that will change things on the screen:

    Between the <title> and </title> tags, which changes the title in th gray bar at the top of the browser.
    Between the <body> and </body> tags, which changes what you see on the screen.

    The other tags are special instructions for the browsers.

    VERY IMPORTANT:
    To actually see any changes that you have made, you must save your work while in the text editor, then refresh on the browser.


    A helpful trick is to keep the browser open while NotePad is also open. Have the two layered so that you may click between them easily and quickly. SAVE your changes in NotePad, then click on the browser and REFRESH to see your changes. Do this often. No, do this very often (with every little change - even the slightest change - is recommended). Then click back to NotePad for more work or changes. When we start working with tables, a little change done wrong can lead to drastic changes on the page.

    Go slow, save and refresh very often.

    Make small changes, save your work and look at the change.

    Make a habit of small changes and looking at your work. Are you getting the picture?

    As your get into more complicated coding, this will save a lot of time. It is much better when you have only a few changes that made the page go crazy. If you never made a mistake, the page would never go crazy. Unfortunately, you will sometimes leave out a space, a quotation mark, a bracket, a comma or something that will give you wild results. It happens. It is best to SAVE your changes often and LOOK at the results of the change.

    In LESSON TWO, we will look at tags and some other basic concepts. Stay with it.
    Always remember that "Rome.com was not built in a day."

    DO NOT go to future lessons until you have completely mastered the concepts of this lesson. Concepts will build on each other. You'll be making basic pages in no time. Some of you will want to go faster, this is because HTML can be easy. In the next lesson, we will learn a lot about the workings of HTML.

    If this lesson was helpful for you or you have any comments, please e-mail. Please give permission to reprint your comments. When you email, be sure to mention which lesson is in question.

    Introduction
    Lesson 1 - Introduction to HTML
    Lesson 2 - Introduction to TAGS
    Lesson 3 - Introduction to FONTS
    Lesson 4 - under construction
    Contact Us





    Click here to save on CARSON-DELLOSA Discounts






    This site is provided as a free service to schools and teachers across the country
    from e-Teacher-Discounts.com, helping teachers save money everyday. This site is independently owned and not part of Carson-Dellosa Publishing Co., Inc.