Lesson 2
- Click ‘File’ and then ‘Open’, choose the file that you created in Lesson 1.
- You should now see the following HTML
- Change your HTML, so it looks like this (highlighted in Red):
<html>
<head>
<title>My Name is...</title>
</head>
<body>
<p style="color:blue;">Hello World</p>
</body>
</html>
Notice how we now use the ‘<p>’ tag – this is known as the ‘Paragraph’ tag and is used to display blocks of text.
Can you spot the spelling mistake in the line we changed? It’s the word ‘Color’ – because this is the American spelling.
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. What happens?
Repeat the exercise using:
- Red
- Salmon
- Lime
Background Colours
You can also apply colours to the background of your page and the <p> tag you have created, to do this:
- Change your HTML as follows:
<html>
<head>
<title>My Name is...</title>
</head>
<body style="background-color:green">
<p style="color:blue;">Hello World</p>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. What happens? That’s right, the background colour changes to ‘Green’ and your text is still blue.
- Try this exercise again using some of the colours on the next page, which colour combinations are your favourite?
To the right is a table with a selection of colours that can be used in HTML. There are three different ways to display colours in HTML, all three examples below have the same colour just in different ways.
- The HTML name.
<p style=”color:IndianRed;”>Hello World</p> - The ‘HEX’ code – Hex stands for Hexidecimal
<p style=”color:#CD5C5C;”>Hello World</p> - The RGB code – RGB means Red, Green & Blue
<p style=”color:rgb(205,92,92)”>Hello World</p>
Take me to lesson 3 'Using Hyperlinks'