hi guys this is Brian from website Learners today we are going
to see how you can create a website using HTML HTML stands for hyper text
markup language it's the language which web browsers use to display web
pages on your computer in this video we will see how you can create your
very own HTML website like this it'll have a logo with an interactive
menu some content with a button images and a video we'll also make
additional pages and add links to them in the menu and by clicking on the
links you will be taken
to those pages watching this video you'll be able to create
this website on your computer just by adding some HTML code on your
notepad now all you need to have to follow this tutorial is a notepad if
you're on Windows or text edit if you're on Mac so let's get started now
to create a website using HTML the first step is to open notepad on your
computer so to open Notepad let's go to start and then type Notepad and
press enter so now we have our Notepad once we have our notepad next
let's go to step 2 which is to create a HTML file
so to create a HTML file we are going to Simply Save this empty
file as an HTML file so to save this file as HTML all you have to do is
go to file and click save as now let's save this file on our desktop and
here you need to give a name for your file I'm going to name this as home
now to say this file has an HTML file we need to enter dot HTML at the
end of the name so let's type dot HTML and click save now if we go to our
desktop you can see that we've got our HTML file here so now if you open
it
you can see that the file opens in our browser so now we've
successfully created a HTML file which is displaying in this blank page
so as you can see here this page is empty because we've not written
anything yet so next let's create the first item on our page using HTML
now if we enter any text here then save our note and refresh the browser
you can see that we now have the same text on this web page which we
entered here okay now let's say you want to make this text big like a
heading we need to enter a H1 at the start and
the end of the text so let's type H1 here let's go here and now
let's type slash before the H1 and close the tag now if we save the file
and refresh this page you can see that we have now got the heading so
this is how HTML works now in the same way you can add content to this
page using the text and tags like these now like H1 tags there are
several other tags which you can use to build your page to see a list of
most popular tags just click the link below this video and here you can
see a list of most
common HTML tags and how you can use them let's go to The
Heading tag now let's say you want to add a smaller heading like this you
can add the h2 tag instead of H1 so first let's enter the text that we
want then close the h2 tag with a slash now if we save the file go to the
browser and click refresh you can see that we have got the smaller
heading okay so now you know how to use HTML tags next let's start
building this page and make it into something like this first let's
remove this heading and then change the heading to the one
, we want I'm going to type new adventure in ice cream now if we
save the file then refresh the browser you can see that we have got the
heading once you have added the heading let's say you want to add a
paragraph of text under this heading let's go to the reference page and
click here so to add the text we are going to use this tag called the
paragraph tag so let's go to our Notepad and then type P tag and enter
the text you want then close the P tag with a slash so let's save this
file go to the browser
and click refresh you can see that we have got a text here once
you have added the text next let's add a horizontal line here so to add
the line we are going to use the HR tag so let's type HR now since the
line doesn't have any content inside it it does not require an end tag so
just having an HR tag is enough to get the line so now if we save the
file and refresh the browser you can see that we have got a line here so
now we have added the heading text line now let's say you want to bring
this
text to the next line like this all you have to do is enter the
Break Tag right here so let's go here and then type the BR tag for a line
break now if we save it and click refresh you can see that we have added
a break between these two lines now let's go here and add another Break
Tag here so let's save the file and click refresh okay so now we have
created this section next let's see how you can change the design of
these elements that we've added to the page so to style these contents we
are going
to use something called CSS what a CSS CSS tells our browser
how to display these HTML elements on the screen now let's say you want
to increase the size of this heading all you have to do is just go to the
H1 tag then Enter space and type style equal to and then enter these two
quotation marks now inside the quotes you need to add the CSS code which
will change the style of this heading now to change the size of this
heading let's go to our reference page here you can see some common CSS
Styles
just click on it now to change the font size of this heading we
can use the font size CSS property and this is the CSS code for changing
the font size now let's copy this by clicking here and then go back to
our Notepad and paste it in between our quotes so now we have told our
browser that this element needs to have a font size of 50 pixels so now
if we save this file and go to the browser then click refresh you can see
that our heading is now bigger okay this is how you can change the style
of any item on your page using
CSS now you can do the same for any HTML tag that you want for
example the paragraph tag or the HR tag and you can also add multiple
styles to the same tag now let's say you want this text to appear at the
center of your page you can do that by adding another CSS property to
this element now to get the property for centering this text let's go
back to our reference page and go to text align this is the property
which can align our text to the center so let's copy the score and then
keep your cursor after the
to see how you can create a website using HTML HTML stands for hyper text
markup language it's the language which web browsers use to display web
pages on your computer in this video we will see how you can create your
very own HTML website like this it'll have a logo with an interactive
menu some content with a button images and a video we'll also make
additional pages and add links to them in the menu and by clicking on the
links you will be taken
to those pages watching this video you'll be able to create
this website on your computer just by adding some HTML code on your
notepad now all you need to have to follow this tutorial is a notepad if
you're on Windows or text edit if you're on Mac so let's get started now
to create a website using HTML the first step is to open notepad on your
computer so to open Notepad let's go to start and then type Notepad and
press enter so now we have our Notepad once we have our notepad next
let's go to step 2 which is to create a HTML file
so to create a HTML file we are going to Simply Save this empty
file as an HTML file so to save this file as HTML all you have to do is
go to file and click save as now let's save this file on our desktop and
here you need to give a name for your file I'm going to name this as home
now to say this file has an HTML file we need to enter dot HTML at the
end of the name so let's type dot HTML and click save now if we go to our
desktop you can see that we've got our HTML file here so now if you open
it
you can see that the file opens in our browser so now we've
successfully created a HTML file which is displaying in this blank page
so as you can see here this page is empty because we've not written
anything yet so next let's create the first item on our page using HTML
now if we enter any text here then save our note and refresh the browser
you can see that we now have the same text on this web page which we
entered here okay now let's say you want to make this text big like a
heading we need to enter a H1 at the start and
the end of the text so let's type H1 here let's go here and now
let's type slash before the H1 and close the tag now if we save the file
and refresh this page you can see that we have now got the heading so
this is how HTML works now in the same way you can add content to this
page using the text and tags like these now like H1 tags there are
several other tags which you can use to build your page to see a list of
most popular tags just click the link below this video and here you can
see a list of most
common HTML tags and how you can use them let's go to The
Heading tag now let's say you want to add a smaller heading like this you
can add the h2 tag instead of H1 so first let's enter the text that we
want then close the h2 tag with a slash now if we save the file go to the
browser and click refresh you can see that we have got the smaller
heading okay so now you know how to use HTML tags next let's start
building this page and make it into something like this first let's
remove this heading and then change the heading to the one
, we want I'm going to type new adventure in ice cream now if we
save the file then refresh the browser you can see that we have got the
heading once you have added the heading let's say you want to add a
paragraph of text under this heading let's go to the reference page and
click here so to add the text we are going to use this tag called the
paragraph tag so let's go to our Notepad and then type P tag and enter
the text you want then close the P tag with a slash so let's save this
file go to the browser
and click refresh you can see that we have got a text here once
you have added the text next let's add a horizontal line here so to add
the line we are going to use the HR tag so let's type HR now since the
line doesn't have any content inside it it does not require an end tag so
just having an HR tag is enough to get the line so now if we save the
file and refresh the browser you can see that we have got a line here so
now we have added the heading text line now let's say you want to bring
this
text to the next line like this all you have to do is enter the
Break Tag right here so let's go here and then type the BR tag for a line
break now if we save it and click refresh you can see that we have added
a break between these two lines now let's go here and add another Break
Tag here so let's save the file and click refresh okay so now we have
created this section next let's see how you can change the design of
these elements that we've added to the page so to style these contents we
are going
to use something called CSS what a CSS CSS tells our browser
how to display these HTML elements on the screen now let's say you want
to increase the size of this heading all you have to do is just go to the
H1 tag then Enter space and type style equal to and then enter these two
quotation marks now inside the quotes you need to add the CSS code which
will change the style of this heading now to change the size of this
heading let's go to our reference page here you can see some common CSS
Styles
just click on it now to change the font size of this heading we
can use the font size CSS property and this is the CSS code for changing
the font size now let's copy this by clicking here and then go back to
our Notepad and paste it in between our quotes so now we have told our
browser that this element needs to have a font size of 50 pixels so now
if we save this file and go to the browser then click refresh you can see
that our heading is now bigger okay this is how you can change the style
of any item on your page using
CSS now you can do the same for any HTML tag that you want for
example the paragraph tag or the HR tag and you can also add multiple
styles to the same tag now let's say you want this text to appear at the
center of your page you can do that by adding another CSS property to
this element now to get the property for centering this text let's go
back to our reference page and go to text align this is the property
which can align our text to the center so let's copy the score and then
keep your cursor after the
