Lesson video

Hello, my name is Mrs. Holbrook, and welcome to Computing.

I'm so pleased you've decided to join me for the lesson today.

In this lesson we'll learn how to insert images into a webpage using HTML.

Welcome to today's lesson from the unit Developing for the Web.

This lesson is called Adding Images to a Webpage, and by the end of today's lesson, you'll be able to use images as part of a website.

Shall we make a start? Today's lesson has two key words.

Attribute.

Attribute, a word or phrase that can be used to describe an object such as a colour or size.

Pixels.

Pixels, the smallest unit of a digital image or screen display.

Look out for these keywords throughout today's lesson.

Today's lesson is split into two sections.

We'll start by inserting images using HTML, and then we'll move on to control image size.

Let's start by inserting images using HTML.

HTML works like the bricks of a website.

It acts as the building blocks and gives structure to the text and images of web pages, which HTML tags were used to create this webpage? Maybe pause the video whilst you have a think.

The heading tag was used for the heading "All about dogs." The paragraph tag was used to split text over multiple lines.

The unordered list tag was used to create the bulleted list.

Headings can be added to a webpage using the <h1> tag.

It automatically adds space before and after the text.

So you can see here around the text, this is a heading.

We have the <h1> tag.

Each <p> tag creates a new paragraph, adding space between them automatically.

So you can see here this code has three <p> tags, so it will have three paragraphs with a space in between each one.

The <ul> tag is used for creating a list of bullet points.

Each item in the list is placed inside an <li> tag.

So on line four we open the <ul> tag, unordered list.

On line five, we have our first list item.

So we open the <li> tag, we write the text we want to have, which in this case is "Apples." And then we close the <li> tag, and we repeat that for as many lines we want to have in the list.

At the end of the list, we close the <ul> tag.

Most tags come in pairs with an opening tag and a closing tag, which wrap around the text or other elements to format them.

The <img> tag can be used to add images to a webpage.

Imagine that a web developer wanted to add an image of a dog to a website about dog walking.

What steps could be needed? Maybe pause the video whilst you have a think.

The name of the image is very important as this will be used in the <img> tag.

The web developer has renamed the file to a sensible name that is easy to remember and use in the HTML code.

So the original name was reallydifficulttoremembername1632.

jpg.

The developer has renamed it to dog.

jpg, which is much easier to write and remember.

In HTML, attribute tags are used to give extra instructions to a browser so that the webpage can be displayed the way you want it.

To display an image on a webpage, the <img> tag can be used with a number of attributes, such as src, which stands for source, and alt, which stands for alt text.

There are several other attributes that can be used with the <img> tag.

Attributes must be placed within the tag that they are being used with.

So let's have a look at the structure of this.

So we open our <img> tag, so <img, and then we have our attribute, so src, the source of the file is equal to sourceImage.

jpg.

We then have alt, which is about the picture.

Notice, we then have the forward slash and the angle bracket to close the tag.

The source attribute is used to tell the webpage where to find the source image so that it can be inserted into the webpage.

Alex says "The exact file name along with its extension must be placed between the quotation marks." So you can see here the file name for this image is dog, and the extension is jpg, which stands for jpeg.

Remember that HTML only references the image files which are stored separately.

So inside my folder structure, I have my HTML page, which is called MySundayDogWalk.

html.

And then I have the images which I plan to use.

In order to make your links work correctly, everything needs to be in the same folder.

The <img> tag on line seven of this code has inserted the image.

The alt attribute describes the content of an image in text.

Alt text is short for alternative text.

Alternative text describes the image to users who can't see it.

This may be because they're visually impaired or because their computer hasn't loaded the image correctly.

Alt text can be read aloud by screen readers, which makes your webpage more accessible to a wider range of users.

Time to check your understanding.

True or false? The alt attribute provides the location where a browser can find the source image for a webpage.

Pause the video whilst you have a think.

That's right.

This is false.

The source attribute is used to tell the webpage where to find the source of the image.

The alt attribute is used for alt text.

This is the starter code for this website, oak.

link/my-sunday-dog-walk.

Take a few minutes to just have a look at the code.

Why do you think this image didn't load? Take a look closely at the code again.

The image source file name is incorrect.

It doesn't match the name of the jpeg.

So the name of the jpeg is dog.

jpg.

In the HTML code, we have the image source as dog1.

jpg, so they don't match.

You can see that if the image fails to load, the alt text is shown on the webpage.

The title attribute can be added so that extra information about the image is displayed when a user hovers the mouse over the image.

So in this case, the title, "My dog Floppy," has been added.

When the user hovers over the image, that text appears on the screen.

Unlike some pairs of text, the <img> tag closes with just the forward slash and the angle bracket.

You don't need to write </img> like you would for some other tags.

Time to check your understanding.

Which attribute provides additional information.

When a user hovers the mouse over the image? Is it A, source or src, B, alt, or alt, or C, title? Pause the video whilst you have a think.

Did you select C, title? Well done.

It is possible to use many different image formats with the <img> tag.

Popular image formats include JPG and PNGs.

These two formats strike a good balance between image quality, file size, and browser compatibility.

Okay, we are moving on to our first task of today's lesson, and you're doing a fantastic job so far.

So well done.

Open the starter code at oak.

link/seagulls.

Seagulls.

jpg has already been loaded into the code editor for you.

Use the <img> tag to add the image to the example webpage.

Use <title> to add a tool tip.

Use <alt> text to describe the image.

The seagulls image will be on the left hand side of the code editor.

You should see that there's a little image icon, and if you press it, you'll see any images that are attached to the project.

Pause the video here whilst you have a go at the activity.

Here's the solution for Task A.

So on line 7 we open the tag <img, so img, and then we state the source, src, is equal to seagulls.

jpg in quotation marks on line eight, we add the alt text, alt is equal to six seagulls wade in the shallows of the shoreline, again in quotation marks.

And then on line 9, we set the title, which is equal to Seagulls on the shoreline in quotation marks.

Remember to also close the tag with the forward slash and the angle bracket.

Okay, we are now moving on to the second part of today's lesson where we're going to control image size.

Izzy says, "I added this image to my webpage, but it doesn't fit right." Sam says, "How do you make an image bigger or smaller?" That's a really good question.

You can add images to a webpage using HTML.

If the image is too big or too small, it won't look right on your webpage.

Webpages need properly sized images to look good on different screens.

You can resize the images using HTML.

Image size is measured in pixels, so you can see this landscape picture, the width runs along the bottom and then the height goes up the side.

This image is 640 by 428.

That is 640 pixels wide and 428 pixels high.

You can set the number of pixels for the height and width of an image using the height and width attributes.

What is wrong with this image? Maybe pause the video whilst you have a think.

Ah, the image has been labelled incorrectly.

Width is the measurement that goes across while height goes up and down.

You can specify the height and width of an image using the height and width attributes in the <img> tag.

So here we have the same image, but with three different sets of sizes.

So the first one is 320 pixels by 214, whereas the largest one is 1,280 pixels by 856.

You can specify the height and width of an image using the height and width attributes in the <img> tag.

Let's have a look at an example in this code.

So on line 6, we are opening our <img tag like we have done before, and we're setting the source of the image.

On line 9 and 10 though, we have some new attributes.

So we have width is equal to 640 in quotation marks, and then height is equal to 428 in quotation marks.

Be careful when you resize images.

What do you think has happened here? The image has the wrong values for its height and width.

The image looks squashed and distorted.

This image has the correct height and width values, and it looks less distorted.

Another way to resize images is to use percentages.

We can set the width or height as a percentage, which means that the image will take up that percentage of the space available in its window.

So here, on line 9, we're setting the width to 50%.

We still use the quotation marks around the value.

If we set the width to 50%, the image will be half the width of its window.

Using percentages makes images more flexible and responsive, allowing them to adjust to different screen sizes automatically.

So for example, if someone was viewing your webpage on a mobile device compared to somebody viewing it on a laptop or computer.

Time to check your understanding.

What happens when you set an image's width to 50% in HTML? Is it A, the image becomes 50 pixels wide, B, the image takes up 50% of the window, or C, the image size stays the same? Pause the video whilst you have a think.

Did you select B? Well done.

If you set an image's width to 50% in HTML, the image takes up 50% of the window.

Even though you can resize images using the height and width attributes, it's best to use an image that is already the right size before adding it to your webpage.

This helps prevent the image becoming stretched or distorted on the webpage, making it look clearer and more professional.

Okay, we are moving on to our next set of tasks for today's lesson, and you're doing a fantastic job.

So well done.

Open the starter code at oak.

link/band-project.

For Part 1, add the correct image next to each heading using the <img> tag.

For Part 2, the drum kit image is too large.

Resize it using the width attribute to make it 25% of its original size.

For Part 3, the guitar image is too large.

Set the height to 190 pixels and the width to 320 pixels.

For Part 4, for each image, add an alt attribute that helps to describe what is in the image.

How did you get on? Great work.

Let's have a look at some sample answers together.

So for Part 2, the drum image was too large.

You were asked to resize it using the width attribute to make it 25% of its original size.

So you can see here on line 9, we have width is equal to 25%.

If you want to see the full working solution, you can go to oak.

link/band-project-solution1.

For Part 3, the guitar image was too large.

Set the height to 190 pixels and the width to 320 pixels.

Here's the sample code for this.

So on line 12 we have the image source, which is acoustic guitar, and then on line 13 and 14 we have the width and height in pixels.

Again, if you want to see the full solution, you can go to oak.

link/band-project-solution2 For Part 4, you were asked to add an alt attribute to each image that helps describe what is in the image.

So you can see here on line 6, 10, and 15, we've added in some alt text.

The example on line six says "A shiny chrome vintage microphone" Remember, it's important to give as much detail about the image as you can.

Again, if you want to see the full solution, you can go to oak.

link/band-project-solution3.

Okay, we've come to the end of today's lesson, and you've done a fantastic job, so well done.

Let's summarise what we've learned.

In this lesson, you learn how to add and manage images on a webpage using HTML and the <img> tag.

The alt attribute provides a text description for accessibility, and the title attribute adds a tool tip.

when hovering over an image.

src, or source, specifies the image file location.

Image size can be adjusted using the width and height attributes.

It's important to size images correctly to prevent stretching and distortion.

I hope you've enjoyed today's lesson, and I hope you'll join me again soon.

Bye.