Instructor: Now a website would be pretty boring
if it had no images on it, right?
So in this lesson, we're gonna learn how we can add images
to our website using the image element.
Now, this is what it looks like, it's pretty simple.
And you'll notice that similar to the anchor tag
or the anchor element that we learned about
in the last lesson, the main component of an image tag
that renders the image is this attribute,
which is called source or SRC.
And what this does is it tells the image element
what is the source of the image.
And that's why after the equal sign,
the value is going to be the location of the image.
One last thing to notice about the image tag
is unlike the anchor tag, it doesn't have a closing tag.
Instead, it is a self-closing tag,
also known as a void element.
Remember previously we learned about void elements,
where we learned that you can have
a horizontal rule element,
you can also have a break element.
And similarly, the image element is also a void element
that doesn't have a closing tag.
Because if you think about it,
what is the text content of an image?
It doesn't really make sense, right?
The main content is actually the image
that will be rendered from the source.
What does this look like?
Well, here's an example image element
where we've set the source to a real life live photo
on the internet.
Now when this code is rendered in a website,
it will display a random image.
So in this case, the random image I got was a forest.
And the reason why it's random
is because I'm getting these photos
from a source called picsum.photos.
So if you type this into your browser,
you should see a website.
And the idea is kind of like the Lorem Ipsum
for placeholder photos.
So when you don't really care what the photo is
but you need a photo on your website as you're creating it
in order to see what it would look like,
then you could use this website.
And you could put in the URL,
which is the standard one like here.
And then after a forward slash you can add in
the size of your image.
So in this case I'm saying I want a square
that is 200 pixels by 200 pixels.
It gives me a random image from its data bank,
for example in this case, of a forest.
The other attribute for a image tag that's super important
and one that you should always have is the alt attribute.
And the alt attribute stands for
alternative text description.
This is really important because people who are blind
or visually impaired,
they don't look at the internet the same way we do.
They often use something called a screen reader.
And what the screen reader's gonna do
when it hits an image is it will look at
the alternative text provided.
So in this case, I've provided that this is a forest
at sunset or sunrise, I'm not quite sure.
But that means that the person with visual impairment
will get this read out to them
and it'll help them understand what the website's all about.
So what is this process like?
As an example, I'm using the Silktide toolbar,
which is a Chrome browser extension,
to simulate what a person with visual impairment might hear
as they're browsing, in this case the BBC website.
As I click through next,
you can see it describes the different things
that are on screen.
And if I go over to the image,
it describes the image for me.
Voiceover: Item two, dolphin leaping from the sea image.
Instructor: So where is it getting this description from?
Well, if we right click on the image and inspect it,
and if we look for the image,
which I think should be down here,
you can see as I highlight different parts,
it shows me which part.
So in this element, I'm probably going to find an image
at the end right here.
And you can see the alt text saying,
"Dolphin leaping from the sea."
And that is what gets read out from the screen reader,
helping somebody with blindness be able to understand
what's on this website.
Now, if you wanna check out this tool,
it's a Chrome browser extension called Silktide
and it should be a free plugin,
but it might only work on Mac
or certain versions of Windows.
But, it's not so much about the tool
but I wanted to show you how important it is,
the alt text that you provide, for accessibility
and for disabled users browsing your website.
Now let's try and exercise
and create some images of our own.
Download this zip file from this current lesson,
and go ahead and drag it
into your web development project folder
and open it inside VS Code.
If you take a look inside the index.html,
you can see I've provided to you two image URL examples
that you can use.
And what we're aiming for is to find out
if you're a cat person or if you're a dog person.
I want you to create a h1 that says,
"I'm a cat person or I'm a dog person."
And also I want you to add a image element
straight afterwards.
Now, you can use the URL for the dog or for the cat.
It doesn't really matter at the end of the day
as long as you've understood how to create images.
That's the challenge.
Pause the video and give that a go.
All right, so personally, I'm more of a dog kind of person.
And if you're also a dog person
then you might see my little Easter egg
that I've buried in there.
So first, let's go ahead and create our h1.
And then we're going to create our image.
Remember, we create a image tag and it's a self-closing tag.
Then we add in our source as the image source
and we're going to put our URL right inside there.
Now, already, if we go ahead and show preview,
you can see our little dog digging in the sand.
Because if you've noticed, this is actually a GIF image.
GIF images work exactly the same way as normal images,
JPEGs or PNGs.
As long as you put it into the source,
it will be rendered in a website
and it will start animating all by itself,
and you get a cute little dog digging through the sand.
Now, if you're a cat person
then this is just a static JPEG because cats are more chill.
(Instructor laughing)
So, I hope you managed to get that part right.
But we haven't finished creating our image element yet.
Remember what I said about the alt tag.
It's a good idea to always add an alt tag
to describe our image when we can.
Now, there are some cases where you don't create an alt tag
because it's not really relevant
to somebody reading through the content of a website
and you can in fact leave it blank.
But in this case, it's very simple.
We've got a puppy who is digging through the sand.
And now when we take a look at our preview
then nothing visually for us changes,
but behind the scenes we will help
our visually impaired friends to be able to understand
our website just a little bit better.
So I hope you managed to achieve either of these goals.
And once you're ready, we can head over to the next lesson
where we got the final project
to create a birthday invite website
using all the skills that we've learned so far.
So for all of that and more, I'll see you there.