How to Understand Basic HTML

Hey guys, this is Master Jake and I’d like to welcome you to my series on HTML. In this tutorial, we’re going to be going over the basics of it and after the basics we’re going to go further and more in depth with every part of HTML. We’re going to learn how to do quite a bit and eventually once you master all the web line, you’ll be able to make an outstanding websites, but with HTML alone, you can still make great stuff. Okay, so what we’re going to do is we’re going to get started by just telling you what HTML is, so basically HTML stands for Hyper-Text Markup Language and it is basically the language that web browser understand and by this I mean every website you go to, like YouTube or MySpace, they all use HTML to code in what they want their web browser to do. And then when the browser loads the page, it appears a certain way, because you notice YouTube and MySpace are different. They’re coded in their own ways. So we’re going to teach you how to do that. So, I’m going to open a notepad, you can open any if you want, but I recommend notepad or something similar to it. And the great thing about HTML is you can build any type of HTML coding and use it right on your computer. You do not even need the internet. You do not need any special programs, all you need is a notepad and an internet browser which comes default on your computer, you probably have an explorer and you may have a different one. I use Mozilla Firefox, just a preference. Okay so, we’re going to just show you the opening. So what I’m going to do is I’m just going to start a tag, okay. So, what you see here is a tag, a tag is represented by a less than sign and then you have some text in here and then you have a greater than sign and that forms a tag if you see how the little mouths kind of close in on each to form a tag. So the arrows are pointing outwards. And then you have a tag inside here. So we’ll just name this tag tag. Now you can’t make your own tags. HTML has a lot of tags to use and that what makes up HTML. It’s using tags to make things happen. Okay so, you have a starting tag here. Now after the starting tag, you do what you want to do and then you need an ending tag. Now, what you type in between the tags appears differently depending on the tag you’re using. But the way to type an ending tag is to type the tags the same way you type in the first place and just put a forward slash in front of the word, that’s ending and that’s the starting tag. So, if there is a tag called tag two, then it will end like that. So that’s the basic tag technology there in HTML. So now that you know what tags are, let’s open a basic HTML document. I'm going to go ahead and show you how to open. Every HTML document needs to start with HTML tag and end with a slash HTML tag. Okay, now HTML is not case sensitive, meaning, that will work just fine—it is not case sensitive at all, so that will work and any other character formation will work, but we will just go and stick to lower case. Some people like the upper case, the tags so that they can tell it differently from the text, but we’re just going to stick to lower case tags. Every HTML document starts and ends with the HTML tags, now you can have spaces anywhere in there and they will not matter at all. So these spaces don’t matter. You can separate the codes out as much as you want. But we’re going to keep those together, nice and clean. You can also put multiple tags on the same line and it will work just fine. As long as open each tag, as long as you have the greater than and less than signs around it, then it will work fine. So, the next tag you’re going to see is most likely the head tag. Now each—just kind of picture and HTML document just like a letter and I don’t mean like the letter like A, B, C. I mean like the letter you send in the mail. You need to have a heading and a body. So each HTML document has a head a body. The head, you don’t always have to include but it is—there are some tags that you need to put in the head. There are a few tags that had to go in the head and the rest can go in the body. One of the head tags is the title tag and that will be one of the main tags you use, title just titles the page. What we’re going to do is we’re going to leave the title tag for a second and I’m actually going to save this. So we have HTML head slash head body slash body slash HTML. And it’s important that you close the tag that you recently opened first, since I opened the body, I need to close it before I close another tag like that and you can imbed tags and put multiple—inside multiple. Okay so, when you’re saving an HTML document, you want to find a place to save it and you want to give it a file name, let’s going to go first document and you need to put the extension .HTM or .HTML on the end. It can be either change Save As file to all files, because it’s not a text document, so we’re just going to leave it as HTML and we’re going to save it. Now drag this over here you can see, firstdocument.html. Now here where the cool part comes in, you open it and view it. So you just double click, it’s going to open with Mozilla Firefox. And you see it’s a blank white page and we go up here and there is no title, it just says Mozilla Firefox. And in most sites, you’ll see a title here like YouTube or MySpace, but there is no title because we did not specify one. So I'm going to leave that right there and I’m going to pull this up. The title goes inside the head and its opening and ending are inside. You type the title, so type first document. I’m going to Control S to save and then I’m going to reload the page. And then you see it there, it pops up—First Document. Also if you have tabs, the title will also appear in the tab. So those are the basic HTML tag, we’re going to go head and we’re going to type some text now, because it’s pointless right now. I’m just going to type Hello World. Now, like I said, some texts go in the head but most, nearly all tags go in the body and in the body, we’re just going to type the text Hello World, you do not need anything else, it’s just going to appear normal using default font settings in the web browser. We reload the page, we notice here at the top left, it says, Hello World. And it worked just fine. So that is the basics of HTML, now I'm going to show you two start tags to get you started on your little adventure on HTML, they are BR and HR and BR is a line break and HR is the Horizontal Ruler, and I’m going to show you what each of them does. If we type Hello World, and then we type let’s say, hello again, and then we save it, and reload the page, it will mostly appear right next to each other. Okay, so we’re going to fix this, we’re going to say—we’re going to go down a few lines and save it, reload, and the you’ll notice they’re right next to each other just because like I said, spaces don’t matter in HTML. So the BR, which is the line break, you type it to go down a line, then we’ll save it, and so you see it went down a line right there where we type the BR right after that, that’s inserting a line break. That means it’s going to go down line. We’re going to insert three line breaks and save it again, and you see it went down more lines. Now, I’m running out of time here so I’m going to show you the last tag, the Horizontal Ruler, HR. And HR, we’re going to put them at the top or the bottom and it we’ll load the page it put a Horizontal Ruler across the entire page. So that’s really a cool thing for you to learn and you will notice the BR and HR tags do not need endings, they are one of the few tags that don’t need an ending tag. So, just that—I'm Jake Chapelle or Master Jake on YouTube and on the internet and I’m glad to have you in my tutorials. Thanks for watching.