Save a copy Lesson 1 Website building blocks

Save a copy Lesson 1: Website building blocks Year 8 – Developing for the web

Starter activity Think, pair, share The third little pig built a house out of bricks. What would make the walls of his house more interesting to look at? How many bricks do you estimate that he needed? If he wanted to add a stencil motif to each brick, and each one took him 2 minutes to do, how long will it take him?

Objectives Lesson 1: Website building blocks In this lesson, you will: ● Describe what HTML is ● Use HTML to structure static web pages ● Modify HTML tags using inline styling to improve the appearance of web pages 3

Activity 1 HTML Hypertext markup language. The ‘bricks’ of the website that provide the structure to organise the text and images of webpages. Each of these building blocks are identified with pairs of tags; one to mark the start of the block, one to identify the end. On sale 4

Activity 1 HTML examples For example: ● <h 1>The three little pigs</h 1> ● Little pig, let me in. ● The first built his out of straw The three little pigs Little pig, let me in. The first built his out of straw Note: Any text not enclosed by a tag is just presented as plain text. 5

Activity 1 Make a webpage 1. Download and open the file ‘A 1 Resource: Three. Pigs. htm’ in a web browser to see what plain text looks like without HTML tags. 2. Now open the file in a plain text editor. 3. Use the to break up the text into paragraphs to make the story easier to read. 4. Try some of the following tags to improve the appearance of the page: ● ● ● ● <q></q> ● 6

Activity 2 Changing appearances Bricks are nice to look at on their own, but look better painted! webpages are the same. 7

Activity 2 Inline formatting You can make websites look nice directly in the HTML. But you have to do this brick by brick. For example: <h 2 style="color: red; ">Pig one</h 2> The first built his house out of straw. <h 2 style="color: green; ">Pig two</h 2> The second built his house out of sticks. Note how color is spelt. Do you know why? Pig one The first built his house out of straw. Pig two The second built his house out of sticks. 8

Activity 2 Style it up! 1. Open ‘Activity instructions’ 1. Work through the activities on the sheet to practise formatting your web page in different ways 9

Plenary Can you remember? What are the answers to the following questions about content from today’s lesson? 1. What is used to provide structure in a HTML document? 1. What will the following line of HTML display? The house was very big!!! 1. What mistakes are in this line of HTML? <h 1 style="colour: blue; ">Pig one<h 2> 10

Plenary What did you get? 1. What is used to provide structure in a HTML document? Tags 1. What will the following line of HTML display? The house was very big!!! The house was very big!!! 1. What mistakes are in this line of HTML? <h 1 style="colour: blue; ">Pig one<h 2> Different open and close tag, close tag missing / , color spelt as colour 11

Summary Next lesson In this lesson, you. . . Next lesson, you will. . . Explored how to structure web pages with HTML tags, changing their formatting to improve the appearance of on-screen text Develop a web page including images to meet design requirements 12