Lesson video

Hello, my name's Mrs. Jones.

And I'm pleased that you decided to join this lesson today.

In this lesson, we will look at what makes a good website by looking at key features, and how these are important to designing and creating a website.

We will then look at how to use software to create a website.

So let's get started.

Welcome to today's lesson.

Today's lesson is called Creating a Multi-Page Website from the unit Digital Media.

And by the end of this lesson, you'll be able to explain the different features of a good website and follow a plan to create a multi-page website.

There are two key words to today's lesson.

HTML, HTML is hypertext markup language, the language used to create and structure content on the worldwide web.

Domain name, domain name is a memorable address used to identify a website or other resource on the internet.

There are two sections to today's lesson.

The first is describe the features that make a good website, and the second is use software to create a website.

So let's start with describe the features that make a good website.

Websites can be developed for a wide range of purposes.

You need to consider the audience and the purpose of a website.

How will someone use the website? Is it to sell, entertain, or inform others? Creating a website can be done in different ways using HTML or software.

HTML stands for hypertext markup language.

It is not a programming language like Python.

It is a markup language.

It uses special codes called tags to tell your web browser how to display content.

You write every line yourself.

You have complete control over every detail, including where every element goes, how it is seen, and how a user interacts with it.

You use HTML for structure and CSS, which is cascading style sheets, for how it looks.

And on the right here, you can see an example of how HTML looks when it is structured and used to create when of a website.

The way a user navigates from one page to another on the website is a key feature.

Navigation should be clear, so you can find what you are looking for, consistent in position and layout, logical and organised.

You can see an example there on the right, how it usually is either horizontal, or it can be vertical, and it can also use dropdowns to allow you to access further menu navigation.

A good visual design means a website is appealing and easy to use, with a clean uncluttered layout.

Readability is achieved through font choices, sizes, and colours.

A company's identity is shown through consistent branding, including colours, fonts, and logos.

Images should be high quality and relevant.

A website should also consider accessibility.

An inclusive design caters to users with disabilities.

Ways to achieve this includes screen reader compatibility, keyboard navigation, colours that contrast well together, and alt text for images.

Alt text is where a description of the image is attached to the image to allow a screen reader to let the user know what it is and what is there.

You can see an example on the right here of an image of cookies.

And when you hover over it, the text that you can see would appear, which says, "Five chocolate and nut cookies stacked on a napkin," which is describing the image for someone who cannot see it.

Let's have a quick check.

What feature allows accessibility by adding a description of what an image is for anyone who cannot see it? Is it A, a hyperlink, B, alt text, C, breadcrumbs, or D, navigation? Pause the video to look at that example there and the question, and then we'll check your answer.

Let's check your answer.

The answer was B, alt text.

Well done if you got that correct.

The domain name is the web address.

It is a memorable address used to identify a website or other resource on the internet.

When creating a website, you need to consider a domain name that is relevant to the website content or business, as well as being easy to remember.

Lucas asks, "What should I include on my webpages?" Really good question.

Content that is relevant to the website and could include testimonials, which are stories from happy customers, social media links, a map to the business, opening hours, contact information, contact form, a privacy policy, clear on how data is being used and stored.

Whatever you use on your webpage must be relevant to the website content, what it is about.

Let's do an activity, and you'll need your worksheet for this.

Complete the table to describe the features and how they should be used on a website.

You have the features, navigation, design, and accessibility, and you need to add a description.

Pause the video, go back through the slides, and consider your answer, and then we'll check it.

Let's check your answer.

Navigation, the way a user navigates from one page to another on the website is a key feature.

Navigation should be clear, so you can find what you're looking for, consistent in position and layout, logical and organised.

Design, a good visual design means a website is appealing and easy to use, with a clean uncluttered layout.

Readability is achieved through font choices, sizes, and colours.

Consistent branding including colours, fonts, and logos for a company's identity.

And images should be high quality and relevant.

Accessibility, an inclusive design caters to users with disabilities, for example, screen reader compatibility, keyboard navigation, colours that contrast well together, and alt text for images.

Well done if you've got those correct.

Let's move to the second part of today's lesson, use software to create a website.

There are lots of software options to create websites.

Canva has an environment to create websites with professional templates and elements to use.

Everything is pre-made, so you can drag and drop them into your webpage layout.

When you open Canva, you have a toolbar of digital artefact options, and you click Website to open the editing environment.

You have a blank canvas to start, you have a blank webpage area, you have sections that you can add to a page, and you have current page at the bottom and where you can add a page as well.

Let's have a quick check, true or false, Canva allows you to create a website by typing in HTML code? Is that true or false? Pause the video to consider your answer, and then we'll check it.

Let's check your answer.

The answer was false.

Pause the video to consider why is that false, and then we'll check your answer.

Let's check your answer.

Everything is pre-made, so you can drag and drop into your webpage layout.

Well done if you've got those correct.

In Canva, there is always the main toolbar on the left.

On Design, you have the templates with sections.

Text has text boxes and template text styles.

Uploads is where you can upload your own assets.

Brand is where you can set a brand's colours, fonts, and logo.

Elements is where you can add different assets, including images, shapes, graphics, video, and audio.

Aisha says, "How do I create a website using Canva?" And we're gonna play this video to explore the platform further.

To create a website using Canva, you go to the homepage and click Website, which opens a blank canvas.

On here, you have the starting point, which is blank, and we have this as page one.

So we're going to look at using a design to put a template on here, and you can search for website templates, you can scroll down and look at the different ones.

This is the one I'm going to use here.

When you click on it, you see the five sections that are in this template.

Each template has different sections.

I'm going to bring over this one as my starting point.

This is what's gonna be visible in my homepage.

Now, that is the top.

I'm gonna add a section to be able to add another part to the homepage, so that now have an image which will have my title, and then underneath, we'll have the testimonials.

I'll need to rename this page.

So the three dots on here underneath is going to allow me to add a page title.

This is important to ensure that it is linked with the navigation.

If you don't do that, it will be left as page title, it needs to be Home and the other headings as well.

So we now have our homepage that we need to edit.

And I'm gonna go back onto Elements, and I'm gonna look at getting an image to use instead of the bakery style ones here.

So you can choose, you can search for specific images.

I've got some that I have been looking at, so I'm just gonna scroll across here on my Recently used ones and use this one here.

I'm just gonna drag that over to be able to use that.

And just grab that one again, I didn't.

And just if you drag it over, though, and take it over, and hold the mouse, it will automatically click into the frame that's already there instead of what I just did, where I clicked it and saw it, then you can resize it.

But this will add it to the template within that style there.

So, now, I'm going to add my title.

So I'm just gonna edit this here, DESSERT EMPORIUM, and I'm going to change the font, so let me double-click on that and go up to the font.

And I'm gonna scroll down to find the font that we want to use.

This one I'm using is Benedict, which I like for this one.

Now, this is all in capitals.

At the top here, we have it showing as Uppercase.

If I click that, it'll change down to sentence case, which has got just capital letters.

Now, I might want to make that bigger as well, so I'm gonna change that to 100 on there, just make it nice and big.

I don't want this little text at the top, so I'm gonna take that off, and I'm gonna use my logo now, but I'm going to use a frame to bring it over, because I don't want it square, I'm going to use a circle.

Now, what that allows me to do is to resize this, go to my Uploads, and get my image, drag it over, and as I bring it over the frame and let go, it will automatically pop it into that frame.

I now have a circle for my logo instead of the square.

Now, at the moment, I have a Dine with Us, I'm gonna come back to that in a minute.

And I'm going to scroll down, and I'm going to change this bit at the bottom.

Now, I'm gonna leave these at the moment.

You can change the testimonials, but I'm just going to change this bit here.

Have a bit of a slogan, so A TASTE FOR HEAVEN JUST FOR YOU.

Now ,again, I don't want that font, I'm gonna change it to that Benedict one that I like, and change it to, so that it's not in capitals.

I'm gonna make it a bit bigger, so that it stands out.

Now, I could add the logo as well if I wanted to.

We'll leave that as it is for now.

So the next page I'm going to add, so I'm going to click the plus to add a page.

And I now have a blank canvas here.

And I'm going to add on one of the Design templates areas.

So I'm going to bring this one over on this section, and again, bring it over, and drag it on to allow it to take over the whole screen.

And then I'm going to, underneath that one, I'm also going to add a section, I'll bring over this one.

And now, I need to edit that.

So, again, I need to think about the images that I use, which, I'm gonna go back to my Elements.

take out the search that's on there, go to my Recently used, 'cause I've searched for these previously, so it's good to have those ready.

So this go across, this is the first one, and then this is the second one.

If you're not happy with the positioning of the image when you drag and drop it into the frame, if you double-click it, it will show the full image, and you can move it to allow it, and then click off it, and it will save the new position.

So I'm gonna, again, retype, change some of this.

(faintly speaking) Again, change the font, set it there, and we can edit that.

Now, you can change the text here.

I'm not gonna do that now, but I can change that to make it more specific about double-clicking and editing the text.

There is a button here at the moment, it's not doing anything.

You might decide that that's not quite how you want to look.

You can see on the Elements, it also has Buttons, there's colours there.

I'm going to change the colour of this, so I can click on the background, click the colour.

And again, I've got some colours preset that I might want to use.

And then change the colour of the text to make it stand out, thinking about accessibility, thinking about making it stand out for anyone to use.

Okay, so, now, I'm gonna scroll down and look at the bit underneath.

Again, change the text here, DESSERTS MADE FOR YOU.

And we'll change the text font.

That again, I can change the text underneath.

So I'm gonna pop some images on here, again, drag and drop them over, so we'll have that one first, then we'll have that one, and then this one.

And again, underneath, I can change this.

So we could put CHOCOLATE MADNESS, change the font, make it stand out, same as the other ones, make it bit bigger, and we've got that there.

So we can change all those parts as well.

So we're gonna add another page, page three.

And just before I do that, now, I've done got page three.

I need to go back to page two and just do that three dots, and add a page title.

So we need to make sure that we add a title that is going to be suitable.

So I'm gonna put Desserts for now.

And then on this last one, I'm gonna do it now, 'cause this one is going to be Contact.

I'm gonna go back to my design to get that section, bring that over.

And I want change the image.

So I'm going to go back to Elements, again, in my pre-design, bring that over, and you can see there, the image is not central, it's not in the right position, so double-click, move that over to where I want it to be seen and clicked off.

I'm gonna have that there.

Quite happy with SEE YOU SOON.

But again, I might want to just change the font, making it consistent throughout.

And then I'm gonna leave the phone number and everything there the same.

Now, I can preview this website that I've created so far and see what it looks like.

You can see, here is my navigation at the top, which is why it's important to have the names correct.

So you have Home, Desserts, and Contact.

And if I scroll down, you can see there's the first page, Desserts, second page, Contact, and the third page.

And now, you can also see if it is responsive to going to a mobile view.

And again, now, this is how it would be viewed on a mobile phone instead of a computer, and how it adapts to that.

And then go back to, obviously, looking at it on a computer, and click Close to go back.

Now, I'm gonna go back to that homepage.

And here, I had Dine with Us.

Now, what I can do is double-click on the text, and I have the link option become available, and I can click there, and you can put a URL, but you can also see pages in this document.

So I'm gonna go down and click Contact.

So, now, we're gonna preview that and you'll notice that the cursor changes from an arrow to the pointing hand, because it's a link, click Dine with Us, and it takes us to Contact.

So you can add additional links as well.

Let's have a quick check.

To make sure your pages are in the navigation, what steps should you complete? Is it A, add a page, B, rename a page, C, add a section, or D, rename a section? Pause the video to consider your answer, and then we'll check it.

Let's check your answer.

The answer was B, rename a page.

Well done if you got that correct.

Aisha says, "What is the best way to plan my website?" Really good, planning is a key before we start creating.

A wireframe is best, as it is a layout of a website, showing essential content and functionality.

But without design elements, you can see an example here on the right, and it just simply says a banner here with title, an image of a dessert, and text about the Dessert Emporium.

Let's do an activity.

The first part is create a wireframe layout plan for your webpages.

Pause the video, use the worksheets, and consider your wireframe layout for your webpage, and then we'll go through a solution.

Let's check your solution.

So this is an example here of one of the pages as an example, we have the location of different elements, different images on the left, with the logo in the middle, we have text about the restaurants and services.

And we have a button of Book Now, where we've got a call to action, which is going to link to a contact page.

Welcome for completing your wireframe layout plans.

Let's do the second part of today's activity.

Follow your wireframe plan and open a web development package of your choice.

Examples in this lesson use Canva.

Create your website with three pages linked together.

Pause the video, use your wireframe plan, and open the web development package to create your website with three pages linked together.

And then we'll go through an example solution.

Let's check your solution.

So this is an example here of the three pages, and you can see the Dessert Emporium.

With the three, you've got the homepage, you've got the middle page there, and you also have a Contact page, and they link together in the top right.

Well done for completing your website with the three pages linked together.

In summary, there are lots of features to consider when creating a website, including navigation, hyperlinks, breadcrumbs, design, and accessibility.

The content also needs to be considered and planned using a wireframe planning document.

Content to consider includes testimonials, social media links, map, opening hours, contact information or form, and privacy policy.

You'll need a domain name, a memorable address used to identify a website or other resource on the internet.

And you can create a website using HTML or software.

Welcome done for completing this lesson on creating a multi-page website.