Lesson video

Hello, and welcome to lesson three of our HTML and CSS unit.

I'm Ben, your computing teacher for this lesson.

And this lesson is all to do with bringing together all those skills that you've developed in lessons one and two, and creating a mini project.

That mini project's going to build upon the laser tag website that you started in lessons one and two as well.

So all you'll need for this lesson is your computer and a web browser.

You'll also need to log into your Repl.

it account to access the work that you started in the previous lessons.

So if you can clear away any distractions that you might have, pop 10 off your mobile phone and if you've got a nice quiet place to work that would also be great.

So when you're ready, let's get started.

So, in this lesson, you're going to identify the common features of existing websites and the basics of what makes good website design.

And once we've determined that, sorry, you're then going to design and create pages for your mini website making sure you're incorporating those good design features.

Then you're going to create hyperlinks between pages stored locally within the same folder as the rest of your web pages and also insert images, which are also stored locally.

So let's move on to the first exercise for this lesson, which is a recap of some things that we've learned in lessons one and two.

So what I'd like to do is pause the video in a moment and see if you can match up these tasks that you can see on the left-hand side with what the items that they actually do.

So pause the video and see if you can work out what does what.

So unpause when you've done it.

So I'll tell you I'm pausing 'cause you've got them all and I know that you've got them all right but let's go through the answers, nonetheless.

So what was h1? Well, h1 should have linked to the largest heading.

So if you remember, we get to h1 h2, three, four, five, six, and they start so h1 is the largest and they go to the smallest as we go down, so ul what does UL mean? Well, ul was an unordered list.

So remember unordered were just bullet points and then ol was an ordered list.

An ordered list is where they're bullet points but they're numbered lists rather than bullet points.

So one, two, three, et cetera.

A href, what was that? Well, the a href was the hyperlink.

The P hopefully you worked out was a paragraph.

The img was an image.

The li was a list item.

So once we defined ul and then each one of our bullet points we'd have to have li for each one of our points, regardless of whether or not it was on all the left on all that list.

And then finally, we get down to h6, the only one left is h6.

It's the smallest heading that we have.

So how do you get on with that? I'm sure you got them all right.

And if you did, you should feel really comfortable that I'm on the right lines and you remember F then you need to progress.

So let's move on.

Just in case.

It was a bit easier to say it this way.

I put it like this.

So P paragraph li list item and so on.

So let's have a look at the features of a good website then.

So here's an example of an excellent website that you can see and it's Wikipedia.

I'm sure you've all been to Wikipedia before.

So what does make a good website? Well, first of all, a clear navigation is a key feature of a good website.

So what I mean by clear navigation is it's easy to find your way round the website.

So there are multiple pages on a website.

There are lots of places where you can find your way around.

More often than not websites have hyperlinks across the top of the page.

And maybe even when you scroll down the hyperlink stay in the same kind of place.

So it was always easy to find the key places to the website.

There should be a nice, obvious home button maybe and they should say on Wikipedia, there are lots of links that take you to the key parts to what the information and what's relevant to it where you can explore more information.

And those are links in the form of a blue text.

So you know that it's a link.

So there's also a clear purpose of websites.

They clear and obvious what the website is about.

The user doesn't have to spend a long time reading through tonnes of information to be able to work out what the content and purpose of the website is.

There should be minimal distractions.

So not too many adverts.

We've all been on websites where there's tonnes of adverts and little gifts flying around all over the place.

It really distracts you from actually the purpose of that website.

Not too many get garish colours as well.

Bright and distracting colours the colours are theme appropriate for the topic.

It should be a consistent layout and theme.

So the colours are broadly the same amongst all the pages and the layout is the same in all the pages.

So that may be as I talked of before how the you have the hyperlinks across the top of the page, maybe on every page you go to.

Those core key hyperlinks are in the same place in every page.

It should also consider the users readability, the usability, the accessibility as we explored in lesson two.

So all of those things, I think, make a good website design.

So let's have a look at what makes bad website design.

And of course that's the the obvious opposite to what we just talked about there.

And here you can see an example of maybe a not so great looking website because it's confusing navigation.

I mean, what on there as hyperlinks and what isn't the hyperlink, you can see some buttons where did they take you? Do they take you to another page? I don't know.

You can see that there are some hyperlinks that are really hidden by the background.

So really the whole thing is a bit confusing.

So the purpose of the website are confusing, it's not obvious what that website's about.

They have quite a lot of distractions going on too many kinds of banners.

Maybe the background mixes in too much with the, with the text and therefore the colours, maybe you could argue are garish and they're not really appropriate for the topic.

There's an inconsistency in layout and theme, and might not be too obvious from this image, but perhaps usability readability, accessibility have been considered in the design of the website.

So what I'd like you to do now, now we've worked out what the good features of a website design is I would like you to pick a website to review.

Now this can be any website you'd like, However, I would like to stay clear of maybe the more broadly international websites such as Google or YouTube or something like that, what would be really great if you picked websites that were perhaps more local or relevant to you in your area.

So you might pick your school's website or you might pick the website of a local sports club, for example.

So maybe pick one of those as an example, cause they're more likely to have a mix of maybe good features and features that you think maybe could be improved.

So head over to your worksheets, there's a list of criteria and your worksheets find your website.

And all you need to do is say yes or no in the right place.

And maybe just give a sentence, explain in your answer.

So once you've reviewed the website can you unpause the video and we'll continue.

So hopefully you've done that and you've come across a website that maybe did have a mix of maybe some good features and features that you think if you were designing the website maybe do a little bit differently.

So you've always got to keep those in mind and it's always really good practise to look at other people's websites before designing your own to pick out features that you think work really well but also to avoid the things that you think don't work really well.

So with that in mind, what I'd like you to do is I'd like you to design the second and third pages for the laser tag website.

Now you've already built a page one, which is the homepage.

So what I thought would be really good if you could maybe design two other pages for this website.

So each page that you designed should have a heading, a link to both other pages, an image, and a paragraph of text as a minimum.

So I'd like to think about what are the pages that will be great to have on the laser tag website.

For example, you might want to have one on maybe laser tag rules or maybe you might want something to do with maybe at other images.

It might be something to do with how to find them maybe some set of directions or contact, contact page or something like that.

But you be creative, you decide on the pages yourself.

Now when you're designing these pages what I'd like you to do, you've got a choice.

You can either do this electronically.

So there's space on your worksheet to do it.

If you want to use text boxes like I've done here.

Alternatively, if you want to do it on paper, that's absolutely fine as well.

Now, however, you're designing it whether or not that'd be electronically or on paper, I'd like you to make sure it's really nice and clear what you want on the page.

So that if in theory you were to give this to somebody else they will be able to design your site.

So you might put boxes in there, say, although you can see that rules of the park, you wouldn't see a box around that rules of that park, but I'm making it obvious that maybe I want a title there and you can see from annotation that it say heading one.

You can see that I've got my home and prices underneath of it just move the mouse here so you can see that.

My home and prices, and I've said that they are hyperlinks, but it's also an unordered list.

The next one, you must start to h3.

Then I've got an ordered list of the rules.

And then I'm also got an image.

And if you go and find an image maybe you could put where you got the image from.

But again, if you're doing it by hand, don't worry about you don't need to be the world's best artist.

You might just put a box there and you might say image of a circle with a cross to it or image of a traffic light or something like that.

You don't need to draw it but as long as it's really clear from your annotations.

So when you come to actually making this webpage then you can really easily just pick up your designs and recreate it exactly how you intended.

So what I'd like to do now is just pause this video now.

And like I say, either go and grab two bits of paper and you can draw them out.

Or if you want to do it on the worksheet just do it in your worksheet, using text boxes and arrows and shapes and things like that.

So pause the video, spend a little bit of time doing that and then unpause the video.

Once you have you two extra pages in place.

So hopefully by now you got your hand drawn designs ready, and you're now in a position where we actually start making these pages and bring them to life.

So I mentioned earlier on in the lesson, when we talked about the objectives something called saving things locally.

So let's explore what that means.

Now for example, when we're creating new web pages or images for example, what we can do is we can save them locally.

And what that means is we're saving them in the same folder structure as where our current websites are stored.

So that might be either on your computer or if your website is live on the internet, it'll be on a web server somewhere.

As opposed to when we were doing this before when we were linking to images and link into the pages we were linking to websites and files that were stored on an external web server a web server that we don't have access to.

So when we talk about the things to be installed locally we mean on the same kind of server, same computer or server to where the rest of the files are stored.

So if we compare local links to images with external links, let's just have a look.

So we've got online images here.

So this is how we did it last lesson.

So img src equals, and then we've got the full URL of the file.

So for example, you can see cnd.

pixabay.

com.

That's the URL of the server we're accessing and the taco.

png.

That's the actual file onsite inside that web server.

That's the one that we're accessing.

Whereas we do that locally can see image src equals pizza.

png.

We're not putting the URL.

We don't need to put the URL because we're just accessing the file.

And if we don't put the URL, the computer knows to look for it in the same folder structure of the page that's accessing it.

The same go on online links.

So a href that's going to take me to google.

co.

uk.

But if we've got a href equals index.

html that will look for a file that's stored locally called index.

html.

So when we're saving images into the website folder and displaying them so when we're saving them, give each file, so I'm going to ask you to do this in a moment just to get an image that we're going to then upload into our Repl.

it, which will be in the same folder structure as your webpage.

I'd like to save that there, and then the display on your website which I'm going to demonstrate in just a moment but when you save it, make sure you give the file a meaningful and simple file name.

One that's going to be easy to type out because if you find that image that you have access and permission to use the file name might be really, really long.

And what you don't want to do is have to type all that out into your HTML code.

So make sure it's a nice, easy name.

For example, I've got an image of space here so I'm going to upload it and that's called space.

jpeg.

And ensure that you're aware of the file extension, +whether or not that'd be a png or JPEG or GIF, cause that's important.

And you'll see why in a moment and then ensure that you definitely save the image into the same folder as your HTML files.

So now we know about saving things locally.

What I'd like you to do is to create your two new pages or maybe add some images.

So I'm going to give you a demonstration on how to do that.

So I'm going to head over to the webpage I started in less than two or lesson one sorry but developed in lesson two.

So you can see the page I've got here so you can see that's my homepage.

And there we go and that's my picture of space.

Now I'm just going to show you how to actually put that picture of space now I've got it in my code.

Let me just run that again.

So the space shouldn't be in there but I'm going to show you how to put that picture in.

So just to show you I've got a file there called space.

jpg.

So this is a local image even though it's stalled on Repl.

ti it's on the same folder structure as where my index HTML file is.

So if I wanted to upload that file all I need to do is add file.

And you can then find that file.

Sorry, you want to upload the file, not do that.

So I click on the three dots and you want to upload file not add file.

So you upload the file and then select it from your computer and it should appear there.

Now, if I wanted to put that picture in here, Wanting to do is I've put img just like we did last time.

src member, not scr src equals and this time I'm literally just going to write the name of the file that I can read there.

So remember it is case sensitive.

So you've got to make sure that it is exactly how you've written it and good practise really here would to be make sure your file names are all lower case.

And then that's a kind of a standard that you work by and you always know your files going to be lowercase.

So space.

html sorry, that's wrong, isn't it? Space.

jpg.

There we go.

Space dot jpg, close my quotation marks and close my tag.

So this is now a local image and it's going to, because I haven't put a HTTP RAF or told that a URL is going to know to look for that file.

So if I run that now, hopefully you'll see.

So look a bit of luck.

There we go.

That was my picture of space there.

And you'll see, it's really massive.

Cause that photo was actually taken on my mobile phone.

So if I want to just make it a bit smaller I can add some properties to it.

Do you remember? So we can do width equals no 200.

Run that again.

And there we go, I've got my local image.

So you can see here this, the image that I had earlier.

So img src.

You can see this one is not a local image because of how to reference it via hyperlink.

Well, I'm sorry.

I've had to reference it to a separate external webpage.

And whereas this one is just to a locally stored image.

Now obviously a picture of space is not relevant to my laser tag website.

So I'm just going to delete that for the time being, but that's how you insert a local link.

So let's just run that again just to get rid of it, to update it.

There we go.

Perfect.

Now the next thing I want to do is add a second page.

So what I need to do is at this point, I am just going to click on add file.

So I go add file.

It leaves a space there.

Now whatever your second page is going to be.

My second page was all to do with rules and rules of the park.

That's what I designed.

So I'm just going to type in rules.

Now, what's really important here is I finish it off with the right file type.

So I'm going to put html.

Oh, that's not spelled right, html.

And there we go.

So I've now got a H in my file.

Unfortunately, you don't have the core boilerplate code that you need in this site.

So can you remember from lesson one What was my boiler plate code? A boiler plate code is the code that every website must have by default.

No matter what website it is in the world, it has the same set of tags that you start working with and then anything you put in the body type that's completely different unique to your site.

However, every page on the internet has this boiler plate code.

So if you can't remember what that was all we need to do is go back to your index page here.

And then maybe you could copy and paste some of the code.

So for example, we needed the doc type.

We also needed the HTML, the head and the body.

So I'm just going to copy this and I'm going to paste it into my new page.

I'm going to change the title to the rules, perfect.

Now we've got our doc type.

We've got html head close you head.

We've got body.

So this isn't finished yet because I need to close some tags.

So which tags have I opened here that I also need to close? What do you think? Can you see any tags that have been opened that haven't been closed? So hopefully you've seen that the body tag hasn't been closed yet.

So I'm just going to go ahead and do that right now.

So forward slash body and also the HTML tag as well.

So let me just put that in the bottom HTML I'm done and this is my boiler plate code.

Now, once you've done that you might also straight away want to create your third page and just copy and paste that boilerplate code in.

And therefore you've got your three pages all kind of ready and set up to have more content into.

So once I got this boiler plate code I'm then ready to start writing my content.

When I click run on Rappler unfortunately it's only going to show us the homepage.

So why don't we straight away create a hyperlink to my new page? So in fact, just to show with my new page in my body I'm just going to type now h1 and then put in the rules.

So I'm going to go to my index page and where would be a good place for the hyperlinks.

Now I mentioned in a previous lesson we're going to really focus on the layout and look and feel of the website in lesson four onwards.

So the time being it's just about adding the content in there and we'll play around with the look and feel of it next lesson.

So I think a good place to have it will be underneath my title.

So I've got my laser tag title here.

So I've got h1 there and underneath it I'm going to put my hyperlinks.

So let's have this.

I decided on my designs.

I wanted this as an unordered list.

So let me do that unordered list.

I'm just going to put list item and I'm going to have a link to the rules.

That's just the list item.

That's the end of my list.

I'm not going to put my third second page in just yet my third page, sorry.

And I'm going to close my unordered list.

Let's just see what that looks like for the time being.

So run that.

Oh, I must spell the rules right.

Which you probably spotted.

Let me just run that again.

So I've got a bullet point here.

So that's the goal.

So how are we going to make that into a hyperlink? Well, what I do is before the rules cause I'll say texts, I would like to be a clickable link.

So I'm going to put in a page href equals.

Now this is a local link not an external one.

So I'm going to put my speech marks.

I'm going to link to the file that I want to link to.

So what's the name of the file that I want to link to? So hopefully you've worked out that it is rules.

html.

So I'm just going to type in rules.

html.

Close my speech marks, close my tag.

And then I'm also going to close the link there.

So it's just going to be the text, the rules.

So there we go.

So run that.

There we go.

So now my website has a hyperlink there.

When I click on it, it should take me to the rules page.

Let's have a look, see if it works.

Great and it does work.

There we go.

And it links back to the rules page.

Now, what was it? I wanted to go back to the homepage.

So again, just to demonstrates and to force home the points I'm going to go to the rules page and straight away, I'm going to do the same thing again.

So I'm going to make an unordered list.

My list item is going to be home.

Perfect and then that's going to be the end of my unordered list.

Close my tag, and then I'm going to turn this into a hyperlink.

So again, before the word home I'm going to put a href equals quotation mark and now what's the name of my homepage? What it might interest you to note that it's not home.

html it is index.

html.

Now it's quite common that index.

html is your homepage file name.

And the reason for that is because if you were to type in, for example, I don't know bbc.

co UK, if you don't specify which page you're looking for by default, your web browser is going to go to a server and look for the index.

html page.

So index.

html is the common name for a homepage.

So let's just check this work.

So it should be able to go between my pages now.

So I'm on my home page, click on the rules, there we go.

Take into the rule page and I've got to link the home.

So hopefully it'll take me back home and it does, perfect.

So now I've got two pages and they link between each other.

So my next job is to just go to my rules page and just add the content from my hand-drawn designs and then add another page as well.

So your three pages by the end of this lesson, you should have your three pages completed.

You should have images in there and you should have them linking between each of them.

So you can always go back and watch the video that I've just done.

Also, I'm just going to head back to the slides.

Also on your worksheet, I've created a cheat sheet for you.

So give you some prompts about some of the tags that we've been using throughout the last three lessons.

So that should help as well.

So take your time on it.

It's have fun with it.

Enjoy it, make these web pages your own because they are uniquely yours.

So let's say have fun with it.

Pause the video.

And when you completed all three pages then unpause the video and we'll continue.

So how did you get on with that? So if you've achieved all of that, you've done a fantastic job because we think back to lesson one, I gave you a website that you have to build upon and add more to.

But after that, you've now created two more pages.

You've got links between those pages.

You've got images that you have sourced.

So you've done an amazing job.

And what you've done is you've created things that are uniquely yours but you've taken something that was a webpage added more pages and therefore made an actual website.

So give yourself a big pat on the back, but before you can relax too much and congratulate yourself too much, what I'd like you to do is have a go at the end of lesson quiz.

The end of lesson quiz will give you an opportunity to reflect on some of the learning that we've done in the lesson but also maybe give you an opportunity to work out what areas you might want to look at in a bit more depth.

So have a go at that.

And then once you've done that, that is all for this lesson.

So big well done on this lesson.

I hope you've enjoyed it.

And I hope you're looking forward to developing your laser tag website even further.

So in lessons, one, two, three, we've looked to the HTML.

So next lesson, we're going to start looking at the CSS.

So actually looking at the styling of the website, creating the fonts, the colours and the appearance of the website.

So I hope you're come forward to that as much as I am.

I would really love to see the work that you've done.

I think it'll be great to see the laser tag pages that you've made.

So if you'd like to share those with us, please do that.

And please ask your parents or carer to share them with us on Instagram, Facebook, or Twitter tagging app out national on using the hashtag LearnWithOak.

So I'm looking forward to seeing you next lesson.

We'll look at the styling, so I'll see you then.

Bye.