Lesson video

In progress...

Hello, my name is Mrs. Holbrook, and welcome to Computing.

I'm so pleased you've decided to join me for the lesson today.

In this lesson we'll be structuring a web page using HTML.

Have you used HTML before? Don't worry, if not.

This lesson will help you get started.

Welcome to today's lesson from the unit Developing for the Web.

This lesson is called Website Building Blocks.

And by the end of today's lesson, you'll be able to describe and use HTML to structure and modify the appearance of a static web page.

Shall we make a start? We will be exploring these key words in today's lesson.

HTML.

Hypertext Markup Language, the code used to create the structure and content of web pages.

Tags.

Special words inside angle brackets that tell a web browser how to display and structure content.

Look out for these key words throughout today's lesson.

Today's lesson is split into two parts.

We'll start by describing and using HTML.

And then we'll move on to structure a web page using HTML.

Let's make a start by describing and using HTML.

What website do you visit most often? Have you got a favourite web page? What is a web page? Websites can be made up of lots of different interlinked web pages.

So here you can see we have the homepage at the top of the navigation system, and then we have lots of linked web pages.

The pages are related and together they make a website.

Do you know how websites are created? Maybe pause the video here whilst you have a think.

Websites are made up of code called Hypertext Markup Language, or HTML for short.

The Raspberry Pi Foundation's Code Editor lets you write HTML directly in a browser.

Starter code and practise tasks are available in the Code Editor for you to practise your programming.

When you open a starter code link, you'll see a screen similar to this.

On the left is the HTML code.

On the right is a web page.

HTML works like the bricks of a web page.

It acts as the building blocks, giving the structure to the text and the images of the pages.

In HTML, tags are special words inside angle brackets that tell a web browser how to display and structure the content.

So you can see some examples of these tags in the code snippet below.

We have html inside a tag, we have body inside a tag, and then we have h1 and p.

We'll see what these tags mean later on in the lesson.

Most tags come in pairs, with an opening tag and a closing tag.

These wrap around text or other elements to format them.

Time to check your understanding.

What kind of brackets are used in HTML tags? Is it a, square brackets, b, round brackets, or c, angle brackets? Pause the video here whilst you have a think.

Did you select c? Well done.

Angle brackets are used in HTML tags.

These HTML tags are needed to tell the browser that there is a web page.

These are the foundations of a web page.

So the top line, which says !DOCTYPE html, that tells the browser the type of document it's going to be working with.

On line two, we have the open <html> tag, which indicates the start of the HTML code.

On line three, we have the open of the <body> tag, which is going to be the main text on the page.

And then we have the closed </body> and the closed </html> tags.

In a web page, the <html> element tells the browser that everything inside the tags is HTML code.

A heading is a piece of text that is made larger and bolder to act as a title for a section of a web page.

So here, inside the body tag we have a <h1> tag.

This is the largest heading available.

And inside that tag we have the text "This is a heading." On the right-hand side, we have a preview of what this would look like in the browser.

So you can see the size of the text compared to the next line of text, "This is a paragraph," below.

Headings can be added to a web page using the <h1> tag.

It automatically adds space before and after the text.

Everything inside the <body> element is what will be seen in the web browser window.

Izzy says, "There's nothing showing on the web page yet.

You need to add content in between your <body> tags." Izzy's correct.

There's no content in between the <body> tags here, so the web page is appearing as a blank page.

The tag is used to create a paragraph of text.

It automatically adds space before and after the text, a bit like the <h1> tag.

Each tag creates a new paragraph, adding space between them automatically.

So this code has three paragraphs: this is the first paragraph, this is the second paragraph, and this is the third paragraph.

Oh no, Alex looks a bit worried.

Alex says, "My HTML doesn't look right! I wanted each sentence on a new line." What has Alex forgotten? Look at the code carefully and maybe have a think.

Ah, Sam spotted the mistake.

Sam says, "You need to use tags both at the start and at the end of the text." Aisha says, "Some people think they should close a paragraph by writing again.

Is that correct?" Izzy says, "When you open a tag, you need to then close it properly using the forward slash before the tag name, like ." Which symbol is used to close a HTML tag? Is it a, a forward slash, b, a minus, or c, a backslash? Pause the video whilst you have a think.

Did you select a, forward slash? Well done.

Okay, we are moving on to our first task of today's lesson.

And you've done a fantastic job so far, so well done.

I'd like you to fill in the blanks using the words provided.

HTML acts as the of a website.

It uses special codes called to structure content.

Each tag tells the web browser how to different parts of the page.

For example, the tag creates a of text.

Pause the video whilst you have a go at the task.

How did you get on? Did you manage to fill in the blanks correctly? Let's have a look at the answer together.

HTML acts as the building blocks of a website.

It uses special codes called tags to structure content.

Each tag tells the web browser how to display different parts of the page.

For example, the tag creates a paragraph of text.

Remember, if you need to pause the video here and make any corrections to your answer, you can do that now.

I'd now like you to open the starter code at oak.

link/my-sunday.

Use the and the closed tags to make the text display correctly.

Each sentence must be on a new line.

Pause the video whilst you go and have a go at the activity.

How did you get on? Did you manage to use the tags? Let's have a look at the sample code correctly.

So on line five, we have our first tag.

We open the tag and then we have the text, "On Sunday, I had a relaxing day at home." And then at the end we close the tag.

And we've repeated that on line six, seven, eight, and nine.

If you want to see the full working solution, you can go to oak.

link/my-sunday-solution.

Okay, we are now moving on to the second part of today's lesson, where we're going to structure a web page using HTML.

In HTML, you can use multiple tags together to format text in different ways.

When tags are combined, they must be nested correctly, meaning the opening and closing tags must be in the right order.

So you can see here we have the <html> tag, and then nested inside that we have the open <body> tag, and then nested inside that we have the open paragraph tag.

We then close all of those tags in exactly the same order that they were opened.

So closed closed <body>, closed <html>.

The tag is used to create a paragraph.

The tag is used to emphasise text by making it italic.

You can place an tag inside a tag to emphasise specific words within a paragraph.

So here the paragraph "I had an amazing weekend at the park," the word "amazing" has been emphasised by turning it into italic.

Let's look closer at how some other tags can be used to change how your text content looks.

The tag makes text bold.

Use when you want text to stand out.

The <q> tag in HTML is used to show a short quotation within a sentence.

It automatically adds quotation marks around the text you include inside it.

So you can see here the text, "I'll meet you at the cinema later," has been enclosed with quotation marks.

Time to check your understanding.

Aisha has written some HTML code, but it's not displaying as she wanted it to.

What's wrong with Aisha's HTML code? Maybe pause the video whilst you have a look.

Did you spot it? Well done.

The <q> tag is in the wrong location.

The <q> tag should only be used around text that needs to be in quotation marks.

So the text "Sam said" should not be inside the <q> tag.

The <ul> tag is used for creating an unordered list.

It's used to create a list of items where the order doesn't matter.

It's used to create a list of bullet points.

So here we have the example where we are putting apples, bananas, and oranges in a bulleted list.

Each item in the list is placed inside an <li> tag, which stands for list item.

So this tag works slightly differently from tags you've seen before, because it needs two tags.

We start with the <ul> tag on line four, which stands for unordered list.

And then each item in that list has the <li> tag.

Time to check your understanding.

Which tags would you use to create a bulleted list? Is it a, b, or c? Pause the video whilst you have a think.

Did you select a? Well done.

<ul> and <li> are used to create bulleted lists in HTML.

Okay, we are moving on to our second activity for today's lesson.

And you're doing a fantastic job so far, so well done.

I'd like you to open the starter code at oak.

link/all-about-me.

I'd like you to use a tag to put each sentence on a new line.

Write a short introduction about yourself: Write a sentence about your favourite hobby and use a tag to make your hobby bold.

Write a sentence about your favourite food and use an tag to emphasise the food.

Pause the video here whilst you have a go at the activity.

How did you get on with your code? Let's have a look at a sample answer together.

So here on line six, I have a tag, which says, "Hi, my name is Aisha, and here is a bit about myself." And I've remembered to close the tag so that each of my sentences appears on a new line.

On line seven, I have another tag, which says, "One of my favourite hobbies is painting." And around the text "painting" I've used the tag for bold.

And then on line eight, I have another tag, which says, "My favourite food is pizza." And around the word "pizza," I've used the tag to emphasise and make the text italic.

If you want to have a look at a working solution, you can go to oak.

link/all-about-me-solution.

I'd now like you to create an unordered list, <ul>, with at least three places you like to visit.

Remember, you need to use <li> for each list item.

And then for part three, write a line from a song.

Use the <q> tag to put the song lyrics in quotation marks.

Pause the video whilst you have a go at these tasks.

How did you get on? Let's have a look at this solution.

So for part two, you were asked to create an unordered list with at least three places you like to visit.

So here's the example.

On line 11, we have the open <ul> tag.

On line 12, we have our first list item.

So <li>, and we have "The beach," and we close the <li> tag.

On line 13, we have the next item.

So we have <li>, "The park," close the <li> tag.

On 14, we open the <li> tag and we have "The cinema." We close the <li> tag.

And then on line 15, we're closing the unordered list tag.

Remember, if you've got different things on your list, that's absolutely fine.

And you may have added more list items. Let's have a look at the solution for part three.

You were asked to write a line from a song and use the <q> tag to put the song lyrics in quotation marks.

So on line 18, I have the tag, and then I open the <q> tag.

And then I have the line from the song, which is, "This is gonna be the best day of my life." I close the <q> tag, and then I close the tag.

Remember, tags should be closed in the order that they are opened.

Okay, we've come to the end of today's lesson, and you've done a fantastic job.

I hope you've enjoyed the lesson.

Let's summarise what we've learned together.

HTML, or Hypertext Markup Language, is the code used to create the structure and content of web pages.

HTML uses tags to define the structure and meaning of content, helping the browser understand how to display it.

HTML tags can be used to structure the content of a website.

They can be used to create a bulleted list, for example.

Tags are written with angle brackets and include a forward slash in a closing tag.

The tags let you format and organise your content.

I hope you've enjoyed today's lesson, and I hope you'll join me again soon.

Bye.

I've finished the video