- Welcome to this demonstration on HTML. In this video we're going to cover HTML Skeleton, headers, and paragraphs. All websites use HTML, but obviously they all look different and do different things. Let's jump in. To simplify this demonstration I'm going to write my code using Notepad. You can do this with any text editor you have access to. This is a great way to start practicing your HTML skills, as you don't need any big software packages or even an internet connection. On the right hand side is the webpage link, which we will refresh to show our results. Make sure you pause the video and follow along on your own machine. If you have access to a terminal which runs HTML, please feel free to use it. This is the front of any webpage. Yep, that's it. This is the skeleton which builds everything on a website. It's not exciting now, but there are millions of possibilities. At the top of the screen you can see that we have this text, !DOCTYPE html. Computer's aren't very smart machines. They need someone to tell the computer what to do. This tag tells the computer that this is a HTML file, or as we know it, a webpage. This goes at the beginning of any website. You'll notice this is in a couple of angle brackets. All tags in HTML need to be in there for the computer to recognize them. I'll show you something else to look out for later. Next we have html, which is at the start on any webpage. You'll see at the bottom of the screen we have a /html tag. The forward slash indicates that this is the end of the tag. This means that anything included in between these sections will be included in the webpage. If you write anything outside of these areas, it will be ignored. Next we have the head tag. This won't show anything to the user, but it tells the computer it is the head of the document. This includes useful setups for the entire webpage, like the name and language. Basically anything the computer needs to show to the user. Within the head tag we use a couple of other tags to consider. Firstly, the meta tag gives the computer instructions on how to set up the webpage. The line you see here, meta charset="utf-8", means we are using Unicode, which to you and I renders a text into an easier interpreted language like English. This is really important. Next we have the title tag. Now this isn't a title you'll see at the top of the webpage. When you search for something on Google you'll see a list of websites with a title. This is what a title tag does. This title will also be shown on the tab in your browser. In this example we have title, New Webpage, title, which means we will see New Webpage on search engines and in our tab. You must finish the head tag with a /head tag so the computer knows you're done. Body is where everything in your webpage will be. This includes text, images, headings, and everything in between. Similar to the head tag, everything you want to include must be between a body tag and a /body tag near the bottom of the page. So we've set up our webpage to tell it what the title is and the language we are using. Now let's start adding some text. Let's begin with headings. We do this by using the h tag, which you can see onscreen. There are six of these. H1, which is the biggest, h2, h3, h4, h5, and h6, the smallest. I'll add some text in to show you how different they all look. So we have Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6. I'll click Save, and then refresh the webpage to show you what's happened. You can see that with these headings we can separate out areas which are more important than others, or for a break in a webpage. However, webpages are more than just headings. We need some text under each heading, of course. I'm going to delete the h3 through h6 tags, and just keep h1 and h2. Under h1 I'm going to add some text in the p tag, which defines the paragraph. Here I will write: "This is the example text we have under heading 1." We have to finish any of our text with a /p tag. Now save and refresh again. You can see how our text is split differently. Now we know how to add text onto a webpage. What if we wanted to separate the lines? Well, the computer needs us to tell it when to do it. For this we use br, which means break. You add this tag after the last words. If you don't include br, it will be shown as one line of text. So here I'll type: "This text is really important," br. "This text isn't, so we keep it down here," br. "This third line is the final sentence." To confirm the text is finished, we finalize it with a /p tag. Click Save and refresh again. There we are, a neater looking paragraph. You may have noticed we didn't include the /br to end it. Well, we don't need to. The br simply tells the computer that there is a break in the text. There's nothing to show the user. In this video we've covered the skeleton HTML headings and paragraphs. In the next video we'll cover more tags to change the look and feel of this page. See you soon.