Colours/Colors and Fonts
HTML Tutorial 3
Aims
To understand how HTML deals with font typefaces
To learn how to understand website colours and what not to do (REMOVE THIS: DO NOT USE WORDS)
To see how to add other simple formatting tags to your text
To learn to be careful on font selection
To change the background colour of your page and its limitations
The Basic Use of Fonts
If you create any document on a computer the text will be written in a font. No, this has nothing to do with baptising babies. Just accept that's the word we're going to use.
You may have heard this referred to as a 'type face'. Or you may be in another group who just work in a word processor and type away merrily in 'Times New Roman' or 'Arial' as standard and never think to change it. Whichever category of understanding you're in, the key word is FONT.
Depending on what the purpose of your page is will depend on your choice of font. This should be a careful choice to as to create the right impression. If you're making a fun page you may choose "Comic Sans MS", a formal page may simply be in "Arial" or "Arial Narrow" and if you want an air of sophistication you may use a more elaborate font.
Have a quick look in a word processor now at the fonts you have installed on your computer. Both OpenOffice and Microsoft Word let you see what the font looks like as you're having a look. Choose a font you like.
Now, open up your HTML document we have been working on. This is the simple way we define a font in HTML.
<font face="Tahoma" size="3" color="red">
This font should be in size 2 Tahoma font and coloured in red.
</font>
This font should be in size 2 Tahoma font and coloured in red
The use of HTML Attributes
These tags introduce you to a new concept - ATTRIBUTES. You will recognise the opening and closing FONT tags as being like the other opening and closing tags we have learned so far. However, inside the opening FONT tag, we now have attributes.
Attributes further define whatever is between the opening and closing tags. So in this case it means this: any text that comes before the closing FONT tag should be in Tahoma font, should be size 3, and should be coloured red. After the closing tag, the text will return to whatever the 'default' font is.
How HTML Understands Font Sizes
You're possibly wondering why the font size is set to "3" if you're used to creating documents with 10pt or 12pt text. And this is because HTML has a different way of measuring text size.
As a rough guage these are the font size equivalents:-
1 = 8pt
2 = 10pt
3 = 12pt
4 = 14pt
5 = 16pt
So don't set your font size to 12 else this will happen:
Nice small text?
How HTML Understands Colour
If you're British or have learned English from a UK source, for HTML you will need to learn to spell "colour" incorrectly! ALL references to colour in HTML, CSS, JavaScript and I would be willing to lay down a fiver that this applies in all programming contexts, you must spell it COLOR. If you don't, it will be ignored.
Secondly, using words to set colour is not ideal and does not really comply with coding standards. So now we introduce HEX CODES to you. This has nothing to do with Harry Potter curses but is short for HEXIDECIMAL.
Web-based colours are defined in terms of how much red, green and blue you want to make up your color. It is stated in terms of "#RRGGBB" - 2 numbers or letters for each of the colour components. You can use numbers 1-9 and letters a-f. If you use numbers nearer to zero then there will be less of that colour, and if you use letters nearer to "f" then there will be more of that colour.
Here are some basic colours for now - but you can play around with them as much as you like to make up the shades you want.
HEX CODE Example
#000000 Black
#ff0000 Red
#00ff00 Green
#0000ff Blue
#00ffff Light Blue
#ff00ff Violet
#ffff00 Yellow
#ffffff White
I'm not going spend hours creating a full charge because a) there are millions and b) other people have done a good job! For a basic set of hex codes head over to Web Monkey.
Applying this to Text
In the example above you saw color="red". All you have to do is replace the word "red" with a hex code. So let's use the hex code that corresponds to red - #ff0000;
<font face="Tahoma" size="3" color="#ff0000">
This font should be in size 2 Tahoma font and coloured in red.
</font>
This font should be in size 2 Tahoma font and coloured in red
So there you go - simple eh? Play around with different fonts, colours and sizes!
Adding Other Simple Formatting Things to Your Text
You might want to make font BOLD or ITALIC or UNDERLINED when writing text and this is really easy in HTML. You need to use opening and closing tags AROUND the text you want to change - here are the tags.
Bold: - <strong>bold text</strong>
Italic: - <em>italic text</em>
Underline: - <u>underlined text</u>
You must be careful when using tags that you enclose things properly. Here's an example of good HTML:
<font face="Verdana" size="3" color="#333399">
This is a good example - normal text then <strong>bold text</strong>
</font>
Notice how everything is between the font tags and the "strong" tags are properly codes. If you put the </font> tag in the wrong place then your text will come out all wrong. Here's a bad example:
<font face="Verdana" size="3" color="#333399">
This is a bad example - normal text </font> then <strong>bold text</strong>
This is bad example - normal text then bold text.
See, the font and colour change back because the closing tag was in the wrong place. So watch your opening and closing tags - if your page does not do what you're expecting, your tags may be wrong.
On this point make sure everything you are trying to display on your page is between the <body></body> tags.
A Warning on Your Font Choice
Adding fonts can be fun - you can download special ones and include them on your page, put it on the Internet and think that everything is fine.
However, just because you have "FancyHandwritingFont" on your computer doesn't mean everyone in the world does - the page will not look as great to everyone else. When you use a font that other people don't have, the page will load instead in the browser's default font - Times Roman, Arial or whatever the computer-owner has set it to.
When making a web page then you have two easy choices:-
Use standard (and potentially boring) fonts.
Use font groups (see below)
Using Font Groups
Don't rule out your favourite font completely! In the face attribute you are allowed to put in a variety of fonts, like this:-
<font face="FancyFont,Verdana,Tahoma,Arial" size="3">Some Text!</font>
When your page is loaded, the browser will look for the fonts from left to right, so put your favourite fonts first in the list and at the end put a standard font you will be happy with the page loading in.
So in this example, if "FancyFont" exists then that's what the page will display in. After that it looks for Verdana then Tahoma and then Arial.
The low-down? Specify multiple fonts to avoid disappointment! And you can always set up a link for people to download your favourite font so that your "best-look" page can be seen. Well, you will be able to once you've read the next tutorial! Just an idea.
Page Background Colour
Not everyone wants to have a boring white background, do they? Well we can easily add a background colour to the page!
This is achieved by putting an attribute in the BODY tag like this:-
<body bgcolor="#ccccff">
Simply put a hex code between the speech marks and away you go!
A few words of advice:-
Choose your colours carefully - garish colours will quickly make your visitors move on - don't give people headaches.
Make sure your font colours and your background colours compliment each other, again go easy on the eyes!
Browsers display colours slightly differently sometimes. This shouldn't be the case, but I have known differences that have made me take a different approach (see later tutorials) - so download a few of the main browsers (see below) and try your page in them to check that your page looks how you want it to.
No comments:
Post a Comment