video

Lesson video

In progress...

Loading...

Hello everybody.

It's Mrs. Franzsen here.

Welcome to Computing.

It's really great to have you in my lesson today.

Let's get started.

By the end of the lesson, you will be able to add suitable content to a webpage and check its compatibility on a range of devices.

Let's look at our keywords for today.

The first word is content.

Content is the information added to a webpage, which could be text, images, videos, or other media.

The next keyword is compatibility.

Compatibility is ensuring that a webpage works correctly on a range of devices and that all users have a good experience.

In the first part of the lesson, we will be looking at adding content to a web page.

Content is the information on a webpage.

This content could be text, images, videos, or sound.

The content that you add to a webpage must be suitable for the purpose and audience.

For example, if you are creating a webpage about a swimming club, then images and text about zoo animals would not be suitable.

If the webpage is aimed at children aged between 7 and 16, then images of adults swimming would not be suitable.

Let's do a check here.

Which of these images would be suitable for a webpage about a swimming club aimed at children between 7 and 16? Would it be A, B, or C? Pause the video to think about your answer.

Let's look at the answer.

The image that would be suitable is B.

Well done if you got that one right.

In this lesson, you will use Google Sites to start adding content to your webpage.

The link for Google Sites is sites.

google.

com.

The first step is to watch this video to see how to create a webpage.

Once your webpage is created, watch the video to see how to name and add a logo to your webpage.

Next, watch the video to see how to choose a header.

The next step is to watch the video to see how to add content in different formats.

Let's do a check here.

Which icon can you press if you want to delete a section for a layout, is it A, B, or C? Pause the video to think about your answer.

Welcome back, which icon can you press if you want to delete a section for a layout? The correct answer is C.

Well done if you got that one right.

It's time to work on our task now.

The first part of the task says, "Use the plan you have created and the images you have saved to start adding content to your web page." "If you haven't got a plan or images, you could use the one below." This is the design for the webpage called, "All About Animals." You can see in the plan where the different content is laid out in the webpage.

It's time to go and work on your webpage.

You can pause the video here and when you get back, we can move on to the next step.

Welcome back.

You can see that the "All About Animals" webpage is starting to take shape.

There is text and images on this webpage and different sections, which will lead to the "All about dogs," "All about cats," and "All about rabbit" sections too.

I hope you've enjoyed creating and adding content to your webpage.

The next question says, "Does the webpage you created look different from the design? If so, explain why." You can pause the video now to work on this question and we'll look at the answer when you get back.

Let's look at the answer.

"The layout change from my original plan as I decided to have less text on the first page and images with links to other webpages instead." You might have changed your design as you were working from your plan, and that is fine.

In the next part of the lesson, we are checking for device compatibility.

Web pages can be viewed on any device connected to the internet.

What devices do you use to access webpages? You can pause the video here to have a think about this, or if you have some people around you, you could share your answers with them.

Jacob says, "I use my laptop computer." Sofia says, "I use my tablet to access webpages," and Lucas says, "I access websites on my phone." A web page will look different when you access it using different devices.

This is because the screen sizes are different.

You can see here in my graphic that the tablet, laptop, and phone, all have different screen sizes.

Ensuring that a webpage works correctly on a range of devices and that all users have a good experience is called device compatibility.

Let's do a check here.

Fill in the gap to complete the sentence.

Ensuring that a webpage works correctly on a range of devices and that all users have a good experience is called, pause the video to have a think about your answer.

Let's look at the answer.

"Ensuring that a webpage works correctly on a range of devices and that all users have a good experience is called device compatibility." Well done if you got that one right.

You can click on the preview icon in Google Slides to check whether a webpage is compatible on a range of devices.

You can see the preview item at the top of the screen.

Does it look nice on each device? You can see an example here of how the webpage is scaled to different sizes depending on the size of the screen.

And with the laptop, it is quite a wide horizontal view to match the screen of the laptop as well.

Let's do a check here.

Why is it important to preview a webpage on different devices? Pause the video to have a think about that.

Let's look at the answer together.

"All users should have access to a webpage that works well and looks good, no matter which device they use." Well done if you got that one right.

Okay, it's time for our final task of today.

The first step says, "Check that your webpage works and looks as expected on a range of devices." That means you are checking to see how it looks on a mobile device, on a laptop and on a tablet.

The second part of the task says, "If the webpage does not look nice on different devices, make some adjustments to your web page." It's time for you to go and work on this task now.

You can pause the video here and when you get back, we can look together at some suggestions for the second part of the task.

Welcome back.

I can see some good progress with people's webpages.

Well done for that.

For the second part of the task, we were talking about making adjustments to the webpage.

One answer is, "The images of my webpage were too big for a mobile device.

I made the images smaller so they looked better on all devices." That is a good example of device compatibility where it is a good view on each device.

There was lots of effort in that lesson today.

Let's summarise our learning.

Content is the information on a webpage.

Content can be text, images, and videos.

Content added to a webpage should be suitable for the audience and purpose of the webpage.

A webpage will look different when it's accessed on different devices.

When designing a webpage, it is important to check that it is compatible on a range of devices.

Thank you for joining me in this lesson today, and I hope to see you again soon.

additional-material

Files you will need for this lesson

Download these files to use in the lesson.
  • dog-35553_1280195.5 KB (PNG)
  • cat-161284_1280186.06 KB (PNG)
  • bunny-311201_1280182.47 KB (PNG)