8.4.3 - Taking shortcuts - 8CS5

1 / 22

Slide 1: Slide

ComputingLower Secondary (Key Stage 3)

This lesson contains 22 slides, with interactive quizzes and text slides.

Lesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

This item has no instructions

8.4.3 - Taking shortcuts

Year 8 – Developing for the Web

In this lesson, you will:

Describe what Cascading Style Sheets (CSS) is
Use CSS to style static web pages
Assess the benefits of using CSS to style pages instead of in-line formatting

Slide 2 - Slide

This item has no instructions

Mr Hughes' expectations

It’s ok to be wrong.

Cold calling, everybody needs an answer.

Listen when others are speaking.

Work on teams. Today’s lesson on the slides.

No shouting out – hands up for any questions.

Don't wait for me to tell you what to do with the tasks.

Slide 3 - Slide

This item has no instructions

Image tags look like?

Slide 4 - Quiz

This item has no instructions

What's gone wrong?

<h1>Astro Pi - Mission Zero<h1>

Young people write a simple program to take a humidity reading onboard the International Space Station and communicate it to the astronauts with a personalised message, which will be displayed for 30 seconds!</p>

Carefully look at this HTML document. Can you spot three reasons why it won’t work in the way the designer expected?

Slide 5 - Slide

make sure to highlight

/ by the h1>

<p>

= after src

Think, pair, share

We know we can modify how parts of our web pages look by using tags.

If we had 1000 lines of code and we needed to make changes to 60% of them, and each change took 50 seconds, how long would we need to spend making changes?

What happens if we need to make further additional changes in the future?

Slide 6 - Slide

600x50 = 30,000 / 60 / 60 = Over 8 hours!

Inline formatting - Drag & Drop

Remember that you have formatted HTML directly.

But you have to do this line by line.

Recall:

<h2 style="color:red;">Title</h2>

Some arbitrary text

<h2 style="color:green;">Another title</h2>

Some more arbitrary text

Slide 7 - Drag question

This item has no instructions

CSS

Cascading style sheets.

Formatting each web page element individually can take a long time within the HTML file.

Alternatively, you can use a separate CSS file to format different parts of web page structures all at once and in one place only.

Slide 8 - Slide

This item has no instructions

How a style sheet works

A style sheet defines how tags and properties in a HTML document should be formatted.

Tags are modified so they all take on the properties defined in the style sheet.

For example:

Slide 9 - Slide

This item has no instructions

Codepen.io

Use this link to codepen

Step 1 - Add a border to all images, using the following text in the CSS tab:

img {

border:1px solid blue;

}

Edit the CSS to format the page as follows (use the same attribute settings as when you formatted the HTML directly):

Set the body with an coloured background and different font text
Set h1 so that it is a different colour and aligned to the centre
Set h2 to a different colour

Use w3schools for tips and help

Task 1 - Editing the Files

Slide 10 - Slide

This item has no instructions

Take a screenshot of your webpage and upload it here (WIN + SHIFT + S, save your screenshot to your documents and upload below)

Slide 11 - Open question

This item has no instructions

Efficient design

Using CSS means that a web designer does not have to make formatting changes to lines of HTML.

Once CSS is in place, it is easier to apply a change to adjust the style of a web page.

Slide 12 - Slide

This item has no instructions

h2 {

color:DarkRed;

}

h2 {

color:DarkGreen;

}

h2 {

color:DarkBlue;

}

Examples of quick changes

Slide 13 - Slide

Cold Call - Can anyone see a disadvantage of CSS here for this example?

Codepen.io is a browser based editor.

When we are working with .html files we need to create a separate .CSS file and create a link tag between the <head></head> tags.

<head>

</head>

Link HTML page with a specific style sheet

Slide 14 - Slide

This item has no instructions

Task 2

Recreate the web page on the right, as closely as you can using this partially created code on Codepen.io

Hint: You will need to account for using tags in your text so the browser shows them:

< becomes <

> becomes >

Use the CSS tab for styling and W3 schools

Slide 15 - Slide

This item has no instructions

Take a screenshot of your webpage and upload it here (WIN + SHIFT + S, save your screenshot to your documents and upload below)

Slide 16 - Open question

This item has no instructions

Which of the following statements about CSS are true?

CSS is easier to change formatting than inline formatting of HTML.

CSS requires a reference to the style sheet within the head of the HTML document.

TRUE

FALSE

The tags specified in a CSS document need to be referenced using angular brackets (crocodile teeth), e.g. <h1>.

CSS makes HTML web pages more consistent in their formatting.

CSS takes more time to format large HTML documents.

Slide 17 - Drag question

This item has no instructions

Dingbats

No shouting out; give everyone time to think.

Slide 18 - Slide

This item has no instructions

Slide 19 - Open question

crocodile teeth

Slide 20 - Open question

inline styling

Slide 21 - Open question

Web site

Slide 22 - Open question

Web site

8.4.3 - Taking shortcuts - 8CS5

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Quiz

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Drag question

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Open question

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Open question

Slide 17 - Drag question

Slide 18 - Slide

Slide 19 - Open question

Slide 20 - Open question

Slide 21 - Open question

Slide 22 - Open question

More lessons like this

8.4.3 - Taking shortcuts

8CS1 - 8.4.3 - Taking shortcuts

8.4.2 - Words are not enough

8CS5 - 8.4.1 - Developing for the web

Building Your First Website: HTML + CSS Fundamentals

Website Development

HWUD04-sj2122-03-HTML-document

HTML - Tags