This lesson will teach you about Fonts, making text Bold, using Italics, and how to make your text Size smaller or larger.  It will also cover various types of Fonts.

Preparations:

  • 1.  Use this pointing finger - to mark your place.  Just drag it along as you read each line.

  • 2.  Open your PSP Times Three "mylessons" HTML Document.

  • 3.  Open your source code by going to View/Source.



TEXT
    Let's Be Bold:
    • To make a word stand out in your text you would use Bold with your font.  In HTML you have a special set of tags for this <B> and </B>  We will use part of the sentence you already have:  "This is my PSP Times Three Homework page for the HTML 101 lessons."

    • Let's make PSP Times Three bold.  Editing your HTML source, insert the Bold Tags as shown here:
      This is my <B>PSP Times Three</B> Homework page for the HTML 101 lessons.

      Next, go to File/Save.  Then on your HTML document page go to "View" then "Refresh".  Your page should now show up with the bold like this:
      This is my PSP Times Three Homework page for the HTML 101 lessons.

      When adding the Bold set of tags be sure to keep them directly next to the beginning and end of word or words you want bold.  If you leave a blank space it won't make a difference if only using Bold Tags, but if you add a link or underline the word or words, it will show an extra underline in the blank space.

    • Now we will add more text to your document.  Add the following sentences, save, and refresh your document:
      I thought this would be difficult but it isn't.  Its so simple and I can't wait to learn more.

      Your document should now read:
      This is my PSP Times Three Homework page for the HTML 101 lessons.  I thought this would be difficult but it isn't.  Its so simple and I can't wait to learn more.
       


    Time For Italics:

    • Another way to make a word or words stand out in any document or letter is by using Italics.  Like all HTML Tags, this one also comes in a set.  The Tags used for Italics are <I> and </I>

    • Try applying the Italic Tags to the word "simple" in your last sentence. nbsp;File/Save the notepad, and then View/Refresh your document:
      Its so <I>simple</I> and I can't wait to learn more.

      Your sentences should now look like this:
      This is my PSP Times Three Homework page for the HTML 101 lessons.  I thought this would be difficult but it isn't.  Its so simple and I can't wait to learn more.
       


    Size 'Em Up!

    • The Font Tag Set is <FONT> and </FONT> but this set also has Attributes just as the Body Tag Set does.  Within the Font Tag you will find the Attributes "SIZE" and also "FACE".  The Size denotes how small or large you want your text to be.  The Face denotes the name of the font you want to use.

    • Let's start with the Size first.  Numbers from 1  smallest  to 7  largest  will be how you determine which one to use.

      Not trying to confuse you but a notation needs to be added here:
        Font Size can be either a fixed size (from 1 to 7) or a relative size (using plus or minus).  Usually the default text size is 3, so if you wanted to increase one level you would use a relative of +1 (3 plus 1 equals size 4).  If you wanted to decrease one level you would use a relative of -1 (3 minus 1 equals size 2).  Using the relative size helps viewers who have set their browser for a larger or smaller font size depending on their screen resolution or their eyesight.  Experts claim it is always best to use the relative size and only use the fixed size when really needed.  Unfortunately this tut writer does not comply with the experts and uses the fixed size because it is more convenient.


    • So let's see how you would add one size to your HTML notepad.  Don't forget that all attributes belong inside quotation marks:

      <BODY BGCOLOR="Your Color Code" TEXT="#Your Color Code">

      <FONT SIZE="4">

    • Save your file then refresh your view on your document.  Notice the difference in size:
      This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.


    Name That Font:

    • The Font FACE determines the style of your text.  It is a good practice to only use those fonts installed on your computer or browser rather than a wild, crazy style.  The reason for this is many viewers may not have that particular font and when they visit your page, the text will view from their default - which is usually Times New Roman.  Also, if you do not keep that particular font in your computer's master font folder then you too will only be able to view the default.  It is also good practice to choose a font that is clear and legible for easier viewing on the eyes.

    • Here are some examples of the most commonly used fonts using Size 3:

        Comic Sans MS - This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.

        Book Antiqua - This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.

        Arial - This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.

        Lucida Sans - This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.

        And this is how the default Times New Roman would look:

        Times New Roman - This is my PSP Times Three Homework page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so simple and I can't wait to learn more.

    • Let's see how to add a Font Face to your document - Remember to include the quotation marks:

        <FONT FACE="Your Font Name" SIZE="Your font size">


      This is what your HTML notepad should resemble as well as your document:
       



REVIEW

  • In Lesson 1 you learned the required elements for a basic HTML document. You were given your assignment and set up your first HTML webpage.

  • Lesson 2 explained about Tags/Codes and how to use the View/Source to obtain different codes so you can set up your website the way you would like it to appear. You also learned about Attributes and Values to add some color to your background and text, along with how and where to place them in your HTML document.

  • Lesson 3 explained how to make words Bold, use Italics, and all about Fonts - Size and Type.


ASSIGNMENT

  • Your assignment for this lesson is to apply what you have learned here - Bold, Italics, Font Size and Face to your document by following these instructions:

    Open your PSP Times Three Lessons HTML Document by double clicking on it and View/Source.  Note that where you will be editing your HTML is marked with Red Text here:

    <HTML>
    <HEAD>
    <TITLE>My PSP Times Three HTML Lessons</TITLE>
    </HEAD>
    <BODY BGCOLOR="E0E0FE" TEXT="#000080">
    <FONT SIZE="4" FACE="Your Chosen Font Name">
    This is my <B>PSP Times Three Homework</B> page for the HTML 101 lessons. I thought this would be difficult but it isn't. Its so <I>simple</I> and I can't wait to learn more.
    </BODY>
    </HTML>

  • Next be sure to File/Save.  Then go to your HTML preview page and click View/Refresh.


Now go to your web site and upload your edited document.  Once you do that be sure to send your link through our group mail with "HTML Lessons" in the Subject Line.

Keep practicing with the Bold and Italic tags and changing the Size and Face until you become familiar with them.  Good luck and if you have any questions just send them on to us!

Next lesson you will learn about breaks, spacing, paragraphs, and headers.

 

~~~~~~~~~~~~~~~~

Lesson One

Lesson Two

Lesson Four

Tutorials Index

~~~~~~~~~~~~~~~~







This Lesson was written by Cathie for PSP Times Three.
Any similarities to other tutorials is merely a coincidence.
©   PSP Times Three
~July 2007~