Lesson video

Hello and welcome to lesson two of our HTML and CSS unit of work.

I'm Ben, your computing teacher.

Now this lesson is all to do with adding and building upon that laser tag website that you started in lesson one.

So in this lesson, we're going to be adding some images and some links to that website as well.

So all you'll need for this lesson is a computer and a web browser, and we'll also be using the website Repl.

it.

So if you create an account at last lesson, just go ahead and log into that.

If you haven't created an account yet, it'd be absolutely great if you could do that.

And if you're under 13, you will have to ask the permission of your parents and carers before doing that.

So if you can clear away any distractions that you might have, and then when you're ready, let's get started.

Okay, so specifically in this lesson, you will know what is meant by the term accessibility.

And we're also going to extend our HTML page to include images and hyperlinks using the tag that you can see on the screen there.

Okay, so we're going to explore that a little bit later on in this lesson, but let's start off by looking at that term accessibility, okay.

So first things first, I'd like to pause the video now and really think if you can give me some kind of definition of what is meant by the term accessibility, okay.

So if you can pause the video now and then perhaps unpause when you have an answer in your mind.

Okay, so what did you come up with? Let's see what I came up with, okay.

So accessibility refer to having the ability to access something quite simply.

So how does that relate to IT? How does that relate to this topic? Where users of IT systems, it's fair to say, you can have a wide range of needs conditions or disabilities.

So when we're designing any product for a computer, that's going to require some kind of human interaction is really important that we do our best to make sure that wherever we're producing is accessible as possible.

Therefore, what we mean by that, it come by access by all the different users that we expect to be using our system, okay.

Regardless of what their needs are, okay.

So how does that relate to websites? Well, what I'd like to do is I'd like to think about anything you could do with a website that might support a specific type of impairment, okay.

Somebody with a visual impairment.

So think about that for a moment and think about when you design your website, what could you do to help support learn people who are using your website that do have visual impairments, okay.

So pause the video now and then unpause again when you have a set of answers.

Okay, so what kind of things did you come up with? Now, we're not going to go through all the answers now because I'm going to get you to do an exercise in just a moment that requires you to explore this activity in a little bit more detail, but perhaps you came up with making sure that you use some nice clear fonts.

So not those fonts that look like handwriting, let's say, or maybe you make sure that the fonts are a reasonable size, not too small or too dark for example.

So if you came up with those kinds of things, you're definitely thinking along the right kind of lines, okay.

So what I'd like to do now is I'd like to head over to task one on your worksheets, and there's a short video that I'd like to watch about the design considerations to make your website as accessible as possible.

It's really interesting video, and it really kind of explores a different types of users, but more importantly, the key things that you can do, the things that you can action when designing your website to make sure that your website is as accessible as possible.

So what I'd like to do now is pause the video head over to your worksheet where you'll find a hyperlink or you find some link and you'll find embedded in your worksheets, a video where you can wash it out and just learn a little bit more about the accessibility options available to us when we're designing your website.

Okay, so pause the video, and I'll be here when you get back.

Okay, so how did you find that video? I found that video really fascinating, and it really opened my eyes to the kind of things that I need to think about when I'm designing my website.

Okay, so hopefully it gave you that same kind of impression.

So I'd like to keep those ideas in your mind throughout the whole set of,the rest of this unit, sorry, while she'll design your website, to make sure that you do include things that make your website as accessible as possible, okay.

So the first thing we're going to do now to move on with our laser tag website is to find that an appropriate image, that's going to go alongside that patient we made, okay.

So, finding an image for laser tag.

Now there are millions of images of pretty much anything you can think of on the internet from cats to architecture.

So in this task, we're going to find a suitable image online for your website, and get it source as well.

Which, and what I mean by source, is a URL for the image, and insert it into your webpage.

Let me just break down that paragraph a little bit more.

When we say find a suitable image, we must find an image that's going to be related to our laser tag website.

So there's no point finding an image of a cat, for example, because that was not an any way in relation to the laser tag company, okay.

So we need to find something that's going to be relevant and suitable site that page, okay.

So that's the first thing, and then once we've done that, we must find it source.

So we're going to use an image, we must make sure we get it sourced so we can embed it into our webpage, but don't worry.

I'm going to demonstrate that in just a moment.

Before I go ahead and look for an image that I think might be appropriate.

I think it's really important that we discuss making sure that we're using images that we have permission to do so.

now, if you haven't yet covered this in any of your other units, then go ahead and look at your impact of technology where we explore this concept, and particularly the Copyright Designs and Patents Act in a little bit more detail, okay.

But what I wanted to point out here, so if we go to Google and search some images.

Well, Google is a search engine.

So what it's doing is it's finding all the images that have in some way in relation to your search term.

But what is not doing is showing us image that we have permission to use.

It's just showing you anything it can find.

So we want to use images on our website, we must make sure that we're using images that we know that we're allowed to use.

Now you do need to get the permission of the person who took the image, but luckily there's a licence out there where rather than those authors having to constantly deal with requests for people for the image, what they do is say you apply something called a Creative Commons Licence, which outlines all the different terms that they, on the which they'll are allowing you to use their image.

Okay, so the best way to do that, I'm going to give you a demonstration about how to find that an image that you have permission to do so, to use, sorry, and also how to insert it in your website, okay.

So I'm going to go to, I've Googled it and I've gone to Google, as you can see here, and I've searched for Creative Common search, okay.

That's all you need to search for, okay.

And there's also a link on your worksheets that will take you directly to this page as well, so once I've gone to that, now, this is really great.

Because it will have the image I searched for.

It will show me the conditions in which I can use all the images, but then it will show you a little bit more about how I need to credit the author of the image, okay.

So I've got a search box here, so I'm going to use the search term that I think I will be appropriate.

So let's start off with something nice and obvious.

This is for laser tag website, so I'm simply just going to type in laser tag, okay.

So I'm going to pipe in a laser tag, you see I've already done this.

So laser tag, and then I'm going to click search.

Now what this doing is show me all the images that I do have permission to use, okay.

I'm not sure on that building that says Megan on it, but you know, what's really, I think this one would be a really good one to use.

So you can see that a person there with his laser tag gun, and he looks like he's having fun in some kind of laser tag kind of environment, maybe even that one as well.

So but it really is up to you, whichever image that you think is the most appropriate.

But I really like this one so I'm going to click on it.

Now, so first of all, that's the that I want to use, but it also tells me a little bit more about the licenced behind this image.

So it tells me that I do need to credit the author, it's for noncommercial uses only.

So if I want to make money out of also that image, then I can't use it.

And I'm not allowed to make any of, I'm allowed to make some adaptations to it, okay.

Now, because it's, I've got to credit the author, there's some information about the author which I can use.

So I'm going to come back to that in a moment, okay.

So if I want to use this image, what I need to do is get the image URL, okay, so that's the web address of the image.

So when you get an image like this, what you can do is you can right click over it, and there's an option of using Google Chrome to copy image address.

So I'm going to just click on that.

Now, just to prove that this is just the image once I've done that, I'm going to open up a new tab here, and I'm just going to paste the image and hopefully it should show me.

And there we go, I can see the image now.

So it shows me that it's just copying the actual image itself.

So how do we actually get it into our website? So this is the point where I need you to open up your Repl.

it from last lesson.

If you haven't saved your work from last lesson don't worry, on your worksheet there's a link that will take you to a page that looks just like mine.

So I'm just going to go to mine now.

So it will take you to the page that I created from last lesson.

And if I click run on here, you can see there's my plane websites, there you go.

Now at this moment onwards for the rest of the lessons, we're going to build upon this.

So it'd be really great if you could at this point, get a Repl.

it account and therefore you can constantly save your work and build upon all of these great things that you're doing every week, okay.

So if you do follow that link, you need to fork this project in login and what you can do on the dropdown at the top here, we can click on fork and what it does, it just makes a copy of this project.

So it then becomes your own, okay? So I'll fork this project, until you do that by the way, it won't be yours, it won't save it under your account, but once you fork it, I'll save it under your account.

Okay, so let's just wait for this to load here.

I'm not going to put in this image.

So I think probably for now, and we can always change this later on.

For now, I want to put this image maybe at the bottom of all my text, okay.

So I'm just waiting for this to run.

Okay, I'm just going to pause this for a second.

Okay, so there you can see that.

Now I stopped that, because I would put that why and I need to get rid of it.

Okay, I'll start again.

So three, two, one.

Okay, so there you can see there's my laser tag website.

Now I need to start again, 'cause the why is still there.

Here we go, so I'm start again.

So three, two, one.

Okay, so there you can see, there's my laser tag website, which is now yours, 'cause you fork the project.

So before I copied my image source, so what I need to do is insert this into my website, and I'd like to put it maybe at the bottom of all the information, okay.

Now at this point we don't need to worry about where the image is going to be located necessarily because in future lessons, we're really going to look at embedding something called CSS.

So we're going to explore that later on, but that'll help us determine the look and feel of it.

For now we're just putting in the content, okay? So underneath my, you can see my list there, before the end of the body tag, what I'm going to do is I'm just going to put in here, I'm going to do putting it an image.

Now, the time that we need to put in an image is image source, so what we do is put img for image, and then src for source, okay? Now having taught us in the classroom, a common mistake that people do is they put scr rather than src, okay? So make sure that you put img, src.

And again, there's prompts on your worksheet there, so you don't need to like memorise or be frantically scribbling down what I'm typing in here, you can just look at your worksheet when you get to it, okay.

So image scr, and then a couple of equals in there, and then I need to put in speech marks, okay? I need to put that link, okay.

Now I copied that, so all I need to do is paste it in, okay.

Now an image tag is one of those rare ones that actually doesn't have a closing tag.

So what I mean by that is the fact that I don't then need to do this, I don't need to put the open tag and then a four slash img like we did on the previous ones, we don't need to do that, okay.

So what we do is just put img, src, and then we just put in the source, the URL, and then if I hit run, what it should do is put the image into my website.

And there you go, you can see there's my image being put in, perfect, okay.

So what I'd like to do now, so I'm going to head back over to the slides, is I would like you to go to task two.

I would like to find an appropriate image that you have permission to use, okay.

Now I've just remembered I haven't done since, I'm going to go back and suddenly do something that's really important, okay? So I'm going to go back to this.

And remember when I looked at my CC search, remember it said, if I'm going to use this image, I must attribute the author, and I didn't do that, okay.

So luckily, well, what I could do, is I could just copy and paste this.

So in fact, I am just going to copy and paste this.

So I was going to copy that, okay.

And in my Repl.

it underneath my image, I'm just going to start a new paragraph.

So I'm just going to put my P type for paragraph.

I'm just going to paste that information, and then I'm going to close my paragraph tag, okay.

And that's going to run that show it works.

There we go, and there you go.

You see, I'm now crediting the author by doing that, yeah there we go, that's perfect.

You may have noticed that on the CC search website, there is actually a thing called HTML there.

Now what we could do is we could if we wanted to copy and paste all of that into our website, and that would be fine to do if you wanted to, it kind of makes my code a little bit messy because there's an awful lot of stuff in there.

You see the way it's got lots of stuff in there that we don't necessarily want.

So just show you what that looks like.

So there we go, so it was actually got, is that how it has put the image and the licencing information in there, okay.

Now I don't particularly want to do that, you don't need to do that, and just by creating that paragraph tag we still, just get rid of all of this, I did, delete that, and get rid of this.

I still was crediting the author, so it's absolutely fine to do it just the way I did it.

But if he did want to just simply use the HTML code, you could do, but you might require to unpack some of the stuff that you don't want.

So let me just run that to make sure I've got the image exactly how I wanted it.

Perfect, right, okay.

So now's the time that I'd like to pause the video and head over to task two on your worksheet and follow the instructions.

So that requires you to get an appropriate image that you have permission to use.

And it also requires you to copy the image address and insert it using HTML, using that img scr tag into your website, okay.

Now what's really important is that you do ask permission, sorry, from your parents and care before attempting this task.

Because if you go search for our images on the internet using Creative Commons, then just remind you that Oak National Academy are not responsible for any third-party content that you might come across, okay? So you can pause the video, have fun with that, get a good image into your website.

And once you've done that, unpause the video and we'll continue.

Okay, so how do you get some with that? So hopefully by now, you've got a really appropriate image.

That's suitable for your laser tag website, and that's all embedded inside your website, which is great.

Okay, so we're well on the road to actually building our website as you can see now, okay.

Now you might have noticed that once you put in the image, it makes it it's original size, and if that's being taken by even a mobile phone, the original size of that will be really quite big, and it'll look quite big on your page.

So what we can do is we can explore adding some extra attributes to our image.

So what we mean by that is you've already put the image source, so the img scr.

So you put in the src, which is a source of the image, but we can also play around some extra properties, such as height and width, okay.

Now it's worth noting, if we do use heightened width, if we use both of those properties, there's a risk that we might squish a photo or maybe make it too wide or too narrow or something like that, or to kind of squished up at the top.

So it's equivalent to using, if you were putting an image in, for example a slide deck, and you've got those little dots on the other side of the image.

If we use the corner ones that keeps the kind of the image properties, to keep the image to scale.

But if we use the ones in the middle or the top or the bottom, that kind of squishes it or makes it too wide.

Now we use the both height and width, that's the equivalent to using those side dots or the middle ones that top on the side.

But if we just use the width, for example, or that's the equivalent to using the corner one.

So we make sure we keep that image ratio correct, okay.

So we use a width one, it will automatically resize the height appropriately as well, okay.

So I'm going to demonstrate that in just a moment, okay.

There's another attribute that we can use as well called the alt tag, okay.

Now the alt attributes, I suppose, I mean alternative, is for people who use screen readers, okay.

Now if the alt tag is not there, screen readers will leave out the full source, okay? So we'll read out the full source.

So imagine if you've got, when we talked about accessibility, screen readers are there where they'll read the code in the background and read out the website.

Now, like it mentioned there, if there's no alt tag, a screen reader will say, rather than say what's in alt tag, it will read out the full URL.

And you imagine if you're reliant on that screen reader, that could be quite frustrating, okay? So in terms of accessibility, putting in an alt tag tells the screen reader what to say if people visually can't see the image, okay.

So what we're going to do, is we're going to have a go at putting in both of those, I'll demonstrate that, but then you're going to have a go yourself, okay.

So I'm just going to head right back over to my Repl.

it, okay? So here's my website.

Now, if I'm going to add extra properties to my image tag, there's the image img, there's the source there.

So at the end of the source, I'm then going to try and change the width, okay? So width equals a, I'm just going to put in 200, let's say, okay.

So let's run that and see what happens.

And there we go, and it's made my images right width, but you notice the way the Heights is kept in the same kind of ratio.

And just to prove that it can go a bit crazy if you do change the height as well, I'm just going to type in height, and put in 300 there, okay.

And you can see it's made it a bit squished up, okay? And it doesn't go a bit strange, isn't it? Okay, so I'm going to get rid of that.

Now, I noticed that, I'm going to pause for a second.

Three, two, one.

I noticed that I made a slight mistake, but luckily my HTML kind of compensated my mistake, because it's not string, I don't actually need to put quotation marks around my 200.

You see it didn't make a lot of differences, still did it, but it's not great practise to do that.

So, because it's number, I don't leave my quotation marks.

Okay, so width equals 200, okay? And I'm now going to put in my alt tag, so alt equals and I'm going to put in my description for my screen reader.

So I'm going to say, I'll say young man playing laser tag.

Doesn't need to be in quotation marks because it is a string, okay, perfect.

So let's just make sure that work so I don't ruined anything.

There we go, okay, perfect, right.

So all I'd like you to do now is this won't take you long at all, just a couple of minutes.

Is I would like you to go to task three on your worksheet and complete the task, which is to change the properties.

So I add an alt tag and also maybe change the width of your image, okay? So pause the video and then unpause it when you're ready.

Okay, so hopefully by now, you've got to a point where you've got an image and you've changed the properties.

So now it's time to start looking at some hyperlinks.

Now, as we mentioned in last lesson, HTML stands a HyperText Markup Language.

Now this text is called hypertext because the text is extended to have the ability to be clicked on it and linked to somewhere else, hence why we have hyperlinks.

So the format of a hyperlink is, we use a tag a and then href.

So a means is going to be a link, and then href is where does it need to be a link to, so where's the URL in which you want to link it to, okay? So you can see on my screen here, I've got a href equals, and this is just an example.

In quotation marks you put the link to the file that you want to link to, and that might be a file on your web server, but it might also be a file on another website that you want to link to, okay.

So you put your URL there, and then what you do is you put in this link text, okay.

Now the link text is what the user's going to be able to click on, okay? So often you might see that as something that's either maybe a button for example, or it might be something that you've all seen those links that are blue underlined, okay.

So that will be the link tag when something's blue underlined, that means it's a hyperlink, okay? So whatever that's link tag would appear there, and then it will be blue underlined, when I click on it, it will go to wherever that link URL is, okay.

And then we tell it when to finish the link by closing the tag.

Unlike the image where we didn't have a closing tag, we do have a closing type for HTML, okay.

For href, sorry, for our hyperlinks.

So we close that by using the chevrons forward slash and then an a, okay? So here's a real life example, okay? If I did a href equals https://www.

google.

co.

uk click here to visit Google, and then I close my tag.

So just for a second, think about what would that actually look like on a screen? Okay, so hopefully you've got that on your mind.

What actually it would look like this, okay.

You would have that underlined there, okay.

Click here to visit Google, and when I click on that, it would take me to the URL that's been linked inside the tag there, okay.

We can also use an image as a hyperlink.

So just let me just get back a second, rather than putting link text in here, what we can just put in there is put image scr or our image in there, okay? So we wrap our image around the hyperlink tags so that when we click on an image it takes us somewhere as well, okay? So let's have a look at this example at the bottom here.

So a href equals your link, and we just as we did in the last slide, but rather than putting some link text in there, what we're doing is putting our image in there.

And once we've put our image text in there, we then make sure that we close the hyperlink by a forward slash and then an a.

So let me demonstrate all of this before I let you have a go at this yourself, okay? So I'm just going to put in a hyperlink, now what I might want to do is I might want to, in fact, let me put the Google link in here, it's really necessarily appropriate to put it in this website, but just to show you it working.

So I'm going to put an a href equals, and then I'm going to put my hyperlink to Google.

And so https://www.

google.

co.

ku, okay? And then close that tag, and then I need to put the words in that I want to, so I'm just going to put in just Google, okay? And then I need to close my talk like this, and I'll show you that should underneath my image, put in just a word, Google.

And you can see that if you click on it, it would take you to Google, okay.

Now there we go, so that's that one.

Now if I wanted to make the image a hyperlink, what I'm going to do, I thought it would be a good idea is I'm going to get my image, I'm going to get the URL for this site.

I'm going to copy and paste it, and I'm going to put it around here.

So I'm going to do it, before the image tag a href equals colon, so I'm going to put my speech mark, sorry, and then I'm going to paste the URL there.

Close my speech mark, close my tag.

And I'm going to find out where my image tag closes, which is there, and then close my tag there like this, okay.

So I'm going to run this, okay, it doesn't look like much change, but now when I move my mouse over the image, you can see the actually it makes into a hyperlink.

Now, unfortunately I think possibly the way that, oh there we go, I've clicked on it, there we go, and it takes me, you can see it taking me to that site, okay.

So if I'm just going to run my site again, hopefully if I also click on the Google one, okay.

It's blocking me from going to Google, but that's just made my website work.

It's my internet that's stopping me from doing that.

But you can see the link does actually work.

And if you want to touch, you prove that 100%, what you can do is you can click on the three dots there and you can download this whole file, okay? And when you download that zip, it will show you on your computer.

So if I'm going to do that, I'll show you what that does.

So I'm going to click on download zip, okay? Let me just open my file.

Okay, so I've opened this file that's on my computer.

So that downloaded it as a zip file, I unzipped it and it created an HTML file.

So this is what it looked like on my computer.

So I click on that now, hopefully that will work now.

So click on Google, give it a second.

And there we go, it's open Google.

And if I go back, okay, I can click on the image, and the image will also take me to the original page, with a bit of a look at, it does, there we go, okay.

You can see it's loaded up, okay, perfect.

So just in case you think, if you leave Repl.

it, and you've linked to something and it isn't quite working, but you've done all the code exactly right.

I do recommend that you click on those three arrows and you download the file to your computer, and just check that it was in your computer, 'cause it might be something with the website that's stopping you, this Repl.

it website that stopping you from doing that, okay.

So what I'd like to do now is have a go at doing that, so I would like you to do two things.

I'd like to put a hyperlink into something.

It might be good if you could do something that might be relevant to laser tag, and it might be a hyperlink to maybe a video or something where he could go and watch people playing laser tag or learn about it or something like that, okay.

That might be a good idea to link to, but also see if you can also make the image into a link as well, okay.

So pause the video now, have a go at doing those two things.

And when you've done that, unpause the video.

Okay, so how did you get on with that? Now, you've done both those things, and what I mean by that is that you've put in an image, you change the properties, you've also put in a hyperlink, you've also added a hyperlink to an image, you've done an absolutely fantastic job.

And in the last two lessons, you've done an awful lot of things with HTML, you built a website, you've learned about the boiler plate code that comes with every website, you put in the appropriate tags, and now we've learned how to do images and hyperlinks as well, so that's absolutely fantastic, okay.

So, because you're so good at this now, what I'd like to do is have a go at spotting the errors, okay? So I've got five tags here that you can see on the screen.

Maybe what I'd like to do is just pause the video for a moment and see if you can go through each one and turn and see if you can work out what's wrong with each one, because there is something wrong with each one.

There's no trick questions here, and there are mistakes in everyone.

Okay, so pause the video, look through all five and see if you can spot the errors.

Okay, so I'm taking these unpause if you've got all the errors, so let's go through and see if you got them right, okay.

So, okay, so let's go through each one and tell, so what was wrong with the first one, okay? Now hopefully you spotted that it was, it was image src, not scr that is mentioned there, okay? So perfect.

No, there's also another problem with that, in terms of the, maybe that's not the full hyperlink there, either should be maybe a http colon slash slash, otherwise that might not work, okay? The next one, a href http Google.

co.

ku And then what was wrong with this one? Hopefully spotted that the closing tag should have had the forward slash at the end of it to show there's a closing tag and not an opening tag, okay.

So that would be a problem, you do need the full slush before the a.

All right, what about this one? Okay, I kind of gave the game away a little bit before, but either way, we are missing the HTTP, but also we're missing the quotation marks here, okay.

We've got four quotation marks around that because it is a string.

Next one then, img href.

Okay what the problem with this one? Well, the correct tag is a href, not img href, okay? Because img is an image, okay, whereas the hyperlink is a, okay.

And then finally, img src image source goes here.

Whats the problem? The width was zero, okay.

If you have a width of zero, you're not going to see any image whatsoever, okay.

So that's a problem with image, okay.

So if you've got all five, well done, you can give yourself a pat on the back, okay.

So that is all for this lesson, so that is all for this lesson, I really hope you've enjoyed it, and I really hope that you've got this really good sense of achievement that you've built a website that's including some fundamental elements that all websites have, okay.

So the potential of what you're now able to achieve should be starting to be realised, okay.

So what we're going to do next lesson is have a little project that you can complete, that's going to combine all their skills, but it's also going to build upon this laser tag website that you've been building, okay.

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

I would love to see the work that you've created so far, I'd love to see the images that you've picked and the website that websites that you've made, okay? So if you'd like to share those with us, please do ask your parents or care to share your work on Instagram, Facebook or Twitter tagging @OakNational and using the hashtag #LearnwithOak, okay? So I'm looking forward to seeing you next lesson, so I'll see then.