HTML Class.html
[ Homepage ][ Class Index ][ Introduction ][ Lesson 1 ][ Lesson 3 ][ Lesson 4 ][ Lesson 5 ][ Lesson 6 ]

HTML & Web Page Class

Lesson 4

Color, Fonts and visual Presentation

Tutorial - How to install fonts
HTML assignment
What we have learned
Discussion
Special Notice
We are at the half way mark in this class. I want to thank all that have sent in the lessons. I hope everyone is enjoying the class. If anyone is behind do not worry about it just catch up. But now let's have some fun with our website. I really think you will enjoy this class. 

  HTML Asignment Week 4
 Assignment
  Create a set of HTML files that: 
Contains all the items in discussed in out lesson. It is your decision 
what graphics you would like to use as each of us have our own likes
and dislikes.        





(Return to top of Page]






 Lesson    Week 2

In this week's lesson,  
      




(Return to top of Page]

















 Lesson 4




We have our webpages up and running, know how to move from page to page, so now we need
to learn how to format the information on the pages using color, fonts and visual presentation. 
First we will take up tags that will let us do that. [Remember our first lesson. Redo that 
lesson and save it as SHELL. It is a template to save you work. To make a new page, just 
load in SHELL and SAVE it with the name you want for the new page. Then add any information 
between the body tags.]

Some useful tags for writing information

<STRONG> - </STRONG> makes your writing darker. <BIG> - </BIG> makes the letters bigger. <CENTER> - </CENTER> makes a title center on the page. <H1> - </H1> - these tags are for headers [titles] try them. <H2> - </H2> <H3> - </H3> <H4> - </H4> TIP - If you would like to see how other pages are written, try this. Place cursor anywhere on the screen and right click. Select view source and the HTML of the page will come up. To save the page...press ctrl/C. that will copy it. Now go to start/programs/ accessories/notepad. When notepad comes up...go to edit/paste.

Color, Fonts and Presentation

We could take a lesson on each of these but because of time we will discuss them together. Here is where a lot of restraint is needed. Not all of us can have state of the art equipment. A great number of blind, color blind and deaf are on special computers. There are many older platform computers being used and if we are not mindful of this, these people will not be able to see our webpage or the pages will be altered.

But for now, let's see what color, fonts and presentation really does. I would like you to go to my family webpage that I am working on. The first page is the items that I wanted as an index. Pretty bleak, isn't it! Scroll to the bottom of the page and click on next page. WOW! What a difference color, fonts, and presentation make! It is the same index. Use the back button to get back to the lesson. This set of graphics were downloaded from Wendy's Page. Wendy gave me permission to let the students download from her sets. All she asks is a link back to her page.
Now to my family page. Click here: Harrison Family

Another example of using graphics, go back to my webpage and click on Memorial to my son. This page is by courtsey of FoJo Media. The graphics that are offered on the web are not to be altered or used other than a personal website. Kym offered her site for the class to use her graphics. She even sent a graphic that you can download and put on your site use to go to her graphics. Now go to the my page and then to Kym's garden and see the set, Iris. Harrison Family

fojolink TO DOWNLOAD - click with right mouse button...select save as...a window will come up asking where you want to put it...put it in the same folder as your program. Then use this code in your program. <A HREF="http://www.angelfire.com/biz3/makinwaves/garden.html"> <img src="fojolink.gif" width="131" height="76" border="0" alt="fojolink"></a>

Here is another site I found last night but did not contact the lady. She has some very nice work that is free and can be used. Stormi

HOW TO USE COLOR IN HTML



Java Color Picker




The color of your background is set in the Body tag line.
<BODY BGCOLOR="#faebde" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
BGCOLOR="#faebde denotes the background color.
To add a background from a graphic set put BACKGROUND="IRIS.GIF" instead of BGCOLOR="#faebde". BGCOLOR="#faebde" can be used inside of table tags such as <TD> and <TH>

A NOTE ON FONTS



Now on the subject of fonts - be careful of using fancy fonts! It may look good on your page but other people may not have that font. The fancy font I used for Harrison Family under the picture is a graphic therefore it will come on any computer that uses graphics. But graphics would have to be learned in another class. It is best to use fonts that came on your computer to do your writing as that is a common font everyone will have. This will give you basic knowledge to get you started. 



(Return to top of Page]













Discussion



























(Return to top of Page]






Tutorial - How to install fonts. 



On a PC, you will need Winzip to decompress the PC winzip files.

Begin by downloading the zipped font. Left-click on the font of your 
choice and a "save file" screen will pop up. Select the folder into which you
want to save the zipped file.

With Winzip, unzip the font. You will need to remember into which folder the 
unzipped font goes. This is necessary for step 11 below **.

            1.Go to the Windows 95/98 Desktop
            2.Double-click the "My Computer"
            3.The "My Computer" window will open.
            4.Double-click the "Control Panel"
            5.The "Control Panel" window will open.
            6.Double-click the "Fonts"
            7.The "Fonts" window will open showing you the installed fonts.
            8.Click on "File" (or press   at the same time) and when 
			  the pop-down window appears select "Install New Fonts".
            9.The "Add Fonts" window will appear.
            10.There will be a white text box labeled "Folders".
            11.** Navigate inside the Folders List box (by double-clicking on 
			   the c:\) until you find the folder into which you unzipped the 
			   font(s). After the fonts are loaded, they will be shown in the 
			   white text box labeled "List of Fonts".You can scroll through 
			   the "List of Fonts" list box and select the font you want to 
			   install.You can click on one font, or select more then one by 
			   holding down the control key as you are clicking on each font,
			   or by clicking on the first font, holding down the shift key and
               clicking on the last font you want installed. You can also click
			   on the "Select All" button.

  NOTE:    If you try to install fonts which are already installed, you will be
           presented with a warning window telling you that you cannot install
		   the font unless you first un-install it. This is a harmless warning
		   which allows you to continue with the other fonts by simply pressing 
		   the  button.
           After the font is selected (it will be highlighted), press the OK
		   button. The font(s) will then be installed.
		   When you are done, press the close  button on the top right corner
		   of the window. You will be returned to the Fonts window, and the font
		   you've just installed will be included there.
           You can now close the Fonts window, close the Control Panel, and 
		   close the "My Computer" window.

Sites where you can get fonts.		   
            http://www.freefever.com/graphics/
            http://www.all-4-free.com/fonts.html                                 
                                      
            

[ Homepage ][ Class Index ][ Introduction ][ Lesson 2 ][ Lesson 3 ][ Lesson 4 ][ Lesson 5 ][ Lesson 6 ]




All rights on this site belong to Dorris Harrison - copyright � February 1, 2000