So let's now add the actual content,
text and images,
which the visitors of our website will be able to see.
And I'll start here in the header.
In that header,
If you recall that screenshot of the finished project,
I want to have a title,
and I want to have an image.
And this image,
which I already provided to you.
Now for the title,
I'll use the h1 element,
to mark up this main page title.
And it's up to you which title text you want to have here,
but on that screenshot from earlier,
I had HTML and CSS Basics Summary
so I will stick to that text.
Now, below that title,
we had an image on that screenshot.
And therefore,
I want to add an image here as well,
and you'll learn how that works.
There is the dedicated image element here,
which also happens to be a white element,
with no content but instead configured
through attributes only.
So we can add those attributes here
for this extra configuration
and for the image.
That's the src,
the source attribute which we need,
and the alt attribute,
which we typically want to add.
With the source attribute,
we set the image source,
so we point at the image file that should be embedded.
And with the alt attribute,
we provide an alternative text
which should be displayed if the image is not loaded
for some reason,
or if a blind user,
for example,
visits our page,
then that's the description of what's on the image.
So here for a source, I just want to point at
HTML, CSS, png.
And for alt,
I want to set an alternative description.
And since that image basically contains the
HTML5 and the CSS3 logo,
I just want to, well,
describe that or add that as a description.
So HTML and CSS logos,
because that's what's on the images.
Now this is our header content.
Now to preview it,
I'll right click on this index HTML file
and open it with that live server extension,
which manual installed in the last course section.
If you haven't installed it yet,
because you skipped that last section for whatever reason,
you can go to view extensions,
and their search for live server,
and then the live server extension by Ritwick Dey,
that's the extension you want to install.
And once you've got that installed,
you can right click on that file
and open it with live server.
And that will then give you that auto reloading version
of your page
which is served by that development server.
Now let me zoom in again a bit,
and with that,
that's what we got.
And that's the content we added thus far,
but of course it's not very pretty.
It's lacking all styling and they are for
in the next minutes,
we will add some styles here,
to make this look prettier and
to give the overall page a better look.