Lesson video

Hi, I'm Allen Heard and this is lesson two of six for developing for the web and in this one you'll be adding images to your web pages.

You will need to use a search facility today to search for some of you images, so you will need to ask permission from a parent or carer to take part in these activities.

You'll also need a pen and paper to circle some answers on the worksheets.

Remove all distractions that are nearby, turn off notifications on mobile phones if you've got them around.

And you can pause the video while you get settled and then we can make a start.

Okay, so in this lesson you'll display Images within a web page.

And you'll also follow a brief to create a web page with these images in it too.

So displaying images in HTML.

Well, first think about this.

They say a picture paints a thousand words.

Well can you imagine web pages without images in them? They'd be pretty boring to look at.

And also, how could you even convey proper information or even emotion, for instance, in the news, without at least supplying some images too.

They do allow us to convey information and illustrate a little bit more clearly content in ways that we wouldn't be able to just with words.

So how do we actually code those images in HTML? Well the following code, you can see there, would produce a basic web page.

Can you imagine what it might look like if you viewed it in your browser.

You can take a second and pause the video and have a look at the content and just have a think of how it might look, looking at the tags that you've used previously.

What it might look like in a web browser.

Okay, well we've got a H1 tag.

So hopefully you'll remember that that is a heading.

So the word skydiving would be in heading and then we have some paragraph text about skydivers leaping out the back of an aircraft.

And then we have an image source.

Now this is one you haven't seen before.

So img src is image source, so it's an image of whereabouts we're going to get it from or what it's called.

So in this instance it's called Skydivers.

jpg, we've set its width to 50%, we can use the width tab to change the measurements of our images.

So if you were to get an image off the internet, and it was quite large, then you could set the width to match the size you want it to appear in your web page.

We've also got some alt text there and we'll explain what that is in a little second.

So it'll probably look something like this.

So you can see we've got the heading, we've got the text and we've got the image.

Again, that image is quite large, so you'll be able to see who you could change that using the width tag.

So image tags mark a place in a document where the image is to be placed and the source attributes where it could be found, so you'd have to make sure with your images that if you're just putting the file name of the image as we have in this example here, with skydivers.

jpg, that that is in the same folder as where you HTML file is.

If it wasn't, then you'd have to include the whole path.

But for our examples, we're just going to put the images in the same folder.

We've also got the alt tag and I said I'd explain that for you.

The alt attribute is used to display some additional text.

So for accessibility reasons, let's say the image didn't load properly, then it would display that text instead.

So again in this instance, it would say skydivers leaping from the back of an aeroplane into the sky.

So you'd be able to read that text if the image didn't load properly.

In some browsers, if you hover over that image, it will also display that text on the screen as well as the image, but that is not in all browsers.

Okay, so this in task one, embedding an image.

Please ask a parent or carer permission before attempting this task as Oak National are not responsible for any third party content.

Okay so for this, you've created web page before, in lesson one.

And in this one you'll need to create a web page that includes the following.

Must have a coloured heading, suitable image and obviously adjusting the width.

So even if you don't need, specifically to adjust the width, I'd like you to use that tag so that you can use it appropriately in the right place.

And some paragraph text related to your image.

So you can use the information in the previous slide to guide you on that, if you've not remembered how to do that from previously.

And you'll need to remember how to save you web page appropriately, using the.

html extension.

So if you remember from before, we've been using a notepad, we don't just save as a text file.

We have to choose to put the HTML extension on the end.

You could pause the video and complete the task.

Don't forget to test your web page by opening a browser and make sure that the content displays as it should.

Okay, so here's just an example of one I created earlier.

I've got a coloured heading, which is what we needed to do and again you use the colour tag in lesson one.

We also have an image, in this one I used a hot air.

Image of hot air balloons.

And I've also provided a little bit of paragraph text, underneath, just about hot air balloons.

So quite basic, but it shows you how you could edit HTML page to include an image.

And hopefully you got something similar too.

So up until now, we've just used basic tags, just to get some information appearing in our web pages.

And we can see those results immediately, just to get us used to using it.

Kind of build up a little confidence.

There are some other housekeeping things that we need to include in our web pages to ensure that we're meeting and adhering to the latest HTML five standard.

So some general HTML housekeeping.

All HTML documents must start with the doctype html tag, with the exclamation mark and the opening and closing symbols too.

This declares the document type and it helps browsers display the information correctly and unlike other tags that we've used previously, this one doesn't need a closing tag.

Some other tags that we need, well we need a opening html and a closing html tag.

And we also need an opening body and a closing body tag.

The content you would produce would go in between the body tags.

The html one must come first, and the body tag would be nested beneath it as you can see in the example on the screen now.

So what I'd like you to do for this next task, Task two, is add this general housekeeping to your previous web page that you created in Task one, so the parts in blue on this screen are the pieces you need to add and your original content will stay in the middle where it is stated there.

So you can pause the video and complete the task.

Once again, don't forget to test your web page in a browser to make sure that the content is displaying properly.

Okay, so hopefully you added your housekeeping contents to your HTML file and it loaded appropriately as it should do.

Okay, so then we've got another task for you.

Okay, so Task three, this is where you'll need your pen and paper, of if you can circle it on your worksheet if you printed it off.

If not, you can just observe it on your screen here.

Can you spot what's gone wrong? There are three mistakes in this HTML code that you can see below that will result in the page not displaying as the designer intended.

Can you see what they are? You can pause the video and complete the task.

Okay, so the first one, the centre tag, closing centre tag was missing in the heading.

This would result in all of the content on the web page following that heading being centred until it was closed properly.

There was a missing paragraph tag for the opening part of the text and the image was also missing the file extension so it wouldn't know, or it wouldn't be able to find that file, so you would just be left with a blank placeholder where that image should be.

Hope you've enjoyed adding images to your web pages in this lesson.

As always, there is a quiz, so please ensure you complete the quiz at the end of this lesson.

We'd also love you to share your work with Oak National.

If you'd like to, please as your parent or carer to share your work in Instagram, Facebook or Twitter, tagging @OakNational and #LearnwithOak.

And I'll see you next time.