Now, a website would be pretty boring if it had no images on it, right?
So in this lesson we're going to learn how we can add images to our website using the image element.
Now this is what it looks like. <img src="url" />
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 learnt that you can have a horizontal rule
element, you can also have break elements,
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?
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 an 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 is going to 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 will 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.
"Item 2, Dolphin leaping from the sea - Image."
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 want to 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
an exercise and create some images of our own.
Download the zipped 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 an 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 an 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.
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've got the final project to create
a birthday invite website using all the skills that we've learned so far.
So all of that and more,
I'll see you there.