Lesson video

Hi, everyone.

My name is Mrs. Welsh.

Today, we're gonna be learning about images and links in HTML.

Don't worry if this is completely new to you, I'll be here to guide you through each step.

So let's go.

Welcome to today's lesson from the unit HTML Programming Project.

This lesson is called Images and Links.

By the end of today's lesson, you'll be able to build an accessible webpage that includes images and connects to other webpages.

Before we begin, let's have a look at some of the keywords that will be used in today's lesson.

First, we have accessibility.

This is the consideration of design so that what is created is usable by everybody.

Attribute, a characteristic or feature of an object that can be changed or adjusted.

Hyperlink, a clickable link that takes the user to a specific location.

We'll be using these words throughout the lesson, so make sure that you keep those in mind.

So let's get started.

During today's lesson, we are going to look at the following.

We are going to look at why webpages need to be accessible.

We are going to be able to describe how images are added to webpage.

And we are gonna have a go at creating an accessible webpage that's linked to other webpages.

So first of all, we're gonna have a look at why we need to make webpages accessible.

So let's begin.

To start with, we're gonna have a look at web accessibility.

This ensures that websites can be used by everyone.

Accessibility needs can relate to vision, hearing, motor function, and cognitive processes.

So let's have a look at what that means.

It's important to make sure that we adapt websites so people with different needs can use them.

Here are some ways to make websites more accessible.

If we have a look at vision, screen readers and high contrast visuals can help people with sight issues see the content more clearly.

Hearing, including features like captions, having transcripts available, and utilising sign language can help people with hearing difficulties access certain content.

Motor functions, avoiding long lists of links which take time when people have to use the tab key to navigate a webpage.

And cognitive processing, utilising clear language, simple navigation, and a consistent layout can help everyone understand and use a website more easily.

So these are just some of the things that we can think about when designing a webpage to make sure that everybody is able to use it and also interact with it efficiently and effectively.

Why do we need to make websites accessible? Websites need to be accessible so people with different needs can use them.

Also, websites need to be accessible to comply with the UK's Equality Act from 2010.

So let's have a look at some websites and their potential accessibility issues.

You can see here we've got a website that's promoting a new product.

A visually impaired user would have difficulty utilising this online shop because the images do not have a description.

The solution is to add alternative text or alt text to all the images so a screen reader is able to describe them.

If we have a look at an issue for somebody who has limited mobility, they are unable to navigate the website because it does not support keyboard controls.

When we mean it supports keyboard controls, it means we can use things like the tab key to work our way through the webpage.

The solution is to ensure that all our website elements can be accessed using a keyboard.

Another potential web accessibility issue is a hearing impaired user is going to have difficulty hearing any audio that may be on the webpage.

To help them access this content, we can add captions to a video and also provide transcripts.

So let's have a go and see what we can recall from the last few slides.

Some of the following things listed below should be considered when making a website accessible.

Identify the correct things to consider.

So what we need to do is read through all the listed things below and sort them into things to consider and not related to accessibility.

If you need to pause the video now to allow you to read through the slide and complete the activity, do so now.

Okay, should we have a look and see how we did? So what we should consider when making a website accessible is visual, hearing, motor function, cognitive processing.

Things that are not related to accessibility are browser type, internet speed, device types, and age.

How did we do? Did we split those out correctly? If you did, well done.

You've recalled everything that we've spoken about so far really well.

So let's move on.

So let's take a look at this following website.

Have a think about what web accessibility issues does this website have.

If you need to pause the video so you can review the webpage, please do so now.

What did you get? Should we take a look and see if what you thought about is the same as what we have thought about? So let's starting off.

We have got a really poor colour contrast.

That pink on pink is really, really hard to read.

We have a vague text link, so the click me text link, that's gonna make it really hard for people who are using screen readers to understand the purpose of the button.

Because it says click me, it's not telling you anything about where it's going.

The image in the middle does not have any alt text.

So again, a screen reader is not gonna be able to pick up what that image is, and again, make it harder for somebody using the screen reader to access this webpage.

And the last one, this webpage does not have any keyboard navigation support.

So that means people who struggle to use a mouse and therefore use keyboards to tab through a website are not gonna be able to use this website very easily.

So how did we do? Did we get all those? Were there other things that you thought of as well? If so, make sure you share them with the rest of your class.

So moving on.

Let's have a look at a quick question.

Which of the following features should websites have to improve accessibility? A, websites should be fast for high-speed internet users.

B, websites should include alt text for images.

C, websites should use only dark backgrounds with bright text.

D, websites should work only on the latest web browsers.

If you need to pause the slide so you can read through and answer, do so now.

Okay, let's see what we got.

What do you think the answer was? The answer is B, website should include alt text for images.

Did you remember that? Remember, adding alt text means that screen readers will be able to describe the image to somebody who is visually impaired.

So if you got that, well done.

So if we have a look at all the others, remember, A, accessibility is about inclusion, not about how fast your internet goes.

B, alt text helps visually impaired users understand images.

C, accessibility is about functionality, not just the aesthetics.

And D, accessibility ensures compatibility across devices and browsers.

So can understand now why only B was the right answer there? That is the one that is focused on making the website more accessible for all users.

Okay, moving on.

So we're gonna have a look at task A now.

On the screen, we have got another website.

And what I would like you to do is identify three accessibility issues on that webpage, and suggest potential improvements.

Okay, if you need to pause the slide so you can do the activity, do so now.

Okay, so let's go through it.

Let's see what we got.

So starting at the top again, we have another poor colour contrast.

Again, that sort of dark grey on dark grey is quite challenging to read.

A solution to that is we could use a lighter background colour, okay? So it doesn't necessarily have to be white, but if we used a lighter background colour, it would mean that text colour would be far more visible.

Again, the click here is a very unclear link text.

So again, those using screen readers would have difficulty knowing what they are clicking.

What we could do to solve this is use a more descriptive text for the button.

The third one, there is no alt text for the image.

So what we can do is make sure we add meaningful alt text to the images when we write the HTML code.

So how did you do? Did you get any different ones? Did you add in that maybe they need to include keyboard navigation to allow people with mobility issues? Did you talk about maybe if there was video on here, it would have to include some captions or maybe a transcript.

If you also had those in, well done.

You've recalled all the information really well.

So let's move on.

So what we're gonna look at now is how images are added into webpages.

So when we use HTML, we are able to add images to a webpage.

To do this, what we have to do is make sure we have images saved in a location that the webpage can access.

Now, this can be either on the computer itself, so locally stored, or it can be on the internet, so hosted online.

What you have to make sure though is, and the final one, you need to make sure that you have the right to use images before you include them on your website.

So you can't just go and download an image that you've just found through a search, you need to make sure that you have checked the permissions to use it.

So if we have a look at the different ways we can store images, the first one is if we are going to store our images locally, what we need to do is make sure they are in a dedicated image folder.

That image folder must be located inside the website folder as each image will have a local file path for its location on the computer.

This is what we use when we're going to add it to a webpage.

So for example, down the bottom, we have got a folder structure.

So we have got our website folder.

Inside our website folder, we have got our first webpage, and we know it's a webpage because it ends with.

html.

We have then got a folder called images.

And inside that folder, we have got two images, one called sneaker.

jpg and coat.

jpg.

So when we come to create our webpage and add our images in, we need to make sure we know the specific location for each of our images.

And that's going to be in the website folder in the images folder.

And then we have the name of the image that we are going to include.

If we are going to use online storage for our images, we must make sure the web address for each image is reachable and available for the webpage to display the image.

If the web address is invalid or the server hosting the image is down, the image won't appear, okay? So that's our two different ways we can store our images.

One is using an online storage system, but making sure that the images are, it says they're reachable and available.

And if we are using a local storage, we need to make sure that all the images are stored within the same folder within the website folder itself.

So moving on to how we actually insert images into our webpage.

HTML has a tag for inserting images.

The image is a self-closing tag, so therefore, you do not need to include a closing tag as we do with, say, heading one and paragraph.

We have to close it with the forward slash tag.

The image tag includes attributes such as source, so that's the location of the image, alternate text, so that's our description of our image, and width and height.

So again, we can decide how big we want the image to display on the webpage.

As it says there, the attributes tell the web browser information about the image.

So as it says here, the alternative text attribute is really important for web accessibility as that provides a description of the image, which would get picked up by screen readers.

The height and width attributes do not need to be considered for accessibility purposes, but more to do with how you would like it to be displayed on your webpage.

And down the bottom, here's an example of how we would use the image tag.

So we have our image tag open, we have got SRC, which is source, and this is where we tell the web browser where the image is located.

And for this example, the image is just the image.

jpg.

We have then got alt for our alternative text.

And here we would add a description of the image.

And we have got an example of how we would do height and width.

And height and width are defined by pixel size.

So that's why we have the px at the end of the height and the width.

So how do we use this within a webpage? So what we have to do is decide where our image is going to be located.

So if we have a look at a snippet of this html code, we have got our primary storage webpage.

This has got our heading 2 for our primary storage.

We've then got a paragraph tag with wider computers have primary storage, and then we can see we have got the image tag included.

And we can see the source has been changed to a main memory.

So that is the name of the image that we are using.

We have got the alternative text which says it's a picture of main memory, and we have got height and width values as well.

So the image is going to be 320 high by 320 wide.

And then after that, we have got another paragraph of text.

So as it says there, the image tag sits within the content of the webpage.

And our webpage will look something like this, where we have got our primary storage heading, we have got our first paragraph, we have got our image included within the webpage.

So the image has been displayed using the defined height and width, and the image is placed within the body of the webpage.

And then underneath that, we have got the second paragraph of text.

So let's have a go at a question.

Let's see what we can remember.

So where should you store the images that you will use on a website? A, in any random folder on your computer, B, in a folder called images, C, inside an image folder within the same folder as your HTML file, D, only on an external image hosting website.

Okay, if you need to pause the video to read through the question, answer it, do so now.

Okay, let's see how we did.

Did you get C, inside an image folder within the same folder as your HTML file? Did you get that right? If so, well done, and let's have a go at another one.

So this time what I want you to do is find the errors in the HTML code.

So you need to go through each of those HTML code lines and find where the error is.

So again, if you need to pause the video so you can go through each line carefully, do so now.

Okay, let's have a look at how we did.

Did we spot the errors? So on the first one, the spelling of source was scr, it should be src.

The second one, the quote marks are missing around the web address.

So we should have quote marks around theory_memory.

html.

On C, the closing tag for the list item is missing.

And D, the image tag does not sit within the paragraph tag.

So how did we do? Did we get those right? Did you rewrite the code? Was that easier? If you rewrote the code, brilliant.

It's really good practise as well.

Okay, so let's move on.

So now we're gonna have a look at task B.

What you need to do is open the starter HTML file, oak.

link/revision-site.

Go to the theory_memory webpage.

And you need to add relevant images to your webpage using the image tag.

You need to make sure you include alternative text, include height and width, and then run your HTML code to check that the image has displayed correctly.

Okay, if you need to pause the video so you can read through the task, do so now.

Okay, so should we have a look at what this website might look like? So what we've got is our big title right at the top of memory and storage.

We have then got our unordered list of the topic that are included within this unit.

We have then got our secondary or heading to, so our primary storage.

We have got our paragraph.

We have then got our picture included, and then we've got the paragraph underneath the image.

So the website displays the original content, our relevant image is displayed on the webpage.

And if for example the image was not working, the alt text would be displayed.

So did we manage to get the image inserted? Did you use this image or did you use one of the other ones? There were quite a few in the image gallery to pick from.

So as long as you included a primary storage image, well done.

So moving on.

What we're gonna have a look at now is how to create accessible webpages that are linked.

So a hyperlink is a clickable part of a webpage that links different pages together.

It lets users move between content on the internet and making navigation easier and also improving accessibility.

Hyperlinks are created using the a or the anchor tag.

The anchor tag has attribute href to specify the location.

You can use text or an image as the clickable element for the link.

And again, to ensure that the text you use is descriptive to enhance accessibility.

So what we mean there is that the hyperlink has a name that tells you where it is taking you.

So if we have a look at how we set up a hyperlink in HTML, so we use our anchor or a tag followed on by the href.

We then have the web address of the content.

And then we have the text that the link is going to sit behind.

And we have the closing tag.

So we have got a, which is for to define our anchor.

We have got our href, which is the attribute to specify the location.

We have then got the web address, which is the location.

We then have some text, which in this case is memory and storage.

And this is the text that's going to become the clickable element.

And then we have our closing tag.

So what this would look like on our webpage.

So we can see down at the bottom of this slide, we've got theory topics and we have got a paragraph of text.

And we can see that memory and storage is now blue and underlined.

This means this text has now become a link and it can be clicked and it will take you to the theory memory webpage.

So we can use hyperlinks to link different things.

We can use a hyperlink to a place on the same webpage.

So if you've ever been on a website where it allows you to go back to the top or you can jump to a different location on the same webpage, we can do that.

Links to another webpage on the same website, that's what we've just looked at.

Or it could link to another website or a file.

So let's have a look at this question.

The correct html tag for creating a hyperlink is, true or false.

So which one do you think it is? Pause the video if you need to to read through the HTML and the question again.

Which one do you think it is? It is false.

Okay? Remember, the correct tag for hyperlink is a, so a for anchor.

Okay? So if you've got that right, well done.

So moving on.

So if we are going to link a webpage on the same website, we will use the anchor tag, include the location, and have it sitting on the descriptive text.

So if we're gonna link to an external website, we have to include the attribute target as this specifies how the website is going to open.

Blank opens the website in a new web browser tab.

And we can see at the bottom an example.

So if we include the anchor tag, the external website for Oak National Academy, the target is blank, so it will open in a new web browser tab.

And we've got the text Oak National Academy, which will become the clickable text.

And then we have the closing tag.

So moving on.

Using an image to make a clickable link works in the same way as if we were making it a clickable text link.

The hyperlink goes first.

So you can see in the example we've got the anchor tag and the location of the webpage we are going to be linking, followed by the image tag.

And again, this uses the same format as we've already discussed, where we've got the image tag, the source, the image name, the alt text, and the height and the width.

And then at the end of all that, we've got the closing tag for the link.

And this will make the picture a clickable link.

And finally, linking to a place on the same webpage.

To do this, we need to use an attribute called id, and this helps us to identify the location.

We have a look at the example, we can see at the top of our unordered list, we have got a link included that says the location is section one.

If we then look further down the code, we can see that we have used the ID tag and called this section, section one.

So now, in our unordered list, primary storage will be a clickable link.

And when you click onto that, it will send you down to the part of the page where the heading primary storage starts.

So it means that instead of having to scroll through a really long webpage, it means we can jump to the content we want to read.

So let's have a look at some questions.

Why do HTML tags need to be closed? What happens when an attribute is misspelt, for example, if we used scr instead of src? And why do we use descriptive link text? If you need to pause the video to read through the questions and formulate your answers, do so now.

Okay, so shall we have a look and see what we've got? So the first one, why do html tags need to be closed? A closing tag defines where an element ends, which helps maintain the structure and the layout of the webpage.

Did we get that one right? So if you end up leaving a tag, say, open, it might actually confuse the web browser when it tries to run your html code.

Question two, what happens when an attribute is misspelt, for example, scr instead of src? the answer is the web browser will not display the image, and it will probably show your alt text instead.

And question three, why do we use descriptive link text? We use it to ensure that hyperlinks are accessible to screen readers.

So not just having a click me, but actually a useful link that the screen reader will be able to read and give the user an understanding of where they're going to be navigating to.

So how did we do? Did we get those right? If we did, that's really good.

We had got some really good understanding about how html tags are working.

So let's move on.

So task C.

So what you're going to do is open up the starter file, and you're going to create some hyperlinks to navigate around the website.

You're going to create a link to the index page, to the theory webpage.

You're gonna create a link from the theory webpage, to the index webpage, and then you're going to link the theory webpage to an external revision resource.

And then question three, you're going to create a webpage for a topic from the GCSE Computer science specification and link the theory webpage to a section within the same webpage.

So there's quite a lot going on there.

So if you need to pause the video to read through the task and then complete it, please do so.

So how did we do? Did we get through all of those? There's quite a lot going on there, particularly in question three.

So let's have a look.

So what we should have is when we open up the index.

html page, we needed to include a hyperlink to the theory webpage.

So on the code on the screen, you can see that underneath topics, we can see the added HTML tag to the theory memory page.

So did we get that one right? On the new page that's been created, which the memory and storage page, we have got a hyperlink to a section of the theory webpage, which is section one.

And we have got the unique identifier to tell us where section one is on the webpage.

And at the bottom, we have included a hyperlink back to the index page.

And again, all of the hyperlinks we've included are using descriptive texts so we know where we are going.

So for example, for that link at the bottom where we're sending them back to the index webpage, the link is called back to index page, so we know where we're going.

So how did we do with that one? Did we manage to get all the links in? Are they all working? If they're not working, maybe go back and check your spelling.

It's really easy to mistype some of the tags or some of the webpage names.

If you've got it all working really, well done, because it is quite fiddly when you first start doing HTML.

So just going over what we've looked at today.

Web accessibility is essential for inclusivity and usability.

You use the image tag with source and alt attributes to insert images.

Images need to have descriptive alt text for accessibility.

Hyperlinks allow users to navigate between content on the web.

The anchor tag and the href attributes are used for linking.

Links with descriptive text make navigation easier for all users.

So thank you for joining me for the lesson on images and links.

I hope from this you've got a good understanding about how to insert images into your HTML code and also add hyperlinks.

So hopefully I will see you next lesson.

Thank you once again.

Well done with today, and I'll see you next time.