Hello and welcome to your first tutorial on beginning HTML. Now if you watch the introductory video, we talked about what you needed and I said that all you need is Notepad. So you should go ahead and open up Notepad now.
And that's all you really need to follow this series. Now if you have other editors, you can go ahead and use those as well. So in this video, 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 doctype 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 X. Exclamation point there.
We type in doc type 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.0.1 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 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 5. So yes, we're going to be using HTML5 in this tutorial. And what's nice about this is if an HTML 6 or an HTML 7 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 HTML 6, this code will still be relevant. It'll still be using HTML 6. 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. Okay, 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. 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 show up. 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 gonna 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 gonna 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 gonna 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 p tag. And what the p element does is it creates a paragraph. And obviously it stands for paragraph for any text that we want to put in a paragraph. So we're going to say, welcome to the Phish website. Everything you want to know about Phish is in this website.
There we go. And so again, this ending tag says, hey, the paragraph ends here and it'll go on to the next tag, which is going to be actually another header because we're going to identify another section of this website. So we're going to go ahead and use the H tag. But in this. case you make this h2 and what this tag does is the text is a little bit smaller because this isn't the main section it's just another section under this section so you'll notice that the text within this element this h2 element will will be a little bit smaller.
So we're going to say this is a section on bass fish. And then we'll go ahead and just go ahead and close this out with h2. And then we're going to go ahead and create another paragraph with text. And we're going to say, you know, bass fish live in lakes. That's great.
Okay, and so that's all we need. And so now let's go ahead and render this and see how these headers and paragraphs are displayed in our first web page. So you want to go ahead and hit save as and we're going to call this test.
I'm going to save this on the desktop. Make sure you put test.html and then we'll go ahead and minimize this. And now all you have to do is go ahead and double click our HTML file. And there you see we have our first web page.
And you can see here the H1 tag formatted it with the largest text. And then here was our paragraph and you can see it made it just regular size. Now later on I'll show you how we can adjust.
the font size here but it creates a standard font size for this paragraph and then we created our second header which is right here and you'll see that it's a little bit smaller than the text up here right the text size up here it's a little bit smaller and then we had our other paragraph in which we said bass fish live in lakes and so this is the very first web page now we're going to explore many more html tags this is just a bare bones site but i hope you get the idea now how the structure works in html that's the basic structure and if you can understand that you're well on your way to understanding HTML. Now, I will point out that this is a good way to test your HTML. Now, later on, I will show you how to upload these files to a web server, and then you would be live.
People could actually see this out on the internet. But for our purposes now, we can just double-click on the HTML file on our desktop and do the testing here. And that's a great way to test your HTML to see if it works.
Now, I just want to make a couple more points before we close this video out. You'll notice that under the header sections here, The h tags will format the text with bold. So you can see that right here, this text is in bold. Both headers do that.
And of course, you can see the title that we added, my webpage, it's right up here. Okay, that's going to do it for this tutorial. I will see you guys in the next tutorial.