FREE HTML Course for Teachers, Lesson Three

Introduction to FONTS


Open your browser to the page that you saved for Lesson One. Unless you have added something to the page during practice, the page will still look like this:


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


You will be coming back to this basic design again. You may want to save the file in your folder under another name so that you don't have to retype the text every time. Open the file on your browser as we have done in previous lessons. If you cannot find the file in your folder, you may not have included ".html" at the end of the file name. The ".html" is required. We will not discuss this again. You are already familiar with the Bold Tag that we used. Now we are goning to learn about the FONT TAG. The Font Tag allows you to manipulate the type faces in three different ways.
  • Color
  • Size
  • Face (the style that you want)

    Changing the Font Color

    There are millions of colors that you can choose. Unfortunately different browsers will render different colors differently. To add to the problem, different monitors will also render the colors differently. Thus, the colors you see on your screen may not be what someone across the room (or in Japan) is seeing when viewing the same page. Colors will be covered in more detail in the next lesson. For now, we will learn how to change basic colors of the fonts.

    Open the file where you saved your source code (html code). Find your code that looks like this:

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

    Add the following before the Bold Tag: <font color="red">
    Common Mistake:
    It is a very common mistake to forget one of the quotation marks or one of the brackets.

    Add the following after the Bold Tag is closed: </font>

    Save your work and refresh your brower to see the results.
    It should look like this:

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

    Change the color inside the quotation marks to BLUE, GREEN, MAROON. Each time you make a change, save your work and refresh the browser. You can see that changing the color of a font is quite easy.

    Changing the Font Size

    Changing the size is also quite easy. Go back to your source code and replace the word color with the word size. Change the color word within the quotation marks red (or whatever color you left the file as) to 5. Be sure to keep the brackets and quatation marks intact. It should look like this:

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

    Change the number inside the quotation marks to any number between 1 and 7. Each time you make a change, save your work and refresh the browser. You can see that changing the size of a font is quite easy. In this case, the larger the number the larger the font.

    Changing the Font Face

    Changing the style is also easy. Go back to your source code and replace the word size with the word face. Change the number within the quotation marks to one of the three following options:
  • serif
  • sans-serif
  • fantasy (the fantasy face is not always available with every browser and is not usually easy to read)

    Each time you make a change, save your work and refresh the browser. You can see that changing the face of a font is quite easy. These are the three font faces that you may use. Each of these faces are supported by all browers, although the browsers may render each face slightly differently. The fantasy font is best used with larger sized fonts.


    Putting the three options - COLOR - SIZE - FACE together

    The Font Tag is one of those nice tags where you can put multiple instructions within the start side of the tag. Go back to your source code and enter the following into the beginning side of the Font Tag. Let's change the words, too. We are no longer on the first lesson.

    <font color="red" size="7" face="sans-serif">I am doing great!</font>


    Your results should look like this:

    I am doing great!

    You can easily change any or all of the three options within one font tag. Play with the tag. Save your work with each change. Refresh your browser with each change. Should you leave out a quotation mark or bracket, it is much easier to find when you notice a problem immediately. In the next lesson, we'll learn about millions of colors.

    Helpful Hints:

  • There are many HTML Protocols. One has to do with Tag sequence: Ending tags should be in the reverse order of the beginning tags. As Shrek said, "They're like an onion."
    If you start with <font><b><i> - you should end with </i></b></font>.
    If you start with <b><i><font> - you should end with </font></i></b>.

  • Also have you noticed that you can only put in one space at a time? Enter multiple spaces with the space bar in the source code, it is stil rendered as one space. Likewise, the return key spaces the source code vertically but returns are completely ignored by the browsers. Thus, the need for the Break Tag <br>.


    Introduction
    Lesson 1 - Introduction to HTML
    Lesson 2 - Introduction to TAGS
    Lesson 3 - Introduction to FONTS
    Lesson 4 - Introduction to COLOR
    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.