[MUSIC] Right it's time to start editing some code. And the first thing we're going to do is fire up our text editor. And once we got the text editor running, we can start writing HTML. So let's go in there now. So I've started my Sublime Text editor in this case, and remember you can use other ones such as Notepad++, or TextWrangler. And so I've gone to the File menu and Create a New File. And let's have a quick look at what's on the screen here. So we've got this number one here. That's telling me which line in the file I'm on. So you see if I add extra lines in the file, it increases. So that's not really part of the document. That's just part of the interface, telling me about what I'm editing. And then I've got this thing here which is a tab so I can have lots files open at the same time, the same way you can have with a web browser. You can have lots of tabs with different files open at the same time. So let's write our first HTML tag. I'm going to start with the H1 tag. So I've got an open angle bracket there, and then I type h1, and then I close it. So that starts an HTML tag, and then you put the name of the tag and then you finish it like that, and then we put the contents of the tag. So I'm gonna set this to, this is my first webpage. And then, once you've finished writing what's in, going in the tag, you can then end the tag. End, so we have the angle bracket again, then this forward slash which means end of h1. So we can interpret this as, starts h1, contents of h1, end h1. And let's save that, so I do File, and Save, and I've got a folder ready here, and I'm going to call it index.html. So, remember that Kate was saying that, HTML files look normally end with an html extension or .htm extension. And you'll need to make sure that you've configured to your operating system to show you, your file extensions. So for example in Windows you'll have to edit your settings in your Explorer. I think in Linux, it probably shows them by default, and also on a Mac. So, we're saving it as index.html, which means that it's the first page in the website. Okay, so I saved that, and then I go into my file browser, which is here, and I browse to where that file is saved. And I Right-click on the file, and now I get to choose how I open it. So, I've already got it open in Sublime Text, so I'm not going to edit it there. I actually want to view it in my web browser, so here it is. Here's my web browser, Google Chrome. So that's opened it and that's my first web page. And you can see that its, the font that's used is quite large and bold. I mean I can zoom in just to make it really clear. So that's large and bold. And if I just put some text in here without any HTML. This is outside of a tag. Okay, save that. So File > Save. Or once you get into editing this stuff, you'll gonna have to learn the keyboard shortcuts. So in this case I do Ctrl+S to save it. Then, I go back up to my web browser. If I want to see what the new file looks like, I have to hit this little reload button here. You see again, there's a keyboard shortcut for reloading which, it's Ctrl+R. You'll end up doing your edits in your file. Doing Ctrl + S then, popping up to the web browser then, doing Ctrl+R to reload the page. Right, so let's look in this web browser. So we've got this big large font here, and then we've got this kind of much smaller text here. And so what's happened is, the web browser has seen this h1 tag. And instead of just displaying an h1 tag, it's actually decided, oh, right, I'm actually going to display this text with a special formatting, because h1 actually means main heading. So, the web browser knows our main heading needs to be big and large and bold. So, it's choosing to add that formatting to that display. And that's one of the sorts of things to know about HTML is that, we just say what the different parts of the document mean. So we're saying this bit of the document is the heading. And we can define another bit of the document as being content or whatever. And the browser then interprets that structure that we give it, and it chooses how to format it. When we get into the next module and we look at CSS we'll find out how we can actually tell the browser, don't use this formatting, use a different formatting. So we can control the way it displays the page, but for now we're just letting the browser make decisions for us, about how it should display in h1, or how it should display the other tags. So let's add some more tags and see what they do. That's our h1 tag, and we can normally, you'd put your paragraphs of text in a p tag. And you can see what I'm doing is I'm creating a structure here. So, I actually indent that slightly so it's easier to read. So, the first paragraph. The second paragraph. And while we're at it, we'll do one more type of heading tag. We'll just call it h2, this is the second heading. Or we could call it the subtitle. So, Ctrl+S, back over to the web browser, Ctrl+R. So let's just have a quick look at that. So, we created an h1 tag for the main heading, and that's the largest text we can see there. And then we created an h2 tag, for the sub-heading, and that's the slightly smaller but still bold. And then we put two paragraphs in, and that's it. So we've created our first example of a very simple webpage. And so, as we go through this module, we're gonna find out about more types of tags that we can use. [MUSIC]
