my care2
make a difference

community & fun

groups

get together & make a difference

 
 
 Lesson 2: Adding colors and Fonts December 17, 2004 2:55 PM

Please first go and read these two threads if you have not.
http://www.care2.com/c2c/groups/disc.html?gpp=2424&pst=46562
http://www.care2.com/c2c/groups/disc.html?gpp=2424&pst=46553

Changing Fonts

So far your page looks quite boring huh? lol
It should look like this: http://www.geocities.com/fatesblessing/mywebsite.html
*do not worry about setting up your page online now I just did so I can show you what things look like.

Well the first thing we want to do is spice it up with setting the font. So remember what the first thing we need is...a tag. The tag will tell it what to do.

The tag to change the font is:

<FONT> and </FONT>

There are a few different changes you can make using the <FONT> tag. You can change the font family, the size, and the color.

To change the font family the tag would be:
<FONT FACE="name of font here">

So for my site I will choose Verdana, so I will put:

<FONT FACE="Verdana">

Where do you place the <FONT> and </FONT> tags? Between the <BODY> and </BODY> tags.

To change size the tag would be:

<FONT SIZE="#">

You can use any number between 1 and 7, 7 being the largest.

You do not add seperate font tags for each though. Instead they all will be placed in one tag. For example:

<FONT FACE="Verdana" SIZE="5">

Always remember to close off your tags!! Closing the font tag would be: </FONT>

The important thing to remember is you may want to stick with the common fonts: Arial, Verdana,Times. As not everyone has the same fonts as you do. You can tell it any font you want to, and yes it will show up to you if you have that font on your computer, but for Bob down the road it will show up instead as whatever he has his computer's font set to. So for example:
I have this lovely font called Stonehenge. But it is not that common of a font. I can use that font on my website, which I have actually. But it only will show up as like arial or times or whatnot to those who do not have it.

 [ send green star]
 
Adding Font to your page December 17, 2004 2:56 PM

So open up notepad again, and go to file open and open the page you created before. Remember to go to your folder you created and also change the bottom arrow from text documents to all files, or your html page will not show up to be opened

Once opened It should say:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
Wow look I just created a webpage!!!
</BODY>
</HTML>

So now we will add our fonts!

It will look like this:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana" SIZE="5">
Wow look I just created a webpage!!!
</FONT>
</BODY>
</HTML>

Lets say you wanted to add different fonts or sizes? Easy!

You would just close off each tag and create a new one for the new font or size you want so...


<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana" SIZE="5">
Wow look I just created a webpage!!!
</FONT>
<FONT FACE="Arial" SIZE="2">
Look I know how to change Fonts!!
</FONT>
</BODY>
</HTML>

Remember to save it!!! and then open up your folder on your desktop and double click the icon with the name of your site to open it!!

You can see mine here:
Example one:
http://www.geocities.com/fatesblessing/mywebsite2.html

Example two:
http://www.geocities.com/fatesblessing/mywebsite3.html

 [ send green star]
 
More on text December 17, 2004 3:07 PM

More on text:

<b> & </b> are the tags to make text Bold.
<i> & </i> are the tags to make text italic.
<u> & </u> are the tags to make text underlined.

If you have never noticed you can not hit the "enter" key to skip spaces in html lol
So to skip spaces you must type this: <BR> each one is one line.

So you would type:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<b>this is bold text</b>
<i>this is italic text</i>
<u>this text is underlined</u><br>
Now with skipping spaces: <br>
<b>this is bold text</b><br>
<i>this is italic text</i><br>
<u>this text is underlined</u><br>
</BODY>
</HTML>

For examples of these go here:
http://www.geocities.com/fatesblessing/text.html

Do not save the above over the page you created lol!

 [ send green star]
 
Colors!!! December 17, 2004 3:38 PM

Adding Colors

So far your page still looks alittle boring huh? lol
It should look like this: http://www.geocities.com/fatesblessing/mywebsite3.html
*do not worry about setting up your page online now I just did so I can show you what things look like.

Well so the first thing we may want to do is add some color. So again the first thing we need is...a tag. The tag will tell it what to do.

To change the fonts color the fonts color you need this tag:

<FONT COLOR="color">

Now yes you can go blue, black, red, green or yellow. But using Hexadecimal Color Codes will give you so many more choices!! You can use 16 color names compared to the 14 million possible colors, shades, hues and tints that you can use with the Hexadecimal Color Codes!!

What are Hexadecimal Color Codes?

Hexadecimal Color Code is a 6 digit code containing numbers and/or letters. The 6-number-and/or-letter combinations are actually 3 pairs of values where RR, GG, BB are the hexadecimal digits specifying the Red, Green, and Blue values of the color. This value is written as #RRGGBB. The number values range from 0 - 9; letter values range from A to F. *This description is really good and I got it from a website lol I'll find the link.

My very favorite site to use to find colors (I could in no way remember all of them by number lol) is here:
http://www.dave-stephens.com/computers/colors.htm

So lets say I wanted to make the font blue. I could type:

<FONT COLOR="Blue"> or <FONT COLOR="#0000FF">

Now to really spice it up lets add background color!!!

The tag to add background color is:

BGCOLOR="color"

You will add this not in the font tag as you are not changing the fonts color, but the pages color. Instead you add it to the <BODY> tag like this:

<BODY BGCOLOR="#000000">

 [ send green star]

 
Adding color to your page December 17, 2004 3:39 PM

So open up notepad again, and go to file open and open the page you created before. Remember to go to your folder you created and also change the bottom arrow from text documents to all files, or your html page will not show up to be opened

Once opened It should say:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana" SIZE="5">
Wow look I just created a webpage!!!
</FONT>
<FONT FACE="Arial" SIZE="2">
Look I know how to change Fonts!!
</FONT>
</BODY>
</HTML>

Now we will add color, line breaks and add bold, italic and udnerlined text!

You still add the color to the font tag!!

So it should now say:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<FONT FACE="Verdana" SIZE="5" COLOR="#551A8B">
Wow look I just created a webpage!!!<br><br>
</FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#3A5FCD">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or Italic</i>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</FONT>
</BODY>
</HTML>

I put the new stuff in purple!

Remember to save it!!! and then open up your folder on your desktop and double click the icon with the name of your site to open it!!

see my example here:
http://www.geocities.com/fatesblessing/mywebsite4.html

 [ send green star]

 
It's supposed to be August 02, 2005 12:09 AM

purple? My background was black, the font was green, and my title was gone!!!! Help!! What did I do??? I am definitely feeling non-tech savvy right now. . .  [ send green star]  [ accepted]
 
 August 02, 2005 7:03 PM

You would have to show me the page or the code you used

lol

Did you use the #'s for the colors? Here is a good site to find colors to use: http://www.december.com/html/spec/color.html

 [ send green star]

 
Are the color codes August 03, 2005 6:29 AM

case sensitive.  This is what I used:

<HTML>
<HEAD>
<TITLE>Larisa_Sunflower</TITLE>
</HEAD>
<BODY bgcolor=#000000">
<font face="Verdana" size="5" color="#551a8b>
Wow look I just created a webpage!!!<br><br>
</font>
<font face="Arial" size="2" color="#3a5fcd">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or italic<i/>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</font>
</BODY>
</HTML>

Maybe I copied something wrong...
 [ send green star]  [ accepted]
 
Fixed August 03, 2005 6:44 AM

part of it.  Realized I had the code entered wrong in a couple of places.  Still black background (is it supposed to be?), and writing is purple, and a dark blue.  But my title is still nowhere to be found!  Even when I went to that website, and changed the colors, the title was MIA.  [ send green star]  [ accepted]
 
Looked at your example August 03, 2005 7:14 AM

and there is no on that page either, so I guess I am OK.  Moved on to next pages and had trouble with designing my own.  I will post that message there.  Just wanted to let you know I fixed this one myself.  Thanks!  [ send green star]  [ accepted]
 
 August 05, 2005 7:36 PM

no the color codes are not case sensitive. I do everything lower case and it always works

It is better to use lower case for code. I know I didn't above.

You were also missing some " which you need to have. I added them in red.

<html>
<head>
<title>Larisa_Sunflower</title>
</head>
<body bgcolor="#000000">
<font face="Verdana" size="5" color="#551a8b">
Wow look I just created a webpage!!!<br><br>
</font>
<font face="Arial" size="2" color="#3a5fcd">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or italic<i/>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</font>
</body>
</html>

The title is at the very top of the page above the back and forward buttons and above file, edit, view, etc... like on this page the title says Care2connect.com -groups - discussion etc....

The title also shows up in the bar at the bottom of your screen.

It takes practice but you will get the hang of it

 [ send green star]

 
  New Topic              Back To Topics Read Code of Conduct

 

This group:
Website Design Help
208 Members

View All Topics
New Topic

Track Topic
Mail Preferences


Copyright © 2009 Care2.com, inc. and its licensors. All rights reserved