DOUG LLOYD: So we spent about-- if my math is right, and I think looking back-- I think we spent about 35 videos talking about various aspects of C, maybe a little more, maybe a little less. And we didn't cover everything in C, but we covered a big chunk of the language, the vast majority of it, certainly for common uses. Now we're going to talk about another language, HTML. And we're going to cover it in just one video. 

But that's going to be OK. That's going to actually become something you're going to get used to. Now that you have the fundamentals of one language, it's actually pretty easy to start learning others. So we're going to start to step a little back and gloss over the basic differences between these languages and sort of leave you to it. There's a lot of really great resources on the internet, which we're going to start directing you towards because the internet is a vast repository of information. And so it's not like you'll be losing out necessarily by not having the information covered in a video. You'll still be able to get everything you need and use the knowledge you've already built up by understanding C to make the learning curve for these other languages actually a lot flatter. I promise. 

But let's talk about one language that's really fundamental for every web page, which is HTML. HTML is the Hyper Text Markup Language. HTML is a language but it is not a programming language. 

HTML doesn't have variables. It doesn't have logic or functions or anything like that. We can't do any programming per se in HTML. Sometimes you'll hear people describe themselves as HTML programmers, which isn't entirely accurate. We can't write HTML programs. 

HTML is just used to mark up text. It's called a markup language. And what this does-- this markup-- we use tags in HTML and these tags-- this markup-- semantically defines the structure of a page and causes the plain text that exists between tags to be interpreted by browsers in different ways. And perhaps it's best to explain this by way of an illustration. 

Here's a very simple HTML page, not an HTML program, again, an HTML page. And we know it's an HTML page because we've bounded everything with HTML tags. So this is what an HTML tag looks like. It's between angle brackets. And notice at the top we have HTML and at the very bottom, after we've done what is apparently a lot of other HTML, we have angle bracket slash HTML. So that sort of is the boundary between what is HTML and what is not. And of course, conventionally, just as you wrote all of your C programs with dot C extensions, all of your HTML files will end with dot HTML extensions. But there's more going on here. We don't just have these HTML tags. We apparently have this thing called a head tag. Well, OK, what's that? 

Well maybe it's best to distinguish by way of a body, body being the content of the web page. So maybe the head tag defines stuff that isn't in the browser window proper, but is somehow important to our web page being rendered correctly. For example, inside of the head tag we have title tags. 

So title being hello world, that's actually going to be what shows up in the tab in Chrome or in safari or Firefox-- whatever browser you prefer-- that's what's going to show up in the title. And before tabs it would show up in your entire browser window and you can only have one page open in a browser window at a time. So that's going to be the title of my page up in the tab or the browser window bar, hello world. And then the content of my web page will be world, hello. So let's take a look at what some thing like this might look like. This is a pretty simple HTML page. So I'm here in my CS50 IDE and I've zoomed in a little bit. And I'm just going to open up hello dot HTML and show you that this is pretty much the page content that we saw before. My simple HTML, head tags, title tags, body, and so on. I've indented to be clean. 

And then what I can do in my IDE is just preview the page. And there we go. The content of my page is world, hello, and I don't see anything in from the head tags there. It's just the content of the body. World, hello. And again the body just said, world, hello. The other part is missing. 

So that's really all it is. This is a very simple basic HTML page. Now I've indented my HTML to be really nice and organized, but I don't actually have to. I could make it look pretty ugly. And this would still work. This would be the exact same web page. I've just gotten rid of all of the white space. 

As it turns out, white space is data. And so when we're sending data from sender to receiver, from server to client, data costs money. And so getting rid of whitespace is actually a good idea if you're somebody who serves up a lot of web content. It's a bad idea if you're somebody who's learning this stuff and you want to have it nicely organized. This is a lot easier to parse than this. But it's functionally identical. 

The indentation and stuff like that doesn't actually matter in HTML. All that matters is opening tags and closing tags in the correct order. Notice what happened here, though. The markup gives us a way to communicate extra information about what we've written. The Hello, World part was interpreted as the title. And the world, hello part was interpreted as the content or what should be visible on my web page. 

There are over 100 of these different tags and lots of great resources online to find them. We're going to talk about a few of them in this video, some of the really fundamental stuff. But we're not going talk about it all because it would be exhaustive to do so. 

Another thing you can do, though, is open up developer tools. And if you recall from our video on HTTP, I explained how to open up developer tools. In Chrome it's usually the F12 key to open up the developer toolbar. Then instead of choosing the Network tab, you can choose the Elements tab. And if you load a web page, you'll actually see the HTML that creates that web page. And so you can learn a lot about HTML by looking at your favorite websites and seeing how they build the various pieces of them that you like. So maybe there's this cool pattern or something like that. How do they make it with HTML? Well you can just open up your developer tools and hover over that element and see exactly what HTML makes it. So that's a really good way to learn HTML, and I strongly recommend that you do it both to learn HTML and also to learn a little bit about some of the options available to you in developer tools, which will certainly come in handy as you begin doing more intensive web programming. 

So let's take a look at a couple of common HTML tags. And we'll jump and take a look at what these tags will also render as by looking at some files in my IDE. So here are three very basic tags for tweaking the visual appearance of text. There's B tags, I tags, and U tags. And respectively what they do is render the text between them in bold, italics, and underlining. So let's see what that would look like on an actual web page in my IDE. 

So here in my IDE I have a file called BIU dot HTML. BIU dot HTML just being bold, italics, underlining. I'll open it up. 

And we'll see that here I have this text is B tags bold. This text is I tags italic. And this text is U tags underlined. What is this going to look like? Well again, all I have to do is go over here to my browser, my file browser, click Preview, and this is what comes up. 

The text in between the B tags is indeed now bold. The text in between the I tags is indeed now italic. And the text in between the U tags is indeed now underlined. So that's pretty good. We now know how to make text look a little more fancy or draw emphasis to certain things. Another couple of common tags here are paragraph tags, P, and header tags, which I've rendered here as HX. 

These P tags, these paragraph tags, break your text up into paragraphs. It's not enough to just hit Enter and leave spaces, because a computer is only going to do what you tell it to do and it ignores white space for the most part. So we can't just hit Enter and expect our computer to interpret that we want to start a new paragraph. We have to very explicitly say this is one paragraph-- this is another-- by enclosing each in a set of P tags. 

And we also have these options for H tags, these header tags. We have six different levels of headers, one, two, three, four, five, and six, which are progressively larger and larger headers. And they get smaller and smaller and smaller and smaller. So we have a top level header, a second level header, and so on, and so on. 

Let's take a look at maybe some P tags and some header tags in action on a web page. So here in my IDE I have a file called PH dot HTML, PH being paragraphs and header tags. Open that up. There's a lot going on here because I've put some lorem ipsum, some just random text in here. So I'll zoom out a little bit because there's so much going on. But notice that I have at the very top here I have an H1, a level one, header tag. Then I have a paragraph, which is just a bunch of random text-- lorem ipsum-- just default standard filling in text. So I have two paragraphs inside of that level one header and then down below I have a level two header here on line 24, a second level header, and another two paragraphs. Well what does this look like if I view it in my preview? Let's see. 

So notice that the first level header here is actually quite a bit bigger than the second level header. So we used H1 tags. And notice that the P tags allow us to break things out into paragraphs. If we had gotten rid of those P tags and actually just put Enters or Returns in between what we hoped would be the different paragraphs, they would all just slam together and it wouldn't have this nice paragraph separation with space above and below. And so that's what paragraph tags and header tags are commonly used to do to draw attention to portions of our web page in that way. 

Next up are some tags that we use to build lists on our web page. So we have unordered lists-- ULs-- which are just bulleted lists, ordered list which are numbered-- OLs-- and inside of either one of those we need to have sets of how to indicate list items, LI. And so we have open UL tag and we put items inside of it. And then when we're done with that, we can close the UL tag. 

And similarly we can have an ordered or numbered list and put list items inside of that. So let's take a look at a couple of lists and what they would render as on CS50 IDE. So I have here in my IDE a file called lists dot HTML. Let's take a look. 

And notice here I have an unordered list with five things in it. And then I have an ordered list, and I've changed the tag a little bit, right? I've said start equals six. It turns out with an ordered list I can set the starting point wherever I want-- by default it will be one-- by just adding this so-called attribute to my OL tag. And so this list will start counting at six. So the elements of that numbered list should be six, seven, eight, nine, ten, because there are five elements in the list, as opposed to one, two, three, four, five, which would be the case if I had said OL without specifying the start attribute. 

So we'll just preview this so you can get a sense for what's going on here. And there we go. There's my list. The first five elements are unordered or bulleted lists. And the next five elements are a separate ordered list starting from six. So that's how we can build lists using HTML. Another thing you might want to do with HTML is build a table of information of rows and columns to present information in a particularly organized way. To do this with HTML we can have a table definition beginning open bracket table. And then inside of that table we might have a set of rows, TR tags to indicate each row. And then TD tags go inside of TR tags to specify a column within a row. 

Why is it called TD and not TC? Well, TD stands for table data. Usually you're putting your information there. So that's why it's TD and not TC. It's a little bit confusing. 

So you have table tags and inside of your table tags you have a number of rows, TRs. And inside each row you have TDs for the number of columns that you want to have in that particular row. Let's take a look at a very simple table over in CS50 IDE. 

So I have here a file called table dot HTML. Let's have a look at what that looks like. There's a lot going on here but if you notice I have a table open. I'm starting the definition with table. And then in my first row I apparently have four columns, one, two, three, four. And then I'm done with that row. 

Then I start another row and do two, four, six, eight. Finish that row. Do another row, three, six, nine, 12. And then a last row, four, eight, 12, and though it's a little cut off here, 16. 

I finished that row. I finished the table. And then I'm done with my HTML. What does this look like? Well, it's not really much to see. I've clearly organized my information in a somewhat more organized way. But it's not super pretty here. And we're going to deal with that when we talk about CSS. We'll revisit this idea of what we do to make a table-- maybe format it a little bit better? But I do still have four rows, each of which has four columns, and really what this amounts to is a very simple four by four multiplication table. 

Just a few more tags we'll talk about. Let's talk about the concept of an HTML form. So you may have seen this in the context of logging into a web page. Usually you type in your user name. You type in your password, and you're good to go. That would be the beginning of a form. 

Skipping over div a second. We also have inputs which kind of fit inside of forms. These are the elements that you're actually typing into, or the radio buttons you're ticking, or the check boxes that you're ticking off. So these go inside of forms. And they comprise basically each row of the form if your form is formatted well. Then there's this concept of a div, which doesn't really fit in any particular category of tags like the ones I've been doing previously. It just sort of demarcates the beginning of some arbitrary division-- div-- of the page. There's no visual break. There's no line. It's not set off as a separate chunk automatically. You'd have to style it that way to do that. 

It just sort of says I want a piece of space on my web page, and I'm just going to call it this division of my page. We can put stuff inside of divs, and in fact, when we head over to IDE in a second, we'll see that I'm putting my form inside of a div. 

So I have here in my IDE a file called div form dot HTML. Let's open it up. Notice that like I said, div is kind of arbitrary. Right? It doesn't really mean anything. So I have an arbitrary first division of my page. And then instead of another div later on, starting on line eight, I have this form. And inside of the form I have a number of inputs, fields of the form. So I have a field whose name is A-- which doesn't really mean anything right now-- that apparently takes text, another one that takes a password, another that's a Radio button, another that's a check box, and another that's a Submit button. Well, what does this all actually look like? Well, let's take a look. We'll open it up in our preview window. Notice that this arbitrary first division-- there's no visual separation here. It didn't really do anything, right? 

And then I have my form. And I didn't do any special formatting. So the form is just one big row of information. If I had formatted my form differently, I might have it line by line by line. But I didn't do any styling. Again, we're not talking about CSS here. We're just talking about HTML. 

Well in my text form I can type-- remember that forms of type text so I can put my name. And in my password I can type my password. And because that field is of type password, you don't know what my password is. It's all dots. 

I can also choose to tick off a radio button or tick off a check box. Or I could submit my form. And I didn't do anything, so when I submit my form, the page just refreshes. But I could perhaps configure my Submit button to do something else. And we'll see what we can do with that in a future video on PHP. But this builds a very simple form that we can use to have users interact and submit information to our website. 

One last comment before we move on to some other tags are to take a look at this input tag one more time. Notice that I've highlighted the ends of the tag in red. Every other tag we've seen so far has had a beginning and an end, an opening tag and a closing tag. 

But an input tag doesn't. There's no text that goes in between input tags. All of the information we're intending to convey is bound up as part of the attributes of that input. Notice we have input name equals x. Type equals y. That's really all the information we need. 

This is called a self closing tag. It doesn't require an opening and a close because all of the information is contained inside the tag and its attributes. So sometimes you'll see this, too. So just be aware that if you have a tag that is entirely self-contained, it opens and closes itself with the open angle bracket on the left and the slash angle bracket on the right. We'll see another one of those right now with image tags as well. 

Before we talk about images, we need to talk about hyperlinks. If we want our web page to be interactive and move us around, it would be nice be able to click on one of those what has typically been a blue link. This is actually how we build a hyperlink in our web page. And interestingly enough there's another HTML tag called link, which is not a hyperlink. A here stands for anchor, and that's how we indicate a hyperlink. 

A href equals x means go to web page X. And everything between the open A tag and the close A tag is what's going to be that underlined blue text that looks like a link that we're familiar with. Below that we have an image tag, which is a self closing tag for displaying an image located at X. And you might be able to change that image by specifying width and height and other attributes in that dot dot dot there. 

At the very bottom here we have a very interesting looking tag that doesn't have a closing tag. It's exclamation point doctype HTML. So HTML has been around since the early 1990s for building web pages, and it's gone undergone several revisions since then. Most recently in 2014 it underwent a revision called HTML5 which is now the current sort of de facto HTML standard. 

To indicate that our web pages are written using HTML5, this is how we start off. It can be omitted but what that basically means is you can't use any of the tags that are HTML5 tags, those new tags. So we always start off if we're using HTML5. And all the tags we've talked about previously are not HTML5 tags. But this would indicate that HTML5 tags will be present. And so we have exclamation doctype HTML, which is at the very beginning of our HTML file, and then after that point we actually have our HTML open tag and proceed from there. 

The last one is a comment tag, which looks slightly different, too. It starts off with angle bracket exclamation dash dash but no closing bracket. In between those two elements there is where you write your comments. And let's take a look at images and comments and links in CS50 IDE. 

So I have here a file called image link dot HTML which I'm going to open up. And notice I've got a couple of comments here in my HTML comments. So just like in C and other programming languages, HTML just by being a markup language does have the ability to have comments. And so I'm apparently going to place a picture of Rick Astley somewhere between this div tag, this arbitrary division. Apparently that file is located at Rick dot JPEG, which if we head back over to my file tree for a second, is a file that exists in the current directory. So that's OK. I can reference it. 

Then I can have internal links. So notice on line 11 here my href is hello dot HTML. So that just refers to hello dot HTML which exists in the current directory. And I can also have external links by just specifying HTTPS to indicate that I'm not talking about a file in my current directory. I'm talking about a file that exists somewhere on the internet, which I have to request using the HTTP protocol. 

So let's take a look at what this page might look like and get ready for a picture of Rick Astley to show up on your screen. So I'll preview this. There's Rick Astley at the very top in this arbitrary division I put it at the top. And then down below I have my links, right? 

I have a link to hello dot HTML. And if I click that, I get moved over to this page that we're very familiar with from the very beginning of our program. If I pop that page open again, if I pop image link open one more time, I can also go externally to CS50's website. And there we see-- I'll zoom out a little bit here-- we'll see CS50's website sort of embedded in the middle of our page. So I was able to make an internal link as well as an external link. 

The last rule with HTML that we're going to talk about here is that your HTML should be well formed. In C we talked a lot about the various syntax of things. In HTML the syntax really revolves around tags. Every tag you open needs to be closed. And in fact, every tag you open should be closed in reverse order. 

So if you open a bold tag, an italic tag, and then an underline tag to do all three to a particular set of text, you should close them in reverse order. So if you opened bold, italic, underline, you want to close underline, italic, bold. This sort of encapsulation is what keeps HTML nice and organized. 

Unlike C, though, syntax errors won't actually cripple your HTML possibly. Your HTML may be not well formed but would still work. And so these errors can sort of slide by. It's up to you to really be vigilant. Sometimes they will fail but sometimes you can get away with it. 

It can be a really difficult task, though, to keep track of when you opened a tag, when you closed it, especially as your HTML files get bigger and bigger. You'll want some help. And there are online validator tools that you can use to have a look at your web page and see if it's well formed HTML. And you should definitely take a look at those and start to use them as you begin doing some work with HTML, writing HTML, just so you get some good habits about organizing your HTML in a good way and good style and making sure that you're not doing anything that could create a syntax error that would cause you a bit of a problem down the road. 

I'm Doug Lloyd. This is CS50.