[Music] hello and welcome hi I'm Dave this tutorial is part of a beginners HTML

series I'll be using the Chrome web browser the visual studio code editor and the
live server extension for visual studio code to view the web page there are links
to these tools starter code files and all resources in the description below
let's move on to what else might go inside of our head element and remember
everything inside of the head element is not seen on the web page and with that
said I've dragged the visual studio code window to a little smaller size on the
left and chrome to a little smaller size on the right but I'm just going to
expand Visual Studio code for now because anything we change inside of the head
element will not be seen on the web page anyway so I'll click the expand button
and we'll just see our code now I had mentioned that we could store more metadata
inside of the head element and that is definitely some of what we see so let's
add a couple of typical meta tags that have metadata that you would commonly see
the first being for the author of the page so we'll say name the attribute name
is equal to author because that's what type of meta tag this will be and then
we'll have a Content attribute and this is where you can put your name I'll put
my name for now since I'm the author of the page and then let's add a another
meta tag and let's give it a name as well and here we'll put a description this
will describe the web page in a little bit more detail than possibly the title
would so here we can put more of a sentence and once again we need the content
attribute to do that let's say this page contains all the things I am learning
how if I could spell how to and it looks like I'm extending the page so in Visual
Studio code I'm going to press alt Z in Windows to make sure the text continues
to wrap and then I'll say all the things I am or I am learning how to create as I
learn HTML there we go now after that of course you still need to close the meta
tag and contrl S to save and again I got the words to wrap let's go to the view
menu if you scroll all the way down you can see word wrap is alt Z it may be
something different if you're on Mac or Linux so you might want to check the view
menu under word wrap if you want your words to wrap and not just extend forever
to the right here now we've added more description about our page now this
information could be picked up in a search engine and or some other service that
wants to learn more about our web page however let's go ahead and put something
in the head where we will notice the change when we go back to the browser and
that is to add what is called a fave icon and we can do that with a link element
let me use lower case once again and inside of the link element we'll have
several attributes one is the Reel which stands for relate or relation how does
this relate to the web page and here we're going to provide an icon after that we
need an href this refers back to HTML that stands for hyper text this is a
hypertext reference so we're referencing a resource and here we're going to
reference a file that I have now put inside of our folder that is called HTML
5.png and if I click the file explorer over here you can see I've now added an
image file that's a PNG file HTML 5.png and you can download this image from the
resources and you can see it's a small little icon for the HTML 5 logo so I'll
close that I'm going to click the file browser to have that disappear again so we
see this now we have one more attribute to add and that is the type what type of
resource is this and here we'll say image/ x- icon and now we can save this and
I'm going to go ahead and minimize the code window and now if we look at our web
page in the browser notice we have an icon up here my first web page now has our
little fave icon beside the title and that's what we added here in the head by
adding the fave icon with a link element now we won't add any more here today but
this is the same area where we would link to CSS files and even JavaScript files
and other resources that we pull in from the web so the head is a very important
part of the page even though we don't see the content of the head inside the
body of the page and I said we wouldn't link to anything else here today but
since we do have this default CSS to make our page a dark mode if you added this
and once again this was optional if you prefer the white page with dark text you
didn't need to add this and we had this style element here to hold the CSS in the
head but that's not usually where you would find it for a page so let's go ahead
and do that I'll expand Visual Studio code again click the file explorer and over
here inside the file tree I want to create a new file I'm going to call this
main.css and I have an empty CSS file all we need to do now is go back to the
index select the CSS that we put here for the HTML and the body not the style
tags just select the CSS that's between the style Tags I'm going to press CR X to
cut it out of the page go to the CSS file and contrl V to paste it into the CSS
file contrl s to save that file now back in the HTML I'm going to remove the
style element and I'm going to add another link and here for the real not ref but
real we have a stylesheet because we're adding a CSS stylesheet our href will now
point to our CSS main.css specifically and our type which isn't actually
required anymore but since we have it let's go ahead and add text/css but our
browser should know what it is even if we didn't add that at this point because
that's really the only type of stylesheet there is is a CSS now that we've made
these changes let's save the file and let's go ahead and click the button again
to make our code shrink back down and look at our page we can reload just to make
sure it has reloaded and everything looks the same same that's because we are
pulling in our code I'm going to go ahead and hide the file tree here we are
pulling in our CSS code using our link tag inside of the head element now finally
I'm going to create an error on purpose by deleting the greater than symbol at
the end of this link tag and saving the file with contrl s now why would I create
an error on purpose because we want to validate our file again and this will let
us know that yes we've got the right file and we expect one error there you don't
of course have to create an error on purpose but that's what I'm doing to make
sure I'm selecting the correct file out of the correct lesson folder because I'm
in lesson two now you might be working on the same file we started with there's
the CSS file and the image file I'll select the index.html and check and I should
have at least one if not more errors because of that yes I created several errors
on the page just by leaving out that one closing greater than symbol for the link
Tex so now if I save again Visual Studio code formats our code correctly instead
of trying to pull the closing head tag up here and I'm going to go ahead and
reload or re-upload the file to check it so we choose index.html and now I'll
click check and document checking completed no errors or Warnings to show so just
by missing one little thing in our page we could have a whole list of Errors so
follow the prompts from Visual Studio code notice how if I leave that out here in
my theme this turns red or pink it doesn't look quite right Visual Studio code
wants to format it differently if I save the file and it pulls that up here
instead of putting the closing tag there's several cues to show you that you have
an error in the file and so follow those prompts in Visual Studio code and then
remember to always validate your page and we always do that at validator w3.org
I'll get rid of everything at the end of that and here you can pull it up and
then we choose file upload remember to keep striving for Progress over Perfection
and a little progress every day will go a very long way please give this video a
like if it's helped you and thank you for watching and subscribing you're helping
my channel grow have a great day and let's write more code together very soon