#000011 | #000033 | #000055 | #000077 | #000099 | #0000bb | #0000dd | #0000ff |
#001100 | #003300 | #005500 | #007700 | #009900 | #00bb00 | #00dd00 | #00ff00 |
#110000 | #330000 | #550000 | #770000 | #990000 | #bb0000 | #dd0000 | #ff0000 |
#555555 | #48ab83 | #895347 | #b8d9e3 | #3a9d4f |
So how does this work?
Look at the colour names I have used: #94f3a1
This is a special way to desribe colours. We call it the RGB system. RGB stands for Red-Green-Blue.
So let's have a look at the colour name. The # has many names.
It can be called the hash or octothorpe or sometimes also pound or mesh. Now, we will call it hash.
The hash tells the HTML document that you are using a colour name. It is like the start of every colour name.
Then after the hash we see six different letters. These six letters define the colour.
#94f3a1
The first and second letters are for the red colour. The third and fourth letters are for the green colour and the fifth and the sixth letter are for the blue colour.
So every colour has two letters to define the colour. These two letters can be any number or the letters a, b, c, d, e, f.
You can think of a=10, b=11, c=12, d=13, e=14, f=15.
The value 00 is the smallest, the value ff is the highest. This gives the possibility to choose from 16*16=256 different shades for every colour.
Here is a list of the numbers startign from the lowest up to the highest:
00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 0a | 0b | 0c | 0d | 0e | 0f |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1a | 1b | 1c | 1d | 1e | 1f |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 2a | 2b | 2c | 2d | 2e | 2f |
... | |||||||||||||||
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 9a | 9b | 9c | 9d | 9e | 9f |
a0 | a1 | a2 | a3 | a4 | a5 | a6 | a7 | a8 | a9 | aa | ab | ac | ad | ae | af |
b0 | b1 | b2 | b3 | b4 | b5 | b6 | b7 | b8 | b9 | ba | bb | bc | bd | be | bf |
... | |||||||||||||||
f0 | f1 | f2 | f3 | f4 | f5 | f6 | f7 | f8 | f9 | fa | fb | fc | fd | fe | ff |
Here I will show you the effect of these numbers. The blue and green colour are now fixed to a constant value, only the red colour changes. The numbers you see are the values I use for the two letters of the colour red. The letters for the colours green and blue are both set to 00:
00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 0a | 0b | 0c | 0d | 0e | 0f |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1a | 1b | 1c | 1d | 1e | 1f |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 2a | 2b | 2c | 2d | 2e | 2f |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 3a | 3b | 3c | 3d | 3e | 3f |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 4a | 4b | 4c | 4d | 4e | 4f |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 5a | 5b | 5c | 5d | 5e | 5f |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 6a | 6b | 6c | 6d | 6e | 6f |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 7a | 7b | 7c | 7d | 7e | 7f |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 8a | 8b | 8c | 8d | 8e | 8f |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 9a | 9b | 9c | 9d | 9e | 9f |
a0 | a1 | a2 | a3 | a4 | a5 | a6 | a7 | a8 | a9 | aa | ab | ac | ad | ae | af |
b0 | b1 | b2 | b3 | b4 | b5 | b6 | b7 | b8 | b9 | ba | bb | bc | bd | be | bf |
c0 | c1 | c2 | c3 | c4 | c5 | c6 | c7 | c8 | c9 | ca | cb | cc | cd | ce | cf |
d0 | d1 | d2 | d3 | d4 | d5 | d6 | d7 | d8 | d9 | da | db | dc | dd | de | df |
e0 | e1 | e2 | e3 | e4 | e5 | e6 | e7 | e8 | e9 | ea | eb | ec | ed | ee | ef |
f0 | f1 | f2 | f3 | f4 | f5 | f6 | f7 | f8 | f9 | fa | fb | fc | fd | fe | ff |
You have now learned how to use the RGB colour scheme. This is widely used in webprogramming.
The RGB colours give you more colours to choose from. To be precise, it gives you 256*256*256 = 16`777`216 different colours to work with.
So this should be enough to choose from, right?
If you look at modern webpages, they choose the colours carefully. If you have internet, have a look at this webpage and this webpage.
On these two webpages, you can find colour schemes that other webprogrammers have used.
If we don't have internet, have a look here.
They only use few colours, but try to use them as good as possible. It is the job of a graphic designer to choose good colour schemes which the visitors to webpages will like. But it will be your job, to use these colour schemes.
If you do a large webproject, you will do more than just one page. And you will need to link all pages together. For example you want to have a page where you present your own CV and another page where you present the CV of your friend. And then you want to have a startpage, where you can choose whose CV you want to see. So these are already three different pages, all linked together. So it is extremely important to know how to link pages.
The tag to make link is symply <a>link</a>. The a stands for anchor. It is like and anchor to another page. The text between the opening and closing tag will be the link that the users can click. You have to tell the HTML document where this link will lead you. For this you use the keyword href. You can also tell the link if the new page should be opened in the same window or if you want to open a new empty window.
1 2 |
<a href="other_homepage_name.html" target="_blank">link</a> <a href="http://google.com" target="_blank">link</a> |
In this table you can see two ways to link another page. In line 1, another HTML page is linked.
This means you can link any other page you have created and is in the same folder as this HTML document.
In line 2 an external page in the internet is linked. You can link to any other page in the internet if you know the address.
The second keyword that you can see is target. The target specifies how the page is opened.
If you don't use this keyword, then the new page will be opened in the same window. This means you will be guided to a new page.
Try this link here and see it for youself. If you click on this link, your page changes to the new page.
To go back to this page you had to use the back button of your browser.
Now if you use the keyword target and give it the value "_blank" then the new page will be opened in a new window.
Try and click on this link. You see that a new page has opened. You can now look at both pages if you switch between the windows. You don't have to click on the link again.
So now you know how to link many pages toghether.
Imagin you have to make a webpage for a customer. The customer owns a construction company and needs a homepage to present himself to customers.
The homepage should consist of three different pages which are all linked together.
Now this is not easy and you have to read this very carefully and do exactly as is described here!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
EM { color: blue; font-weight: bold; font-style: normal; } .new { color: green; } .summary { font-size: larger; border: solid 2px; background-color: #efefef; } .property { text-align: right; font-weight: bolder; } |
1 2 3 |
<head> <link rel="stylesheet" type="text/css" href="<your name>.css" /> </head> |