Using Fonts
The problem with choosing fonts for web pages is that the font needs to be installed on the user's computer in order for the web browser to display it properly.
Fonts will always fall into one of two typeface categories either serif or sans-serif. The serif typefaces (the font has curly bits at the top and bottom ends on the letters) are easier to read on paper, and are used in newspapers and books, but the sans-serif (which does not have the curly bits) typefaces are easier to read on a computer screen.
The following are what are considered to be web safe fonts: -
Arial- This text is in 12 pt Arial font.
Times Roman- This text is in 12 pt Times Roman font.
Verdana- This text is in 12 pt
Arial font.Georgia- This text is in 12 pt Arial font.
The majority of web sites including this one use the Verdana sans serif fontIn case the web site user does not have the font installed on their computer you have chosen for a page it is best to specify several fonts all in the same typeface to keep your design as near as possible to the way you designed it.
If your chosen font is not available on the user's computer the web browser will show its default font. This is usually 'Times New Roman' for Windows machines and 'Times' on Macintosh machines.
Use the HTML font tag to specify several font tags with the with the font you want to use first, followed by equivalent fonts on other machines, and in case the user does not have any of these fonts on there system then place a generic typeface last: -
For example the body part of my web pages all start with
and end the body part with the closing font tag
this is illustrated below
< html >
< head >
< title >starting html< /title >
< /head >
< body >
Our text will go here!
< /body >
< /html >
The font tag can have several attributes (these modify the tag in some way ). The ones above are size and style. Notice that in the case of the style attribute it has multiple options which are themselves separated by commas and all enclosed in quotes.
The font tag is usually used for a block of text or the entire page but it can also be used on individual characters.
The HTML for this is shown below:
charac< span font-size:180%;" style="color:#ff0000 style=;">ters.
Notice how I changed the color and size of the t by using the color and size attributes. The HTML is below:
< FONT color=#ff0000 size=5>t< /FONT >
The Size attribute
the size attribute can have a value from 1-7 they equate to a point size from 8 to 36.
Size Point
1 8
2 10
3 12
4 14
5 18
6 24
7 36
The Color Attribute
The color attribute has an is a hexadecimal number representing red, green and blue components preceded with a hash e.g. #rrggbb. Where rr= red component etc.
Here are some of the common colors:
FFFFFF-white
000000-black
FFFF00-yellow
FF0000-red
008000-green
0000FF-blue
Exercise for you to try.
Write the HTML to produce the text below:
Black text verdana 18 point
yellow text Arial 14 point
red text times roman 12 point
green text verdana 14 point
blue text verdana 12 point
Clue black text is default and so you don't need to specify the color.
Bold and Italics and Underlined Text
To emphasis sections of text you can either make the text bold or place in italics, underline or a combination of all three.
the tags used are:
< STRONG >< /STRONG >
< EM >< /EM >
< U >< /U >
Here are some examples of how to use them:
This text is bold- and this is the HTML used:
< STRONG >This text is bold< /STRONG >
This text is in italics-and this is the HTML used
< EM >This text is in italics< /EM >
s text is in underlined and this is the HTML used
< U >This text is in underlined< /U >This text is bold, underlined and in italics nd this is the HTML used
< STRONG >< EM >< U >This text is bold, underlined and in
italics< /U >< /EM >< /STRONG >
Continue to next---->Part4
.
.
No comments:
Post a Comment