Making your Web Page more Interesting
Starter Activity: What would this web page look
like?
<html>
<head>
<title>Cardinal Allen Catholic High School</title>
</h...
Making your Web Page more Interesting
Here it is!
In this lesson you will learn how to align web page
objects and add colour using html. You will align a
range of objects a...
Attributes
Attributes are special codes placed within the HTML tags that
describe how the tags will look.
Color Attribute
...
Align Attribute
The align attribute can be used to place text or pictures to the left,
center or right side of the margin....
Task 8: Aligning Paragraphs and Bold
Load the text editor and open your HTML document: firstpage.html
At the relevant poin...
Your web page should look like this in your
browser.
Making your Web Page more Interesting
Task 9: Zoo Homepage
1.Load the text editor and open your HTML document:
zoohomepage.html
2.Add a background colour (see b...
Plenary: Coding Errors
1.Load the text editor and open your HTML
document: zoohomepage.html
2.Make 4 errors in your code (...
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 col...
Upcoming SlideShare
Loading in...5
×

Making your web page more interesting

1,772

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,772
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Making your web page more interesting"

  1. 1. Making your Web Page more Interesting
  2. 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
  3. 3. Making your Web Page more Interesting Here it is!
  4. 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. 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. 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. 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. 8. Your web page should look like this in your browser. Making your Web Page more Interesting
  9. 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. 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. 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

×