2. Starter Activity: What would this web page look
like?
<html>
<head>
<title>Cardinal Allen Catholic High School</title>
</head>
<body>
<h1>IT and Computing</h1>
<h2>Science</h2>
<p> The School is in Fleetwood </p>
<p> Which is in Lancashire </p>
<br> Which is in England
</body>
</html>
Making your Web Page more Interesting
4. In this lesson you will learn how to align web page
objects and add colour using html. You will align a
range of objects and change the colour of text and
the background of your zoo homepage.
Lesson
Objectives
Be able to align objects on a web page
Be able to change the colour of a web page
Be able to change the colour of text
Understand what attributes are
Making your Web Page more Interesting
5. Attributes
Attributes are special codes placed within the HTML tags that
describe how the tags will look.
Color Attribute
To apply a green background on your Web page with red text. You
would use this code:
<html>
<head>
<title>Color Page</title>
</head>
<body bgcolor="green" text="red">
Hello. I am a page that can be used for Christmas.
</body>
</html>
Making your Web Page more Interesting
6. Align Attribute
The align attribute can be used to place text or pictures to the left,
center or right side of the margin. Here’s a simple example for the
align attribute:
<html>
<head>
<title>My Spring Vacation</title>
</head>
<body bgcolor="#green" text="#red">
<h4 align="center">My Spring Vacation<br>
by Russ Peabody</h4>
</body>
</html>
You can use the align attribute with all sorts of tags like: headlines,
paragraphs and graphics.
Making your Web Page more Interesting
7. Task 8: Aligning Paragraphs and Bold
Load the text editor and open your HTML document: firstpage.html
At the relevant points add the tags and text that appear in red.
</head>
<body bgcolor="yellow" text="black">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more to come.</b>
<p>
I am learning how to use the headline, paragraph and line break tags. Writing
HTML isn't as hard as it appears.
</p>
Save the document and then preview your work.
Making your Web Page more Interesting
8. Your web page should look like this in your
browser.
Making your Web Page more Interesting
9. Task 9: Zoo Homepage
1.Load the text editor and open your HTML document:
zoohomepage.html
2.Add a background colour (see below)
3.Centre the main heading
4.Change the colour of the text (see below)
5.Align one paragraph to the right and the other to the left
6.For more colours replace the name of the colour with a
hex code. The hexadecimal code for black is #000000. For
hex codes visit: http://www.colorpicker.com/
7.Save the document and then preview your work
Making your Web Page more Interesting
10. Plenary: Coding Errors
1.Load the text editor and open your HTML
document: zoohomepage.html
2.Make 4 errors in your code (DO NOT SAVE)
3.Swap seats with your elbow partner
4.Identify the errors your partner has made
5.DO NOT SAVE THE DOCUMENT!
Making your Web Page more Interesting
11. Keywords
Be able to align objects on a web page
Be able to change the colour of a web page
Be able to change the colour of text
Understand how to use hexadecimal codes
Objectives
Attributes
Bgcolor
Align
Hexadecimal
Making your Web Page more Interesting
