Fonts, Text and Color

 

Lesson 2

 

Fonts, Text, and Color

 

In this lesson we will discuss some different ways that we can modify our sample web page.  Go to Notepad, and go to file/open and find the sample.html page that we created in the last lesson.  This is what you should see so far:


<html>

<head>

<title>SAMPLE WEB PAGE</title>

</head>

<body>This is my first web page.</body>

</html>


Now we are going to add a little color.  That white background is pretty boring, right?  How do you add a different colored background?  You put the color attribute in the <body> tag.  You can either use a color name, or use the hex value for the colors.  Every color is assigned a value code, and you really should get used to using these values, because you will be using them all of the time.

There are some colors that most browsers on the internet recognize.  To see a chart of the colors and their values, and to download a handy color picker, you can go to my Colors Page.  Suppose you would like the background of your page to be a light green.

 

#C0FFC0
 

In your sample.html page, insert the hex color code inside the body tag like this:

<body bgcolor=”#C0FFC0″>

Now preview it in your browser by going to “My Documents” and clicking on the file, “sample.html”.  You should see the same web page that you had before, with a light green background color.  Try experimenting with your page, by changing the color value to something else.  Just DO NOT make your background color the same color as the font that you are using for the text message.  Try changing the bgcolor to #000000 and your text will disappear.

Add a Comment

Your email address will not be published. Required fields are marked *