HTML
we're going to create our very first web page using HTML. Now, web browsers can display a lot of
different documents. It's not just HTML, they can display SVG files, XML files. So the very first thing
we have to do is tell the browser what type of file this is, and we do that by using the DOC type
declaration. So this really isn't a HTML section, it's just a declaration.
And we're telling the browser exactly what to open here. And so let's go ahead and type in doctype
HTML, and we put an exclamation point there. We type in doctype.
And we type in HTML and it's that simple. So the browser moves in a top down manner. So it'll hit
this first, it'll realize that this is HTML and that's the language that it's going to use to render the web
page. Now it used to be in previous versions of HTML, such as 4.01. You actually had to type out the
version here. And while that might not seem like a huge pain, it becomes a pain if you have
hundreds of web pages.
Every time there was a new version, you had to go out here and put the new version in. So if there
was a, you know, 4.5, you would have to come in here and go ahead and update that, and that
became a real pain. So somebody came up with a brilliant idea that if you put HTML there, it'll load
the most current version, and the current version is five. So yes, we're going to be using HTML5 in
this tutorial. And what's nice about this is if an HTML6 or an HTML7 or 8 or 9 comes out in the
future.
You won't have to come back here and change this. You'll be using the very current version of HTML,
just like we are right now. We're going to be using the current version, and if there's an HTML6, this
code will still be relevant. It'll still be using HTML6. Now, the very first thing that comes after the
DOC type declaration is the HTML element, and we create that by typing in HTML and then if you
remember, from the first video.
This is the opening tag and we need a closing tag. So we put a slash here. Now this really is not a
section of our HTML document, it's more like a wrapper. And that is everything in our document will
go between this HTML element, between this opening tag and this closing tag. But you really can
forget about this because this. I like to think of this as kind of a behind the scenes.
Thing is not really something you need to be concerned about. It's just kind of like a starting and
ending point that tells the browser where the HTML starts and where the HTML ends. But again, you
can kind of forget about it. Let's just create some spaces here and there it is. Okay? So there's not a
lot of action going on there. We just need those and that's that.
And again, it's really not a section, it's more of a wrapper where we put all of our code into, OK, now
the first real section that we need that comes after HTML is called the head section. And you
guessed it, we need a head tag, and we need a closing tag which will make up the head element.
And so we put our usual slash here, and now we've got our first real section.
Now, this is also not a huge section that you need to be concerned about. We'll be using this section
a little bit more in the future, but this isn't again a real critical section, but we will do one thing today
here.
, Now, the head section contains a lot of information about the page itself, and so this is stuff like the
title of the page. That's actually the only thing that you'll really display here is the title of the page. It
goes in the top menu, and we'll do that in a few minutes. But it also can be used to identify the
language of the page, like if it's in Swedish or French, German and so on. Now there are also some
other areas that we'll get to in the future. We don't need to be worried about these right now, but
there are something called meta tags. Well, but we'll get.
To that at a later time, you also put in some of your JavaScript references here, but we'll get into
that later as well. But for now, we're just going to put the title element inside our head section. And
again, the title element is what shows up in the title bar of the web browser. And we'll see that
when we render this page a little bit later. And so within our head element, we're going to embed
another element, and you guessed it, it's called title. And we're going to go ahead and just say my
web.
Page, whatever that is. And then yes, we need a closing tag. And now we've got our title element
and we've got our title that will be displayed. If this was, the web browser would be displayed up
here and we'll see that in a few moments. So that's all we need to be concerned about right now.
And let's move on to the body section. And this is where all of the action takes place. This is really
the heart and soul of your web page, and it needs also a closing tag as well.
And so again, it all happens right in here. This is the primary section of your web page, and pretty
much everything that's between these two tags in the body element will show up on your web page,
with a few exceptions. Of course, this title up here will actually be displayed on the menu bar, but
everything else that's displayed to the user will be done within the body element, and so let's talk
about that right now.
So now we need to insert something within our body tags. In this tutorial we're just going to insert
some simple headings and some simple text. That's all. Now obviously later on we'll get the images
and hyperlinks and a lot more, but today we're just going to insert some simple text along with some
simple headings. So the first thing we need is a heading, and you use the H tag for that and it's H1,
and then we're going to close that tag as well.
And what this does is it will create larger text because this is going to identify a section of our
website. So we're going to call this the fish website. And there we go. And so again, that's the text
for our header. And so all the text will be contained in there for our header. Now we want to say
what this website's about, and so let's use the P element to create that. So we'll go ahead and create
a P tag.
And we'll create an ending tag and what the element does is it creates a paragraph and obviously it
stands for paragraph for any text that we want to.
Now we're going to look at adding line breaks, comments and spaces to your HTML code. Now if you
followed the last video, we're going to go ahead and use that HTML file we created in that video.
And so let's go ahead and double click that. Now if you followed along, we named it test dot HTML.
So let's go ahead and open that. And here is the header that we created in that last video.
Two headers actually and here are the paragraphs that we created with the paragraph tag. Now
what we want to do is we want to add some space in here between this section.
we're going to create our very first web page using HTML. Now, web browsers can display a lot of
different documents. It's not just HTML, they can display SVG files, XML files. So the very first thing
we have to do is tell the browser what type of file this is, and we do that by using the DOC type
declaration. So this really isn't a HTML section, it's just a declaration.
And we're telling the browser exactly what to open here. And so let's go ahead and type in doctype
HTML, and we put an exclamation point there. We type in doctype.
And we type in HTML and it's that simple. So the browser moves in a top down manner. So it'll hit
this first, it'll realize that this is HTML and that's the language that it's going to use to render the web
page. Now it used to be in previous versions of HTML, such as 4.01. You actually had to type out the
version here. And while that might not seem like a huge pain, it becomes a pain if you have
hundreds of web pages.
Every time there was a new version, you had to go out here and put the new version in. So if there
was a, you know, 4.5, you would have to come in here and go ahead and update that, and that
became a real pain. So somebody came up with a brilliant idea that if you put HTML there, it'll load
the most current version, and the current version is five. So yes, we're going to be using HTML5 in
this tutorial. And what's nice about this is if an HTML6 or an HTML7 or 8 or 9 comes out in the
future.
You won't have to come back here and change this. You'll be using the very current version of HTML,
just like we are right now. We're going to be using the current version, and if there's an HTML6, this
code will still be relevant. It'll still be using HTML6. Now, the very first thing that comes after the
DOC type declaration is the HTML element, and we create that by typing in HTML and then if you
remember, from the first video.
This is the opening tag and we need a closing tag. So we put a slash here. Now this really is not a
section of our HTML document, it's more like a wrapper. And that is everything in our document will
go between this HTML element, between this opening tag and this closing tag. But you really can
forget about this because this. I like to think of this as kind of a behind the scenes.
Thing is not really something you need to be concerned about. It's just kind of like a starting and
ending point that tells the browser where the HTML starts and where the HTML ends. But again, you
can kind of forget about it. Let's just create some spaces here and there it is. Okay? So there's not a
lot of action going on there. We just need those and that's that.
And again, it's really not a section, it's more of a wrapper where we put all of our code into, OK, now
the first real section that we need that comes after HTML is called the head section. And you
guessed it, we need a head tag, and we need a closing tag which will make up the head element.
And so we put our usual slash here, and now we've got our first real section.
Now, this is also not a huge section that you need to be concerned about. We'll be using this section
a little bit more in the future, but this isn't again a real critical section, but we will do one thing today
here.
, Now, the head section contains a lot of information about the page itself, and so this is stuff like the
title of the page. That's actually the only thing that you'll really display here is the title of the page. It
goes in the top menu, and we'll do that in a few minutes. But it also can be used to identify the
language of the page, like if it's in Swedish or French, German and so on. Now there are also some
other areas that we'll get to in the future. We don't need to be worried about these right now, but
there are something called meta tags. Well, but we'll get.
To that at a later time, you also put in some of your JavaScript references here, but we'll get into
that later as well. But for now, we're just going to put the title element inside our head section. And
again, the title element is what shows up in the title bar of the web browser. And we'll see that
when we render this page a little bit later. And so within our head element, we're going to embed
another element, and you guessed it, it's called title. And we're going to go ahead and just say my
web.
Page, whatever that is. And then yes, we need a closing tag. And now we've got our title element
and we've got our title that will be displayed. If this was, the web browser would be displayed up
here and we'll see that in a few moments. So that's all we need to be concerned about right now.
And let's move on to the body section. And this is where all of the action takes place. This is really
the heart and soul of your web page, and it needs also a closing tag as well.
And so again, it all happens right in here. This is the primary section of your web page, and pretty
much everything that's between these two tags in the body element will show up on your web page,
with a few exceptions. Of course, this title up here will actually be displayed on the menu bar, but
everything else that's displayed to the user will be done within the body element, and so let's talk
about that right now.
So now we need to insert something within our body tags. In this tutorial we're just going to insert
some simple headings and some simple text. That's all. Now obviously later on we'll get the images
and hyperlinks and a lot more, but today we're just going to insert some simple text along with some
simple headings. So the first thing we need is a heading, and you use the H tag for that and it's H1,
and then we're going to close that tag as well.
And what this does is it will create larger text because this is going to identify a section of our
website. So we're going to call this the fish website. And there we go. And so again, that's the text
for our header. And so all the text will be contained in there for our header. Now we want to say
what this website's about, and so let's use the P element to create that. So we'll go ahead and create
a P tag.
And we'll create an ending tag and what the element does is it creates a paragraph and obviously it
stands for paragraph for any text that we want to.
Now we're going to look at adding line breaks, comments and spaces to your HTML code. Now if you
followed the last video, we're going to go ahead and use that HTML file we created in that video.
And so let's go ahead and double click that. Now if you followed along, we named it test dot HTML.
So let's go ahead and open that. And here is the header that we created in that last video.
Two headers actually and here are the paragraphs that we created with the paragraph tag. Now
what we want to do is we want to add some space in here between this section.
