Throughout this course,
we're going to build a lot of websites and we're going to
build a lot of websites that have more content and look a
bit nicer than this first basic website.
But there is one type of content which we can add to this
website as well,
which will immediately make it look better because it makes
almost all pages look better. And that would be an image.
Images are extremely important.
If you have a look at some random website,
there is a high chance that it contains a lot of images
because humans like images,
having images on your site makes your site more relatable
and makes it almost automatically look better and more
appealing.
So I want to add an image here as well.
Let's say an image of a trophy since this is still a website
about my daily challenge and attached.
I have an example image for you,
which you can simply download and then drag into your
project folder.
I did it as well, and hence,
I have to challenge his trophy JPEG file this image in my
project folder now in my website folder.
And now we can embed that image into our page.
I go to my body because this will clearly be a visible
content element.
And in there we can add a brand new HTML element,
which is responsible for displaying images.
And the name of that element is well image. However,
not image written like this,
but I am G so shortened version of image.
So to say the interesting thing about image is that just
like link, it's a Wyatt element.
So it doesn't have a closing tag.
It just has an opening tag because just like link image will
have no content between the opening and closing tax.
And hence it has no closing tag.
You could think that image maybe where it's like this,
and you specify the name or the path of your image here
between the opening and closing tags,
but that's simply not how it works.
So instead just like link,
you configure it with attributes only.
And the image element now needs a SRC, a source attribute,
which specifies the,
the path to the image that should be embedded.
Why SRC and not HRF.
It's just what it is.
The image elements simply expects a SRC attribute.
And whilst this might sound very random and hard to
remember,
it's only a couple of elements which have these link
attributes anyways,
and you'll be able to keep in mind which one wants ref and
which one wants source as you gain more and more experience
as a web developer, the image element wants a SRC attribute,
but then just like ref it takes a relative path to local
file or also a URL to an image stored on some other web
server.
But here it's a local file sitting in the same folder as the
index HTML file and Dale for just as we did it for daily
challenge CSS on this link here for this image,
we can now simply repeat that image file name.
And dad will embed this image in displays off the document.
Now, if we saved it and reload, the images here,
it's missing all the styling we might want,
but it is here before we style it, though.
I want to talk about another, a key attribute,
which you should always add when you add an image and that's
the alt attribute. That's an important one.
The alt attribute should specify some texts,
which is shown if loading the image fails,
which could happen because maybe you're fetching it from
some other server,
which is offline or because maybe your server fails to
deliver it for some reason.
But in addition, it's all the,
not just a fallback text showing if the image is not loaded,
but it's also a text that will be read out to people using a
screen reader,
because if a blind person visits your website,
having a image isn't too useful to them.
But having some text that tells them what would be on that
image is, so here,
I'll say a trophy describing what's on the image.
And of course you can add any description of your choice.
So adding this all to attribute won't change what we see on
the screen,
but it's some important piece of extra information,
which you should add for all your image elements.