HTML basics

Lecture contents

Introduction

Welcome to my webpage. I know, it's not a very exciting webpage. It's completely blank, but every webpage starts that way, and I'll show you how to build up this page soon. First, though, give a minute to show you around the skeleton of a blank webpage.

DOCTYPE

Every webpage starts with this fun looking thing called a DOCTYPE at the top, and this is just a signal to the browser that this webpage is written in modern HTML and not a cludgy, old, weird HTML.

Tag

Next, to the very first tag of the page, HTML is a markup language, so it's all about tags, and a tag is one of these things that start with an angle bracket and ends with another angel bracket, or if you like math, you might think of them as less than and greater than signs.

HTML tag

The first tag of every page is always that HTML tag right under the DOCTYPE. This one is the start HTML tag, and then at the bottom there's this end HTML tag, which is the same except for this backslash, which is really important. The HTML tag needs to contain every other tag that makes up this webpage, and that's why we don't have the end HTML tag until the bottom. A lot of HTML tags come in pairs like this, but not all of them.

head tag

O.K., underneath HTML there is always head tag, and that contains tags that helps the browser render the page, but doesn't contain anything the user actually sees.

meta tag

There's this meta tag that gives the browser more details on how to render the page. For example, if you're using common characters, like from English language, and not harder to render characters, like from the Arabic language, then you should have meta charset equals utf eight.

title tag

Then there's this title tag, which the browser uses to decide the title of the page, and this is what shows in the tab on top of browsers and in bookmarks and in search results, and here on Khan Academy the title shows up above our webpage.

changing the title

Let me change the title. I'm going to make a page all about rabbits, so I'll say all about rabbits, and maybe you can actually see as it changes above. Nice.

body tag

O.K, now we're done with these details, so we end the head tag and move on to the tag where it's all going to happen. The body tag.

h tag

It's pretty boring right now. Just the start and the end. O.K., what should I add? Well, I'm making a webpage about rabbits, so I should probably declare that in a big, old headline at the top. To add a headline we use the H one tag, and all about rabbits. Great.

Actually, we have six tags that we could use for headlines. H one, H two, H three, H four, H five, and H six. The H one is for the most important headlines on the page, and H six is the least important.

Let me add a few more headlines for other sections, and I'll use an H two since these are slightly less important sections, and add some songs, O.K., great.

p tag

Now let's add some information. Well, my target audience for this page is aliens that have never seen rabbits, so I better give them a good description of rabbits. In fact, I think I need a whole paragraph of information. How can I mark up a paragraph in HTML? With the P tag, of course, so we put in a P tag, and then I'm just going to go ahead and paste in information, so that you don't have to watch me type the whole thing. Beautiful.

Alright, now the aliens will need a song to greet the rabbits with, so I'll give them lyrics to my personal favorite, and once again use that P tag for it, and paste in the song ♫ Little Bunny Foo Foo ♫ Such a good song.

br tag

But, uh oh. It's showing up all on the same line. How will the aliens know when to pause? Why didn't the browser render the line breaks that I put in here? Well, actually, browsers mostly ignore line breaks and white space in your HTML, and if we want the browser to render a line break, we have to tell it explicitly using another tag, the B R tag, which stands for break, so we'll go through and add B R's after each line. Now it looks like lyrics.

Do you notice something funny about B R? There's no end tag. Well, if you think about it, a line break doesn't contain any content, so it has nothing to end after. Just the start tag is all we need, and there we have it.

Conclusion

The aliens will learn the basics of rabbits, and you've learned the basics of HTML. After I'm done talking, play around with this and try changing things, and when you are ready, go on to your first HTML challenge.