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 web page that includes images and connects to other web pages.

Before we begin, let's have a look at some of the key words 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're going to look at why web pages need to be accessible.

We're going to be able to describe how images are added to web pages and we're gonna have a go at creating an accessible web page that's linked to other web pages.

So, first of all, we're gonna have a look at why we need to make web pages 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 utilizing 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 web page.

And cognitive processing, utilizing clear language, simple navigation, and 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 web page 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 utilizing 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 weren't able to navigate the website because it does not support keyboard controls.

What we mean it supports keyboard controls, it means we can use things like the TAB key to work our way through the web page.

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 web page.

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've thought about is the same as what we've thought about? So, let's start in goth.

We have got a really poor core 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 going to 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 therefor use keyboards to tab through a website, are not going to 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.

Websites 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.

Okay, so, we 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've got.

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

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

A solution to that is we could use a lighter background color, okay? So, it doesn't necessarily have to be white but if we used a lighter background color it would mean that text color 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's 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 guess 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 added 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 could 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 have 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 it's location on the computer.

And this is what we use when 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 and online storage system, but making sure that the images are, 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 onto 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, we have a look at a snippet of this HTML code.

We have got our primary storage webpage.

This has got our heading two for our primary storage.

We have then got a paragraph tag with, why do computers have primary storage? And then we can see, we have got the image tag included.

And we 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 and 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 practice 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, shall 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 topics that are included within this unit.

We have then got our secondary or heading two.

So, our Primary storage.

We have got our paragraph.

We've 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 attributes 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 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 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 allowed 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 we can 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 a hyperlink is A.

So, A for anchor, okay? So, if you 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's 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.

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 misspelled, for example, if 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 attribute is misspelled, 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.

You have 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 going to 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 GCSC 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? It was 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 need 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 text, 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 attribute 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.