|
| Web Freebies |
|---|
| Internet |
| Articles |
| Feedback |
| Humour |
| Linkage |
| MISC. |
Fonts
Both fonts and colour are controlled by using the <font> tag in HTML. But before we go any further, a quick word about the way fonts are used. When the HTML for a website specifies a font eg Verdana, the browser will look in the FONTS directory within the WINDOWS directory on your hard drive. (normally C:\ ; click here to look at the fonts!) However, if it cant find the font, (normally due to it being an obscure non standard font that has been downloaded from the web), it will revert to what ever the default font is and thus your webpage may not look as good on computers that dont have that font. BUT, seeing as we are not designing for the web just yet, we will not be worrying about this at the moment! 
The Font Tag Attributes
The <font> tag syntax is as follows <font face="verdana" size="7" color="red">. You do not have to have all three attributes; indeed you could just have one or two depending on what you wanted to change. If you wanted to change just the colour and size you would just have the color and size attributes. One thing to be remembered: the COLOR attribute is spelled the American way without the 'u' lol.
Face
The face attribute is the name of the font you wish to use; as we saw earlier, the fonts are normally stored in C:\WINDOWS\FONTS. Here is the link again to bring the window up. Have a look at the various fonts in there and double click on some to see what they look like.
Size
The size attribute is a whole number between 1 and 7; 1 being the smallest, 7 being the largest.
Color
The color attribute can be a word like 'red' or 'blue' or a 6 digit hexadecimal number preceeded by a '#' eg #ffffff. The six digits can be split up into three pairs and each pair is a percentage of red, green & blue respectively. Hence #ff0000 would be 100% red and 0% green and 0% blue so it would produce a bright red colour, #00ff00 would produce green and #0000ff would produce blue. Hexadecimal operates on a base of 16 and goes from 0-9 then a-f, f being 15 in the same way that our base 10 (decimal) operates on 0-9 and base 2 (binary) operates on 0-1. So ff is the maximum amount for any colour and 00 is the minimum (i.e. none) amount. To work out these amounts is not easy and generally most graphics packages will allow you to work out the hexadecimal figure for any colour. Alternatively, you can experiment with different percentages of red, green and blue by working out what basic colour you want e.g., we know that yellow is made up of blue and green and purple is made up of red and blue. The most basic of colours, are black #000000 and white #ffffff and are the easiest two to remember 
. A good starting point is with something called the 'Web Safe Pallette' which was a way of using colours wisely in the old days when computers didnt have so many colours. I'm not here to discuss this, but several sites produce lists of such colours and I find that they are a good way of picking hex values for colours for your web pages. Here is one such page from http://www.lynda.com/. Click here for her colour page, and have a play with the font tag in your HTML document!
Background Colours
So now you can produce nicely coloured text, but what about the background? Still looks pretty boring doesnt it? Well we will change this right now. Do you remember the <body> tag we discussed in the first tutorial? Well this, like the <font> tag can have attributes within it. The one that controls the background colour is bgcolor and this works in exactly the same way as the color attribute in the <font> tag. So now change the <body> tag to <body bgcolor="blue"> or use another colour or hexadecimal value.
Conclusion
There has been a lot of information in this tutorial, but the bst way to get the hang of it is to play around with different fonts, colours and sizes until you get the hang of it. Its not that difficult really; the most complex bit being the hexadecimal values. I still have to refer to the colour chart to pick my colours lol
| Blogalicious! |
|---|
|
July 01 (pt1) July 01 (pt2) August 01 September 01 October 01 November 01 December 01 1st Quarter 02 May 02 Jun 02 July 02 Aug 02 Oct 03 May 04 June 04 Aug 04 |
If you would like to reproduce any text I have written here, please feel free as long as you credit it to BlackCoffee and include a link to this site. Thats all I ask
. Have fun!!Email the webmaster: webmaster@blackcoffee.org.uk
All HTML/Javascript/CSS written in Windows Notepad. All graphics created with Adobe Photoshop Elements/Windows paint and optimised for web use with XAT Image Optimiser Pro.