Now, adding this favicon
was the first thing I wanted to do.
Now there's one last topic I wanna cover
and that's about the paths to the different files
which we have here in our links,
but also for example in index.html
here for the image element.
These paths here which we have here
are actually so-called relative paths,
which means they're seen relative from the current file on.
So since index and full-week.html
both sit in the main project folder,
the paths basically are the same.
We always say for this image here, for example,
that we dive into the images folder,
which sits next to the index.html file.
The images folder is right next to it.
And then there separated by a slash inside of that folder
it's this image which we wanna display.
Now, when using an actual server
like the development server with the live server extension
or after deploying our website, for example, to Netlify,
we also have an alternative to use relative paths.
Instead of specifying a relative path,
we could also specify an absolute path
and this is for example done by adding a slash
at the beginning here, which was not there before
here for this trophy image.
If I do this here on the development server,
you see nothing changed.
The image is still displayed
because the absolute path informs the server
that this should always be seen
from the root folder that's being served,
which of course is the same folder
as the index.html file is in.
So therefore here, it doesn't make a difference.
It can be useful to use absolute paths
instead of relative paths though
if you have HTML files in nested folders.
If I, for example, add a new folder here
and name it full-week,
and I move full-week.html into that folder,
and then maybe I rename it to index.html
so that would be basically use the folder name
as the main indicator of the content that's in it,
and then we name all our HTML files equally,
but they're stored in different folders,
then we would have the problem that this index.html file
can still be reached because the server will by default
serve an index.html file
if you try to find a file in the full-week folder.
Hence here, if I try to load /full-week as a path
without .html on my local development server,
this file is still found and displayed,
but as you see, the styles are missing.
And the styles are missing
because the paths to the style files are incorrect
inside of this index.html file, inside of full-week,
because they're relative.
And that's where absolute paths could be helpful.
Here, instead of pointing at a styles folder,
which is expected next to this HTML file,
which is not the case anymore,
by adding a slash in front of this,
we say start at the root level of this project folder again,
so in this case the overall root project folder,
and then look for a styles folder there,
which of course does exist in that root level.
So now we can switch this all to absolute paths
in all these places, also for the images,
so for the icon here,
and also for this link here
where we wanna load the starting page again.
Instead of looking for a file named index.html
in this full-week folder, which would be the wrong file,
we can point at just slash
and this tells the server that we wanna load
the main index.html file
in the main root project folder again,
which is this index.html file here.
So we can do that here in the full-week.html page.
And on index.html on the starting page,
I just wanna change that link at the bottom
and not look for a full-week.html file
next to this root index.html file,
because such a file doesn't exist anymore.
Instead here, I wanna dive into the full-week.html folder,
and I could point at the index.html file here,
or since servers look automatically
for such an index.html file,
I can just point at the folder name like this basically.
With that, I'm still using some relative paths here
in the root index.html file,
but that's okay because there they still work.
We could change them to absolute paths though.
But in the nested index.html file, which is in a subfolder,
we have to switch to these absolute paths
to ensure that these resources are still all found.
And with that, if we reload, this all works again,
but now we leveraged those absolute paths.
And that's not a must do.
There was nothing wrong with that,
but it is helpful if your page grows, your website grows,
and you have multiple HTML files
and you wanna start organizing those files
into subfolders as well.
With absolute paths, that's easy to do.
And knowing about the difference
between relative and absolute paths
is important as a web developer anyways.
So here you go, and that's that for the end of this section.
Now we're ready to learn more about HTML and CSS
and how we write proper websites.