HTML Lesson 3

Boole 2014

Lesson 3: Add some color and formatting

Your previous pages are alright but now we are going to show you how to add some color and formatting. Keep in mind too many colors can make your page look...clownish.

Colours are added in HTML by a 6 digit "Hexadecimal" colour code (hex meaning 6 - as in hexagon).

FF0000 means Red

00FF00 means Green

0000FF means Blue

000000 means Black

FFFF00 means Yellow

FFA500 means Orange

Those are just a few examples there are many many more.

Cracking the Hex Code

Can you see a pattern emerging in the hex codes?
To make sense of those hex codes rather than memorize them, I imagine each one of those 6 spots in the hex code is like a dial or a volume knob on a stereo.
I imagine that an "F" means that a knob is turned up to full blast and where a 0 represents that particular dial is turned all the way down or off.
Also it is good to note that computers organize colours as different ratios of "RGB" (Red,Green,and Blue).
What if the first 2 spots of the 6 (hex) spots have to do with Red, the middle two have to do with Green, and the last two have to do with Blue?
When all the dials are off except the first two dials we get Red. If everything is low except the last two we get Blue...Ok this fits. When we crank Red and Green full blast we get Yellow. This idea checks out so far.
When all the "dials" are off we get Black. That makes sense too.
Now that I think we have this hex code cracked, try the next two questions in your head before looking up the answer.
Question 1. Do you have a guess as to what the hex code for white would be?
Question 2. What colour do you think FF00FF would make?

To look up the hexadecimal colour codes (short form is Hex codes) you can visit HTML-color-codes.com

HTML Page for Lesson 3: Colours

Step 0. Note that this time instead of building a new page from scratch, we will be building off of your html page from Lesson 2

Step 1. Find your previous html page (it should have been saved on your desktop or in whatever folder you saved it to).

Step 2. Right-click on that file and select "Open With..." then select Notepad from the list of program options. (If Notepad isn't listed as an option you might have to browse to find Notepad youself in Windows/System32/Notepad.exe

The code for this lesson

<html>
<head>
<title>This is the title at the top</title>
</head>
<body>
<h1>This is still a heading. </h1>

This paragraph starts by following the standard formatting defaults we have seen before. But, when you see the "span" tags in the code, these will allow you to change the font within that "span". You can change the
colors and font style of that text.
Again keep in mind too many colors can make your page look...clownish.

</body>
</html>

Step 6. Same as before, go to the File Menu and select "Save As..."
Step 7. Save the file as an html file. For example you could call it "yourname_html_lesson3.html"
Step 8. Double click on your new .html file and your website should open in the default browser window!

Review of the take home messages