More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to Making your web page more interesting
Similar to Making your web page more interesting (20)
More from cachs_computing
More from cachs_computing (20)
Recently uploaded
Recently uploaded (20)
Making your web page more interesting
- 1. Making your Web Page more Interesting
- 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. Making your Web Page more Interesting Here it is!
- 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