0% found this document useful (0 votes)
102 views12 pages

L1 Slides - Developing For The Web - Y8

This document provides an introduction to HTML and building basic web pages. The lesson objectives are to describe HTML, use HTML tags to structure static web pages, and modify tags with inline styling. Examples are given of common HTML tags and how to embed formatting like bold, italics, and lists. The activities guide adding tags and inline styles to text to change appearances.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
102 views12 pages

L1 Slides - Developing For The Web - Y8

This document provides an introduction to HTML and building basic web pages. The lesson objectives are to describe HTML, use HTML tags to structure static web pages, and modify tags with inline styling. Examples are given of common HTML tags and how to embed formatting like bold, italics, and lists. The activities guide adding tags and inline styles to text to change appearances.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Lesson 1: Website

building blocks
Year 8 – Developing for the web
Starter activity

Think, pair, share

What would make the walls of his house more


interesting to look at?

How many bricks do you estimate would be needed


to build a whole house?

If you wanted to add a stencil motif to each brick, and


each one took 2 minutes to do, how long would it
take?
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 <p>


structure to organise the text and images of
web pages. <b> On sale </b>
Each of these building blocks are identified </p>
with pairs of tags; one to mark the start of
the block, one to identify the end.

4
Activity 1

HTML examples

For example:
● <h1>Developing for the Web</h1> Developing for the Web
● <em>Using HTML and CSS</em> Using HTML and CSS
● Building <b>web pages</b> Building web pages

Note: Any text not enclosed by a tag is just presented as plain text.

5
Activity 1

Make a web page


1. Download and open the file ‘A1 Home.html’ 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 <p></p> to break up the text into paragraphs to make it easier to read.
4. Try some of the following tags to improve the appearance of the page:
● <b></b>
● <em></em>
● <q></q>
● <center></center>
● <ul><li></li><li></li></ul> - bulleted list with each item enclosed in <li></li>
tags.

6
Activity 2

Changing appearances
Formatted text is all well and good, but wouldn’t it look better in colour?

Here, the web page looks no different to a page in a book.

7
Activity 2

Inline formatting
You can make websites look nice directly in the HTML.

But you have to do this for each individual piece of text you want to change the look of.

For example:

<h2 style="color:red;">Title</h2>
Some arbitrary text. Title
<h2 style="color:green;">Another title</h2> Some arbitrary text.
Some more arbitrary text. Another title
Note how color is spelt. Do you know why? Some more arbitrary text.

8
Activity 2

Style it up!
1. Open ‘Activity
instructions’

2. 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 this lesson?

1. What is used to provide structure in a HTML document?

2. What will the following line of HTML display?


Using <em><b>HTML</b></em> to format web pages

3. What mistakes are in this line of HTML?


<h1 style="colour:blue;">Search engines<h2>

10
Plenary

How did you do?

1. What is used to provide structure in a HTML document?


Tags

2. What will the following line of HTML display?


Using <em><b>HTML</b></em> to format web pages
Using HTML to format web pages

3. What mistakes are in this line of HTML?


<h1 style="colour:blue;">Search engines<h2>
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 Develop a web page including images to
HTML tags, changing their formatting to meet design requirements
improve the appearance of on-screen text

12

You might also like