8CS5 - 8.4.1 - Developing for the web

• Computing
• Lower Secondary (Key Stage 3)

8.4 - Developing for the web

8.4.1 - Website building blocks 

8CS5

Do Now - Dingbats

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?

Think, pair, share

39 Bricks x 2 

= 

78 minutes to paint all the bricks

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.

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.

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.

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

Making our first web page

Let's have a quick look at CodePen.io

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> 

5 Minutes

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

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.

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?

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.

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]

5 mins

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

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.

What are used to provide structure in a HTML document?

What will the following line of HTML display?

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

Using HTML to format web pages

HTML is?

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