[This article first appeared on MWEB iTutor]
DIY HTML - Part 3
Page 1, Let there be colours!
By now you may well be sick of staring at your page in black and white. Well get ready for the web in Technicolour. In this tutorial I'll explain how colours work on the web, how you can use them in your own page and even how to spell the word.
If you've read my tutorials up until now you'll already know a bit about colours on the Internet. You'll know that browsers, if lacking information from your HTML, will choose white as your background colour and black as your font colour. In the last tut I showed you how to play with different styles of font, font sizes and font colours.
Here's an experiment that you can follow and perform on your own page. Let's make your page black and your text white. Turn those browser defaults on their head!
You can choose a colour for the entire background of your page by entering a colour attribute into the top <body> tag. In our case we will stick to working with black and white. For your page to be black your body tag will need to look like this:
<body bgcolor="#000000">
"bgcolor" means background colour in HTML. Notice how "colour" in HTML is spelt "color". Goodness knows why...;) but if you spell it "colour" it just won't work. "#000000" means black. The hash sign with numbers following is called a "hexadecimal colour code". #000000 is the hexadecimal code for black. Notice the spacing in the tag, that's important.
Now, to see your font you'll have to make it white. Black on black - no good for legibility. The browser now needs to be told to make your font colour white. We'll make it white, font size "1" and in the Arial font face. Your tag will look like this:
<font face="arial" size="+1" color="#ffffff">
Make sure that all your writing, all the text that you want to see on the web page, is written between that font tag and it's closing twin </font>. The hexadecimal code for white then (you guessed it) is #ffffff.
If you've written your tags correctly, no spelling mistakes, your hexadecimal codes are right and your spacing too, then you should be seeing your text in white on top of your page in black.
|
| 1 | 2 | 3 |
|
|
|