Voiceover: Welcome back.
In this video, I'm going to show you
how to include images in your webpage
and also what HTML attributes are.
So back to our webpage,
where we want to include some images.
But before we can do that, we need some images, right?
Okay so I will just head here to Google Chrome
and type html5,
'cause that's the language we're using.
And I like this one,
so I will save the image
right into our project folder
and call it logo.
So that's one of the images,
and beside that, I also want an image for the author.
Now you can, of course, use a photo of yourself,
but I will use this very handy website
called RandomUser,
where you can get random profile pictures.
So I will just save this one.
I will call it author.
Okay.
Also, down here,
I will just write the name of this gentleman
so I don't forget it.
Gonzales.
Okay so this is the author of our page.
Now, to put images on our webpage,
we use the img tag, which actually has no closing tag,
so it's just img.
Yeah, that's right, there are some HTML elements
which have only the opening tag and no closing tag,
and the img element is one of them.
Just going to close this, alright.
Now I wanna put the image
here between this first paragraph
and the secondary header.
So <img
and then close it.
And now we're gonna see element attributes
for the first time.
Attributes provide additional information about an element.
Because now, to indicate which image we want to display,
we use the source attribute, which is src.
Src.
And now, Brackets helps us again
and shows all the available files in our project folder.
And here, in this place, I want to see the logo image.
So I just choose this and hit enter.
And, here we go.
Now the same thing with the author.
Go down here and insert the other image.
Okay, <img src
and Brackets predicts what we wanna write,
so hit return and choose the author.
Then close it and now it should be there.
Here it is.
Now, besides the source attribute,
we should also give the img elements an alt attribute,
which is an alternative text for the image,
if the image cannot be displayed
in the browser for some reason.
I will just put here some text,
and the alt text should be some text
which describes the image.
In this case, I will type in
The HTML5 Logo,
and down here, I will say this is the
Author photo.
Now, as you can see,
this text doesn't display on the website.
It's really just in case the image
cannot be displayed for some reason.
So, this was images.
I think that now you know
how you can display images on your website.
It's really easy and straightforward.
Next up, we have a lecture about links.
See you there!