Original subtitles

>> 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.