FREE HTML Course for Teachers, Lesson Two

Introduction to TAGS


Open your browser to the page that you saved for Lesson One. Unless you have worked on the page, this is what you should see when you open it:


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


At the very top of your computer screen in the menu bar, you will see the buttons like "FILE... EDIT... and VIEW."
  • Click on the "VIEW" button to expose the pull-down menu.
  • Towards the bottom of the pull-down menu, you'll see the word "SOURCE."
  • Click on "SOURCE."

    A pop-up window will show you the HTML code for this page:


    <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><b>This is my very first HTML lesson. And I nailed it.</b>
    </body>
    </html>

    You may view the HTML code for this page or any other page. Viewing the HTML code on the web helps you to see how HTML really works.

    While the source code is open, touch "Control P" to print the source code. Remember that this is the basic code of every page that you will build. Let's review at a few things that we have learned by building this page - but we may not have realized that we were learning:
    HTML is made up of words (plus a few other things like images, etc. that we will learn about soon) that show up on the screen and TAGS that don't show up on the screen. Tags are the coding that HTML uses to tell the browser what and how to display the words and images. The browser is the program that reads the tags, words, images to create the pages that the reader sees on the screen.

    It is amazing that all of the different browsers can read and display the pages that come from many different formats. If you drag the lower right hand corner of the screen towards the center, all of the lines will instantly reflow on any type of computer (even the old dot-matrix, if it reads HTML).

    On the other hand, it's quite frustrating that different browsers can render the same code in different ways. It is always good to look at your work on a few different browsers to see how the page is displayed. What looks great on your browser may look just awful on another browser.
    Go to someone else's web page on the internet and look at their source code. While some of web pages have bizzare, technical code, while other pages use basic HTML and will give you an idea of how pages are built. Look at the source code of the pages in this course. You'll get a feel for the code that we will be going over in a past or future lesson. You'll certainly understand how and why every piece of code was used on these pages before we are done.
    Now, let's look at some of the tags that we were used in Lesson One:

    The <html> tag.
    This tag is the start and finish of most every web page. Generally all code falls between the start and stop of the <html> tags. Occassionally you will see words outside the HTML tags, but you won't need to worry about that. Usually two tags are required to work together to tell the browser where a function starts and where it ends. This tag should be at the beginning and end of every page you make.

    The <head> tag.
    Within the head tag, you will find information the the browser uses to display on the screen. Tags that can be found within the head tag will not show up on the screen. This code is in the back ground.

    The <META> tag.
    These tags are used to tell search engines a little about your site. META tags are used for KEYWORDS and your site DESCRIPTION. META tags have been abused by businesses who want to rank high in a search result. Today, search engines don't put much stock in META tags for ranking. For schools, META tags are really not needed at all. This page was built without META tags and functions quite nicely.

    The <title> tag.
    It puts the title in the bar at the top of the web page. .

    The <body> tag.
    Between the start and stop of the body tag is everything that shows up on your browser that a viewer can see. This is where the action is. This tag should have a start and stop on every one of your pages.

    Basically, what we have learned is that tags are the instructions for the browser to display a page. Most have a start and a stop because a browser can't guess where you want the tag to stop (on most tags). You must tell the browser where to stop the function. You'll find some tags that only require a start, such as the <li> tag - more on that later.

    To Learn HTML:
    Learn how the tags work.
    Learn a few rules of what to do and what not to do.
    Learn a few tricks (techniques). . .
    and, you're off building web pages.
    Before we finish the lesson, we'll look at a few tags to see what they do. We'll be using them in future lessons in greater detail. You can play with them on a practice page to get a feel for how they work.

    <b> makes words bold. Look at bold word(s) on the screen, then find the code for this word(s). You'll see that there is a start and stop bold tag arourd the word(s).

    <i> makes the word in italics.

    <sub> makes the word offset slightly below the line and smaller. Example

    <sup> is the opposite of <sub> Example

    <hr> (one-sided tag) makes a line across the page below the type. Example:

    <p> is often used to start and end a paragraph. (Some designers like use the <br> tag instead). There is often more than one way to skin a cat.

    <img src="file_name.jpg"> This is an example of a one sided tag, that is , there is no STOP tag. If you put the name of a jpeg (image) within the quotation marks, the image will show on your page, however, we will adjust the size in the next lesson.

    <a href="link_name"> Lesson One</a> are used to create links, where the file name goes between the quotation marks. More on this later.

    <h1> is used for headers. That is what the "H" stands for in the tag name. If you change the numbers within the tag, the header will change sizes. The larger the number, the smaller the letters. Thus, <h1> is the largest of the Header Tags. The header tags also put an automatic space above and below the line.

    <font> is the tag that lets you change the face (font style), the size, and the color of a font. We will soon learn to use some of these functions.

    <br>ends a line. When used in multiples, you add blank lines.

    <center> can be very useful when you are wanting to center an image or text.

    <table> lets you create tables. Very useful and very tricky. We'll learn more about these slowly.



    Master what you have learned. You should be able to build a text only page quite easily.

    Practice:
  • Use the basic format that we have been using in these lessons.
  • Type in a story about your class.
  • Use different tags to see what they do.
  • Save and refresh after each little change.
  • Look at your work and learn.


    Hopefully, you can see by now that learning the code can be easy
    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 Products






    This site is provided as a free service to schools and teachers across the country
    from Carson-Dellosa-Discounts.com, helping teachers save money everyday.