8CS5 - 8.4.1 - Developing for the web

1 / 25
next
Slide 1: Slide
ComputingLower Secondary (Key Stage 3)

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

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

This item has no instructions

8.4 - Developing for the web
8.4.1 - Website building blocks 


8CS5

Slide 2 - Slide

This item has no instructions

Do Now - Dingbats

Slide 3 - Slide

This item has no instructions


Slide 4 - Open question

This item has no instructions

Think, pair, share
What would make the walls of this 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?


Slide 5 - Slide

This item has no instructions

Think, pair, share
39 Bricks x 2 


78 minutes to paint all the bricks


Slide 6 - Slide

This item has no instructions

Think, pair, share
Changing the appearance of each individual element will take a significant amount of time. 

In computing, we should look to ways to automate repeated common tasks to help us reach solutions to problems more quickly.



Slide 7 - Slide

This item has no instructions

HTML
HTML stands for Hypertext Markup Language.


At the most basic level, a webpage is a plain text file.

You can think of HTML coding the ‘bricks’ of the website that provide the structure to organise the text and images of web pages.



Slide 8 - Slide

This item has no instructions

HTML
Each of these building blocks are identified with pairs of tags; one to mark the start of the block, one to identify the end.





Slide 9 - Slide

This item has no instructions

HTML examples





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


<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

Slide 10 - Slide

This item has no instructions

Making our first web page





Let's have a quick look at CodePen.io








Slide 11 - Slide

This item has no instructions

TASK - Make a web page

Use <p></p> to break up the text into paragraphs to make it easier to read.

Try some of the following tags to improve the appearance of the page:




Using this link: CodePen.io
<b></b>
<em></em>
<q></q>
<center></center>


<ul>
<li>This is a bullet list with each item enclosed in</li>
<li></li>
</ul> 

Slide 12 - Slide

5 Minutes
Use WIN + SHIFT + S to take a screenshot of your code and webpage

Slide 13 - Open question

39 x 2 = 78 minutes
changing the appearance of each individual element will take a significant amount of time. In computing, we should look to ways to automate repeated common tasks to help us reach solutions to problems more quickly.

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.

Slide 14 - Slide

This item has no instructions

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.

<h2 style="color:red;">Title</h2>
Some arbitrary text.
<h2 style="color:green;">Another title</h2>
Some more arbitrary text.

Note how colour is spelt. Do you know why?

Slide 15 - Slide

This item has no instructions

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.

Drag the code on the left to what you think it will look like on the right.
<h2 style="color:red;">Title</h2>


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

Some more arbitrary text.

Some arbitrary text.

Slide 16 - Drag question

This item has no instructions

TASK - Style it up!







Using this link: CodePen.io

Change the first <h1> tag so that it displays red text that is centred:
<h1 style="color:red;text-align:center;">

Try other style modifiers to format your page so it is like the example shown:
- font-family:[name of font e.g. verdana]
- font-size:[size in pixels e.g. 25px]
- border:[thickness, line style and colour e.g. 1px solid blue]
- background:[colour e.g. blue]








Slide 17 - Slide

5 mins
Use WIN + SHIFT + S to take a screenshot of your code and webpage

Slide 18 - Open question

39 x 2 = 78 minutes
changing the appearance of each individual element will take a significant amount of time. In computing, we should look to ways to automate repeated common tasks to help us reach solutions to problems more quickly.


Slide 19 - Open question

This item has no instructions

What are used to provide structure in a HTML document?

Slide 20 - Open question

This item has no instructions

What will the following line of HTML display?


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

Slide 21 - Slide

This item has no instructions

Using HTML to format web pages

Slide 22 - Slide

This item has no instructions

HTML is?
A
Hypertext Markup Language is a standard markup language for creating web pages and web applications.
B
HTML stands for Hypermedia Text Management Language, which is essential for building websites and structuring content.
C
Humanized Text Manipulation Language is a coding language crucial for web development and content organization.
D
HTML, or Hyperlink and Textual Markup Language, is the foundation for designing and structuring content on the internet.

Slide 23 - Quiz

This item has no instructions


Slide 24 - Open question

This item has no instructions


Slide 25 - Open question

This item has no instructions