Lesson video

Hi, and welcome back.

My name is Bethany and I am your media teacher for this unit.

This is lesson four of six.

And in this lesson, we will be covered creating a multi-page website.

To complete this lesson, you will need to access Atom or any text editor.

You will need to download this before proceeding with your parents or carers permission.

So in this lesson you will begin to understand features and properties of websites.

You will then also be given the opportunity to plan a multi-page website, and you will then also create your own multi-page website.

So now we're going to move on to talking about different features and properties of a website.

We're firstly going to focus on the customer designed focused aspects.

So a well designed homepage is really, really important.

This is the first thing that users are going to see when they come onto your website.

If it looks good, it's going to draw people in and make people want to use your site.

It's also really good to have an easy to remember domain name.

You don't want anything that's too long or too difficult or really difficult to remember.

Otherwise people won't be able to find your site.

Next is good to have your company name to be really obvious and really clear.

You want it to state what your company does and you want it to be really prominent on the website so that people know whose website they're using.

It's then also really good to feature the company purpose.

This is often summed up in a tagline.

So then not only will users understand whose website they're using, they also understand what that company is about.

So another property of a website is a search bar.

This will help people to find the information that they are looking for really, really quickly.

Another aspect is a navigation bar, this will help again, people to find the information that they want really quickly.

It's normally across the top or down the left of the website.

And lastly is a CTA or a call to action.

This is a link or button that will help get the user involved and engaged in the website.

An example of this could be, click this button now to book a demo.

So it's a more customer and design focused features and properties of a website can include images.

So good images will be able to tell you what the site is about.

You can also include testimonials on your website, this is going to be stories and reviews from happy customers.

You can also include social media links, this is going to be able to connect people with your social media profiles.

You can also add a map to your business, you can actually embed a Google map into your business and tell people where your physical location is.

You can also include opening hours, so when will you be open? When will you be at your business? You can then also include contact information like a mailing address, a phone number, a physical address perhaps, any way people can contact you.

You can also include the contact form, so there's going to be a web form to send queries to the business email that you can then answer.

You also want to have a capture or empty spam feature, this is to stop web forms sending spam.

You then also have to have a privacy policy, this is required by the law in the UK and the EU.

So another aspect of a website is the server and the backend.

So some features and properties of the backend include a CMS tool, this is a content management system and it allows you to create content without writing any HTML at all.

You also have site analytics, which allows you to track what your users are doing on your website.

You then have a website hosting that you need to make sure that your website hosting can keep up with the demand of your website.

Also you'll need an SSL certificate if you're taking any personal details from your customers.

You then also need to consider cross-browser compatibility.

You want to ensure that your website works in all sorts of browsers.

We then also have multi-device compatibility, you need your website to be able to work on a phone as well as a laptop, as well as a 4K monitor.

And you also need to consider in nightly backup so that you're able to restore your website if anything should happen to it.

So, which pre-production methods are suitable for planning a website? You could create a storyboard, you could create a visualisation, a mind map or a mood board.

The only one that probably wouldn't be appropriate for this is a script.

So now we're going to move on to task one for this lesson and this is going to be creating a website.

So for task one, you will need create a website following the steps detailed in the worksheet.

However, I will first give you a demonstration of how the task could be completed.

So if there is a section of the worksheet that you do not understand, you can just refer back to this video at any time.

So this demonstration is going to be how to create a website.

For step one, what you'll need to do is either open Atom or any plain text editor.

So then you're going to need to navigate onto Atom and open the resources in Atom.

To do this all you need to do is to file open and then navigate to the project folder in the downloadable resource.

So now we're going to open our index file in a browser.

So to do this all you need to firstly do is to navigate to the downloadable resource in a file viewer.

And then all you need to do that is just double click on the index.

html file.

So this is what our website looks like at the minute.

So then moving back onto Atom, what we now need to do is move the logo that we created two lessons ago into our images file.

So firstly, grab up a finder window or a file explorer and navigate to where you have saved your logo.

The only thing you going to need to do then is drag this image into the images folder.

We then going to need it to rename this logo as our index.

html file, is looking for a file called logo.

png.

So we need to make sure that our file name matches this exactly.

Now we can go back on to a web browser and we can refresh the page.

And now we can see our logo in the top left corner there.

Next up, we're going to add more social media.

So if we go right down, we can see that there's a footer.

Now in the footer, it's got a link to a Facebook page.

Obviously this is just the generic Facebook link as this company is made up.

It doesn't have a real Facebook page.

However, if we copy and paste this, we can then add Twitter and Instagram by literally just changing the link.

Obviously, if we were using a real Facebook page we would then have to have a slash just after with the navigation link to the actual Facebook page.

But for now we can just do this and then we can save that, and then we can open our browser again.

And as you can see now, they all say like it's on Facebook.

So we also are going to have to change the handle name here, so we're going to change this to Instagram and then we're going to change this to Twitter.

And then again we can save that, and then we can go back onto our websites.

And there we have it like on Twitter like some Facebook and like on Instagram.

If we click on these, they should take us to Instagram.

So if We look on our website here, we have four pages that we should have on our website however, only the homepage works at the minute as these are not linked to anything.

So if we go back to our code, we can see here that this is our navigation section of code.

And these are trying to find a mower.

html, video.

html and contact.

html which we do not have down the side here.

So let's copy and paste index.

html three times.

However, we will change the name every time to one of the other three pages.

So firstly we'll do mower.

html and we'll duplicate again and we'll do video.

html and we'll duplicate one last time and we'll call this contact.

html.

So now on each of these pages, we have the structure of a generic page of our website.

So that saved us a lot of work.

So now what we're going to want to do is we're going to go through each of the new pages and we're going to want to change the page title.

So if we delete the code that's here keeping the hitch one tags and then all we going to do is just change the name.

So this one will obviously be called contact.

I'm going to save that page and we'll go down to mower and we will change this generic, page title here a piece of cord and type in a mower, and then save that.

And then exactly the same for the video page.

Now, if you come back on to our website and we navigate, we can now see that the different pages have the different titles.

However, we have not changed the homepage.

so if we go back onto Atom and go back onto our index.

html file we can then remove this generic piece of code and add in a home and then save that and then if we just check that worked.

There we go.

So now what we need to do, is we need to update the content of the page.

So as you can see here, we have generic texture which means absolutely no sense.

So what we going to do is we're going to want to update this text, so that it actually is relevant to the page.

So for the homepage, for example we could just write welcome to the website for our brand new home health robot.

As a student at Oak I'm sure you are going to be a lot more creative than that.

Now we're going to want to do the same for the contact page as well.

So again, we just need to delete all the generic text and add in something relevant.

So we could add, please don't hesitate to contact us for any more information.

So then you're going to want to go ahead and do the exact same for the video and mower pages.

So next up the worksheet is going to point you to W3Schools which is a really, really great tool when learning to create websites.

So on that, you will be able to find a contact form.

So within the main area that we have here, we can grab a form from W3Schools and paste it in here.

Now we just might need to adjust the layout just slightly after we paste, however, that should give us a little contact form.

If we just save that, then we can just check.

As you can see here, we now have a contact form that we can write our first name and last name and then submit.

So next up the worksheet is going to instruct you to copy some code that is in the worksheet into the video.

html file.

So let's go ahead and do that.

So once we have got that code copied in, we can then save this file and then it see what happens on the website.

So we can see on our website that we have a video box but nothing is actually playing in the video.

And that is because, if we go back onto our code our source code is pointing to images/mower.

mp4.

So if we go on to images file, we don't have anything called mower.

mp4.

So again, what we're going to need to do here is we're going to need to locate where we saved our mower video from earlier, we're going to want to create a duplicate of this, and then after that, we can just drag this video into the images file of Atom.

This might be a little bit slower than the picture as it is a bigger file.

And then once we reload our website, we should be able to watch our video and there is.

So what we're going to want to do now is navigate to out mower.

html page.

And from here, we're going to want to add some more images.

So here at the top where we add our logo, this piece of code can simply be copied and pasted into the main section of the page.

And then, all we need to do then is just change the information.

So here you're going to add the file name you're then going to add all to text to describe what is happening in the image, and then that is it.

So there's a link on the worksheet where you can actually have a look at some different images, and then you can simply place them in your images folder up here and then just change this piece of code.

So now it's time to add some style to our site.

So if we go back onto Atom, and we can open the style folder here and then this style CSS file.

Now here is about all the styles of the website is kept.

So what we can do here is we can change the background colour of the body, we can change the background colour of the whole site.

This value here is the hex value that encodes the colour at the minute.

So what you're going to want to do, is you want to go on to Google, and you're going to want to type in HTML colour picker, you're then going to want to pick the perfect colour for your site.

And then you can replace these values with that hex value.

As you can see here, I've just changed this to a red colour.

And then when I opened the website back up so now as we can see, the background of this house turned red.

Now, I'm not sure this is the best design and I'm not sure it's the best colour to use, but this is just an example for you.

I'm sure you can come up with much, much, much better.

Spend a bit of time here playing around with the different colours making sure you can see your logo, making sure your logo stands out, making sure non of the colours clash.

You can spend quite a bit of time here just playing around with these different options.

So as we can see on our website at the minute, everything is looking quite blocky everything is looking very, very square.

So what we can actually do on our CSS file, is we can actually add rounded edges.

So in the body section here, we're going to add another line and this is going to be a border dash radius.

And then we're going to add this value at 25 pixels, and make sure you put a semi colon on the end.

And then when we save this file, we should have rounded edges on our website.

Now, when we reload the page, we now have rounded edges which looks much, much, much nicer.

So now another piece of code that we can copy from the worksheet is to add a drop shadow which is a really nice effect.

So again, add another space here in the body section and we're going to copy it over that piece of code.

So once we have that piece of code, we can save that and then reload our website.

And as you can see now we've got a drop shadow around it.

Now there are some extra challenges in the worksheet for you.

You can get a lot of help off W3Schools if you do get stuck, I'm not going to go over them now as they are a challenge for you when you actually complete the worksheet yourself.

So now it's your turn to complete task one which is creating a website.

So for this task, I want you to follow the steps in the worksheet, create your own website.

For this task the planning has already been done for you and assets have been provided in the resource.

So look for the link within the worksheet to get the resource.

So pause this video now to complete the task.

So that is the end of lesson four.

So in this lesson you learned different features and properties of websites.

You also learned how to plan the multi-page website and you also created your very own multi-page website.

So I really hope you enjoyed lesson four, there is an end quiz that you will need to complete at the end of this video so make sure that you do that and also make sure that you share your work with Oak National with your parents or carers permission.

Thank you and I'll see you in the next lesson.