Lesson video

Hi, I'm Jordan Bickel, and this is lesson one of six in creating webpage.

In lesson one we'll be exploring what makes a good website.

You'll need access to an external site, so be sure to get permission from a parent or carer before doing so.

You'll also need a pen or pencil and paper, to write on during the lesson.

Please take a moment now, to clear away any distractions, silent any apps, and find a comfortable place to work.

You'll want to find somewhere far away from distraction, where you can get your best work done.

Pause the video and get comfortable.

And when you're ready to move on press play.

In this lesson.

you'll first explore and navigate a website.

Then we'll discuss the different types of media used on the website.

And finally we'll understand that websites are written in HTML.

Before starting the lesson, pause here and think to yourself, what is a website? I'm sure you all had a pretty good idea of what a website is.

After all, you're on one now.

A website is a collection of information, relating to a particular topic, that could be accessed on a range of devices, such as a tablet, a laptop, or a phone.

Now I'd like you to pause here and think what is a web page, and how does that relate to a website? Go ahead, pause now and have a think.

So websites can be made up of lots of different web pages.

The pages are related and together they form a website.

Now pause the video one more time and think to yourself, What is a browser? When you're ready to go on, press play.

A browser allows us to navigate or find our way around the worldwide web.

At the top of every browser, you'll find an address bar, to show which site you're visiting.

You'll have back and forward buttons.

And at the top, there'll be tabs, to show you the different websites you're on.

A browser shows us what a website looks like.

Now you'll look at task one where you'll explore and navigate a website.

Be sure to ask a parent or carer before visiting this website.

Once you've gone onto the website, you'll navigate through to answer the following questions.

Question one.

What is special about the tigers night vision? Question two, in the story "A Flamingo Leg Up" what is the flamingos name? And question three, what habitat does an arctic fox live in? Now pause the video here and use your worksheet to complete your task.

Press play when you're ready to continue.

Fantastic work.

Let's take a look at how you did.

Question one.

What is special about a tiger's night vision? So first I've gone to kids.

SanDiegosu.

org.

And at the top of the page, I could see a navigation bar.

Since I want to learn more about a tiger, I'm going to click on animals.

A-ha, we've got lucky here.

At the very top, they've already included a link to tigers.

This might not always be the case.

If so you can carry on down the page, and you'll see all the animals that the website has a page for.

You can either scroll down to find the one you're looking for, or you can use the search bar, to search for a specific animal.

In our case, we can click right here on tigers.

Now we're looking to learn more information about its vision.

So that's one of the physical features.

So I'll scroll down the page and skim for that information.

Here's a description.

It doesn't look like it'll talk about vision, hunting.

I'll keep going.

A-ha, unique features, that might tell me a bit more about their vision.

I see you.

A tiger's night vision is six times better than a human's.

That's the answer to question one.

I can go back up to the top of the page, and most webpages will have an icon at the top left-hand corner, that will direct you back to its home page.

So I'll click here and it'll be taken back to the first page I started on.

Now question two, in the story "A Flamingo Leg Up", what is the flamingos name.

So now I'm looking for a story.

Looking at the navigation bar, I can click here to see more stories.

Now the particular story that I'm looking for, is about a Flamingo.

So I can either use the search bar here at the top, or if you go down and use some of the media, the images here, to find the story about a flamingo I'll go down and look to see if I can find a flamingo.

A-ha, A Flamingo Leg Up, perfect.

Click here and now hopefully I'll be able to find the name of the flamingo in the story.

Floyd is a Flamingo at the San Diego zoo.

So the answer to question two is Floyd.

I'll go back to the top of the page, click the home icon.

And for question three, we're trying to find out the habitat of an arctic fox.

So again I want to learn a bit more information about animals.

So in the navigation bar I'll click animals, but this time I want to learn about an arctic fox.

I can scroll down, and using the search bar this time, I can click and type arctic fox.

There I'll have the information that I'm looking for pop up, and click here to learn more.

Now I'm trying to find the habitat of the arctic fox.

This time I'll scroll down, and here I see the size food and a-ha the habitat.

Habitat of the arctic fox is the tundra.

That's the answer to number three.

Now we'll look at task two, where you'll be annotating a website, to identify features of a good website.

In a good website, you'll find a navigation menu.

This allows the user to choose which section of the site to look at.

If you hover over them, usually more options will appear.

A good website will also provide a search box.

This allows the user to search for a specific word on the website.

On a good website, there's also different types of media, like text or images.

Sometimes there'll be pictures on the site, and these make the site colourful, and usually the pictures can be clicked on, and it'll show you more information about that object.

There will also be texts that gives you further information about what you've seen in the pictures.

Pause the video here to complete task two.

Resume once you're finished.

Fantastic work.

Let's take a look at how you got on.

On the first example you'll see at the very top right-hand corner a search bar.

This allows the user to search for specific information.

Along the top of the page you'll also find a navigation menu.

This shows the user where to find key information.

On this page you can see animals, videos, stories, activities, games, and save the animals across the top.

On the second example, you'll see at the very top of the page, another search bar, allowing the user to find specific information or words.

You'll also see some of the media, that we began to discuss.

Here's an example of an image.

Not only does it catch the user's eye, but it can usually be clicked on, to find more information about that object.

You'll also see text that gives more information of the images on the screen.

Now that we've had a chance to think about what makes a good website, I'd like you to start thinking about any background knowledge you may have, on how websites are actually created.

Go ahead and pause the video here to have a think.

When you're ready to move on press play.

Websites are made up of a code called hypertext markup language, or HTML for short.

We're now going to look at our final task for this lesson.

In task three you'll be accessing HTML on a website.

For this task you'll have to use Google Chrome.

Choose any image on the website and right click on it.

Then click inspect.

Now you can see the HTML code.

This defines what the website will look like.

Pause the video here to complete the task.

Resume once you're ready to move on.

Well done.

Here's an example of what the HTML code might look like.

You won't have the same exact code, because you were probably looking at a different picture, but this is just to give you an idea.

That's all for today.

Well done on your fantastic work.

I have two more things that I would like you to do before we go.

First, I want you to think of the three most important things that you've learned today.

It's completely up to you.

And second, if you'd like to, please ask your parent or carer to share your work on Instagram, Facebook or Twitter, tagging at OakNational and hashtag learnwithoak.

Thank you so much for your hard work today, and I can't wait to learn with you in our next lesson.