[Music] hello and welcome hi i'm dave this tutorial series is for you if you are

just beginning your journey towards learning web development or maybe you're
looking for an html resource to share with a friend who is just beginning their
journey towards learning web development or you may be looking for a refresher
course because you previously learned html but it has been a few semesters or
even years since you looked at it or maybe you have another reason that i haven't
even thought of no matter you're welcome and i hope i help you on your journey
throughout the tutorial i will mention some references and tools and i will
provide links to everything i mention in the description below let's get started
learning html what is html html is an acronym that stands for hypertext markup
language and hypertext markup language html is the most basic building block of
the web it defines the meaning and structure of web content and hypertext refers
to links that connect web pages to each other and that can be within a single
website or from one website to another overall html uses markup to annotate text
images and other content for display in a web browser and you can see an example
of some of these markup elements here but before we begin creating a web page and
using these markup elements we need to get the necessary tools so let's start
with a web browser if you don't have one or if you're curious what i will be
using in this series i'll be using the google chrome browser and you can download
that at google.com chrome so if you don't have that and want to use that go
ahead and download and install now and then come back to the tutorial also i
will be using an extension and we go to chrome.google.com webstore to get
extensions for the chrome browser and there if you want to use the extension that
i'm going to use it's called dark new tab and you can press enter to search for
that and once you've completed your search you'll see dark new tab offered by
keller which is the one that i have added and you can see added here i'll click
on that and once you're inside the page for dark new tab you should have an
install button here since i already have it installed this is now a remove
button for me what this does is when you open a new tab in the browser it uses a
dark page instead of a light page and i use dark mode whenever possible so i
prefer that if you see me open a new tab in this development series you'll
probably see a dark tab like this one from there we need to get a code editor and
the industry standard right now and what i prefer to use is visual studio code
again you can use other code editors to write your html code but if you go to
code dot visual studio you'll be able to download visual studio code for free
and there you can download for windows if you're on windows like i am or you can
click other platforms and it's also available for linux and mac os so now would
be a good time to go ahead and download visual studio code and install your code
editor and go ahead and open that up and then come back to the video okay i am
now assuming you have installed visual studio code and have opened it up and you
may see something like this or you may see a welcome screen what you need to do
is create a folder on your computer and we will put our files inside that folder
so if i go to the file menu and choose open folder you can see once this pops up
what folder i am in the html course folder in windows and then i've created an 0-
1 underscore lesson folder so if i highlight that and select the folder i am now
inside that folder and ready to create my first html file so if you see the file
tree over here on the left and it's currently empty if you don't click this icon
in the top left which is the file explorer and that will hide or show this file
explorer we're going to create the plus button or click the plus button here for
new file and create a new file now we'll type index dot html as that is always
the file name that is expected to launch a website and you always want to keep
your file names lower case and with no spaces now windows will not complain if
you put a space or use upper or lower case however when we host our files on a
web server a web server will differentiate many times and that could cause
problems so the naming convention is to always use lower case no spaces you can
use hyphens dashes and then end each file in dot html okay we have an empty
index.html file let's create our first html element and as you might guess the
first html element we'll create is html so if we type html all lowercase and
press tab in visual studio code it creates the tags and by tags that is often
interchanged as a word with element however the element consists of the starting
and ending tag and everything in between but here we might just be referring to
the starting also called the opening tag or the ending also called the closing
tag so we refer to html tags but every page starts and ends with the html opening
and closing tags and everything else on the page goes between those tags after
creating our html element html pages have two main areas and one area contains
data that is not seen on the page but is considered to be metadata about the page
and that is the head area so just type head not header but head and press tab
and now we have our head element and we will put metadata about the page inside
this area but the next area is the page that every or is the part of the page
that everybody sees in the browser and that is held within the body element so
type body and press tab and now we have our two major sections of our page that
are both inside of the html element we have a head section and a body section now
inside the head we'll just put one piece of metadata today and it really won't
start with the word meta we'll come back to that word in the future we're going
to create a title element and give our page a title let's just call this my first
web page and this will stay inside of the html document now i just pressed ctrl
s which saved the document you otherwise would see a dot up here by the
index.html so i saved that and i am using an auto formatter visual studio code
may or may not do that for you when you save your file if you want that you can
go to the extension icon over here and search for a prettier extension and i'm
not sure if mine is enabled or i'm using something else right now we'll have to
check now mine is disabled but i do recommend this one prettier is a code
formatter that will auto format your code but visual studio code may do some of
that as well but if you want to use prettier go ahead and click install and you
can use that as well so i'll close out that prettier tab go back to the file
explorer here so we see our index.html on the left instead of the extensions and
now we can see our html is formatted in a very easy to read manner we have our
html element and then the head element and then the body element and they're
separated by spaces very easy to read and we have a title inside of the head
again the title will not be seen inside of the browser in the body of the page
but i will show you very shortly where we do see it inside of the body element
though let's put an h1 element which stands for a heading and it is the biggest
heading we could put you only put one h1 element per page and that should be
saying what your page is about it doesn't necessarily have to be the same text
that is in the title but here we're just going to put hello world as is the
tradition for creating your first file in any language you're learning and so we
have hello world on the page and we have my first web page in the head section
let's add one more element in the body of the page and this is a paragraph
element that starts and ends just with the letter p but notice each of our tags
of course start with this less than and then end with the greater than and then
the ending tag you'll notice has a slash but all we have to do in visual studio
code is type p and press tab and it creates both for us so we're going to put
some text inside of our paragraph and here we'll just put this is my first web
page with a period to end the sentence and save once again i'm pressing ctrl s on
the keyboard to save you can go to the file menu and from there you can also
choose save but you'll notice the shortcut is control and the letter s we're
almost ready to view our web page but before we do remember the extensions we
went to i want to show you just a few if you want your visual studio code to look
like mine one thing to draw your attention to is when i created an index.html
file i have the little icon for html5 beside it you may not have that but if we
click on extensions and then we can delete prettier that i searched for before
type vs code dash icons there you'll find the extension that will add that to
your vs code as well so you can install i already have it installed so mine says
uninstall and that will add icons as you create files and it might add the icon
up here as well in the tab and that's how you see the icon here beside my
index.html in the file explorer so visually it helps you see what type of file
you're working with quickly without even reading everything after that extension
let's go ahead and click the extensions icon again and then search for github
theme i am using a specific theme which i prefer dark mode in every thing that i
do so i am using the github theme extension and it has light and dark themes i
believe i'm using the default dark theme this might be bright for a second but
i'll click set color theme and yes it's switched back to light
but i choose github dark default and then yours will look much like mine now
these previous extensions have been optional but one that i say is a must for you
to install is called live server so let's pull up live server by ritwick day i'll
click on that and you want to install live server because it's going to help us
view our web pages so go ahead and install live server and after you have it
installed we'll go ahead and take a look at the web page we've created okay with
that installed i'm going to close that tab i'll come back to the file explorer
here to show the file and now if you have live server installed you should be
able to right click and open with live server and once we choose open with live
server it opens our browser and we can see our web page it says hello world this
is my first web page in addition in the tab at the top it says my first web
page so that is where the title goes at the very top of the browser in the tab
now this is very bright and i have mentioned that i prefer dark mode so let's go
back to visual studio code and i'm just going to paste in some quick styling that
is actually css once again this is optional but it will save my eyes and possibly
yours as we work through this tutorial so once we're back in visual studio code
just underneath the title in the head section i'm going to paste this in i'll
quickly describe it i put in a style element and that allows me to put in some
quick css and i changed the font size to make it just a little larger and then i
changed the background color to a dark color and i changed the font color to an
off-white color called white smoke and that's all i did we're not really learning
css here but this will save our eyes going forward if you want to make these
changes if you prefer the white with dark text that is fine too but now that i've
saved this the beauty of live server is that it automatically reloads our page
for us in the browser so let's go back to the browser and look at our update and
now you can see our web page is in dark mode and we have a little bit larger text
here as well it did not change our title from the head because that just goes
into the tab of the browser also notice the address this is an ip address and
then we have a colon and this is a port number but this is on your own computer
this is not on mine i can't go onto the web and see your page that we just
created we haven't loaded it to the web it is just running on your computer but
this is the way to view web pages as we create them which creates your own local
server it's what's called a dev environment and that is preferred what you don't
want to do in chrome is try to open a file like you would in word or some other
document browser or even visual studio code how we open files that's not how you
want to view a web page you want to use a development server and that's what
we're doing with live server in visual studio code now if you ever want to stop
the server down here in the bottom you can see the port number 5500 and it says
click to close server so i can just click that it says disposing and now we have
a go live button which you can also use you can also right click on your document
and choose stop or open with live server now we would once again since we stopped
that we would need to open with live server to have a live web page that responds
to changes we make and notice how it opened a new tab here instead of our old tab
our old tab the server for that page closed so we close that out and now we're
using this one because this is going to show our most recent changes now after
we've created a web page how do we know if we have errors or not well that's
where a validation service comes into play and this is the w3c markup validation
service w3c stands for the world wide web consortium that really makes the
standards for the web overall what we want to do to check our page is click file
upload because remember our web page is really not on the web it's just on our
computer your web page is on your computer and mine is on my computer so let's
click file upload and from here we're going to choose the file on the computer
and we get a browse window and now i'm going to click html tutorials and then i
have an html course folder and then the xero lesson one folder that we just
created and there is the index.html file we've been working with so i'll click
open and now that it's here we can click check and we're going to get some
errors and we'll go over those okay now that we have checked our page we have
got a warning and a couple of errors so there are things we need to fix in our
html file let's address these in order with the first warning says consider
adding a lang attribute to the html start tag to declare the language of the
document so that is something we should do now we're going to go to the html tag
and we can add what is called an attribute and this is the lang attribute and i'm
going to set it equal to en which is the abbreviation for english in general you
can supply a dialect like this dash us or i believe the other would be gb but i
don't usually do that so i'm just putting e in for english you might have another
language you prefer to put there and you can find a list of those at the mdn
network as well and that's the page where we were looking for the definition of
html at the beginning of this tutorial so i will link to mdn the mozilla
developer network in the description now that we've added the language attribute
let's go look at the other errors we had and see what else we need to fix it
says the character encoding was not declared so we also need to handle that let's
go back to visual studio code and now inside the head there is an element called
meta earlier i said the head stores metadata let me keep it all lower case here
and here we can set what is called the character set attribute inside of a meta
element and from here i'll put utf-8 which is the standard for all web pages
that i have worked on there are other character sets but this is the typical
value you would see in there so i'm going to save this and in the future we'll
cover more meta tag values that we'll have inside of the head now let's go back
and look at that last error that we got from the validation service and that said
start tags seen without seeing a doctype first expected and it shows you exactly
what it wants doctype html and that is a document type declaration that should
be on the very first line of your page so let's go back to our html file go to
the very top and we'll press return and we'll paste in exactly what they had
there so you see once again it starts with the less than and the greater than
symbol but this is not really an html element or tag this is just a doctype
declaration that you should have in every html file at the very beginning so now
i'll put that in and save as well let's look at the validator first and let's
choose the file again and now i've selected the index.html to upload with our
changes and we'll click check document checking completed no errors or warnings
so our document is just fine let's go to the tab with our page and let's reload
the page and once we reloaded everything looked great so we've got hello world
this is my first web page and we still have my first web page in the tab at the
top for the title and we have passed all validation checks 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