-: One thing that our blog post is still missing right now
is some images.
And so let's now learn how to use the HTML image element.
So if we check out the demo page,
then we notice that here we have
two kind of important images.
So we have this big image here which kind of
illustrates the blog post.
And then we also have this photo here of the author.
And so let's now start by incorporating this image
here into our block.
So the images are of course in our project folder.
So they came with the starter files,
and the one that we are going to include here
is this post image.
So you see when you double click,
so when you open this file then VS Code
is actually able to display image files
without any problems.
So we want this image
right here after this author.
So basically the image serves as a barrier
between the beginning of the article
and the rest of the page.
So the top part.
Now, I think that here, actually this title here,
so this h2 element should be before the author.
Let's move that down here.
Right.
So first of course, like we have it here,
needs to come the actual title,
so the heading element,
and only then the author and then this image here.
Okay, but anyway, let's now include the img element.
So again, right here after this paragraph,
we want to include this image.
So just like any other element,
we start by writing it like this.
But now remember how I actually told you
in the first lecture of the section.
That the img element is a special element,
and that's because it doesn't have any content,
and therefore it also doesn't have a closing tack.
Instead what we do,
is to simply add this slash here
at the very end of the element.
Now you might wonder
if we don't specify any content here for this image element,
then how will HTML know which element it should display?
And that is an excellent question,
which brings us to something new in HTML,
which are attributes.
So attributes are basically pieces of data
which we can use to describe elements.
So there are lots of different attributes in HTML,
and one of them is the source attribute.
And so that's the one we are interested in right now.
So source goes like this,
src,
and then an equal.
And then we need double quotes, like this.
And then here we can simply specify the name of the image.
So remember that it's post-img.jpg.
And so we just write
post-
img,
and we could even allow VS Code to auto complete
that code for us.
Like by clicking here or going down.
And actually that didn't work,
but if we just hit enter here,
then that would work just fine.
So again, we can write it manually or just use
VS Codes auto complete functionality.
And that's actually it.
That's the very basics that we need
in order to display an image.
So if we reload this now,
you will see that indeed here it is.
Great.
So again, let's just quickly recap.
We did not specify the image using some content
in this element.
Instead, what we needed to do was to specify an attribute.
And in this case, it's the source attribute.
And remember that an attribute is basically
like a piece of data.
So piece of information describing this element.
So here we are describing the source from which
the browser should basically read the image.
All right.
Now besides the source attribute
there are other attributes that we can specify for images.
And one that we should never skip is the alt attribute.
So we write it like this
and alt stands for alternative text.
So basically what we need to specify here
is some text that should describe what the image is about.
And this is very important for various reasons.
One of them is that it will allow search engines
such as Google Chrome,
to actually know what is in the image
because without this description
search engines don't really have a know of knowing
what the image is actually about.
And second and probably even more important
is that by specifying the description of the image
we can also allow blind people to use a website.
So users who use a screen reader will not see the image
but instead they will have the screen reader
read the alternative text, so the description to them.
So never skip this attribute.
It's very important to always write a good description.
So here, let's say
that this image here is HTML code
on a screen.
Okay? Now this will not visually change actually
what we see here.
So let's reload
unless the image for some reason can not be found.
So let's say that we forgot the G here, for example.
And so now this image path is completely wrong.
So if we now reload,
then the browser will not be able to find the image.
But instead what it will do is to then
print our description here.
So that's the HTML code on a screen that we gave it here.
Okay?
So that is actually another use case of the alt text.
Let's put it back.
And we are actually still not done.
So we can specify some more attributes here
which are quite important in this case.
So the ones that I mean are
the image width and the image height.
So right now this image here is a little bit too big.
And so let's specify it's width to 500 pixels.
And don't worry yet about what these 500 pixels mean
or exactly what a pixel is.
We will talk more about that once we reach the CSS section.
But for now, let's just write width and set it to 500,
and then let's see.
Okay, so now it's scaled the image to a width of 500,
and it automatically also maintains
the aspect ratio of the of the image.
All right, but we can also specify that.
So besides the width we can also specify the height,
which should be 200.
And I know that because I know the the image dimensions.
So if we open this up again,
you see here that the original image is a thousand by 400.
And so if I specified the width as 500,
which is just half of a thousand,
then the height must also be half of 400 here.
So that would be 200.
Okay.
So that should now look the same and it does.
But of course if I wanted,
I could make it a square, for example.
Which would then completely distort the image just
as we see here.
Of course, we don't want that.
So put it back and here we go.
Great.
So this is how we include images into an HTML document.
And this one here was only the first one that we wanted.
The other image is this author image right here
above this author paragraph right here.
So the image that we want now is this one, Laura Jones.
And we want it with a height and a width of 50 pixels.
Okay, so I have another challenge for you.
And what I want you to do this time,
is to include this image that I just showed you
on your own right here in this place.
Okay?
So take a minute and post a video
and include this image with 50 by 50 pixels,
and then I'll be back here in a minute with the solution.
All right.
So hopefully you got some more practice there.
So img and I will immediately start writing the attributes,
and I will then in the end, close the element.
So here we want Laura Jones,
and now I will just hit enter or return
to auto complete the file name here.
And then the old text,
let's say that this is a
headshot
of Laura Jones,
and not Jonas
and a height.
And here again, we could now hit enter
or return to auto complete this.
But I actually want you to write these attributes
by yourself by hand so that they get into your head.
So that's really important.
So height and a width
of
50.
And that's it.
So let's close the element,
give it a safe,
and then Prettier does this nice job
of putting each of these attributes here in one line,
which makes it really easy to see.
Actually, let's close down our side bar here.
And let's see.
And here we go.
So here is that picture of Laura Jones now.
Okay, well done.
Nice progress.
So now we know how images work
and how attributes work as well.
And actually we can specify attributes also
on some other elements in HTML.
And one where this is very important
is actually the HTML element itself.
So here in this HTML element,
we should specify the language that we use for this webpage.
So for this document, and we can do that by saying lang.
So specifying the lang attribute.
And then in this case, since it is English,
we can set it to en.
But for other languages there are other codes.
For example, for German is probably de,
or for Portuguese it should be pt.
And if you have any other language,
you can just easily find out the code by Googling.
Another thing that we can, and actually should do,
which needs attributes,
is to specify the character set
that is used in the document.
So that is something that goes into the head,
because it is a piece of information that describes
the document.
So here we need another new element.
This is simply called meta, which stands for meta data.
So meta data means data about the data.
And so here we are describing that the character set
which we describe by this attribute.
So we say that the character set should be UTF
8,
which basically is all the simple characters that we use
in the English language.
Now this one here is another of these elements
that doesn't have a closing tack.
And so we just close it like this.
Okay?
Now I'm not spending a whole lot of time
on these elements and on this kind of stuff,
because later when you actually build your own pages
then this will all happen automatically.
Okay?
So this was just to show you
that this is just another way or another place
in which we need some attributes
where we then need to specify a value for it.
All right.
So UTF 8 here is the value that we specified
for this character set attribute.
Okay.
And yeah, I think that's it for this lecture.
So see you in the next one.