This lesson will cover basic information about Tags or Codes, along with explaining how to insert some background and text color into your document.

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. Go to the bottom of your Windows desktop. Look at your taskbar which is located to the right of your Start button. It lists all the windows folders and programs you have open. Look for an empty spot. Right Click and hold mouse down on that blank space.

  • 4. A menu pops up. Select "Tile Windows Vertically". You should now have the tutorial and your own HTML open side by side. This will aid you in following the tutorial.

  • 5. Supplies Used: Windows Notepad or MAC Simple Text.



TAGS ARE CODES

  • HTML tags can be typed in either upper or lower case. It is good practice however to keep them all the same - all upper case or all lower case.

  • HTML Code is simply another word for HTML Tag. If you are browsing the internet and come across a page layout you like and wonder how it was set up, it is legal to copy the Code by Viewing the Source.

  • How do you view the source? Using your internet browser go to "View" and then down to "Source". A new window will open with a text document that displays the HTML Codes for that page. Try doing that now with this page to see how it works:


    Once the notepad opens you can view the Codes used to set the page up. Select the set up Codes you want to use and press Ctrl -C to copy it. Open your notepad and press Ctrl-V to paste the Code. IMPORTANT NOTE: It is ONLY the Code you can copy and paste. DO NOT copy the contents of a page. That is STEALING and violates the author's/owner's copyright.

  • Now you know how to access page setup Codes. It is a useful and easy tool to help you learn more about HTML and stay on top of what the latest web designers are doing.


LET'S ADD SOME COLOR!

  • First let's cover the background color. This Tag is found within the <BODY> and </BODY> and the Tag Attribute for this is BGCOLOR (which is short for background color). This tag also requires a Value which is the color number. The Values are always placed inside quotation marks. So, when you place this tag it should be in this order: First the BODY next the Body Color (BGCOLOR) which equals (=) the "color number" (#).

    Suppose you have a webset that the background graphic is black and you used white color for you text. One day you discover your background graphic does not appear or cannot be viewed by another browser. Well the visitor sure would be out of luck if you have not set your background color to black. All that would appear would be a white blank screen because your text is in white displayed on the default color of a white background. This can happen and is why you should always assign a background color to your web page unless of course you are using plain white to begin with - like this tutorial has.

    This is an example of how the Tag would look setting the background color to black:
    <BODY BGCOLOR="#000000">

  • Now we need to assign the text color. As with the background, the TEXT is also an Attribute with the color number being the Value. You can also assign a special Value to the links you may have on your page such as this link example: PSP TIMES THREE

    Not to confuse you but some basic colors can be assigned by replacing the color number with the word - such as "black", "red", "green", "blue" and "cyan". Note that not all browsers may recognize all color names, but they do recognize the RGB (color numbers) Values, so it is advisable to use those.

    By default, all browsers display black text on a white background. You can change both but be sure to coordinate the colors. Try to avoid using high contrast colors as they can be difficult on the viewer. Some people find that red text on a black background is very difficult to read. Always preview your selection before posting it on your website.

    This is an example of how you would write a Tag for a black background with white text and light grey color for the links:
    <BODY BGCOLOR="000000" TEXT="#FFFFFF" LINK="#DEDCDC">


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. Your Tags looked like this:

    <HTML>
    <HEAD>
    <TITLE>My PSP Times Three HTML Lessons</TITLE>
    </HEAD>
    <BODY>
    This is my PSP Times Three Homework page for the HTML 101 lessons
    </BODY>
    </HTML>

  • 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.


ASSIGNMENT

  • Your assignment for this lesson is to apply color to your background and text 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">
    This is my PSP Times Three Homework page for the HTML 101 lessons
    </BODY>
    </HTML>

  • Next be sure to File/Save.  Your HTML homework document should read like this:


  • Now go to your HTML preview page and click View/Refresh.  Your viewing page should look like this:


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 4 major tags and changing the attributes and values for the background and text colors so you will become familiar with them.  Good luck and if you have any questions just send them on to us!

Next lesson you will learn all about the text - size, bold, italic, and font names.

 

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

Lesson One

Lesson Three

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~