Lesson video

In progress...

Hello, my name is Mrs. Holborow 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 webpage 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 webpage.

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

HTML, HTML.

HyperText Markup Language.

The code used to create the structure and content of web pages.

Tags, tags, special words inside angle brackets that tell a web browser how to display and structure content.

Look out for these keywords 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 webpage using HTML.

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

<v ->What website do you visit most often?</v> Have you got a favorite webpage? What is a webpage? Websites can be made up of lots of different interlinked webpages.

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 practice tasks are available in the Code Editor for you to practice 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 webpage.

HTML works like the bricks of a webpage.

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 webpage.

These are the foundations of a webpage.

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 close body and the close HTML tags.

In a webpage, 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 webpage.

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 webpage 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 webpage 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 webpage 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 6, 7, 8, and 9.

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 we're going to structure a webpage 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 close p, close body, close HTML.

The tag is used to create a paragraph.

The tag is used to emphasize text by making italic.

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

So here the paragraph, I had an amazing weekend at the park.

The word amazing has been emphasized 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 texts 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 'cause 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're 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 favorite hobby and use a tag to make your hobby bold.

Write a sentence about your favorite food and use an tag to emphasize 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 favorite 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 favorite food is pizza.

And around the word pizza, I've used the tag to emphasize 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 the 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 are 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 open.

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 summarize 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 organize 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